🥮 mooncakes.io

    howtomakeaname/sumi/forms does not have a README file

    AttachmentItem

    source
    pub(all) struct AttachmentItem {
      kind : AttachmentKind
      src : String
      label : String
    } derive(Eq)

    One attachment in the strip.

    AttachmentItem::document

    source
    fn AttachmentItem::document(label : String) -> AttachmentItem

    A non-image attachment, rendered as a slate gradient placeholder with a centered document glyph.

    AttachmentItem::equal

    source

    AttachmentItem::image

    source
    fn AttachmentItem::image(src : String, label? : String) -> AttachmentItem

    An image attachment, rendered cover-fit slightly overset so the thumbnail hides the tile border.

    AttachmentItem::not_equal

    source
    fn AttachmentItem::not_equal(x : AttachmentItem, y : AttachmentItem) -> Bool

    AttachmentKind

    source
    pub(all) enum AttachmentKind {
      Image
      Document
    } derive(Eq)

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

    AttachmentKind::equal

    source

    AttachmentKind::not_equal

    source
    fn AttachmentKind::not_equal(x : AttachmentKind, y : AttachmentKind) -> Bool

    SegmentedItem

    source
    pub(all) struct SegmentedItem {
      value : String
      label : String
      icon : 
    Html    ?
      trailing : 
    Html    ?
      numeric : Bool
      disabled : Bool
    }

    One option in a segmented control.

    SegmentedItem::new

    source
    fn SegmentedItem::new(value : String, label : String, icon? : 
    Html    , trailing? : 
    Html    , numeric? : Bool, disabled? : Bool) -> SegmentedItem

    SelectVariant

    source
    pub(all) enum SelectVariant {
      Form
      Filter
    }

    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 })),
    )

    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.

    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"))

    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.

    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.

    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.

    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),
    )

    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.

    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.

    Source Files

    Powered by MoonBit

    Site sourceReport issuePackagesBuild queueSkillsStatistics

    © 2026 mooncakes.io