rift-ds 1.2.0 → 1.4.0

package/components/Attachment/AttachmentDropZone.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+/** Props owned by AttachmentDropZone itself — everything else falls through to the root element. */
+type AttachmentDropZoneOwnProps = {
+    /** Fires with the files dropped anywhere on the zone. */
+    onFilesSelected?: (files: File[]) => void;
+    /** Stops the zone reacting to drags; its children behave as if it were not there. */
+    disabled?: boolean;
+    /**
+     * Icon above the overlay's headline: a Material Symbol name, or any
+     * custom element. Pass `null` for none.
+     */
+    icon?: string | React.ReactNode;
+    /** Headline of the overlay shown while files are dragged over the zone. */
+    label?: string;
+    /** Second line of the overlay: what may be dropped, e.g. accepted types and limits. */
+    hint?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** The surface that accepts drops: a chat panel, a thread and its composer. */
+    children?: React.ReactNode;
+};
+export interface AttachmentDropZoneProps extends AttachmentDropZoneOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AttachmentDropZoneOwnProps> {
+}
+/**
+ * AttachmentDropZone turns a whole surface into a drop target. Wrap a chat
+ * in it and a file dragged anywhere over the conversation lands, instead of
+ * the person having to aim for the composer. While files hover, an
+ * outlined overlay covers the surface and says what dropping will do.
+ *
+ * The zone hears drags in the capture phase and keeps the ones that carry
+ * files to itself, so a drop target nested inside it, or a page-level one
+ * outside it, never handles the same drop twice. A drag of anything else
+ * (selected text, a link) passes straight through.
+ *
+ * Dropping is a pointer path only. Pair it with a picker button, which
+ * Composer provides, so the same files can be added from the keyboard.
+ */
+export declare const AttachmentDropZone: React.ForwardRefExoticComponent<AttachmentDropZoneProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Attachment/AttachmentDropZone.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import "../../fonts/material-symbols.css";
+import "./Attachment.css";
+const carriesFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
+const AttachmentDropZone = React.forwardRef(
+  ({
+    onFilesSelected,
+    disabled = false,
+    icon = "upload_file",
+    label = "Drop files to attach",
+    hint,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-attachment-drop-zone";
+    const [active, setActive] = useState(false);
+    const depth = useRef(0);
+    const claims = (event) => !disabled && carriesFiles(event);
+    const handleDragEnter = (event) => {
+      if (!claims(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      depth.current += 1;
+      setActive(true);
+    };
+    const handleDragOver = (event) => {
+      if (!claims(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = "copy";
+    };
+    const handleDragLeave = (event) => {
+      if (!claims(event)) return;
+      event.stopPropagation();
+      depth.current = Math.max(0, depth.current - 1);
+      if (depth.current === 0) setActive(false);
+    };
+    const handleDrop = (event) => {
+      if (!claims(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      depth.current = 0;
+      setActive(false);
+      const files = Array.from(event.dataTransfer.files ?? []);
+      if (files.length > 0) onFilesSelected?.(files);
+    };
+    const classes = [baseClass, active ? `${baseClass}--active` : "", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        onDragEnterCapture: handleDragEnter,
+        onDragOverCapture: handleDragOver,
+        onDragLeaveCapture: handleDragLeave,
+        onDropCapture: handleDrop,
+        children: [
+          children,
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__overlay`, "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { className: `${baseClass}__message`, children: [
+            icon !== null && icon !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: icon }) : icon }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+            hint && /* @__PURE__ */ jsx("span", { className: `${baseClass}__hint`, children: hint })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+AttachmentDropZone.displayName = "AttachmentDropZone";
+export {
+  AttachmentDropZone
+};

package/components/Attachment/AttachmentGroup.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+import { AttachmentItem } from './fileTypes';
+export { revokeAttachmentUrls, useAttachments } from './useAttachments';
+export type { AttachmentRejection, AttachmentRejectionReason, AttachmentUploadContext, UseAttachmentsOptions, UseAttachmentsResult, } from './useAttachments';
+/** Props owned by AttachmentGroup itself — everything else falls through to the root element. */
+type AttachmentGroupOwnProps = {
+    /** The files on the message, in order. */
+    items: AttachmentItem[];
+    /** Which edge the layout hugs: `end` for the sender's own turns. */
+    align?: 'start' | 'end';
+    /**
+     * Most cells shown before the rest collapse. Over the limit, the last
+     * cell becomes a "+N" button standing for the hidden files.
+     */
+    max?: number;
+    /** Whether the overflow is expanded, for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Whether the overflow starts expanded, for uncontrolled use. */
+    defaultOpen?: boolean;
+    /** Fires when the overflow expands or collapses. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Open a pressed file in the built-in AttachmentViewer, which steps
+     * through the rest of the group. Turn it off to handle presses yourself
+     * through `onItemClick`.
+     */
+    viewer?: boolean;
+    /** Fires when a file is pressed, whether or not the viewer opens. */
+    onItemClick?: (item: AttachmentItem) => void;
+    /** Passed to the viewer: draws a file it cannot, such as the pages of a PDF. */
+    renderPreview?: (item: AttachmentItem) => React.ReactNode;
+    /** Passed to the viewer: fires when Download is pressed, and renders the buttons. */
+    onDownload?: (item: AttachmentItem) => void;
+    /** Passed to the viewer: fires when "Try again" is pressed on a file that failed to load. */
+    onRetry?: (item: AttachmentItem) => void;
+    /** Tile size, passed to every tile. */
+    size?: 'default' | 'compact';
+    /** Accessible label for the list. */
+    label?: string;
+    /** Builds the accessible label of the "+N" button from the hidden count. */
+    showMoreLabel?: (hidden: number) => string;
+    /** Text of the collapse button under an expanded group. */
+    showLessLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AttachmentGroupProps extends AttachmentGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AttachmentGroupOwnProps> {
+}
+/**
+ * AttachmentGroup lays out the files on a sent message. One picture keeps
+ * its own aspect ratio; anything else becomes a grid of square
+ * AttachmentTiles. Past `max`, the tail collapses behind a "+N" cell laid
+ * over the next file, which expands the grid in place; a "Show fewer"
+ * button folds it again.
+ *
+ * Pressing a file opens it in an AttachmentViewer that steps through the
+ * whole group. A file that is no longer available stays on the message as
+ * a record and opens nothing.
+ */
+export declare const AttachmentGroup: React.ForwardRefExoticComponent<AttachmentGroupProps & React.RefAttributes<HTMLDivElement>>;

package/components/Attachment/AttachmentGroup.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useEffect } from "react";
+import { AttachmentTile } from "./AttachmentTile.js";
+import { formatBytes } from "./fileTypes.js";
+import { renderTypeMark } from "./typeMark.js";
+import { AttachmentViewer } from "./AttachmentViewer.js";
+import "./Attachment.css";
+const isPicture = (item) => item.status === "ready" && item.kind === "image" && Boolean(item.previewSrc);
+const AttachmentGroup = React.forwardRef(
+  ({
+    items,
+    align = "start",
+    max = 4,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    viewer = true,
+    onItemClick,
+    renderPreview,
+    onDownload,
+    onRetry,
+    size = "default",
+    label = "Attachments",
+    showMoreLabel = (hidden) => `Show ${hidden} more`,
+    showLessLabel = "Show fewer",
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-attachment-group";
+    const gridId = useId();
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const [viewing, setViewing] = useState(null);
+    const moreRef = useRef(null);
+    const lessRef = useRef(null);
+    const moveFocus = useRef(false);
+    const setOpen = (next) => {
+      moveFocus.current = true;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    };
+    useEffect(() => {
+      if (!moveFocus.current) return;
+      moveFocus.current = false;
+      (isOpen ? lessRef.current : moreRef.current)?.focus();
+    }, [isOpen]);
+    const overflowing = items.length > Math.max(1, max);
+    const visible = overflowing && !isOpen ? items.slice(0, Math.max(1, max) - 1) : items;
+    const hidden = items.length - visible.length;
+    const viewed = items.find((item) => item.id === viewing);
+    const clickHandler = (item) => {
+      const opens = viewer && item.status !== "unavailable";
+      if (!opens && !onItemClick) return void 0;
+      return () => {
+        onItemClick?.(item);
+        if (opens) setViewing(item.id);
+      };
+    };
+    const classes = [baseClass, `${baseClass}--${align}`, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    const single = items.length === 1 && isPicture(items[0]) ? items[0] : void 0;
+    let layout;
+    if (single) {
+      const onClick = clickHandler(single);
+      const image = /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: `${baseClass}__single-image`,
+          src: single.previewSrc,
+          alt: single.previewAlt ?? single.name,
+          width: single.width,
+          height: single.height
+        }
+      );
+      const badge = /* @__PURE__ */ jsx("span", { className: `${baseClass}__single-mark`, "aria-hidden": "true", children: renderTypeMark(single.name, single.kind, { form: "badge" }) });
+      layout = onClick ? /* @__PURE__ */ jsxs("button", { type: "button", className: `${baseClass}__single`, onClick, children: [
+        image,
+        badge
+      ] }) : /* @__PURE__ */ jsxs("span", { className: `${baseClass}__single`, children: [
+        image,
+        badge
+      ] });
+    } else {
+      layout = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "ul",
+          {
+            className: `${baseClass}__grid`,
+            id: gridId,
+            "aria-label": label,
+            "data-cells": visible.length + (hidden > 0 ? 1 : 0),
+            children: [
+              visible.map((item) => /* @__PURE__ */ jsx("li", { className: `${baseClass}__cell`, children: /* @__PURE__ */ jsx(
+                AttachmentTile,
+                {
+                  name: item.name,
+                  kind: item.kind,
+                  status: item.status,
+                  progress: item.progress,
+                  error: item.error,
+                  previewSrc: item.previewSrc,
+                  previewAlt: item.previewAlt,
+                  excerpt: item.excerpt,
+                  previewMark: true,
+                  meta: item.size === void 0 ? void 0 : formatBytes(item.size),
+                  size,
+                  onClick: clickHandler(item)
+                }
+              ) }, item.id)),
+              hidden > 0 && /* @__PURE__ */ jsxs("li", { className: `${baseClass}__cell ${baseClass}__cell--more`, children: [
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__peek`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  AttachmentTile,
+                  {
+                    name: items[visible.length].name,
+                    kind: items[visible.length].kind,
+                    previewSrc: items[visible.length].previewSrc,
+                    previewAlt: "",
+                    size
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    ref: moreRef,
+                    className: `${baseClass}__more`,
+                    "aria-expanded": false,
+                    "aria-controls": gridId,
+                    "aria-label": showMoreLabel(hidden),
+                    onClick: () => setOpen(true),
+                    children: [
+                      "+",
+                      hidden
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        overflowing && isOpen && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ref: lessRef,
+            className: `${baseClass}__less`,
+            "aria-expanded": true,
+            "aria-controls": gridId,
+            onClick: () => setOpen(false),
+            children: showLessLabel
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      layout,
+      viewer && /* @__PURE__ */ jsx(
+        AttachmentViewer,
+        {
+          open: viewed !== void 0,
+          onOpenChange: (next) => {
+            if (!next) setViewing(null);
+          },
+          items,
+          activeId: viewed?.id ?? items[0]?.id,
+          onActiveChange: setViewing,
+          renderPreview,
+          onDownload,
+          onRetry
+        }
+      )
+    ] });
+  }
+);
+AttachmentGroup.displayName = "AttachmentGroup";
+export {
+  AttachmentGroup
+};

package/components/Attachment/AttachmentTile.d.ts

@@ -0,0 +1,80 @@
+import { default as React } from 'react';
+import { AttachmentStatus, FileKind } from './fileTypes';
+export { FILE_KINDS, formatBytes, getFileExtension, getFileKind, getFileTypeLabel, matchesAccept, splitFileName, } from './fileTypes';
+export type { AttachmentItem, AttachmentStatus, FileKind, FileKindMeta, FileLike, } from './fileTypes';
+/** Props owned by AttachmentTile itself — everything else falls through to the root element. */
+type AttachmentTileOwnProps = {
+    /** File name, extension included. Truncates in the middle so the extension stays visible. */
+    name: string;
+    /**
+     * What kind of file it is, which picks the type mark: a coloured lettered
+     * glyph for the well-known formats, a neutral extension badge for the
+     * rest. Derive it with `getFileKind`.
+     */
+    kind?: FileKind;
+    /** Short uppercase label on the type mark. Defaults from the kind and the extension. */
+    typeLabel?: string;
+    /** Where the file is in its life. Anything but `ready` shows the name with a status line. */
+    status?: AttachmentStatus;
+    /** Upload progress, 0 to 100, reported to assistive technology while `uploading`. */
+    progress?: number;
+    /**
+     * Image that fills the tile while `ready`: an object URL for a picture, or
+     * a first page the host rendered for a document. A non-image kind keeps
+     * its type mark over the corner.
+     */
+    previewSrc?: string;
+    /** Alt text for the preview. Defaults to the file name. */
+    previewAlt?: string;
+    /**
+     * Whether the type mark sits over the corner of a preview. Defaults to on
+     * for a document's first page, which still has to say what format it is,
+     * and off for a picture, which is its own description. A sent message
+     * turns it on for pictures too.
+     */
+    previewMark?: boolean;
+    /** First lines of a pasted block, drawn as a faded excerpt filling the tile while `ready`. */
+    excerpt?: string;
+    /** Secondary line under the name while `ready`, e.g. "1.2 MB". Callers keep their own formatting. */
+    meta?: string;
+    /** Why the file failed. Replaces `errorLabel` on the status line. */
+    error?: string;
+    /**
+     * Tile size. Compact shrinks the square and drops the secondary line of a
+     * ready file. Unrelated to any native `size` attribute: the root is a div.
+     */
+    size?: 'default' | 'compact';
+    /** Click handler. Its presence makes the tile body a button. */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Remove handler. Its presence renders the corner remove button. */
+    onRemove?: () => void;
+    /** Status line while `uploading`. */
+    uploadingLabel?: string;
+    /** Status line while `error`, when no `error` message is given. */
+    errorLabel?: string;
+    /** Status line while `unavailable`. */
+    unavailableLabel?: string;
+    /** Accessible label for the remove button. Defaults to "Remove" and the file name. */
+    removeLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AttachmentTileProps extends AttachmentTileOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AttachmentTileOwnProps> {
+}
+/**
+ * AttachmentTile is one file as a square: a picture fills it, a well-known
+ * document format (PDF, spreadsheet, document, presentation) wears a
+ * coloured lettered mark, and every other file wears its extension as a
+ * neutral badge. Under the mark sit the name, truncated in the middle so
+ * the extension survives, and one secondary line.
+ *
+ * The same tile serves a composer's queue and a sent message. `status`
+ * swaps the mark for a spinner, an alert or an unavailable glyph and the
+ * secondary line for the matching words, so a file reads the same wherever
+ * it appears and whatever happened to it.
+ *
+ * The root is always a `<div>`; `onClick` turns the body into a `<button>`
+ * so click and remove coexist without nesting controls. No hooks, so it
+ * renders from a Server Component.
+ */
+export declare const AttachmentTile: React.ForwardRefExoticComponent<AttachmentTileProps & React.RefAttributes<HTMLDivElement>>;

package/components/Attachment/AttachmentTile.js

@@ -0,0 +1,143 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React from "react";
+import { FILE_KINDS, splitFileName } from "./fileTypes.js";
+import { formatBytes, getFileExtension, getFileKind, getFileTypeLabel, matchesAccept } from "./fileTypes.js";
+import { renderTypeMark } from "./typeMark.js";
+import "../../fonts/material-symbols.css";
+import "./Attachment.css";
+const AttachmentTile = React.forwardRef(
+  ({
+    name,
+    kind = "generic",
+    typeLabel,
+    status = "ready",
+    progress,
+    previewSrc,
+    previewAlt,
+    previewMark,
+    excerpt,
+    meta,
+    error,
+    size = "default",
+    onClick,
+    onRemove,
+    uploadingLabel = "Uploading…",
+    errorLabel = "Upload failed",
+    unavailableLabel = "Unavailable",
+    removeLabel,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-attachment-tile";
+    const ready = status === "ready";
+    const colored = FILE_KINDS[kind].colored;
+    const showPreview = ready && Boolean(previewSrc);
+    const showExcerpt = ready && !showPreview && Boolean(excerpt);
+    const classes = [
+      baseClass,
+      `${baseClass}--${size}`,
+      `${baseClass}--${status}`,
+      colored ? `${baseClass}--${kind}` : `${baseClass}--neutral`,
+      showPreview ? `${baseClass}--preview` : "",
+      showExcerpt ? `${baseClass}--excerpt` : "",
+      onClick ? `${baseClass}--clickable` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const typeMark = renderTypeMark(name, kind, { typeLabel });
+    const cornerMark = renderTypeMark(name, kind, { typeLabel, form: "badge" });
+    let mark = typeMark;
+    let secondary = meta;
+    if (status === "uploading") {
+      const value = progress === void 0 ? void 0 : Math.max(0, Math.min(100, Math.round(progress)));
+      mark = /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${baseClass}__spinner`,
+          role: "progressbar",
+          "aria-label": `Uploading ${name}`,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": value,
+          children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: `${baseClass}__spinner-track`,
+                cx: "12",
+                cy: "12",
+                r: "9",
+                strokeWidth: "1.75"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: `${baseClass}__spinner-arc`,
+                cx: "12",
+                cy: "12",
+                r: "9",
+                strokeWidth: "1.75",
+                strokeLinecap: "round"
+              }
+            )
+          ] })
+        }
+      );
+      secondary = uploadingLabel;
+    } else if (status === "error") {
+      mark = /* @__PURE__ */ jsx("span", { className: `${baseClass}__state material-symbols-rounded`, "aria-hidden": "true", children: "error" });
+      secondary = error ?? errorLabel;
+    } else if (status === "unavailable") {
+      mark = /* @__PURE__ */ jsx("span", { className: `${baseClass}__state material-symbols-rounded`, "aria-hidden": "true", children: "block" });
+      secondary = unavailableLabel;
+    }
+    const showSecondary = Boolean(secondary) && !(size === "compact" && ready);
+    const { head, tail } = splitFileName(name);
+    const stack = /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stack`, children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__mark`, children: mark }),
+      /* @__PURE__ */ jsxs("span", { className: `${baseClass}__name`, title: name, children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: name }),
+        head !== "" && /* @__PURE__ */ jsx("span", { className: `${baseClass}__name-head`, "aria-hidden": "true", children: head }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__name-tail`, "aria-hidden": "true", children: tail })
+      ] }),
+      showSecondary && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: secondary })
+    ] });
+    let content = stack;
+    if (showPreview) {
+      content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("img", { className: `${baseClass}__preview`, src: previewSrc, alt: previewAlt ?? name }),
+        (previewMark ?? kind !== "image") && /* @__PURE__ */ jsx("span", { className: `${baseClass}__corner`, children: cornerMark })
+      ] });
+    } else if (showExcerpt) {
+      content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: name }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__excerpt`, children: excerpt }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__corner`, children: cornerMark })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      onClick ? /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__body`, onClick, children: content }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__body`, children: content }),
+      onRemove && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${baseClass}__remove`,
+          onClick: onRemove,
+          "aria-label": removeLabel ?? `Remove ${name}`,
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+        }
+      )
+    ] });
+  }
+);
+AttachmentTile.displayName = "AttachmentTile";
+export {
+  AttachmentTile,
+  FILE_KINDS,
+  formatBytes,
+  getFileExtension,
+  getFileKind,
+  getFileTypeLabel,
+  matchesAccept,
+  splitFileName
+};

package/components/Attachment/AttachmentViewer.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { AttachmentItem } from './fileTypes';
+/** Props owned by AttachmentViewer itself — everything else falls through to the panel. */
+type AttachmentViewerOwnProps = {
+    /** Whether the viewer is open. */
+    open: boolean;
+    /** Fires when the viewer asks to close: the close button, Escape, or the backdrop. */
+    onOpenChange: (open: boolean) => void;
+    /** The files the viewer steps through, in order. */
+    items: AttachmentItem[];
+    /** Id of the file on show, for controlled use. Pair with `onActiveChange`. */
+    activeId?: string;
+    /** Id of the file shown first, for uncontrolled use. Defaults to the first item. */
+    defaultActiveId?: string;
+    /** Fires with the id of the file stepped to. */
+    onActiveChange?: (id: string) => void;
+    /**
+     * Draws a file the viewer cannot: the pages of a PDF, a media player, a
+     * rendered spreadsheet. Return nothing to fall back to the built-in view.
+     */
+    renderPreview?: (item: AttachmentItem) => React.ReactNode;
+    /** Fires with the file on show when Download is pressed. Its presence renders the buttons. */
+    onDownload?: (item: AttachmentItem) => void;
+    /** Fires with a file that failed to load when "Try again" is pressed. Its presence renders the button. */
+    onRetry?: (item: AttachmentItem) => void;
+    /** Whether Escape, the backdrop and the close button dismiss the viewer. */
+    dismissible?: boolean;
+    /** Text of the Download buttons. */
+    downloadLabel?: string;
+    /** Accessible label for the close button. */
+    closeLabel?: string;
+    /** Accessible label for the previous-file button. */
+    previousLabel?: string;
+    /** Accessible label for the next-file button. */
+    nextLabel?: string;
+    /** Text of the retry button. */
+    retryLabel?: string;
+    /** Headline when a file has nothing the viewer can draw. */
+    noPreviewLabel?: string;
+    /** Headline when a file failed to load or is no longer available. */
+    failedLabel?: string;
+    /** Sentence under `failedLabel`, when the file carries no error message of its own. */
+    failedDescription?: string;
+    /** Builds the position text, e.g. "2 of 5", from a one-based index and the total. */
+    formatPosition?: (position: number, total: number) => string;
+    /** Additional CSS classes — applied to the portal container, not the panel. */
+    className?: string;
+};
+export interface AttachmentViewerProps extends AttachmentViewerOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AttachmentViewerOwnProps> {
+}
+/**
+ * AttachmentViewer opens a file from a conversation: a centred dialog on a
+ * wide screen, a full-screen sheet on a narrow one. The header names the
+ * file with its type mark, size and position; the stage shows a picture, a
+ * host-drawn preview, or a plain statement that there is nothing to show;
+ * the footer steps through the rest of the message's files.
+ *
+ * The viewer draws pictures itself. Everything else is the host's to
+ * render through `renderPreview`, so the library carries no document
+ * renderer. A file that failed or has expired says so and offers
+ * "Try again" when the host can.
+ *
+ * Forwards a ref to the panel and spreads unrecognised props onto it.
+ */
+export declare const AttachmentViewer: React.ForwardRefExoticComponent<AttachmentViewerProps & React.RefAttributes<HTMLDivElement>>;
+export {};