@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

package/src/modules/design_system/gallery/demos/feeds-code.generated.ts

@@ -0,0 +1,4 @@
+// Generated by yarn storybook:generate from feeds.tsx.
+const source = "import * as React from 'react'\nimport { FileText, ListFilter, MoreHorizontal, RotateCcw } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { ActivityFeed, ActivityFeedComment, ActivityFeedFileChip, ActivityFeedItem, ActivityFeedStatusChip } from '@open-mercato/ui/primitives/activity-feed'\nimport { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'\nimport { NotificationFeed, NotificationFeedFooter, NotificationFeedHeader, NotificationFeedItem, NotificationFeedList } from '@open-mercato/ui/primitives/notification-feed'\nimport { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\nimport { Textarea } from '@open-mercato/ui/primitives/textarea'\n\nconst feedKinds = ['basic', 'file', 'comment', 'avatars', 'tasks'] as const\ntype FeedKind = typeof feedKinds[number]\nconst people: Record<FeedKind, string> = { basic: 'Wei Chen', file: 'Omar Haddad', comment: 'Laura Perez', avatars: 'Ines Kowalska', tasks: 'Ravi Patel' }\n\nfunction LocalFilePreview({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {\n  const t = useT()\n  return <Dialog open={open} onOpenChange={onOpenChange}><DialogContent>\n    <DialogHeader><DialogTitle>apex-report.pdf</DialogTitle><DialogDescription>{t('design_system.gallery.samples.feeds.filePreview')}</DialogDescription></DialogHeader>\n    <p className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.feeds.fileBody')}</p>\n  </DialogContent></Dialog>\n}\n\nexport function ActivityFeedExample() {\n  const t = useT()\n  const [filter, setFilter] = React.useState<'all' | 'file' | 'comment'>('all')\n  const [hidden, setHidden] = React.useState<FeedKind[]>([])\n  const [fileOpen, setFileOpen] = React.useState(false)\n  const [replyOpen, setReplyOpen] = React.useState(false)\n  const [draft, setDraft] = React.useState('')\n  const [reply, setReply] = React.useState('')\n  const visible = feedKinds.filter(kind => !hidden.includes(kind) && (filter === 'all' || filter === kind))\n  const title = (kind: FeedKind) => <>{people[kind]} <span className=\"font-normal text-muted-foreground\">{t(`design_system.gallery.samples.feeds.${kind}Action`)}</span></>\n  return <div className=\"w-full max-w-2xl space-y-5\">\n    <div className=\"flex flex-wrap items-center gap-1\" role=\"group\" aria-label={t('design_system.gallery.samples.feeds.filter')}>\n      {(['all', 'file', 'comment'] as const).map(value => <Button key={value} size=\"2xs\" variant=\"ghost\" aria-pressed={filter === value} onClick={() => setFilter(value)} className=\"gap-1.5 px-2.5 aria-pressed:bg-status-info-bg aria-pressed:text-status-info-text\">\n        {value === 'all' ? <ListFilter className=\"size-[18px]\" /> : value === 'file' ? <FileText className=\"size-[18px]\" /> : null}{t(`design_system.gallery.samples.feeds.${value}`)}\n      </Button>)}\n      {hidden.length ? <Button variant=\"ghost\" size=\"2xs\" onClick={() => setHidden([])}><RotateCcw />{t('design_system.gallery.samples.feeds.restore')}</Button> : null}\n    </div>\n    <ActivityFeed className=\"gap-5\">\n      {visible.map(kind => <ActivityFeedItem key={kind} className=\"gap-4 [&_[data-slot=activity-feed-item-title]]:leading-5 [&_[data-slot=activity-feed-item-title]>span:first-child]:font-medium\" avatar={<Avatar size={32} label={people[kind]} />} title={title(kind)} timestamp={t('design_system.gallery.samples.feeds.time')}\n        actions={<Popover><PopoverTrigger asChild><Button variant=\"ghost\" size=\"icon\" className=\"size-6\" aria-label={t('design_system.gallery.samples.feeds.actions', { name: people[kind] })}><MoreHorizontal /></Button></PopoverTrigger><PopoverContent align=\"end\" className=\"w-auto p-1\"><PopoverClose asChild><Button variant=\"ghost\" size=\"sm\" onClick={() => setHidden(items => [...items, kind])}>{t('design_system.gallery.samples.feeds.hide')}</Button></PopoverClose></PopoverContent></Popover>}>\n        {kind === 'file' ? <ActivityFeedFileChip name=\"apex-report.pdf\" size=\"4 MB\" onDownload={() => setFileOpen(true)} downloadAriaLabel={t('design_system.gallery.samples.feeds.openFile')} /> : null}\n        {kind === 'comment' ? <div className=\"w-full space-y-2\"><ActivityFeedComment className=\"[&_[data-slot=activity-feed-comment-body]]:whitespace-normal [&_[data-slot=activity-feed-comment-body]]:break-words\" onReply={() => setReplyOpen(value => !value)} replyLabel={t('design_system.gallery.samples.feeds.reply')}>{t('design_system.gallery.samples.feeds.commentBody')}</ActivityFeedComment>\n          {replyOpen ? <form className=\"space-y-2\" onSubmit={event => { event.preventDefault(); if (draft.trim()) { setReply(draft.trim()); setDraft(''); setReplyOpen(false) } }}><Textarea aria-label={t('design_system.gallery.samples.feeds.reply')} value={draft} onChange={event => setDraft(event.target.value)} /><Button size=\"sm\" type=\"submit\" disabled={!draft.trim()}>{t('design_system.gallery.samples.feeds.saveReply')}</Button></form> : null}\n          {reply ? <p className=\"rounded-md bg-muted p-3 text-sm\" role=\"status\">{reply}</p> : null}\n        </div> : null}\n        {kind === 'avatars' ? <div className=\"inline-flex items-center gap-1.5 rounded-full border border-border bg-background py-0.5 pl-0.5 pr-2 shadow-xs\"><AvatarStack size={24} max={3}><Avatar size={24} label=\"Wei Chen\" /><Avatar size={24} label=\"Laura Perez\" /><Avatar size={24} label=\"Omar Haddad\" /></AvatarStack><span className=\"text-xs text-muted-foreground\">+4</span></div> : null}\n        {kind === 'tasks' ? <><ActivityFeedStatusChip status=\"success\">{t('design_system.gallery.samples.feeds.approved')}</ActivityFeedStatusChip><ActivityFeedStatusChip status=\"warning\">{t('design_system.gallery.samples.feeds.review')}</ActivityFeedStatusChip><ActivityFeedStatusChip status=\"pending\">{t('design_system.gallery.samples.feeds.pending')}</ActivityFeedStatusChip><ActivityFeedStatusChip status=\"error\">{t('design_system.gallery.samples.feeds.blocked')}</ActivityFeedStatusChip></> : null}\n      </ActivityFeedItem>)}\n    </ActivityFeed>\n    {!visible.length ? <p className=\"text-sm text-muted-foreground\" role=\"status\">{t('design_system.gallery.samples.feeds.empty')}</p> : null}\n    <LocalFilePreview open={fileOpen} onOpenChange={setFileOpen} />\n  </div>\n}\n\nconst notificationKinds = ['basic', 'button', 'file', 'message'] as const\nexport function NotificationFeedExample({ tabs = 4 }: { tabs?: 2 | 3 | 4 }) {\n  const t = useT()\n  const [filter, setFilter] = React.useState('all')\n  const [archived, setArchived] = React.useState(false)\n  const [read, setRead] = React.useState(false)\n  const [decision, setDecision] = React.useState<'approved' | 'denied' | null>(null)\n  const [fileOpen, setFileOpen] = React.useState(false)\n  const filters = ['all', 'unread', 'file', 'message'].slice(0, tabs)\n  const visible = archived || (filter === 'unread' && read) ? [] : notificationKinds.filter(kind => !['file', 'message'].includes(filter) || kind === filter)\n  return <div className=\"w-full max-w-xl space-y-3\"><NotificationFeed>\n    <NotificationFeedHeader className=\"flex-wrap\" title={t('design_system.gallery.samples.feeds.notifications')}><Button size=\"2xs\" variant=\"ghost\" onClick={() => setRead(true)} disabled={read || archived}>{t('design_system.gallery.samples.feeds.markRead')}</Button></NotificationFeedHeader>\n    <Tabs value={filter} onValueChange={setFilter} variant=\"underline\"><TabsList aria-label={t('design_system.gallery.samples.feeds.filter')} className=\"w-full px-3\">{filters.map(value => <TabsTrigger key={value} value={value}>{t(`design_system.gallery.samples.feeds.${value}`)}</TabsTrigger>)}</TabsList><TabsContent value={filter} className=\"mt-0\">\n    <NotificationFeedList className=\"gap-1 divide-y-0 p-2\">\n      {visible.map(kind => <NotificationFeedItem key={kind} className=\"rounded-lg p-3 hover:bg-muted/40 [&_[data-slot=notification-feed-item-title]]:font-medium\" icon={<Avatar size={40} label=\"Wei Chen\" />} title={t(`design_system.gallery.samples.feeds.notification${kind}`)} timestamp={<>{t('design_system.gallery.samples.feeds.time')} · Apex</>} unread={!read}>\n        {kind === 'button' ? decision ? <p className=\"text-sm\" role=\"status\">{t(`design_system.gallery.samples.feeds.${decision}`)}</p> : <><Button variant=\"outline\" size=\"sm\" onClick={() => setDecision('denied')}>{t('design_system.gallery.samples.feeds.deny')}</Button><Button variant=\"primary-filled\" size=\"sm\" onClick={() => setDecision('approved')}>{t('design_system.gallery.samples.feeds.approve')}</Button></> : null}\n        {kind === 'file' ? <ActivityFeedFileChip name=\"apex-report.pdf\" size=\"4 MB\" onDownload={() => setFileOpen(true)} downloadAriaLabel={t('design_system.gallery.samples.feeds.openFile')} /> : null}\n        {kind === 'message' ? <p className=\"rounded-md rounded-tl-sm border border-border bg-background px-3 py-2 text-sm text-muted-foreground shadow-xs\">{t('design_system.gallery.samples.feeds.messageBody')}</p> : null}\n      </NotificationFeedItem>)}\n    </NotificationFeedList>\n    {!visible.length ? <p className=\"p-5 text-center text-sm text-muted-foreground\" role=\"status\">{t('design_system.gallery.samples.feeds.empty')}</p> : null}\n    <NotificationFeedFooter><Button variant=\"outline\" size=\"sm\" className=\"w-full\" onClick={() => setArchived(true)} disabled={archived}>{t('design_system.gallery.samples.feeds.archive')}</Button></NotificationFeedFooter></TabsContent></Tabs>\n  </NotificationFeed><Button variant=\"ghost\" size=\"sm\" onClick={() => { setArchived(false); setRead(false); setDecision(null); setFilter('all') }}><RotateCcw />{t('design_system.gallery.samples.feeds.restore')}</Button><LocalFilePreview open={fileOpen} onOpenChange={setFileOpen} /></div>\n}\n"
+export const activityFeedExampleCode = source + "\n<ActivityFeedExample />\n"
+export const notificationFeedExampleCode = (tabs: 2 | 3 | 4) => source + `\n<NotificationFeedExample tabs={${tabs}} />\n`

package/src/modules/design_system/gallery/demos/feeds.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import { FileText, ListFilter, MoreHorizontal, RotateCcw } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { ActivityFeed, ActivityFeedComment, ActivityFeedFileChip, ActivityFeedItem, ActivityFeedStatusChip } from '@open-mercato/ui/primitives/activity-feed'
+import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { NotificationFeed, NotificationFeedFooter, NotificationFeedHeader, NotificationFeedItem, NotificationFeedList } from '@open-mercato/ui/primitives/notification-feed'
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+
+const feedKinds = ['basic', 'file', 'comment', 'avatars', 'tasks'] as const
+type FeedKind = typeof feedKinds[number]
+const people: Record<FeedKind, string> = { basic: 'Wei Chen', file: 'Omar Haddad', comment: 'Laura Perez', avatars: 'Ines Kowalska', tasks: 'Ravi Patel' }
+
+function LocalFilePreview({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const t = useT()
+  return <Dialog open={open} onOpenChange={onOpenChange}><DialogContent>
+    <DialogHeader><DialogTitle>apex-report.pdf</DialogTitle><DialogDescription>{t('design_system.gallery.samples.feeds.filePreview')}</DialogDescription></DialogHeader>
+    <p className="text-sm text-muted-foreground">{t('design_system.gallery.samples.feeds.fileBody')}</p>
+  </DialogContent></Dialog>
+}
+
+export function ActivityFeedExample() {
+  const t = useT()
+  const [filter, setFilter] = React.useState<'all' | 'file' | 'comment'>('all')
+  const [hidden, setHidden] = React.useState<FeedKind[]>([])
+  const [fileOpen, setFileOpen] = React.useState(false)
+  const [replyOpen, setReplyOpen] = React.useState(false)
+  const [draft, setDraft] = React.useState('')
+  const [reply, setReply] = React.useState('')
+  const visible = feedKinds.filter(kind => !hidden.includes(kind) && (filter === 'all' || filter === kind))
+  const title = (kind: FeedKind) => <>{people[kind]} <span className="font-normal text-muted-foreground">{t(`design_system.gallery.samples.feeds.${kind}Action`)}</span></>
+  return <div className="w-full max-w-2xl space-y-5">
+    <div className="flex flex-wrap items-center gap-1" role="group" aria-label={t('design_system.gallery.samples.feeds.filter')}>
+      {(['all', 'file', 'comment'] as const).map(value => <Button key={value} size="2xs" variant="ghost" aria-pressed={filter === value} onClick={() => setFilter(value)} className="gap-1.5 px-2.5 aria-pressed:bg-status-info-bg aria-pressed:text-status-info-text">
+        {value === 'all' ? <ListFilter className="size-[18px]" /> : value === 'file' ? <FileText className="size-[18px]" /> : null}{t(`design_system.gallery.samples.feeds.${value}`)}
+      </Button>)}
+      {hidden.length ? <Button variant="ghost" size="2xs" onClick={() => setHidden([])}><RotateCcw />{t('design_system.gallery.samples.feeds.restore')}</Button> : null}
+    </div>
+    <ActivityFeed className="gap-5">
+      {visible.map(kind => <ActivityFeedItem key={kind} className="gap-4 [&_[data-slot=activity-feed-item-title]]:leading-5 [&_[data-slot=activity-feed-item-title]>span:first-child]:font-medium" avatar={<Avatar size={32} label={people[kind]} />} title={title(kind)} timestamp={t('design_system.gallery.samples.feeds.time')}
+        actions={<Popover><PopoverTrigger asChild><Button variant="ghost" size="icon" className="size-6" aria-label={t('design_system.gallery.samples.feeds.actions', { name: people[kind] })}><MoreHorizontal /></Button></PopoverTrigger><PopoverContent align="end" className="w-auto p-1"><PopoverClose asChild><Button variant="ghost" size="sm" onClick={() => setHidden(items => [...items, kind])}>{t('design_system.gallery.samples.feeds.hide')}</Button></PopoverClose></PopoverContent></Popover>}>
+        {kind === 'file' ? <ActivityFeedFileChip name="apex-report.pdf" size="4 MB" onDownload={() => setFileOpen(true)} downloadAriaLabel={t('design_system.gallery.samples.feeds.openFile')} /> : null}
+        {kind === 'comment' ? <div className="w-full space-y-2"><ActivityFeedComment className="[&_[data-slot=activity-feed-comment-body]]:whitespace-normal [&_[data-slot=activity-feed-comment-body]]:break-words" onReply={() => setReplyOpen(value => !value)} replyLabel={t('design_system.gallery.samples.feeds.reply')}>{t('design_system.gallery.samples.feeds.commentBody')}</ActivityFeedComment>
+          {replyOpen ? <form className="space-y-2" onSubmit={event => { event.preventDefault(); if (draft.trim()) { setReply(draft.trim()); setDraft(''); setReplyOpen(false) } }}><Textarea aria-label={t('design_system.gallery.samples.feeds.reply')} value={draft} onChange={event => setDraft(event.target.value)} /><Button size="sm" type="submit" disabled={!draft.trim()}>{t('design_system.gallery.samples.feeds.saveReply')}</Button></form> : null}
+          {reply ? <p className="rounded-md bg-muted p-3 text-sm" role="status">{reply}</p> : null}
+        </div> : null}
+        {kind === 'avatars' ? <div className="inline-flex items-center gap-1.5 rounded-full border border-border bg-background py-0.5 pl-0.5 pr-2 shadow-xs"><AvatarStack size={24} max={3}><Avatar size={24} label="Wei Chen" /><Avatar size={24} label="Laura Perez" /><Avatar size={24} label="Omar Haddad" /></AvatarStack><span className="text-xs text-muted-foreground">+4</span></div> : null}
+        {kind === 'tasks' ? <><ActivityFeedStatusChip status="success">{t('design_system.gallery.samples.feeds.approved')}</ActivityFeedStatusChip><ActivityFeedStatusChip status="warning">{t('design_system.gallery.samples.feeds.review')}</ActivityFeedStatusChip><ActivityFeedStatusChip status="pending">{t('design_system.gallery.samples.feeds.pending')}</ActivityFeedStatusChip><ActivityFeedStatusChip status="error">{t('design_system.gallery.samples.feeds.blocked')}</ActivityFeedStatusChip></> : null}
+      </ActivityFeedItem>)}
+    </ActivityFeed>
+    {!visible.length ? <p className="text-sm text-muted-foreground" role="status">{t('design_system.gallery.samples.feeds.empty')}</p> : null}
+    <LocalFilePreview open={fileOpen} onOpenChange={setFileOpen} />
+  </div>
+}
+
+const notificationKinds = ['basic', 'button', 'file', 'message'] as const
+export function NotificationFeedExample({ tabs = 4 }: { tabs?: 2 | 3 | 4 }) {
+  const t = useT()
+  const [filter, setFilter] = React.useState('all')
+  const [archived, setArchived] = React.useState(false)
+  const [read, setRead] = React.useState(false)
+  const [decision, setDecision] = React.useState<'approved' | 'denied' | null>(null)
+  const [fileOpen, setFileOpen] = React.useState(false)
+  const filters = ['all', 'unread', 'file', 'message'].slice(0, tabs)
+  const visible = archived || (filter === 'unread' && read) ? [] : notificationKinds.filter(kind => !['file', 'message'].includes(filter) || kind === filter)
+  return <div className="w-full max-w-xl space-y-3"><NotificationFeed>
+    <NotificationFeedHeader className="flex-wrap" title={t('design_system.gallery.samples.feeds.notifications')}><Button size="2xs" variant="ghost" onClick={() => setRead(true)} disabled={read || archived}>{t('design_system.gallery.samples.feeds.markRead')}</Button></NotificationFeedHeader>
+    <Tabs value={filter} onValueChange={setFilter} variant="underline"><TabsList aria-label={t('design_system.gallery.samples.feeds.filter')} className="w-full px-3">{filters.map(value => <TabsTrigger key={value} value={value}>{t(`design_system.gallery.samples.feeds.${value}`)}</TabsTrigger>)}</TabsList><TabsContent value={filter} className="mt-0">
+    <NotificationFeedList className="gap-1 divide-y-0 p-2">
+      {visible.map(kind => <NotificationFeedItem key={kind} className="rounded-lg p-3 hover:bg-muted/40 [&_[data-slot=notification-feed-item-title]]:font-medium" icon={<Avatar size={40} label="Wei Chen" />} title={t(`design_system.gallery.samples.feeds.notification${kind}`)} timestamp={<>{t('design_system.gallery.samples.feeds.time')} · Apex</>} unread={!read}>
+        {kind === 'button' ? decision ? <p className="text-sm" role="status">{t(`design_system.gallery.samples.feeds.${decision}`)}</p> : <><Button variant="outline" size="sm" onClick={() => setDecision('denied')}>{t('design_system.gallery.samples.feeds.deny')}</Button><Button variant="primary-filled" size="sm" onClick={() => setDecision('approved')}>{t('design_system.gallery.samples.feeds.approve')}</Button></> : null}
+        {kind === 'file' ? <ActivityFeedFileChip name="apex-report.pdf" size="4 MB" onDownload={() => setFileOpen(true)} downloadAriaLabel={t('design_system.gallery.samples.feeds.openFile')} /> : null}
+        {kind === 'message' ? <p className="rounded-md rounded-tl-sm border border-border bg-background px-3 py-2 text-sm text-muted-foreground shadow-xs">{t('design_system.gallery.samples.feeds.messageBody')}</p> : null}
+      </NotificationFeedItem>)}
+    </NotificationFeedList>
+    {!visible.length ? <p className="p-5 text-center text-sm text-muted-foreground" role="status">{t('design_system.gallery.samples.feeds.empty')}</p> : null}
+    <NotificationFeedFooter><Button variant="outline" size="sm" className="w-full" onClick={() => setArchived(true)} disabled={archived}>{t('design_system.gallery.samples.feeds.archive')}</Button></NotificationFeedFooter></TabsContent></Tabs>
+  </NotificationFeed><Button variant="ghost" size="sm" onClick={() => { setArchived(false); setRead(false); setDecision(null); setFilter('all') }}><RotateCcw />{t('design_system.gallery.samples.feeds.restore')}</Button><LocalFilePreview open={fileOpen} onOpenChange={setFileOpen} /></div>
+}

package/src/modules/design_system/gallery/demos/file-upload.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { FileUploadArea } from '@open-mercato/ui/primitives/file-upload'
+import { FileUploadCard, type FileUploadStatus } from '@open-mercato/ui/primitives/file-upload-card'
+import { ImageUpload } from '@open-mercato/ui/primitives/image-upload'
+import { formatAttachmentFileSize } from '@open-mercato/ui/backend/detail/AttachmentVisualPreview'
+import { uploadExampleImages } from '../assets/upload-images'
+
+type QueueFile = { id: number; file: File; progress: number }
+
+export function FileUploadAreaDemo({ disabled = false }: { disabled?: boolean }) {
+  const t = useT()
+  const nextId = React.useRef(0)
+  const [files, setFiles] = React.useState<QueueFile[]>([])
+  const uploading = files.some(file => file.progress < 100)
+  React.useEffect(() => {
+    if (!uploading) return
+    const timer = window.setInterval(() => setFiles(current => current.map(file => ({ ...file, progress: Math.min(100, file.progress + 20) }))), 350)
+    return () => window.clearInterval(timer)
+  }, [uploading])
+  return (
+    <div className="flex w-100 max-w-full flex-col gap-3">
+      <FileUploadArea disabled={disabled} onFilesSelected={selected => setFiles(current => [...current, ...selected.map(file => ({ id: nextId.current++, file, progress: 0 }))])} />
+      {files.length > 0 ? <p role="status" className="text-xs text-muted-foreground">{t('design_system.gallery.samples.upload.selected', '{count} files selected', { count: files.length })}</p> : null}
+      {files.map(item => <FileUploadCard key={item.id} fileName={item.file.name} sizeLabel={formatAttachmentFileSize(item.file.size)} status={item.progress === 100 ? 'success' : 'uploading'} progress={item.progress} onRemove={() => setFiles(current => current.filter(file => file.id !== item.id))} />)}
+    </div>
+  )
+}
+
+export function FileUploadCardDemo({ initialStatus, disabled = false }: { initialStatus: FileUploadStatus; disabled?: boolean }) {
+  const t = useT()
+  const [removed, setRemoved] = React.useState(false)
+  const [status, setStatus] = React.useState(initialStatus)
+  const [progress, setProgress] = React.useState(0)
+  const [retrying, setRetrying] = React.useState(false)
+  React.useEffect(() => {
+    if (!retrying || removed) return
+    const timer = window.setInterval(() => setProgress(current => Math.min(100, current + 25)), 250)
+    return () => window.clearInterval(timer)
+  }, [retrying, removed])
+  React.useEffect(() => {
+    if (progress < 100) return
+    setStatus('success')
+    setRetrying(false)
+  }, [progress])
+  if (removed) return <Button variant="outline" size="sm" onClick={() => { setRemoved(false); setRetrying(false); setProgress(0); setStatus(initialStatus) }}>{t('design_system.gallery.samples.upload.reset', 'Reset example')}</Button>
+  return <FileUploadCard fileName="my-cv.pdf" sizeLabel={t(status === 'success' ? 'design_system.gallery.samples.upload.completeSize' : 'design_system.gallery.samples.upload.size')} status={status} progress={progress} disabled={disabled} onRemove={() => setRemoved(true)} onRetry={() => { setProgress(0); setStatus('uploading'); setRetrying(true) }} />
+}
+
+export function ImageUploadDemo({ kind, uploaded, alignment, disabled = false }: { kind: 'avatar' | 'company'; uploaded: boolean; alignment: 'vertical' | 'horizontal'; disabled?: boolean }) {
+  const t = useT()
+  const [source, setSource] = React.useState<string | null>(uploaded ? uploadExampleImages[kind] : null)
+  const objectUrl = React.useRef<string | null>(null)
+  React.useEffect(() => () => { if (objectUrl.current) URL.revokeObjectURL(objectUrl.current) }, [])
+  return <ImageUpload src={source} alt={t(`design_system.gallery.samples.upload.${kind}`)} kind={kind} alignment={alignment} disabled={disabled} onChange={file => {
+    if (objectUrl.current) URL.revokeObjectURL(objectUrl.current)
+    objectUrl.current = file ? URL.createObjectURL(file) : null
+    setSource(objectUrl.current)
+  }} />
+}