Attachment

1'use client';
2
3import * as React from 'react';
4import { cn } from '../lib/cn';
5
6type IconProps = React.SVGProps<SVGSVGElement> & {
7  size?: number | string;
8};
9
10function ArchiveIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
11  return (
12    <svg
13      xmlns="http://www.w3.org/2000/svg"
14      width={size}
15      height={size}
16      viewBox="0 0 24 24"
17      fill="none"
18      stroke="currentColor"
19      strokeWidth={strokeWidth}
20      strokeLinecap="round"
21      strokeLinejoin="round"
22      aria-hidden="true"
23      {...props}
24    >
25      <rect x="2.5" y="3.5" width="19" height="5.5" rx="2" />
26      <path d="M4 9v8.5a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9" />
27      <path d="M10 13.5h4" />
28    </svg>
29  );
30}
31
32function DownloadIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
33  return (
34    <svg
35      xmlns="http://www.w3.org/2000/svg"
36      width={size}
37      height={size}
38      viewBox="0 0 24 24"
39      fill="none"
40      stroke="currentColor"
41      strokeWidth={strokeWidth}
42      strokeLinecap="round"
43      strokeLinejoin="round"
44      aria-hidden="true"
45      {...props}
46    >
47      <path d="M12 3v11" />
48      <path d="m8 10.5 4 4 4-4" />
49      <path d="M3.5 15v1.5A3.5 3.5 0 0 0 7 20h10a3.5 3.5 0 0 0 3.5-3.5V15" />
50    </svg>
51  );
52}
53
54function FileIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
55  return (
56    <svg
57      xmlns="http://www.w3.org/2000/svg"
58      width={size}
59      height={size}
60      viewBox="0 0 24 24"
61      fill="none"
62      stroke="currentColor"
63      strokeWidth={strokeWidth}
64      strokeLinecap="round"
65      strokeLinejoin="round"
66      aria-hidden="true"
67      {...props}
68    >
69      <path d="M13.5 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8.5L13.5 3Z" />
70      <path d="M13.5 3v3.5a2 2 0 0 0 2 2H19" />
71    </svg>
72  );
73}
74
75function FileTextIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
76  return (
77    <svg
78      xmlns="http://www.w3.org/2000/svg"
79      width={size}
80      height={size}
81      viewBox="0 0 24 24"
82      fill="none"
83      stroke="currentColor"
84      strokeWidth={strokeWidth}
85      strokeLinecap="round"
86      strokeLinejoin="round"
87      aria-hidden="true"
88      {...props}
89    >
90      <path d="M13.5 3H7.5A2.5 2.5 0 0 0 5 5.5v13A2.5 2.5 0 0 0 7.5 21h9a2.5 2.5 0 0 0 2.5-2.5V8.5L13.5 3Z" />
91      <path d="M13.5 3v3.5a2 2 0 0 0 2 2H19" />
92      <path d="M8.5 13h7" />
93      <path d="M8.5 17h4" />
94    </svg>
95  );
96}
97
98function ImageIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
99  return (
100    <svg
101      xmlns="http://www.w3.org/2000/svg"
102      width={size}
103      height={size}
104      viewBox="0 0 24 24"
105      fill="none"
106      stroke="currentColor"
107      strokeWidth={strokeWidth}
108      strokeLinecap="round"
109      strokeLinejoin="round"
110      aria-hidden="true"
111      {...props}
112    >
113      <rect x="2.5" y="3.5" width="19" height="17" rx="3.5" />
114      <circle cx="8.5" cy="9" r="2" />
115      <path d="m21.5 14.5-3.4-3.4a2 2 0 0 0-2.8 0L7 19.4" />
116    </svg>
117  );
118}
119
120function MusicIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
121  return (
122    <svg
123      xmlns="http://www.w3.org/2000/svg"
124      width={size}
125      height={size}
126      viewBox="0 0 24 24"
127      fill="none"
128      stroke="currentColor"
129      strokeWidth={strokeWidth}
130      strokeLinecap="round"
131      strokeLinejoin="round"
132      aria-hidden="true"
133      {...props}
134    >
135      <circle cx="6.5" cy="17.5" r="3" />
136      <circle cx="17.5" cy="15.5" r="3" />
137      <path d="M9.5 17.5V7.2a2 2 0 0 1 1.5-1.9l8-2a2 2 0 0 1 1.5 1.9v10.3" />
138    </svg>
139  );
140}
141
142function VideoIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
143  return (
144    <svg
145      xmlns="http://www.w3.org/2000/svg"
146      width={size}
147      height={size}
148      viewBox="0 0 24 24"
149      fill="none"
150      stroke="currentColor"
151      strokeWidth={strokeWidth}
152      strokeLinecap="round"
153      strokeLinejoin="round"
154      aria-hidden="true"
155      {...props}
156    >
157      <rect x="2.5" y="5.5" width="13" height="13" rx="3" />
158      <path d="m15.5 10 4.4-2.6a1 1 0 0 1 1.6.9v7.4a1 1 0 0 1-1.6.9L15.5 14" />
159    </svg>
160  );
161}
162
163function XIcon({ size = 24, strokeWidth = 1.5, ...props }: IconProps) {
164  return (
165    <svg
166      xmlns="http://www.w3.org/2000/svg"
167      width={size}
168      height={size}
169      viewBox="0 0 24 24"
170      fill="none"
171      stroke="currentColor"
172      strokeWidth={strokeWidth}
173      strokeLinecap="round"
174      strokeLinejoin="round"
175      aria-hidden="true"
176      {...props}
177    >
178      <path d="M18 6 6 18" />
179      <path d="m6 6 12 12" />
180    </svg>
181  );
182}
183
184type AttachmentVariant = 'row' | 'card' | 'chip';
185type AttachmentStatus = 'idle' | 'uploading' | 'done' | 'error';
186
187interface AttachmentContextValue {
188  variant: AttachmentVariant;
189  status: AttachmentStatus;
190  nameId: string | undefined;
191  registerName: (id: string) => () => void;
192}
193
194const AttachmentContext = React.createContext<AttachmentContextValue | null>(null);
195
196function useAttachmentContext(): AttachmentContextValue {
197  const context = React.use(AttachmentContext);
198  if (!context) throw new Error('Attachment parts must be used within Attachment');
199  return context;
200}
201
202const SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;
203
204function formatFileSize(bytes: number, decimals = 1): string {
205  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
206  const exponent = Math.min(
207    Math.max(0, Math.floor(Math.log(bytes) / Math.log(1024))),
208    SIZE_UNITS.length - 1,
209  );
210  const value = bytes / 1024 ** exponent;
211  const rounded = exponent === 0 ? value : Number(value.toFixed(decimals));
212  return `${rounded} ${SIZE_UNITS[exponent]}`;
213}
214
215const TYPE_ICONS = {
216  image: ImageIcon,
217  video: VideoIcon,
218  audio: MusicIcon,
219  document: FileTextIcon,
220  archive: ArchiveIcon,
221  file: FileIcon,
222} satisfies Record<string, React.ComponentType<IconProps>>;
223
224function kindForType(type: string | undefined, name: string | undefined): keyof typeof TYPE_ICONS {
225  const mime = (type ?? '').toLowerCase();
226  const extension = (name ?? '').toLowerCase().split('.').pop() ?? '';
227
228  if (mime.startsWith('image/')) return 'image';
229  if (mime.startsWith('video/')) return 'video';
230  if (mime.startsWith('audio/')) return 'audio';
231  if (mime === 'application/pdf' || extension === 'pdf') return 'document';
232  if (
233    mime.includes('zip') ||
234    mime.includes('compressed') ||
235    ['zip', 'rar', '7z', 'gz', 'tar'].includes(extension)
236  ) {
237    return 'archive';
238  }
239  return 'file';
240}
241
242function AttachmentTypeIcon({ type, name }: { type?: string; name?: string }) {
243  const Icon = TYPE_ICONS[kindForType(type, name)];
244  return <Icon aria-hidden="true" />;
245}
246
247interface AttachmentStatusLabels {
248  uploading: string;
249  error: string;
250}
251
252const DEFAULT_STATUS_LABELS: AttachmentStatusLabels = {
253  uploading: 'Uploading',
254  error: 'Upload failed',
255};
256
257interface AttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
258  variant?: AttachmentVariant;
259  status?: AttachmentStatus;
260  statusLabels?: Partial<AttachmentStatusLabels>;
261}
262
263const AttachmentRoot = ({
264  variant = 'row',
265  status = 'idle',
266  statusLabels,
267  className,
268  children,
269  ref,
270  ...props
271}: AttachmentProps & { ref?: React.Ref<HTMLDivElement> }) => {
272  const [nameId, setNameId] = React.useState<string | undefined>(undefined);
273
274  const registerName = React.useCallback((id: string) => {
275    setNameId(id);
276    return () => setNameId((current) => (current === id ? undefined : current));
277  }, []);
278
279  const context = React.useMemo(
280    () => ({ variant, status, nameId, registerName }),
281    [variant, status, nameId, registerName],
282  );
283
284  const labels = { ...DEFAULT_STATUS_LABELS, ...statusLabels };
285  const statusText =
286    status === 'uploading' ? labels.uploading : status === 'error' ? labels.error : '';
287
288  return (
289    <AttachmentContext value={context}>
290      <div
291        ref={ref}
292        data-slot="attachment"
293        data-variant={variant}
294        data-status={status}
295        aria-busy={status === 'uploading' || undefined}
296        className={cn(
297          'group/attachment border-border bg-card text-card-foreground relative overflow-hidden border transition-colors',
298          'data-[status=error]:border-destructive/60 data-[status=uploading]:text-muted-foreground',
299          variant === 'row' && 'flex items-center gap-3 rounded-lg p-2.5 pr-2',
300          variant === 'card' && 'flex w-40 flex-col rounded-xl',
301          variant === 'chip' &&
302            'inline-flex h-8 max-w-60 items-center gap-1.5 rounded-full py-1 pr-1 pl-1.5',
303          className,
304        )}
305        {...props}
306      >
307        {children}
308        <span role="status" className="sr-only">
309          {statusText}
310        </span>
311      </div>
312    </AttachmentContext>
313  );
314};
315AttachmentRoot.displayName = 'Attachment';
316
317interface AttachmentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
318  src?: string;
319  type?: string;
320  name?: string;
321  alt?: string;
322}
323
324const AttachmentPreview = ({
325  src,
326  type,
327  name,
328  alt,
329  className,
330  children,
331  ref,
332  ...props
333}: AttachmentPreviewProps & { ref?: React.Ref<HTMLDivElement> }) => {
334  const { variant } = useAttachmentContext();
335  const isImage = Boolean(src);
336
337  return (
338    <div
339      ref={ref}
340      data-slot="attachment-preview"
341      data-kind={isImage ? 'image' : 'icon'}
342      className={cn(
343        'bg-muted text-muted-foreground flex shrink-0 items-center justify-center overflow-hidden',
344        variant === 'row' && 'size-10 rounded-md [&_svg]:size-5',
345        variant === 'card' && 'aspect-square w-full [&_svg]:size-8',
346        variant === 'chip' && 'size-6 rounded-full [&_svg]:size-3.5',
347        className,
348      )}
349      {...props}
350    >
351      {children ??
352        (isImage ? (
353          <img src={src} alt={alt ?? name ?? ''} className="size-full object-cover" />
354        ) : (
355          <AttachmentTypeIcon type={type} name={name} />
356        ))}
357    </div>
358  );
359};
360AttachmentPreview.displayName = 'AttachmentPreview';
361
362const AttachmentContent = ({
363  className,
364  ref,
365  ...props
366}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) => {
367  const { variant } = useAttachmentContext();
368
369  return (
370    <div
371      ref={ref}
372      data-slot="attachment-content"
373      className={cn(
374        'flex min-w-0 flex-1 flex-col',
375        variant === 'row' && 'gap-0.5',
376        variant === 'card' && 'gap-0.5 p-2.5',
377        variant === 'chip' && 'flex-row items-baseline gap-1',
378        className,
379      )}
380      {...props}
381    />
382  );
383};
384AttachmentContent.displayName = 'AttachmentContent';
385
386const AttachmentName = ({
387  className,
388  id,
389  ref,
390  ...props
391}: React.HTMLAttributes<HTMLParagraphElement> & { ref?: React.Ref<HTMLParagraphElement> }) => {
392  const { variant, registerName } = useAttachmentContext();
393  const generatedId = React.useId();
394  const nameId = id ?? generatedId;
395
396  React.useEffect(() => registerName(nameId), [nameId, registerName]);
397
398  return (
399    <p
400      ref={ref}
401      id={nameId}
402      data-slot="attachment-name"
403      className={cn('truncate font-medium', variant === 'chip' ? 'text-xs' : 'text-sm', className)}
404      {...props}
405    />
406  );
407};
408AttachmentName.displayName = 'AttachmentName';
409
410const AttachmentMeta = ({
411  className,
412  ref,
413  ...props
414}: React.HTMLAttributes<HTMLParagraphElement> & { ref?: React.Ref<HTMLParagraphElement> }) => (
415  <p
416    ref={ref}
417    data-slot="attachment-meta"
418    className={cn('text-muted-foreground truncate text-xs', className)}
419    {...props}
420  />
421);
422AttachmentMeta.displayName = 'AttachmentMeta';
423
424interface AttachmentSizeProps extends React.HTMLAttributes<HTMLSpanElement> {
425  bytes: number;
426  decimals?: number;
427}
428
429const AttachmentSize = ({
430  bytes,
431  decimals,
432  className,
433  ref,
434  ...props
435}: AttachmentSizeProps & { ref?: React.Ref<HTMLSpanElement> }) => (
436  <span
437    ref={ref}
438    data-slot="attachment-size"
439    className={cn('text-muted-foreground text-xs tabular-nums', className)}
440    {...props}
441  >
442    {formatFileSize(bytes, decimals)}
443  </span>
444);
445AttachmentSize.displayName = 'AttachmentSize';
446
447const AttachmentActions = ({
448  className,
449  ref,
450  ...props
451}: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) => {
452  const { variant } = useAttachmentContext();
453
454  return (
455    <div
456      ref={ref}
457      data-slot="attachment-actions"
458      className={cn(
459        'flex shrink-0 items-center gap-0.5',
460        variant === 'card' &&
461          'absolute top-1.5 right-1.5 transition-opacity group-focus-within/attachment:opacity-100 group-hover/attachment:opacity-100 [@media(hover:hover)]:opacity-0',
462        className,
463      )}
464      {...props}
465    />
466  );
467};
468AttachmentActions.displayName = 'AttachmentActions';
469
470function joinIds(...ids: (string | undefined)[]) {
471  return ids.filter(Boolean).join(' ') || undefined;
472}
473
474const actionClassName =
475  'text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-ring relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-40 pointer-coarse:before:absolute';
476
477interface AttachmentRemoveProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
478  label?: string;
479}
480
481const AttachmentRemove = ({
482  label = 'Remove attachment',
483  className,
484  children,
485  'aria-describedby': describedBy,
486  ref,
487  ...props
488}: AttachmentRemoveProps & { ref?: React.Ref<HTMLButtonElement> }) => {
489  const { variant, nameId } = useAttachmentContext();
490
491  return (
492    <button
493      ref={ref}
494      type="button"
495      aria-label={label}
496      aria-describedby={joinIds(nameId, describedBy)}
497      data-slot="attachment-remove"
498      className={cn(
499        actionClassName,
500        variant === 'chip'
501          ? 'size-6 pointer-coarse:before:-inset-1.5 [&_svg]:size-3'
502          : 'size-7 pointer-coarse:before:-inset-0.5 [&_svg]:size-3.5',
503        variant === 'card' && 'bg-background/80 backdrop-blur-sm',
504        className,
505      )}
506      {...props}
507    >
508      {children ?? <XIcon aria-hidden="true" />}
509    </button>
510  );
511};
512AttachmentRemove.displayName = 'AttachmentRemove';
513
514interface AttachmentDownloadProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
515  label?: string;
516}
517
518const AttachmentDownload = ({
519  label = 'Download attachment',
520  className,
521  children,
522  'aria-describedby': describedBy,
523  ref,
524  ...props
525}: AttachmentDownloadProps & { ref?: React.Ref<HTMLAnchorElement> }) => {
526  const { variant, nameId } = useAttachmentContext();
527
528  return (
529    <a
530      ref={ref}
531      download
532      aria-label={label}
533      aria-describedby={joinIds(nameId, describedBy)}
534      data-slot="attachment-download"
535      className={cn(
536        actionClassName,
537        variant === 'chip'
538          ? 'size-6 pointer-coarse:before:-inset-1.5 [&_svg]:size-3'
539          : 'size-7 pointer-coarse:before:-inset-0.5 [&_svg]:size-3.5',
540        variant === 'card' && 'bg-background/80 backdrop-blur-sm',
541        className,
542      )}
543      {...props}
544    >
545      {children ?? <DownloadIcon aria-hidden="true" />}
546    </a>
547  );
548};
549AttachmentDownload.displayName = 'AttachmentDownload';
550
551interface AttachmentProgressProps extends React.HTMLAttributes<HTMLDivElement> {
552  value: number;
553}
554
555const AttachmentProgress = ({
556  value,
557  className,
558  'aria-label': ariaLabel,
559  'aria-labelledby': ariaLabelledBy,
560  ref,
561  ...props
562}: AttachmentProgressProps & { ref?: React.Ref<HTMLDivElement> }) => {
563  const nameId = React.use(AttachmentContext)?.nameId;
564  const clamped = Math.min(Math.max(value, 0), 100);
565  const labelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : nameId);
566
567  return (
568    <div
569      ref={ref}
570      role="progressbar"
571      aria-label={labelledBy ? ariaLabel : (ariaLabel ?? 'Upload progress')}
572      aria-labelledby={labelledBy}
573      aria-valuemin={0}
574      aria-valuemax={100}
575      aria-valuenow={Math.round(clamped)}
576      data-slot="attachment-progress"
577      className={cn('bg-muted absolute inset-x-0 bottom-0 h-0.5', className)}
578      {...props}
579    >
580      <div
581        className="bg-primary h-full transition-[width] duration-300"
582        style={{ width: `${clamped}%` }}
583      />
584    </div>
585  );
586};
587AttachmentProgress.displayName = 'AttachmentProgress';
588
589interface AttachmentListProps extends React.HTMLAttributes<HTMLUListElement> {
590  layout?: 'stack' | 'grid' | 'inline';
591}
592
593const AttachmentList = ({
594  layout = 'stack',
595  className,
596  ref,
597  ...props
598}: AttachmentListProps & { ref?: React.Ref<HTMLUListElement> }) => (
599  <ul
600    ref={ref}
601    data-slot="attachment-list"
602    data-layout={layout}
603    className={cn(
604      'm-0 list-none p-0',
605      layout === 'stack' && 'flex flex-col gap-2',
606      layout === 'grid' && 'flex flex-wrap gap-3',
607      layout === 'inline' && 'flex flex-wrap items-center gap-1.5',
608      className,
609    )}
610    {...props}
611  />
612);
613AttachmentList.displayName = 'AttachmentList';
614
615const AttachmentItem = ({
616  className,
617  ref,
618  ...props
619}: React.LiHTMLAttributes<HTMLLIElement> & { ref?: React.Ref<HTMLLIElement> }) => (
620  <li ref={ref} data-slot="attachment-item" className={cn('min-w-0', className)} {...props} />
621);
622AttachmentItem.displayName = 'AttachmentItem';
623
624const Attachment = Object.assign(AttachmentRoot, {
625  Preview: AttachmentPreview,
626  Content: AttachmentContent,
627  Name: AttachmentName,
628  Meta: AttachmentMeta,
629  Size: AttachmentSize,
630  Actions: AttachmentActions,
631  Remove: AttachmentRemove,
632  Download: AttachmentDownload,
633  Progress: AttachmentProgress,
634  List: AttachmentList,
635  Item: AttachmentItem,
636});
637
638export { Attachment, formatFileSize, useAttachmentContext };
639export type {
640  AttachmentProps,
641  AttachmentStatusLabels,
642  AttachmentVariant,
643  AttachmentStatus,
644  AttachmentPreviewProps,
645  AttachmentSizeProps,
646  AttachmentProgressProps,
647  AttachmentListProps,
648  AttachmentRemoveProps,
649  AttachmentDownloadProps,
650};