Skip to content
zits/ui

Attachment

Overview

Section titled “Overview”

Attachment is a nine-part composite implemented entirely in the helm: a card (ZitsAttachment) whose State (idle | uploading | processing | error | done), Size, and Orientation parameters drive the styling of its children through data-* selectors, plus slots for media, title, description, and action clusters. ZitsAttachmentAction composes ZitsButton (a ghost icon-xs button by default); ZitsAttachmentTitle composes the shimmer CSS utility while the card is uploading/processing. There is no Navius primitive underneath: Attachment ships only in the chat registry bundle alongside Message, Bubble, and Marker.

Install

Section titled “Install”
Terminal window
navius add chat --to ./src/MyApp --namespace MyApp.Ui

Usage

Section titled “Usage”
<ZitsAttachmentGroup>
    <ZitsAttachment State="done">
        <ZitsAttachmentMedia>...</ZitsAttachmentMedia>
        <ZitsAttachmentContent>
            <ZitsAttachmentTitle>roadmap.pdf</ZitsAttachmentTitle>
            <ZitsAttachmentDescription>248 KB</ZitsAttachmentDescription>
        </ZitsAttachmentContent>
        <ZitsAttachmentActions>
            <ZitsAttachmentAction aria-label="Remove roadmap.pdf">...</ZitsAttachmentAction>
        </ZitsAttachmentActions>
    </ZitsAttachment>
</ZitsAttachmentGroup>

Parts and props

Section titled “Parts and props”
Prop Type Default Description
ZitsAttachment.State string "done" idle | uploading | processing | error | done. Drives child styling via data-state.
ZitsAttachment.Size string "default" default | sm | xs.
ZitsAttachment.Orientation string "horizontal" horizontal | vertical.
ZitsAttachmentMedia.Variant string "icon" icon | image; image renders a dimmed <img> until state is done/idle.
ZitsAttachmentAction.Variant string "ghost" Forwarded to the composed ZitsButton.
ZitsAttachmentAction.Size string "icon-xs" Forwarded to the composed ZitsButton.

ZitsAttachmentGroup, ZitsAttachmentContent, ZitsAttachmentDescription, and ZitsAttachmentTrigger take only ChildContent and Attributes.

Styling surface

Section titled “Styling surface”

Every part accepts class/Attributes, merged via Cn.Class/Cn.Merge with the caller’s classes applied last.

Parameter Values
State idle · uploading · processing · error · done
Size default · sm · xs
Orientation horizontal · vertical
Media.Variant icon · image

Data attribute hooks

Section titled “Data attribute hooks”
Part Attribute Description
Attachment data-state, data-size, data-orientation Set from State/Size/Orientation; children select on group-data-[state=…], group-data-[size=…], group-data-[orientation=…].
Title / Description group-data-[state=processing], group-data-[state=uploading], group-data-[state=error] Title applies the shimmer class while uploading/processing; description switches to a destructive tone on error.
Media group-data-[state=error] Switches the media slot to a destructive icon/background tint.
Actions group-data-[orientation=vertical] Repositions the action cluster to an absolute top-end corner.

Attachment renders no ARIA role of its own: it is a plain div/span composite whose state is communicated visually (shimmer, color, dashed border) and via the description text, not a role. ZitsAttachmentTrigger is an unlabeled full-card overlay button (behind the actions cluster in z-order) and needs a caller-supplied aria-label; ZitsAttachmentAction likewise needs its own aria-label since it renders only an icon. The shadcn source can render the trigger asChild over an <a href>; Blazor has no Slot/asChild equivalent (ADR-0003), so wrap ZitsAttachmentTrigger in your own anchor when a link is needed.