🥮 mooncakes.io

    sumi

    A UI component library for MoonBit web apps — dark & light themes, overlay motion, zero config

    ui
    components
    web
    theming
    dark-mode
    Download zip
    Version
    0.2.0
    License
    Apache-2.0
    Repository
    Last updated
    11 hours ago
    Downloads
    2

    Dependencies

    howtomakeaname/sumi does not have a README file

    AlertVariant

    source

    AttachmentItem

    source

    One attachment in the strip.

    AttachmentKind

    source

    The kind of attachment a tile renders: a cover-fit image thumbnail, or a gradient placeholder with a document glyph for everything else.

    ButtonSize

    source

    ButtonVariant

    source

    CheckboxMenuGroup

    source

    A titled section of a checkbox_menu. Passing clear_label renders the small text action at the title row's right edge (meant to clear the group's selection); without a title it is ignored. A hairline divider is inserted between consecutive groups, never after the last one.

    CheckboxMenuItem

    source

    One row in a checkbox_menu group: a label with an optional leading icon that toggles independently of the other rows.

    The content of a menu: a list of selectable items with optional separators and section labels between groups.

    One entry in a dropdown_menu. Rendered as a rich row (thumbnail + title + description + check mark) when description is present, otherwise as a compact icon-label row. shortcut renders a muted right-aligned key hint (e.g. "⌘E").

    SegmentedItem

    source

    One option in a segmented control.

    SelectVariant

    source

    ShortcutItem

    source

    One shortcut row: an action label and its key combination.

    ShortcutSection

    source

    A titled cluster of shortcuts. The title carries a hairline underline; sections are separated by an 8px gap.

    StatusBadgeState

    source

    The four looks of an async job's status badge. Running carries a progress percentage (clamped to 0–100); Count carries a queue depth (displayed capped at 99, matching the design's two-digit circle).

    TabEntry

    source

    One tab in a tabs control.

    TagVariant

    source

    ToastVariant

    source

    TooltipSide

    source

    ThemeMode

    source
    pub(all) enum ThemeMode {
      Dark
      Light
      System
    }

    Color mode for theme. Dark and Light pin the palette; System follows the viewer's prefers-color-scheme and updates live with it.

    add_tile

    source
    fn add_tile(on_click? : 
    Cmd    , disabled? : Bool, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The 48px "add" tile: a quiet bordered square with a centered plus that opens an upload/picker menu (compose with dropdown_menu as the trigger). Hover raises the fill to the primary block; disabled fades the plus to the disabled text shade.

    dropdown_menu(
      trigger=add_tile(aria_label="Add image"),
      items=[...],
      open=menu_open,
      on_open_change=set_menu_open.map(v => _ => v),
    )

    alert

    source

    An inline note for validation and status messages inside a panel or a node — an icon followed by wrapping copy. Solid sits on the canvas, Subtle on an already-filled surface. The default icon is icon_important; pass icon= to replace it.

    attachment_strip

    source
    fn attachment_strip(items~ : Array[
    AttachmentItem    ], on_add? : 
    Cmd    , on_remove? : 
    Emit    [Int], max_visible? : Int, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The attachment strip from the design: a row of 48px tiles — image thumbnails and document placeholders — followed by the add tile. Each tile can carry an 8px remove badge that fades in on tile hover or keyboard focus. Past max_visible attachments the row clips, a right-edge fade appears, and the add tile pins itself over the fade.

    attachment_strip(
      items=[
        AttachmentItem::image("cover.png", label="Cover"),
        AttachmentItem::document("Brief.pdf"),
      ],
      on_add=pick_files,
      on_remove=set_items.map(i => items => items.filteri(fn(j, _) { j != i })),
    )

    avatar

    source
    fn avatar(src? : String, fallback? : String, size? : Int, alt? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A round avatar. Shows the image at src when given, otherwise the first character of fallback on a spotlight fill.

    badge

    source
    fn badge(value? : Int, dot? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A numeric notification badge. Values above 99 render as 99+; pass dot=true for a plain dot.

    button

    source
    fn[C : 
    IsChildren    ] button(variant? : 
    ButtonVariant    , size? : 
    ButtonSize    , disabled? : Bool, pressed? : Bool, loading? : Bool, type_? : String, id? : String, class? : String, title? : String, name? : String, value? : String, autofocus? : Bool, on_click? : 
    Cmd    , attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    Render a button in one of the design's three variants.

    • Primary — solid light fill with dark text, the main call to action.
    • Secondary — translucent white fill.
    • Ghost — transparent, fills on hover; the toolbar/menu-button look.

    pressed marks a toggle-style button as the currently active tool: it adds aria-pressed and the design's selected fill (same tone as hover).

    loading=true keeps the default fill and the button's width: the content stays rendered but invisible while a 16px spinner overlays its center, and aria-busy is set; pass a title describing the busy action for screen readers.

    User styles are appended last and therefore override the built-in recipe.

    card

    source
    fn[C : 
    IsChildren    ] card(id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    A surface container for grouping content on the canvas.

    card_section

    source

    A card with the design's header/content split.

    checkbox

    source
    fn checkbox(checked~ : Bool, label? : String, indeterminate? : Bool, on_change? : 
    Emit    [Bool], disabled? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A checkbox with an optional text label. Controlled: the caller owns checked. indeterminate=true renders the mixed dash state and reports aria-checked="mixed"; clicking it resolves to checked.

    checkbox_menu

    source
    fn checkbox_menu(groups~ : Array[
    CheckboxMenuGroup    ], on_toggle? : 
    Emit    [String], width? : Int, max_height? : Int, footer_label? : String, footer_icon? : 
    Html    , on_footer? : 
    Cmd    , id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A multi-select menu panel: grouped rows with an outline checkbox on the right edge, toggled independently, so picking a row never closes anything. Fully controlled — the caller owns each row's checked flag; on_toggle emits the value of the row that was clicked. Unchecked rows reveal an empty box on hover/press; checked rows always show the ticked box.

    width follows the design's size steps (160 / 200 / 240 / 320, default 200); the body scrolls once the content exceeds max_height (default 480). footer_label pins a plain row (optional footer_icon, activated through on_footer) below the scroll area, under a hairline.

    The panel is unpositioned: wrap it in a dropdown/popover container to anchor it to a trigger.

    checkbox_menu(
      groups=[
        CheckboxMenuGroup::new(
          [
            CheckboxMenuItem::new("text", "Text", checked=true),
            CheckboxMenuItem::new("date", "Date"),
          ],
          title="Fields",
          clear_label="Clear",
          on_clear=clear_fields,
        ),
      ],
      on_toggle=toggle_field.map(v => _ => v),
    )

    chip

    source
    fn chip(label : String, selected? : Bool, on_click? : 
    Cmd    , disabled? : Bool, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A single selectable pill — the resolution/quality option in the design. Text stays full-white in both states; selection shows only through the block fill. Fully controlled — the caller owns selected; group several chips under one value to build a radio-like row.

    chip("720P", selected=quality == "720p", on_click=set_quality.map(v => _ => "720p"))

    context_menu

    source
    fn[C : 
    IsChildren    ] context_menu(entries~ : Array[
    MenuEntry    ], open~ : Bool, on_open_change? : 
    Emit    [Bool], selected? : String, on_select? : 
    Emit    [String], id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String], menu_style? : Array[String], children : C) -> 
    Html

    A right-click menu wrapping any target. Fully controlled: the caller owns open; right-clicking the target emits on_open_change(true) while the theme's static event layer suppresses the native menu and records the pointer position into the --sumi-ctx-x/y variables the panel reads. Closes on outside click, Escape, and selection; arrow keys move focus.

    context_menu(
      entries=[
        Item(MenuItem::new("rename", "Rename", shortcut="R")),
        Separator,
        Item(MenuItem::new("delete", "Delete", shortcut="⌫")),
      ],
      open=ctx_open,
      on_open_change=set_ctx_open.map(v => _ => v),
      on_select=set_action.map(v => _ => v),
      [canvas_card],
    )

    credits

    source
    fn credits(value~ : Int, original_value? : Int, muted? : Bool, on_click? : 
    Cmd    , id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The credit-cost indicator shown inline in toolbars before the primary submit. original_value renders a struck-through pre-discount price. muted=true drops the tone to placeholder strength for frosted input docks, where the indicator is secondary to the composer itself.

    dialog

    source
    fn[C : 
    IsChildren    ] dialog(id~ : String, title_text? : String, description? : String, show_close? : Bool, spacious? : Bool, closedby? : String, on_close? : 
    Emit    [String], on_cancel? : 
    Cmd    , class? : String, attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    Render a styled native dialog without component state.

    The browser owns visibility and focus: open it with the host framework's dialog command (or the open attribute for SSR), and close it with a <form method="dialog"> submit button. closedby controls native dismissal: "any" allows outside clicks and Escape, "closerequest" allows Escape, and "none" requires an explicit close.

    spacious=true widens the panel from the default 480px to 616px.

    divider

    source
    fn divider(id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A thin horizontal rule for separating stacked content.
    fn dropdown_menu(items~ : Array[
    MenuEntry    ], trigger~ : 
    Html    , open~ : Bool, on_open_change? : 
    Emit    [Bool], selected? : String, on_select? : 
    Emit    [String], align? : 
    MenuAlign    , side? : 
    MenuSide    , id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String], trigger_style? : Array[String], menu_style? : Array[String]) -> 
    Html

    A dropdown menu with a caller-supplied trigger. Fully controlled: the caller owns both the open flag (open + on_open_change) and the selected value (selected + on_select). Closes on outside click and Escape; when open, Arrow/Home/End keys move focus between items and Enter activates the focused item (handled by the theme's static event layer, so callers wire nothing extra).

    side=Top opens the panel above the trigger (input docks at the bottom of the page); the enter animation's transform origin follows side and align. menu_style appends overrides to the panel (e.g. a width).

    dropdown_menu(
      trigger=button(variant=Ghost, [text(model_label), menu_chevron()]),
      open=menu_open,
      on_open_change=set_menu_open.map(v => _ => v),
      items=MenuEntry::items([MenuItem::new("sd", "Sketch Diffusion")]),
      selected=model,
      on_select=set_model.map(v => _ => v),
    )

    editable_text

    source
    fn editable_text(value~ : String, placeholder? : String, on_change? : 
    Emit    [String], read_only? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A title that reads as plain text and turns into an input on click. Focus selects the whole value so typing replaces it (interaction sheet handles select-all, Enter, and Escape); the parent only sees commits — Enter or blur emits on_change, Escape restores the last value. The placeholder shows when the value is empty.

    empty_state

    source
    fn empty_state(title_text~ : String, description? : String, icon? : 
    Html    , action? : 
    Html    , id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A placeholder for empty regions of the canvas or a result list. Pass an optional action (usually a button) below the copy.

    favorite_toggle

    source
    fn favorite_toggle(checked~ : Bool, on_change? : 
    Emit    [Bool], disabled? : Bool, aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A bare star button that toggles a favorite on/off: outline star at rest, filled amber star when on. Fully controlled — the caller owns checked. Unlike icon_button it carries no hover plate, matching the design's chrome-less affordance.

    favorite_toggle(
      checked=starred,
      on_change=set_starred.map(v => _ => v),
    )

    icon

    source
    fn icon(path : String, size? : Int, stroke_width? : Int, style? : Array[String]) -> 
    Html

    A 24x24 stroke icon rendered as inline SVG. The surrounding span owns accessibility hiding and a stable layout box; color inherits from the parent via currentColor.

    icon_adjust

    source
    fn icon_adjust(size? : Int) -> 
    Html

    icon_align_left

    source
    fn icon_align_left(size? : Int) -> 
    Html

    Three left-aligned bars, the bottom one short — the generic document placeholder glyph of the attachment tile.

    icon_arrow_down

    source
    fn icon_arrow_down(size? : Int) -> 
    Html

    icon_arrow_up

    source
    fn icon_arrow_up(size? : Int) -> 
    Html

    icon_button

    source
    fn icon_button(icon : 
    Html    , variant? : 
    ButtonVariant    , size? : 
    ButtonSize    , disabled? : Bool, pressed? : Bool, id? : String, class? : String, title? : String, aria_label? : String, on_click? : 
    Cmd    , attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A square button for a single icon. Convenience wrapper over button with size=Icon/IconSm and variant=Ghost by default.

    icon_caret_down

    source
    fn icon_caret_down(size? : Int) -> 
    Html

    Filled rounded caret marking a filter trigger, on a 16 design grid.

    icon_check

    source
    fn icon_check(size? : Int) -> 
    Html

    icon_check_fill

    source
    fn icon_check_fill(size? : Int) -> 
    Html

    Filled check mark for the outline checkboxes of menu rows. The glyph grid is 12 inside the 16 viewBox (path coordinates scaled by 4/3), so at the default size 12 it reproduces the design's checkbox tick exactly.

    icon_chevron_down

    source
    fn icon_chevron_down(size? : Int) -> 
    Html

    icon_chevron_left

    source
    fn icon_chevron_left(size? : Int) -> 
    Html

    icon_chevron_right

    source
    fn icon_chevron_right(size? : Int) -> 
    Html

    icon_chevron_up

    source
    fn icon_chevron_up(size? : Int) -> 
    Html

    icon_clock

    source
    fn icon_clock(size? : Int) -> 
    Html

    icon_close_circle

    source
    fn icon_close_circle(size? : Int) -> 
    Html

    Filled circle with a times cutout — the clear affordance of a filtered trigger. The glyph grid is 13.333 inside the 16 viewBox, which reproduces the design's 8.33% inset exactly at size 16.

    icon_crop

    source
    fn icon_crop(size? : Int) -> 
    Html

    icon_download

    source
    fn icon_download(size? : Int) -> 
    Html

    icon_expand

    source
    fn icon_expand(size? : Int) -> 
    Html

    icon_folder

    source
    fn icon_folder(size? : Int) -> 
    Html

    Folder outline — the pick-from-library menu row's glyph.

    icon_grid

    source
    fn icon_grid(size? : Int) -> 
    Html

    icon_image

    source
    fn icon_image(size? : Int) -> 
    Html

    icon_important

    source
    fn icon_important(size? : Int) -> 
    Html

    Exclamation in a circle, used for inline validation and status notes.

    icon_info_circle_fill

    source
    fn icon_info_circle_fill(size? : Int, style? : Array[String]) -> 
    Html

    Filled disc with an "i" cutout — the partial-failure state of async work.

    icon_layers

    source
    fn icon_layers(size? : Int) -> 
    Html

    icon_minus

    source
    fn icon_minus(size? : Int) -> 
    Html

    icon_more

    source
    fn icon_more(size? : Int) -> 
    Html

    icon_play

    source
    fn icon_play(size? : Int) -> 
    Html

    icon_plus

    source
    fn icon_plus(size? : Int) -> 
    Html

    icon_plus_fill

    source
    fn icon_plus_fill(size? : Int) -> 
    Html

    Rounded filled plus on the 16 grid — the add tile's glyph.

    icon_ratio

    source
    fn icon_ratio(width~ : Int, height~ : Int, size? : Int) -> 
    Html

    An aspect-ratio artwork icon: a centered rectangle outline drawn at the given ratio inside the icon box (ratio pickers in size panels).

    icon_reset

    source
    fn icon_reset(size? : Int) -> 
    Html

    icon_scissors

    source
    fn icon_scissors(size? : Int) -> 
    Html

    fn icon_search(size? : Int) -> 
    Html

    icon_slash

    source
    fn icon_slash(size? : Int) -> 
    Html

    Slanted bar separating pagination numbers — a filled glyph on a 9.333x14 design grid, sized by height (the width follows the glyph's ratio).

    icon_sparkle

    source
    fn icon_sparkle(size? : Int) -> 
    Html

    icon_star

    source
    fn icon_star(size? : Int) -> 
    Html

    Star outline on the 16 grid — the favorite toggle's off state.

    icon_star_fill

    source
    fn icon_star_fill(size? : Int) -> 
    Html

    Filled star — the favorite toggle's on state.

    icon_target

    source
    fn icon_target(size? : Int) -> 
    Html

    Crosshair — the pick-from-canvas menu row's glyph.

    icon_tick_circle_fill

    source
    fn icon_tick_circle_fill(size? : Int, style? : Array[String]) -> 
    Html

    Filled disc with a tick cutout — the completion state of async work.

    icon_upload

    source
    fn icon_upload(size? : Int) -> 
    Html

    icon_upload_fill

    source
    fn icon_upload_fill(size? : Int) -> 
    Html

    Filled upload arrow over a baseline — the upload menu row's glyph.

    icon_x

    source

    icon_x_fill

    source
    fn icon_x_fill(size? : Int) -> 
    Html

    Filled times mark, weighted to stay legible at 4px — the glyph of the attachment tile's remove badge. (The stroked icon_x renders too thin at that size.)

    input

    source
    fn input(value~ : String, placeholder? : String, input_type? : 
    InputType    , on_input? : 
    Emit    [String], on_change? : 
    Emit    [String], on_clear? : 
    Cmd    , clearable? : Bool, prefix? : 
    Html    , suffix? : 
    Html    , error? : Bool, error_text? : String, disabled? : Bool, read_only? : Bool, name? : String, maxlength? : Int, autofocus? : Bool, id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A single-line text field. Controlled: the caller owns the value.

    prefix/suffix slot icons or text inside the field; clearable=true shows a small ✕ while the value is non-empty (clears through on_input or the explicit on_clear). error/error_text render the design's error border and an optional hint line below the field.

    kbd

    source
    fn kbd(key : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A keyboard key hint, e.g. for shortcut labels in menus and tooltips.
    fn menu_chevron(size? : Int) -> 
    Html

    The chevron for menu triggers. It carries the menu-chevron slot, so the interaction sheet rotates it 180° while the parent dropdown is open.
    fn pagination(page~ : Int, total~ : Int, on_change? : 
    Emit    [Int], id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A minimal ‹ page / total › pager for stepping through a small result set. Controlled: the parent owns page and applies on_change. The arrow buttons clamp at the range ends and disable there.

    popover

    source

    A generic anchored floating panel with a caller-supplied trigger — the base for composite pickers that are not plain option lists (sliders, forms, previews). Same overlay/motion model as dropdown_menu: fully controlled (open + on_open_change), closes on outside click, enters with the scale animation whose origin follows side and align.

    popover(
      trigger=button(variant=Ghost, [text("16:9 · 2K"), menu_chevron()]),
      open=panel_open,
      on_open_change=set_panel_open.map(v => _ => v),
      [my_panel_content],
    )

    progress

    source
    fn progress(value~ : Int, max? : Int, show_value? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A determinate linear progress bar.

    prompt_box

    source
    fn prompt_box(value~ : String, placeholder? : String, rows? : Int, on_input? : 
    Emit    [String], on_send? : 
    Cmd    , send_disabled? : Bool, send_loading? : Bool, disabled? : Bool, maxlength? : Int, show_count? : Bool, autofocus? : Bool, actions? : 
    Html    , id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The composite prompt input: a frosted, rounded container holding an auto-sized textarea and a footer row (action slot + circular send button). Controlled: the caller owns value.

    show_count=true renders a n / max counter next to the send button; it turns error-red once the value exceeds maxlength. The textarea carries the library's thin-scrollbar styling.

    prompt_box(
      value=prompt,
      placeholder="Describe what to create",
      on_input=emit.map(PromptChanged),
      on_send=emit(Submit),
      send_disabled=prompt.is_empty(),
      maxlength=800,
      show_count=true,
    )

    segmented

    source
    fn segmented(items~ : Array[
    SegmentedItem    ], selected~ : String, stacked? : Bool, on_select? : 
    Emit    [String], id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A segmented single-choice control (aspect-ratio / resolution pickers in the design). Controlled: the caller owns the selected value.

    stacked=true renders tall items with the icon above the label — the ratio-picker look (16px artwork icons over 12px labels, 56px tall).

    select

    source
    fn select(options~ : Array[
    MenuItem    ], value~ : String, placeholder? : String, open~ : Bool, on_open_change? : 
    Emit    [Bool], on_select? : 
    Emit    [String], variant? : 
    SelectVariant    , on_clear? : 
    Cmd    , disabled? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A form-style single select: an input-look trigger opening the compact menu. Fully controlled — the caller owns open and value. Built on dropdown_menu, so outside click, Escape, and arrow-key navigation all behave the same.

    variant=Filter swaps in the compact toolbar trigger: the label is the filter name (placeholder) until a value is selected, then the selected label with a clear affordance that emits on_clear (without opening the menu). The caller resets value in response.

    select(
      options=[@overlays.MenuItem::new("png", "PNG"), @overlays.MenuItem::new("webp", "WebP")],
      value=format,
      placeholder="Export format",
      open=select_open,
      on_open_change=set_select_open.map(v => _ => v),
      on_select=set_format.map(v => _ => v),
    )

    send_button

    source
    fn send_button(disabled? : Bool, loading? : Bool, on_click? : 
    Cmd    , id? : String, class? : String, title? : String, aria_label? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The circular submit button used by prompt_box. Disabled state uses the design's exact muted fill rather than opacity. loading=true keeps the muted fill, swaps the arrow for a 20px spinner in the disabled tone, and blocks clicks while a submission is in flight.

    shortcuts_panel

    source
    fn shortcuts_panel(sections~ : Array[
    ShortcutSection    ], title? : String, on_close? : 
    Cmd    , width? : Int, max_height? : Int, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    The keyboard-shortcuts reference panel from the design: an elevated 264px sheet with a titled header and close button, then titled sections of label + key-chip rows. Long lists scroll inside the body with the library's standard scrollbar.

    shortcuts_panel(
      title="Shortcuts",
      sections=[
        ShortcutSection::new(
          "General",
          [
            ShortcutItem::new("Toggle sidebar", "Cmd /"),
            ShortcutItem::new("Send message", "Enter"),
          ],
        ),
      ],
      on_close=close_panel,
    )

    skeleton

    source
    fn skeleton(width? : String, height? : String, radius? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A shimmering placeholder block for loading layouts. The shimmer runs in the interaction sheet and pauses under prefers-reduced-motion.

    skeleton_lines

    source
    fn skeleton_lines(count? : Int, style? : Array[String]) -> 
    Html

    Two lines of text-shaped skeletons with the design's line metrics.

    skeleton_tile

    source
    fn skeleton_tile(width? : String, height? : String, style? : Array[String]) -> 
    Html

    The card-shaped skeleton used for image/video tiles on a canvas.

    slider

    source
    fn slider(value~ : Int, min? : Int, max? : Int, step? : Int, on_input? : 
    Emit    [Int], on_commit? : 
    Emit    [Int], disabled? : Bool, show_value? : Bool, value_tooltip? : Bool, suffix? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A single-value slider built on the native range input; track fill and thumb styling live in the interaction sheet emitted by theme.

    value_tooltip=true adds the design's value bubble above the thumb, visible while hovering, dragging, or keyboard-focusing the slider. on_input fires per tick (keep it cheap); on_commit fires once on release for expensive reactions.

    slider(
      value=35,
      value_tooltip=true,
      on_input=set_strength.map(v => _ => v),
      on_commit=emit(CommitStrength),
      suffix="°",
    )

    slider_field

    source
    fn slider_field(value~ : Int, min? : Int, max? : Int, step? : Int, label? : String, unit? : String, ticks? : Array[Int], auto? : Bool, auto_label? : String, on_auto_change? : 
    Emit    [Bool], on_input? : 
    Emit    [Int], on_commit? : 
    Emit    [Int], disabled? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A labelled numeric field composing the slider with tick marks, tick labels, and a number box carrying the unit suffix — the duration-field pattern. Fully controlled: the parent owns value (and auto when the optional auto row is shown by passing it). The slider fires on_input per tick and on_commit on release; the number box commits on Enter or blur (Escape reverts), firing both.

    ticks lists the values that get a track mark and a label below; the first and last marks stay invisible like the design's end caps.

    slider_field(
      value=duration,
      min=0, max=180,
      label="Total duration",
      unit="s",
      ticks=[0, 30, 60, 90, 120, 150, 180],
      on_input=set_duration.map(v => _ => v),
    )

    spinner

    source
    fn spinner(size? : Int, id? : String, class? : String, style? : Array[String]) -> 
    Html

    An indeterminate loading spinner. Rotation comes from the interaction sheet emitted by theme and respects prefers-reduced-motion.

    status_badge

    source
    fn status_badge(state~ : 
    StatusBadgeState    , aria_label? : String, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A 20px badge reporting an async job's state, per the design: a frosted determinate ring while running, a white circle with the queue depth, a blue tick disc on completion, an amber info disc for partial failure. Rendered on dark imagery, so the palette is pinned to the dark values.

    status_badge(state=Running(45))
    status_badge(state=Count(3))
    status_badge(state=Complete)
    status_badge(state=Warning)

    stepper

    source
    fn stepper(value~ : Int, min? : Int, max? : Int, step? : Int, on_change? : 
    Emit    [Int], disabled? : Bool, id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A numeric stepper (e.g. the batch-count picker). Controlled: the caller owns value; the buttons clamp to min/max and disable at the bounds.

    switch

    source
    fn switch(checked~ : Bool, on_change? : 
    Emit    [Bool], disabled? : Bool, id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A toggle switch. Controlled: the caller owns checked.

    tabs

    source
    fn tabs(items~ : Array[
    TabEntry    ], selected~ : String, on_select? : 
    Emit    [String], id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A tab strip. Controlled: the caller owns the selected value; render the matching panel content next to the returned strip.

    tabs(
      items=[TabEntry::new("all", "All"), TabEntry::new("mine", "Mine")],
      selected=tab,
      on_select=set_tab.map(v => _ => v),
    )

    tag

    source

    A small status/category label. Pass on_remove to render a removable tag with a trailing close icon.

    textarea

    source
    fn textarea(value~ : String, placeholder? : String, rows? : Int, on_input? : 
    Emit    [String], on_change? : 
    Emit    [String], disabled? : Bool, read_only? : Bool, name? : String, maxlength? : Int, autofocus? : Bool, id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A multi-line text field. Controlled: the caller owns the value.

    theme

    source
    fn[C : 
    IsChildren    ] theme(mode? : ThemeMode, id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    Provide the design tokens to a subtree and emit the library's static pseudo-class interaction sheet plus the event-layer script. Wrap the app root once:

    theme(mode=Dark, [my_app_content])

    mode picks the token palette (see tokens.mbt): Dark (default), Light, or System to follow the viewer's OS setting. Tokens ride on the emitted sheet keyed by [data-sumi-theme], so nested themes with different modes compose. Override any token by appending custom CSS variables through style.

    toast

    source
    fn toast(message~ : String, open~ : Bool, variant? : 
    ToastVariant    , on_close? : 
    Cmd    , id? : String, class? : String, attrs? : 
    Attrs    , style? : Array[String]) -> 
    Html

    A transient notification rendered in a fixed top-center viewport. Controlled: the caller owns open; the enter/exit fade runs in the interaction sheet (mount-stable + hidden toggle). Combine with @cmd.delay to auto-dismiss.

    // show for 2.4s
    @cmd.batch([set_toast(_ => true), @cmd.delay(set_toast(_ => false), 2400)])

    toolbar

    source
    fn[C : 
    IsChildren    ] toolbar(id? : String, class? : String, title? : String, attrs? : 
    Attrs    , style? : Array[String], children : C) -> 
    Html

    A floating horizontal bar that groups controls — the design's signature pill-shaped toolbar. Compose with button(variant=Ghost), segmented, dropdown_menu and toolbar_divider.

    toolbar_divider

    source
    fn toolbar_divider(style? : Array[String]) -> 
    Html

    The thin vertical separator used between control groups inside a toolbar.

    tooltip

    source

    A hover tooltip. The bubble reveals via the interaction sheet (pure CSS), so no state is involved. Wrap any trigger element:

    tooltip(content="Upscale to 4K", button(variant=Ghost, "4K"))

    Source Files

    Powered by MoonBit

    Site sourceReport issuePackagesBuild queueSkillsStatistics

    © 2026 mooncakes.io