htmui 0.1.0__py3-none-any.whl

htmui/basecoat/input_group.py

@@ -0,0 +1,49 @@
+from typing import Literal, TypeAlias
+
+from htmy import ComponentType, PropertyValue, html, join_classes
+
+__version__ = "0.2.0"
+__framework__ = "BasecoatUI"
+__framework_version__ = "1"
+__framework_url__ = "https://basecoatui.com/components/input-group/"
+
+AddonAlign: TypeAlias = Literal["start", "end"]
+
+
+def addon(
+    *children: ComponentType,
+    align: AddonAlign,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Addon positioned at the start or end of an input group.
+
+    Arguments:
+        *children: Addon content.
+        align: On which side of the input the addon should be displayed.
+        class_: Extra CSS classes for the addon.
+        **kwargs: Extra attributes for the addon.
+    """
+    return html.span(*children, class_=class_, data_align=align, **kwargs)
+
+
+def input_group(
+    *children: ComponentType,
+    vertical: bool = False,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Container that display controls and addons as an input group.
+
+    Arguments:
+        *children: Controls and addons contained by the group.
+        vertical: Whether to use a vertical layout.
+        class_: Extra CSS classes for the root element.
+        **kwargs: Extra attributes for the root element.
+    """
+    if vertical:
+        kwargs["data_orientation"] = "vertical"
+
+    return html.div(*children, class_=join_classes("input-group", class_), **kwargs)

htmui/basecoat/item.py

@@ -0,0 +1,94 @@
+from typing import Literal, TypeAlias
+
+from htmy import ComponentType, PropertyValue, html, join_classes
+
+__version__ = "0.2.0"
+__framework__ = "BasecoatUI"
+__framework_version__ = "1"
+__framework_url__ = "https://basecoatui.com/components/item/"
+
+ItemVariant: TypeAlias = Literal["outline", "muted"]
+
+ItemSize: TypeAlias = Literal["xs", "sm"]
+
+
+def item(
+    *children: ComponentType,
+    variant: ItemVariant | None = None,
+    size: ItemSize | None = None,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Item row.
+
+    Arguments:
+        *children: Item content.
+        variant: Item variant.
+        size: Item size.
+        class_: Extra CSS classes for the root element.
+        **kwargs: Extra attributes for the root element.
+    """
+    if variant is not None:
+        kwargs["data_variant"] = variant
+    if size is not None:
+        kwargs["data_size"] = size
+
+    return html.article(
+        *children,
+        class_=join_classes("item", class_),
+        **kwargs,
+    )
+
+
+def item_link(
+    *children: ComponentType,
+    href: str,
+    variant: ItemVariant | None = None,
+    size: ItemSize | None = None,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Link-styled item row.
+
+    Arguments:
+        *children: Item content.
+        href: Destination URL.
+        variant: Item variant.
+        size: Item size.
+        class_: Extra CSS classes for the root element.
+        **kwargs: Extra attributes for the root element.
+    """
+    if variant is not None:
+        kwargs["data_variant"] = variant
+    if size is not None:
+        kwargs["data_size"] = size
+
+    return html.a(
+        *children,
+        href=href,
+        class_=join_classes("item", class_),
+        **kwargs,
+    )
+
+
+def item_group(
+    *children: ComponentType,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Group of related items.
+
+    Arguments:
+        *children: The contained items.
+        class_: Extra CSS classes for the group.
+        **kwargs: Extra attributes for the root element.
+    """
+    return html.div(
+        *children,
+        class_=join_classes("item-group", class_),
+        role="list",
+        **kwargs,
+    )

htmui/basecoat/menu.py

@@ -0,0 +1,131 @@
+from typing import Literal, TypeAlias
+
+from htmy import ComponentType, Properties, PropertyValue, SafeStr, html
+
+__version__ = "0.2.0"
+__framework__ = "BasecoatUI"
+__framework_version__ = "1"
+__framework_url__ = "https://basecoatui.com/components/menu/"
+
+
+MenuItemKind: TypeAlias = Literal["item", "checkbox", "radio"]
+ShortcutKind: TypeAlias = Literal["kbd", "command"]
+
+check_icon = SafeStr(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">'
+    '<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5'
+    "a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817"
+    'a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />'
+    "</svg>"
+)
+"""`check` icon from https://heroicons.com."""
+
+_kind_has_indicator: set[MenuItemKind] = {"checkbox", "radio"}
+
+_kind_to_role: dict[MenuItemKind, str] = {
+    "item": "menuitem",
+    "checkbox": "menuitemcheckbox",
+    "radio": "menuitemradio",
+}
+
+
+def menu(
+    *items: ComponentType,
+    id: str,
+    aria_labelledby: str | None = None,
+    aria_label: str | None = None,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """Menu list wrapper."""
+    if aria_labelledby is not None:
+        kwargs["aria_labelledby"] = aria_labelledby
+    if aria_label is not None:
+        kwargs["aria_label"] = aria_label
+    return html.div(*items, id=id, class_=class_, role="menu", **kwargs)
+
+
+def menu_item_group(
+    *items: ComponentType,
+    id: str,
+    label: str,
+    label_props: Properties | None = None,
+) -> ComponentType:
+    """Menu item group with a heading."""
+    label_id = f"{id}-label"
+    return html.div(
+        html.div(label, id=label_id, role="heading", **(label_props or {})),
+        *items,
+        id=id,
+        role="group",
+        aria_labelledby=label_id,
+    )
+
+
+def menu_item(  # noqa: C901
+    *children: ComponentType,
+    kind: MenuItemKind = "item",
+    class_: str | None = None,
+    disabled: bool = False,
+    checked: bool | None = None,
+    destructive: bool = False,
+    filter: str | None = None,
+    force: bool = False,
+    keep_open: bool = False,
+    keywords: str | None = None,
+    shortcut: str | None = None,
+    shortcut_kind: ShortcutKind = "kbd",
+    indicator: ComponentType | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Menu item.
+
+    Works inside `command`, `dropdown_menu`, or other `role="menu"` components.
+    """
+    role = _kind_to_role[kind]
+
+    if disabled:
+        kwargs["aria_disabled"] = "true"
+
+    if checked is not None:
+        kwargs["aria_checked"] = "true" if checked else "false"
+    elif kind in _kind_has_indicator:
+        kwargs["aria_checked"] = "false"
+
+    if destructive:
+        kwargs["data_variant"] = "destructive"
+
+    if filter is not None:
+        kwargs["data_filter"] = filter
+
+    if keywords is not None:
+        kwargs["data_keywords"] = keywords
+
+    if force:
+        kwargs["data_force"] = ""
+
+    if keep_open:
+        kwargs["data_keep_command_open"] = ""
+
+    if class_ is not None:
+        kwargs["class_"] = class_
+
+    indicator_comp: ComponentType | None = indicator
+    if indicator_comp is None and kind in _kind_has_indicator:
+        indicator_comp = check_icon
+
+    shortcut_comp: ComponentType | None = None
+    if shortcut is not None:
+        if shortcut_kind == "command":
+            shortcut_comp = html.span(shortcut, data_shortcut="")
+        else:
+            shortcut_comp = html.kbd(shortcut)
+
+    return html.div(
+        None if indicator_comp is None else html.span(indicator_comp, data_indicator=""),
+        *children,
+        shortcut_comp,
+        role=role,
+        **kwargs,
+    )

htmui/basecoat/pagination.py

@@ -0,0 +1,60 @@
+from htmy import ComponentType, SafeStr, html, join_classes
+
+__version__ = "0.2.0"
+__framework__ = "BasecoatUI"
+__framework_version__ = "1"
+__framework_url__ = "https://basecoatui.com/components/pagination/"
+
+chevron_left_icon = SafeStr(
+    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" '
+    'stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" '
+    'd="M15.75 19.5 8.25 12l7.5-7.5" /></svg>'
+)
+"""`chevron-left` icon from https://heroicons.com/."""
+
+chevron_right_icon = SafeStr(
+    '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" '
+    'stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" '
+    'd="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg>'
+)
+"""`chevron-right` icon from https://heroicons.com/."""
+
+
+def pagination_item(
+    *content: ComponentType,
+    url: str,
+    class_: str | None = None,
+    selected: bool = False,
+) -> ComponentType:
+    return html.li(
+        html.a(
+            *content,
+            href=url,
+            class_=join_classes("btn", class_),
+            data_variant="outline" if selected else "ghost",
+        )
+    )
+
+
+def pagination(
+    *items: ComponentType,
+    next_content: ComponentType = SafeStr("Next"),  # noqa: B008
+    next_url: str,
+    previous_content: ComponentType = SafeStr("Previous"),  # noqa: B008
+    previous_url: str,
+) -> ComponentType:
+    return html.nav(
+        html.ul(
+            None
+            if previous_content is None
+            else pagination_item(chevron_left_icon, previous_content, url=previous_url),
+            *items,
+            None
+            if next_content is None
+            else pagination_item(next_content, chevron_right_icon, url=next_url),
+            class_="flex flex-row items-center gap-1",
+        ),
+        role="navigation",
+        aria_label="pagination",
+        class_="mx-auto flex w-full justify-center",
+    )

htmui/basecoat/popover.py

@@ -0,0 +1,69 @@
+from htmy import ComponentType, PropertyValue, SafeStr, html, join_classes
+
+from .button import ButtonVariant
+from .typing import Align, FloatingSide
+
+__version__ = "0.2.0"
+__framework__ = "BasecoatUI"
+__framework_version__ = "1"
+__framework_url__ = "https://basecoatui.com/components/popover/"
+
+
+js = SafeStr(
+    '<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1/dist/js/popover.min.js" defer></script>'
+)
+
+
+def popover(
+    *children: ComponentType,
+    id: str,
+    button_content: ComponentType,
+    button_class: str | None = None,
+    button_variant: ButtonVariant | None = "outline",
+    class_: str | None = None,
+    popover_align: Align | None = None,
+    popover_class: str | None = "w-72",
+    popover_side: FloatingSide | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Popover with a trigger button and inline-positioned content.
+
+    Arguments:
+        *children: Popover content.
+        id: Root element ID.
+        button_content: Trigger button content.
+        button_class: Extra CSS classes for the trigger button.
+        button_variant: Trigger button variant.
+        class_: Extra CSS classes for the root element.
+        popover_align: Popover content alignment.
+        popover_class: CSS classes for the popover content.
+        popover_side: Preferred popover side.
+        **kwargs: Extra attributes for the root element.
+    """
+    trigger_id = f"{id}-trigger"
+    content_id = f"{id}-popover"
+
+    return html.div(
+        html.button(
+            button_content,
+            id=trigger_id,
+            type="button",
+            aria_controls=content_id,
+            aria_expanded="false",
+            class_=join_classes("btn", button_class),
+            data_variant=button_variant,
+        ),
+        html.div(
+            *children,
+            id=content_id,
+            data_popover="",
+            aria_hidden="true",
+            class_=popover_class,
+            data_align=popover_align,
+            data_side=popover_side,
+        ),
+        id=id,
+        class_=join_classes("popover", class_),
+        **kwargs,
+    )

htmui/basecoat/progress.py

@@ -0,0 +1,57 @@
+from htmy import ComponentType, PropertyValue, html, join_classes
+
+__version__ = "0.2.0"
+__framework__ = "BasecoatUI"
+__framework_version__ = "1"
+__framework_url__ = "https://basecoatui.com/components/progress/"
+
+
+def progress(
+    *,
+    value: int,
+    min: int = 0,
+    max: int = 100,
+    start_label: ComponentType | None = None,
+    middle_label: ComponentType | None = None,
+    end_label: ComponentType | None = None,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Progress bar component, with optional labels.
+
+    Arguments:
+        value: Current value, clamped to the `[min, max]` interval.
+        min: Minimum value.
+        max: Maximum value.
+        start_label: Optional label shown at the start of a row above the bar.
+        middle_label: Optional label shown in the middle of the row above the bar.
+        end_label: Optional label shown at the end of the row above the bar.
+        class_: Extra CSS classes for the root element.
+        **kwargs: Extra attributes for the root element.
+    """
+    value = min if value < min else max if value > max else value
+    pct = (value - min) / (max - min) * 100 if max != min else 0
+    bar = html.div(
+        html.span(style=f"width: {pct:.4g}%"),
+        role="progressbar",
+        aria_valuenow=value,
+        aria_valuemin=min,
+        aria_valuemax=max,
+        class_=join_classes("progress", class_),
+        **kwargs,
+    )
+
+    if start_label is None and middle_label is None and end_label is None:
+        return bar
+
+    return html.div(
+        html.div(
+            start_label if start_label is not None else html.label(),
+            middle_label if middle_label is not None else html.label(),
+            end_label if end_label is not None else html.label(),
+            class_="flex items-center justify-between gap-2",
+        ),
+        bar,
+        class_="grid w-full gap-1",
+    )

htmui/basecoat/radio_group.py

@@ -0,0 +1,83 @@
+from htmy import ComponentType, PropertyValue, XBool, html, join_classes
+
+__version__ = "0.2.0"
+__framework__ = "BasecoatUI"
+__framework_version__ = "1"
+__framework_url__ = "https://basecoatui.com/components/radio-group/"
+
+
+def radio_input(
+    *children: ComponentType,
+    name: str,
+    value: str,
+    description: ComponentType | None = None,
+    checked: bool = False,
+    disabled: bool = False,
+    invalid: bool = False,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Radio option, a horizontal field with input and label.
+
+    Arguments:
+        *children: Label content.
+        name: The name of the input.
+        value: Value submitted when this option is selected.
+        description: Optional description shown under the label.
+        checked: Whether the option is initially selected.
+        disabled: Whether the option is disabled.
+        invalid: Whether to mark the option as invalid.
+        class_: Extra CSS classes for the field wrapper.
+        **kwargs: Extra attributes for the input element.
+    """
+    input_id = f"{name}-{value}"
+
+    if checked:
+        kwargs["checked"] = XBool.true
+    if disabled:
+        kwargs["disabled"] = XBool.true
+    if invalid:
+        kwargs["aria_invalid"] = "true"
+
+    label = html.label(*children, for_=input_id)
+    content: ComponentType = html.section(label, html.p(description)) if description is not None else label
+
+    field_attrs: dict[str, PropertyValue] = {
+        "role": "group",
+        "data_orientation": "horizontal",
+    }
+    if disabled:
+        field_attrs["data_disabled"] = "true"
+    if invalid:
+        field_attrs["data_invalid"] = "true"
+
+    return html.div(
+        html.input_(
+            type="radio",
+            id=input_id,
+            name=name,
+            value=value,
+            class_="input",
+            **kwargs,
+        ),
+        content,
+        class_=join_classes("field", class_),
+        **field_attrs,
+    )
+
+
+def radio_group(
+    *children: ComponentType,
+    class_: str | None = None,
+    **kwargs: PropertyValue,
+) -> ComponentType:
+    """
+    Radio group container.
+
+    Arguments:
+        *children: The components in the group.
+        class_: Extra CSS classes for the root element.
+        **kwargs: Extra attributes for the root element.
+    """
+    return html.div(*children, class_=class_, role="radiogroup", data_slot="radio-group", **kwargs)