# Attachment

> File and image cards with upload states.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/attachment.json`

## Install

```tsx
import {
  Attachment,
  AttachmentMedia,
  AttachmentContent,
  AttachmentTitle,
  AttachmentDescription,
  AttachmentActions,
  AttachmentAction,
  AttachmentGroup,
} from "@aspyn-io/kit";
```

### File attachment

Media, name, and metadata with an independently clickable action.

```tsx
<Attachment>
  <AttachmentMedia><FileIcon /></AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove sales-dashboard.pdf"><XIcon /></AttachmentAction>
  </AttachmentActions>
</Attachment>
```

### Upload states

Set state to reflect the lifecycle: idle, uploading, processing, error, done. "error" switches to a destructive treatment.

```tsx
<Attachment state="error">
  <AttachmentMedia><FileIcon /></AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>financial-model.xlsx</AttachmentTitle>
    <AttachmentDescription>Upload failed. Try again.</AttachmentDescription>
  </AttachmentContent>
</Attachment>
```

### Group

AttachmentGroup lays multiple attachments out in a scrollable, snapping row.

```tsx
<AttachmentGroup>
  <Attachment size="sm">…</Attachment>
  <Attachment size="sm">…</Attachment>
</AttachmentGroup>
```

## Notes

- Set variant="image" on AttachmentMedia and render an <img> inside for image previews; orientation="vertical" stacks the media above the content.
- AttachmentTrigger is a full-card overlay (link or dialog) that sits behind AttachmentActions, so the card is clickable while the actions stay independently operable — give both aria-labels.
- AttachmentAction renders a Button; keep icon-only actions labeled with aria-label.