mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 06:28:37 +00:00
18fcf0f766
* feat(@shadcn/react): add message-scroller package Add the @shadcn/react headless primitives package with MessageScroller scroll anchoring, streaming follow, history prepend, and jump-to-message behavior. Includes geometry helpers, use-render utility, and unit, browser, and perf tests. * feat(registry): add chat components Add MessageScroller, Message, Bubble, Attachment, and Marker registry sources for base and radix, style variants, preview-03 chat blocks, and registry index wiring. * feat(v4): integrate chat components into docs site Wire chat components into the v4 app with docs routes, example preview pages, message part renderers, markdown support, registry build updates, and supporting lib utilities. * feat(examples): add chat component demos Add base and radix example demos for MessageScroller, Message, Bubble, Attachment, Marker, scroll-fade, and shimmer. * docs: add chat component documentation Add component and utility docs for the chat component set, update docs navigation, and add the June 2026 chat components changelog entry. * chore: regenerate registry JSON output Rebuild public registry artifacts for all style variants with the new chat components. * chore(release): add @shadcn/react publish and CI pipeline Add Changesets prerelease workflow, browser test job, RELEASING docs, and monorepo wiring for publishing @shadcn/react independently from the shadcn CLI. * docs: fix display of component preview on mobile * fix * fix * docs: add message scroller docs * style: format * fix
1639 lines
59 KiB
TypeScript
1639 lines
59 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/base/components/example"
|
|
import {
|
|
Attachment,
|
|
AttachmentAction,
|
|
AttachmentActions,
|
|
AttachmentContent,
|
|
AttachmentDescription,
|
|
AttachmentGroup,
|
|
AttachmentMedia,
|
|
AttachmentTitle,
|
|
AttachmentTrigger,
|
|
} from "@/registry/bases/base/ui/attachment"
|
|
import { Button } from "@/registry/bases/base/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/registry/bases/base/ui/dialog"
|
|
import { Spinner } from "@/registry/bases/base/ui/spinner"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function AttachmentExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<AttachmentFiles />
|
|
<AttachmentContentOnly />
|
|
<AttachmentStates />
|
|
<AttachmentImages />
|
|
<AttachmentImageStates />
|
|
<AttachmentSizes />
|
|
<AttachmentScrollableGroup />
|
|
<AttachmentTriggers />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function AttachmentFiles() {
|
|
return (
|
|
<Example title="Files" className="gap-8">
|
|
<div className="flex w-full flex-col gap-2">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Horizontal
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<Attachment className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
|
|
<AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove sales-dashboard.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="TableIcon"
|
|
tabler="IconTable"
|
|
hugeicons="TableIcon"
|
|
phosphor="TableIcon"
|
|
remixicon="RiTableLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>customer-import.csv</AttachmentTitle>
|
|
<AttachmentDescription>CSV · 18 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove customer-import.csv">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileCodeIcon"
|
|
tabler="IconFileCode"
|
|
hugeicons="File01Icon"
|
|
phosphor="FileCodeIcon"
|
|
remixicon="RiFileCodeLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>message-renderer.tsx</AttachmentTitle>
|
|
<AttachmentDescription>TypeScript · 12 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove message-renderer.tsx">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-2">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Vertical
|
|
</div>
|
|
<AttachmentGroup className="w-full">
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
|
|
<AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove sales-dashboard.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="TableIcon"
|
|
tabler="IconTable"
|
|
hugeicons="TableIcon"
|
|
phosphor="TableIcon"
|
|
remixicon="RiTableLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>customer-import.csv</AttachmentTitle>
|
|
<AttachmentDescription>CSV · 18 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove customer-import.csv">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileCodeIcon"
|
|
tabler="IconFileCode"
|
|
hugeicons="File01Icon"
|
|
phosphor="FileCodeIcon"
|
|
remixicon="RiFileCodeLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>message-renderer.tsx</AttachmentTitle>
|
|
<AttachmentDescription>TypeScript · 12 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove message-renderer.tsx">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileArchiveIcon"
|
|
tabler="IconFileZip"
|
|
hugeicons="File01Icon"
|
|
phosphor="FileZipIcon"
|
|
remixicon="RiFileZipLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>source-assets.zip</AttachmentTitle>
|
|
<AttachmentDescription>ZIP · 4.2 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove source-assets.zip">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="PresentationIcon"
|
|
tabler="IconPresentation"
|
|
hugeicons="Presentation01Icon"
|
|
phosphor="PresentationIcon"
|
|
remixicon="RiSlideshowLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>quarterly-review.key</AttachmentTitle>
|
|
<AttachmentDescription>Keynote · 9 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove quarterly-review.key">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</AttachmentGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AttachmentContentOnly() {
|
|
return (
|
|
<Example title="Content Only" className="gap-8">
|
|
<div className="flex w-full flex-col gap-2">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Title
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<Attachment className="w-full">
|
|
<AttachmentContent>
|
|
<AttachmentTitle>React Documentation</AttachmentTitle>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove React Documentation">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment className="w-full">
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Tailwind CSS</AttachmentTitle>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove Tailwind CSS">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment size="sm" className="w-48">
|
|
<AttachmentContent>
|
|
<AttachmentTitle>shadcn/ui</AttachmentTitle>
|
|
</AttachmentContent>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://ui.shadcn.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Open shadcn/ui"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-2">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Title and Description
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<Attachment className="w-full">
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Building accessible components</AttachmentTitle>
|
|
<AttachmentDescription>
|
|
react.dev · 8 min read
|
|
</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove Building accessible components">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment className="w-full">
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Utility-first CSS framework</AttachmentTitle>
|
|
<AttachmentDescription>tailwindcss.com</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove Utility-first CSS framework">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment size="sm" className="w-full max-w-80">
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Compound components in React</AttachmentTitle>
|
|
<AttachmentDescription>ui.shadcn.com/docs</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://ui.shadcn.com/docs"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Open Compound components in React"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
</div>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AttachmentStates() {
|
|
return (
|
|
<Example title="States" className="gap-8">
|
|
<div className="flex w-full flex-col gap-3">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Horizontal
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Attachment state="idle" className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="ClockIcon"
|
|
tabler="IconClock"
|
|
hugeicons="Clock01Icon"
|
|
phosphor="ClockIcon"
|
|
remixicon="RiTimeLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>selected-file.pdf</AttachmentTitle>
|
|
<AttachmentDescription>Ready to upload</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove selected-file.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="uploading" className="w-full">
|
|
<AttachmentMedia>
|
|
<Spinner />
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>design-system.zip</AttachmentTitle>
|
|
<AttachmentDescription>Uploading · 64%</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove design-system.zip">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="processing" className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>market-research.pdf</AttachmentTitle>
|
|
<AttachmentDescription>Processing document</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove market-research.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="error" className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileWarningIcon"
|
|
tabler="IconFileAlert"
|
|
hugeicons="FileCorruptIcon"
|
|
phosphor="FileXIcon"
|
|
remixicon="RiFileWarningLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>financial-model.xlsx</AttachmentTitle>
|
|
<AttachmentDescription>
|
|
Upload failed. Try again.
|
|
</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Retry upload">
|
|
<IconPlaceholder
|
|
lucide="RefreshCwIcon"
|
|
tabler="IconRefresh"
|
|
hugeicons="RefreshIcon"
|
|
phosphor="ArrowClockwiseIcon"
|
|
remixicon="RiRefreshLine"
|
|
/>
|
|
</AttachmentAction>
|
|
<AttachmentAction aria-label="Remove attachment">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="done" className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="CheckIcon"
|
|
tabler="IconCheck"
|
|
hugeicons="Tick02Icon"
|
|
phosphor="CheckIcon"
|
|
remixicon="RiCheckLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>uploaded-report.pdf</AttachmentTitle>
|
|
<AttachmentDescription>Uploaded · 1.8 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove uploaded-report.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-3">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Vertical
|
|
</div>
|
|
<AttachmentGroup className="w-full">
|
|
<Attachment state="idle" orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="ClockIcon"
|
|
tabler="IconClock"
|
|
hugeicons="Clock01Icon"
|
|
phosphor="ClockIcon"
|
|
remixicon="RiTimeLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>selected-file.pdf</AttachmentTitle>
|
|
<AttachmentDescription>Ready</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove selected-file.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="uploading" orientation="vertical">
|
|
<AttachmentMedia>
|
|
<Spinner />
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>design-system.zip</AttachmentTitle>
|
|
<AttachmentDescription>Uploading</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove design-system.zip">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="processing" orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>market-research.pdf</AttachmentTitle>
|
|
<AttachmentDescription>Processing</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove market-research.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="error" orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileWarningIcon"
|
|
tabler="IconFileAlert"
|
|
hugeicons="FileCorruptIcon"
|
|
phosphor="FileXIcon"
|
|
remixicon="RiFileWarningLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>financial-model.xlsx</AttachmentTitle>
|
|
<AttachmentDescription>Failed</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Retry financial-model.xlsx">
|
|
<IconPlaceholder
|
|
lucide="RefreshCwIcon"
|
|
tabler="IconRefresh"
|
|
hugeicons="RefreshIcon"
|
|
phosphor="ArrowClockwiseIcon"
|
|
remixicon="RiRefreshLine"
|
|
/>
|
|
</AttachmentAction>
|
|
<AttachmentAction aria-label="Remove financial-model.xlsx">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="done" orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="CheckIcon"
|
|
tabler="IconCheck"
|
|
hugeicons="Tick02Icon"
|
|
phosphor="CheckIcon"
|
|
remixicon="RiCheckLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>uploaded-report.pdf</AttachmentTitle>
|
|
<AttachmentDescription>Done</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove uploaded-report.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</AttachmentGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AttachmentImages() {
|
|
return (
|
|
<Example title="Images" className="gap-8">
|
|
<div className="flex w-full flex-col gap-3">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Horizontal
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Attachment className="w-full">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
alt="Workspace"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>workspace.png</AttachmentTitle>
|
|
<AttachmentDescription>PNG · 820 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove workspace.png">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open workspace.png"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
<Attachment className="w-full">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80"
|
|
alt="Desk"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>desk-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>JPG · 1.1 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove desk-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open desk-reference.jpg"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
<Attachment className="w-full">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
alt="Office"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>office-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>JPG · 940 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove office-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open office-reference.jpg"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-2">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Vertical
|
|
</div>
|
|
<AttachmentGroup className="w-full">
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
alt="Workspace"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>workspace.png</AttachmentTitle>
|
|
<AttachmentDescription>PNG · 820 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove workspace.png">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open workspace.png"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80"
|
|
alt="Desk"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>desk-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>JPG · 1.1 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove desk-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open desk-reference.jpg"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
alt="Office"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>office-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>JPG · 940 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove office-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open office-reference.jpg"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=900&auto=format&fit=crop&q=80"
|
|
alt="Outdoor patio"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>patio-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>JPG · 1.6 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove patio-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=900&auto=format&fit=crop&q=80"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open patio-reference.jpg"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1494526585095-c41746248156?w=900&auto=format&fit=crop&q=80"
|
|
alt="House exterior"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>house-exterior.jpg</AttachmentTitle>
|
|
<AttachmentDescription>JPG · 1.4 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove house-exterior.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="https://images.unsplash.com/photo-1494526585095-c41746248156?w=900&auto=format&fit=crop&q=80"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open house-exterior.jpg"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
</AttachmentGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AttachmentImageStates() {
|
|
return (
|
|
<Example title="Image States" className="gap-8">
|
|
<div className="flex w-full flex-col gap-3">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Horizontal
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
<Attachment state="idle" className="w-full">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
alt="Office"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>office-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>Ready to upload</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove office-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="uploading" className="w-full">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
alt="Workspace"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>workspace.png</AttachmentTitle>
|
|
<AttachmentDescription>Uploading · 72%</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove workspace.png">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="processing" className="w-full">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80"
|
|
alt="Desk"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>desk-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>Processing image</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove desk-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="error" className="w-full">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
alt="Office"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>office-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>Upload failed</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Retry image upload">
|
|
<IconPlaceholder
|
|
lucide="RefreshCwIcon"
|
|
tabler="IconRefresh"
|
|
hugeicons="RefreshIcon"
|
|
phosphor="ArrowClockwiseIcon"
|
|
remixicon="RiRefreshLine"
|
|
/>
|
|
</AttachmentAction>
|
|
<AttachmentAction aria-label="Remove attachment">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="done" className="w-full">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
alt="Workspace"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>workspace.png</AttachmentTitle>
|
|
<AttachmentDescription>Uploaded · 1.2 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove workspace.png">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-2">
|
|
<div className="px-1 text-xs font-medium text-muted-foreground">
|
|
Vertical
|
|
</div>
|
|
<AttachmentGroup className="w-full">
|
|
<Attachment state="idle" orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
alt="Office"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>office-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>Ready</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove office-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="uploading" orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
alt="Workspace"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>workspace.png</AttachmentTitle>
|
|
<AttachmentDescription>Uploading</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove workspace.png">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="processing" orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80"
|
|
alt="Desk"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>desk-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>Processing</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove desk-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="error" orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
alt="Office"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>office-reference.jpg</AttachmentTitle>
|
|
<AttachmentDescription>Failed</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Retry office-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="RefreshCwIcon"
|
|
tabler="IconRefresh"
|
|
hugeicons="RefreshIcon"
|
|
phosphor="ArrowClockwiseIcon"
|
|
remixicon="RiRefreshLine"
|
|
/>
|
|
</AttachmentAction>
|
|
<AttachmentAction aria-label="Remove office-reference.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment state="done" orientation="vertical">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
alt="Workspace"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>workspace.png</AttachmentTitle>
|
|
<AttachmentDescription>Done</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove workspace.png">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</AttachmentGroup>
|
|
</div>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AttachmentSizes() {
|
|
return (
|
|
<Example title="Sizes" className="gap-3">
|
|
<Attachment size="default" className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Default attachment</AttachmentTitle>
|
|
<AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
</Attachment>
|
|
<Attachment size="sm" className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Small attachment</AttachmentTitle>
|
|
<AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
</Attachment>
|
|
<Attachment size="xs" className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Extra small attachment</AttachmentTitle>
|
|
</AttachmentContent>
|
|
</Attachment>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AttachmentScrollableGroup() {
|
|
return (
|
|
<Example title="Scrollable Group" className="gap-4">
|
|
<AttachmentGroup className="w-full">
|
|
<Attachment className="w-64">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>briefing-notes.pdf</AttachmentTitle>
|
|
<AttachmentDescription>PDF · 1.4 MB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove briefing-notes.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment className="w-64">
|
|
<AttachmentMedia variant="image">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
|
|
alt="Workspace"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>workspace.png</AttachmentTitle>
|
|
<AttachmentDescription>PNG · 820 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove workspace.png">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment className="w-64">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="TableIcon"
|
|
tabler="IconTable"
|
|
hugeicons="TableIcon"
|
|
phosphor="TableIcon"
|
|
remixicon="RiTableLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>customers.csv</AttachmentTitle>
|
|
<AttachmentDescription>CSV · 18 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove customers.csv">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment className="w-64">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileCodeIcon"
|
|
tabler="IconFileCode"
|
|
hugeicons="File01Icon"
|
|
phosphor="FileCodeIcon"
|
|
remixicon="RiFileCodeLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>renderer.tsx</AttachmentTitle>
|
|
<AttachmentDescription>TSX · 12 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove renderer.tsx">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</AttachmentGroup>
|
|
<AttachmentGroup className="w-full">
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>invoice.pdf</AttachmentTitle>
|
|
<AttachmentDescription>PDF</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove invoice.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia variant="image" className="aspect-square w-full">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80"
|
|
alt="Desk"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>desk.jpg</AttachmentTitle>
|
|
<AttachmentDescription>JPG</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove desk.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileArchiveIcon"
|
|
tabler="IconFileZip"
|
|
hugeicons="File01Icon"
|
|
phosphor="FileZipIcon"
|
|
remixicon="RiFileZipLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>assets.zip</AttachmentTitle>
|
|
<AttachmentDescription>ZIP</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove assets.zip">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia variant="image" className="aspect-square w-full">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80"
|
|
alt="Office"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>office.jpg</AttachmentTitle>
|
|
<AttachmentDescription>JPG</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove office.jpg">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
<Attachment orientation="vertical">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>notes.pdf</AttachmentTitle>
|
|
<AttachmentDescription>PDF</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Remove notes.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</AttachmentGroup>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function AttachmentTriggers() {
|
|
const [isVisible, setIsVisible] = React.useState(true)
|
|
|
|
return (
|
|
<Example title="Triggers" className="gap-3">
|
|
{isVisible ? (
|
|
<Attachment className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileTextIcon"
|
|
tabler="IconFileText"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileTextIcon"
|
|
remixicon="RiFileTextLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>contract-review.pdf</AttachmentTitle>
|
|
<AttachmentDescription>PDF · 820 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Download attachment">
|
|
<IconPlaceholder
|
|
lucide="DownloadIcon"
|
|
tabler="IconDownload"
|
|
hugeicons="Download01Icon"
|
|
phosphor="DownloadIcon"
|
|
remixicon="RiDownloadLine"
|
|
/>
|
|
</AttachmentAction>
|
|
<AttachmentAction
|
|
aria-label="Remove attachment"
|
|
onClick={() => setIsVisible(false)}
|
|
>
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<AttachmentTrigger
|
|
render={
|
|
<a
|
|
href="#"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
aria-label="Open contract-review.pdf"
|
|
/>
|
|
}
|
|
/>
|
|
</Attachment>
|
|
) : (
|
|
<Button variant="outline" onClick={() => setIsVisible(true)}>
|
|
Restore attachment
|
|
</Button>
|
|
)}
|
|
<Dialog>
|
|
<Attachment className="w-full">
|
|
<AttachmentMedia>
|
|
<IconPlaceholder
|
|
lucide="FileSearchIcon"
|
|
tabler="IconFileSearch"
|
|
hugeicons="FileSearchIcon"
|
|
phosphor="FileSearchIcon"
|
|
remixicon="RiFileSearchLine"
|
|
/>
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>research-summary.pdf</AttachmentTitle>
|
|
<AttachmentDescription>Open preview dialog</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Copy link">
|
|
<IconPlaceholder
|
|
lucide="CopyIcon"
|
|
tabler="IconCopy"
|
|
hugeicons="Copy01Icon"
|
|
phosphor="CopyIcon"
|
|
remixicon="RiFileCopyLine"
|
|
/>
|
|
</AttachmentAction>
|
|
<AttachmentAction aria-label="Remove research-summary.pdf">
|
|
<IconPlaceholder
|
|
lucide="XIcon"
|
|
tabler="IconX"
|
|
hugeicons="Cancel01Icon"
|
|
phosphor="XIcon"
|
|
remixicon="RiCloseLine"
|
|
/>
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
<DialogTrigger
|
|
render={
|
|
<AttachmentTrigger aria-label="Preview research-summary.pdf" />
|
|
}
|
|
/>
|
|
</Attachment>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle>research-summary.pdf</DialogTitle>
|
|
<DialogDescription>
|
|
Attachment triggers can open dialogs while actions remain
|
|
independently reachable.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Example>
|
|
)
|
|
}
|