@burtson-labs/ui 0.11.0 → 0.12.1

package/dist/components/composer.d.ts

@@ -27,12 +27,27 @@ export interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSub
     /** Extra controls left of the send button (model picker, tools). */
     actions?: React.ReactNode;
     label?: string;
+    /**
+     * Files the person picked, dropped on the composer or pasted. Setting it
+     * shows a paperclip button. The composer only hands the files over: the
+     * app uploads them and renders their state in `attachments` (an
+     * AttachmentTray), with `attachmentCount` and `canSubmit` for sending.
+     */
+    onAttach?: (files: File[]) => void;
+    /** File input `accept`, e.g. "image/*,.pdf". Dropped and pasted files are filtered too. */
+    accept?: string;
+    /** Allow several files at once. Default true. */
+    multiple?: boolean;
+    /** Accessible name of the attach button. */
+    attachLabel?: string;
 }
+/** Does `file` match an `accept` list ("image/*,.pdf,text/plain")? Empty accepts all. */
+export declare function acceptsFile(file: Pick<File, 'name' | 'type'>, accept?: string): boolean;
 /**
  * The message box: grows with its text, Enter sends, Shift+Enter adds a
  * line, and it never sends mid-composition (IME input).
  */
-declare function Composer({ onSubmit, onSubmitError, submitErrorText, value: controlled, onValueChange, streaming, onStop, disabled, placeholder, attachments, attachmentCount, canSubmit, actions, label, className, ...props }: ComposerProps): React.JSX.Element;
+declare function Composer({ onSubmit, onSubmitError, submitErrorText, value: controlled, onValueChange, streaming, onStop, disabled, placeholder, attachments, attachmentCount, canSubmit, actions, label, onAttach, accept, multiple, attachLabel, className, ...props }: ComposerProps): React.JSX.Element;
 export interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {
     items: string[];
     onSelect: (item: string) => void;

package/dist/components/composer.js

@@ -1,15 +1,33 @@
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import ArrowUp from "@burtson-labs/icons/react/arrow-up";
+import Paperclip from "@burtson-labs/icons/react/paperclip";
 import Square from "@burtson-labs/icons/react/square";
 //#region src/components/composer.tsx
+/** Does `file` match an `accept` list ("image/*,.pdf,text/plain")? Empty accepts all. */
+function acceptsFile(file, accept) {
+	if (!accept?.trim()) return true;
+	const name = file.name.toLowerCase();
+	const type = (file.type || "").toLowerCase();
+	return accept.split(",").map((a) => a.trim().toLowerCase()).filter(Boolean).some((rule) => rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule);
+}
 /**
 * The message box: grows with its text, Enter sends, Shift+Enter adds a
 * line, and it never sends mid-composition (IME input).
 */
-function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could not be sent. Your draft is saved here. Try again.", value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, attachmentCount = 0, canSubmit = true, actions, label = "Message", className, ...props }) {
+function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could not be sent. Your draft is saved here. Try again.", value: controlled, onValueChange, streaming = false, onStop, disabled = false, placeholder = "Ask anything…", attachments, attachmentCount = 0, canSubmit = true, actions, label = "Message", onAttach, accept, multiple = true, attachLabel = "Attach files", className, ...props }) {
+	const fileInput = React.useRef(null);
+	const [dragging, setDragging] = React.useState(false);
+	const dragDepth = React.useRef(0);
+	const attach = (list) => {
+		if (!onAttach || !list) return;
+		let files = Array.from(list).filter((f) => acceptsFile(f, accept));
+		if (!multiple) files = files.slice(0, 1);
+		if (files.length) onAttach(files);
+	};
+	const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
 	const [own, setOwn] = React.useState("");
 	const value = controlled ?? own;
 	const [pending, setPending] = React.useState(false);
@@ -51,13 +69,42 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 	};
 	return /* @__PURE__ */ jsxs("form", {
 		"data-slot": "composer",
+		"data-dragging": dragging || void 0,
 		onSubmit: (e) => {
 			e.preventDefault();
 			send();
 		},
-		className: cn("grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-ring/15 dark:bg-surface-raised", disabled && "opacity-60", className),
+		onDragEnter: (e) => {
+			if (!onAttach || disabled || !hasFiles(e)) return;
+			e.preventDefault();
+			dragDepth.current += 1;
+			setDragging(true);
+		},
+		onDragOver: (e) => {
+			if (!onAttach || disabled || !hasFiles(e)) return;
+			e.preventDefault();
+			e.dataTransfer.dropEffect = "copy";
+		},
+		onDragLeave: () => {
+			if (!onAttach) return;
+			dragDepth.current = Math.max(0, dragDepth.current - 1);
+			if (dragDepth.current === 0) setDragging(false);
+		},
+		onDrop: (e) => {
+			if (!onAttach || disabled) return;
+			e.preventDefault();
+			dragDepth.current = 0;
+			setDragging(false);
+			attach(e.dataTransfer?.files);
+		},
+		className: cn("relative grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-ring/15 dark:bg-surface-raised", "data-[dragging]:border-brand data-[dragging]:ring-[3px] data-[dragging]:ring-ring/20", disabled && "opacity-60", className),
 		...props,
 		children: [
+			dragging && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-1 z-10 grid place-items-center rounded-md border border-dashed border-brand/50 bg-brand-soft/80 text-sm font-medium text-brand-soft-foreground",
+				children: "Drop files to attach"
+			}),
 			/* @__PURE__ */ jsx("textarea", {
 				"aria-label": label,
 				rows: 1,
@@ -67,6 +114,14 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 				"aria-invalid": failed || void 0,
 				placeholder,
 				onChange: (e) => setValue(e.target.value),
+				onPaste: (e) => {
+					if (!onAttach) return;
+					const files = Array.from(e.clipboardData?.files ?? []);
+					if (files.length) {
+						e.preventDefault();
+						attach(files);
+					}
+				},
 				onKeyDown: (e) => {
 					if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.nativeEvent.keyCode !== 229) {
 						e.preventDefault();
@@ -87,25 +142,53 @@ function Composer({ onSubmit, onSubmitError, submitErrorText = "Message could no
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1",
-				children: [actions, /* @__PURE__ */ jsx("div", {
-					className: "ml-auto",
-					children: streaming ? /* @__PURE__ */ jsx(Button, {
+				children: [
+					onAttach && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+						ref: fileInput,
+						type: "file",
+						hidden: true,
+						tabIndex: -1,
+						accept,
+						multiple,
+						"data-slot": "composer-file-input",
+						onChange: (e) => {
+							attach(e.target.files);
+							e.target.value = "";
+						}
+					}), /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						size: "icon-sm",
-						variant: "secondary",
-						"aria-label": "Stop",
-						onClick: onStop,
-						disabled: !onStop || disabled,
-						children: /* @__PURE__ */ jsx(Square, { className: "fill-current" })
-					}) : /* @__PURE__ */ jsx(Button, {
-						type: "submit",
-						size: "icon-sm",
-						"aria-label": "Send",
-						loading: pending,
-						disabled: !canSend,
-						children: /* @__PURE__ */ jsx(ArrowUp, {})
+						variant: "ghost",
+						"aria-label": attachLabel,
+						title: attachLabel,
+						disabled,
+						onClick: () => fileInput.current?.click(),
+						className: "pointer-coarse:size-11",
+						children: /* @__PURE__ */ jsx(Paperclip, {})
+					})] }),
+					actions,
+					/* @__PURE__ */ jsx("div", {
+						className: "ml-auto",
+						children: streaming ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "icon-sm",
+							variant: "secondary",
+							"aria-label": "Stop",
+							className: "pointer-coarse:size-11",
+							onClick: onStop,
+							disabled: !onStop || disabled,
+							children: /* @__PURE__ */ jsx(Square, { className: "fill-current" })
+						}) : /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							size: "icon-sm",
+							"aria-label": "Send",
+							className: "pointer-coarse:size-11",
+							loading: pending,
+							disabled: !canSend,
+							children: /* @__PURE__ */ jsx(ArrowUp, {})
+						})
 					})
-				})]
+				]
 			})
 		]
 	});
@@ -127,6 +210,6 @@ function Suggestions({ items, onSelect, className, ...props }) {
 	});
 }
 //#endregion
-export { Composer, Suggestions };
+export { Composer, Suggestions, acceptsFile };
 
 //# sourceMappingURL=composer.js.map

package/dist/components/composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"composer.js","names":[],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /**\n   * Clears after success. Reject a returned promise to retain the draft. The\n   * text can be empty when `attachmentCount` allows an attachment-only send.\n   */\n  onSubmit: (text: string) => void | Promise<void>;\n  onSubmitError?: (error: unknown) => void;\n  submitErrorText?: string;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Attachments ready to send. Above zero, an empty message can be sent. */\n  attachmentCount?: number;\n  /**\n   * Extra gate on sending, e.g. false while an attachment is still parsing.\n   * Unlike `disabled`, the person can keep typing.\n   */\n  canSubmit?: boolean;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nfunction Composer({\n  onSubmit,\n  onSubmitError,\n  submitErrorText = 'Message could not be sent. Your draft is saved here. Try again.',\n  value: controlled,\n  onValueChange,\n  streaming = false,\n  onStop,\n  disabled = false,\n  placeholder = 'Ask anything…',\n  attachments,\n  attachmentCount = 0,\n  canSubmit = true,\n  actions,\n  label = 'Message',\n  className,\n  ...props\n}: ComposerProps) {\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const sending = React.useRef(false);\n  const latest = React.useRef(value);\n  const mounted = React.useRef(true);\n  const errorId = React.useId();\n  React.useEffect(() => {\n    latest.current = value;\n  }, [value]);\n  React.useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend =\n    canSubmit &&\n    !disabled &&\n    !streaming &&\n    !pending &&\n    (value.trim().length > 0 || attachmentCount > 0);\n  const send = async () => {\n    if (!canSend || sending.current) return;\n    const draft = value;\n    sending.current = true;\n    setFailed(false);\n    setPending(true);\n    try {\n      await onSubmit(draft.trim());\n      if (mounted.current && latest.current === draft) setValue('');\n    } catch (error) {\n      if (mounted.current) setFailed(true);\n      onSubmitError?.(error);\n    } finally {\n      sending.current = false;\n      if (mounted.current) setPending(false);\n    }\n  };\n\n  return (\n    <form\n      data-slot=\"composer\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        void send();\n      }}\n      className={cn(\n        'grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-ring/15 dark:bg-surface-raised',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled || pending}\n        aria-describedby={failed ? errorId : undefined}\n        aria-invalid={failed || undefined}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={(e) => {\n          if (\n            e.key === 'Enter' &&\n            !e.shiftKey &&\n            !e.nativeEvent.isComposing &&\n            e.nativeEvent.keyCode !== 229\n          ) {\n            e.preventDefault();\n            void send();\n          }\n        }}\n        className=\"field-sizing-content max-h-48 min-h-9 w-full resize-none bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      />\n      {failed && (\n        <p id={errorId} role=\"alert\" className=\"px-2 text-sm text-destructive\">\n          {submitErrorText}\n        </p>\n      )}\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              onClick={onStop}\n              disabled={!onStop || disabled}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"submit\"\n              size=\"icon-sm\"\n              aria-label=\"Send\"\n              loading={pending}\n              disabled={!canSend}\n            >\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n}\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nfunction Suggestions({ items, onSelect, className, ...props }: SuggestionsProps) {\n  return (\n    <div\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className=\"animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport { Composer, Suggestions };\n"],"mappings":"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"}
+{"version":3,"file":"composer.js","names":["_Fragment"],"sources":["../../src/components/composer.tsx"],"sourcesContent":["import ArrowUp from '@burtson-labs/icons/react/arrow-up';\nimport Paperclip from '@burtson-labs/icons/react/paperclip';\nimport Square from '@burtson-labs/icons/react/square';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button } from './button';\n\nexport interface ComposerProps extends Omit<React.ComponentProps<'form'>, 'onSubmit' | 'onChange'> {\n  /**\n   * Clears after success. Reject a returned promise to retain the draft. The\n   * text can be empty when `attachmentCount` allows an attachment-only send.\n   */\n  onSubmit: (text: string) => void | Promise<void>;\n  onSubmitError?: (error: unknown) => void;\n  submitErrorText?: string;\n  /** Controlled value; leave out to let the composer keep its own. */\n  value?: string;\n  onValueChange?: (value: string) => void;\n  /** While a reply streams, the send button becomes Stop. */\n  streaming?: boolean;\n  onStop?: () => void;\n  disabled?: boolean;\n  placeholder?: string;\n  /** Attachment chips or a file button, shown under the text. */\n  attachments?: React.ReactNode;\n  /** Attachments ready to send. Above zero, an empty message can be sent. */\n  attachmentCount?: number;\n  /**\n   * Extra gate on sending, e.g. false while an attachment is still parsing.\n   * Unlike `disabled`, the person can keep typing.\n   */\n  canSubmit?: boolean;\n  /** Extra controls left of the send button (model picker, tools). */\n  actions?: React.ReactNode;\n  label?: string;\n  /**\n   * Files the person picked, dropped on the composer or pasted. Setting it\n   * shows a paperclip button. The composer only hands the files over: the\n   * app uploads them and renders their state in `attachments` (an\n   * AttachmentTray), with `attachmentCount` and `canSubmit` for sending.\n   */\n  onAttach?: (files: File[]) => void;\n  /** File input `accept`, e.g. \"image/*,.pdf\". Dropped and pasted files are filtered too. */\n  accept?: string;\n  /** Allow several files at once. Default true. */\n  multiple?: boolean;\n  /** Accessible name of the attach button. */\n  attachLabel?: string;\n}\n\n/** Does `file` match an `accept` list (\"image/*,.pdf,text/plain\")? Empty accepts all. */\nexport function acceptsFile(file: Pick<File, 'name' | 'type'>, accept?: string): boolean {\n  if (!accept?.trim()) return true;\n  const name = file.name.toLowerCase();\n  const type = (file.type || '').toLowerCase();\n  return accept\n    .split(',')\n    .map((a) => a.trim().toLowerCase())\n    .filter(Boolean)\n    .some((rule) =>\n      rule.startsWith('.')\n        ? name.endsWith(rule)\n        : rule.endsWith('/*')\n          ? type.startsWith(rule.slice(0, -1))\n          : type === rule,\n    );\n}\n\n/**\n * The message box: grows with its text, Enter sends, Shift+Enter adds a\n * line, and it never sends mid-composition (IME input).\n */\nfunction Composer({\n  onSubmit,\n  onSubmitError,\n  submitErrorText = 'Message could not be sent. Your draft is saved here. Try again.',\n  value: controlled,\n  onValueChange,\n  streaming = false,\n  onStop,\n  disabled = false,\n  placeholder = 'Ask anything…',\n  attachments,\n  attachmentCount = 0,\n  canSubmit = true,\n  actions,\n  label = 'Message',\n  onAttach,\n  accept,\n  multiple = true,\n  attachLabel = 'Attach files',\n  className,\n  ...props\n}: ComposerProps) {\n  const fileInput = React.useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = React.useState(false);\n  const dragDepth = React.useRef(0);\n  const attach = (list: FileList | File[] | null | undefined) => {\n    if (!onAttach || !list) return;\n    let files = Array.from(list).filter((f) => acceptsFile(f, accept));\n    if (!multiple) files = files.slice(0, 1);\n    if (files.length) onAttach(files);\n  };\n  const hasFiles = (e: React.DragEvent) =>\n    Array.from(e.dataTransfer?.types ?? []).includes('Files');\n  const [own, setOwn] = React.useState('');\n  const value = controlled ?? own;\n  const [pending, setPending] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n  const sending = React.useRef(false);\n  const latest = React.useRef(value);\n  const mounted = React.useRef(true);\n  const errorId = React.useId();\n  React.useEffect(() => {\n    latest.current = value;\n  }, [value]);\n  React.useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const setValue = (v: string) => {\n    if (controlled === undefined) setOwn(v);\n    onValueChange?.(v);\n  };\n  const canSend =\n    canSubmit &&\n    !disabled &&\n    !streaming &&\n    !pending &&\n    (value.trim().length > 0 || attachmentCount > 0);\n  const send = async () => {\n    if (!canSend || sending.current) return;\n    const draft = value;\n    sending.current = true;\n    setFailed(false);\n    setPending(true);\n    try {\n      await onSubmit(draft.trim());\n      if (mounted.current && latest.current === draft) setValue('');\n    } catch (error) {\n      if (mounted.current) setFailed(true);\n      onSubmitError?.(error);\n    } finally {\n      sending.current = false;\n      if (mounted.current) setPending(false);\n    }\n  };\n\n  return (\n    <form\n      data-slot=\"composer\"\n      data-dragging={dragging || undefined}\n      onSubmit={(e) => {\n        e.preventDefault();\n        void send();\n      }}\n      onDragEnter={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        dragDepth.current += 1;\n        setDragging(true);\n      }}\n      onDragOver={(e) => {\n        if (!onAttach || disabled || !hasFiles(e)) return;\n        e.preventDefault();\n        e.dataTransfer.dropEffect = 'copy';\n      }}\n      onDragLeave={() => {\n        if (!onAttach) return;\n        dragDepth.current = Math.max(0, dragDepth.current - 1);\n        if (dragDepth.current === 0) setDragging(false);\n      }}\n      onDrop={(e) => {\n        if (!onAttach || disabled) return;\n        e.preventDefault();\n        dragDepth.current = 0;\n        setDragging(false);\n        attach(e.dataTransfer?.files);\n      }}\n      className={cn(\n        'relative grid gap-2 rounded-lg border border-input bg-surface p-2 shadow-xs transition-[border-color,box-shadow] focus-within:border-brand focus-within:ring-[3px] focus-within:ring-ring/15 dark:bg-surface-raised',\n        'data-[dragging]:border-brand data-[dragging]:ring-[3px] data-[dragging]:ring-ring/20',\n        disabled && 'opacity-60',\n        className,\n      )}\n      {...props}\n    >\n      {dragging && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-1 z-10 grid place-items-center rounded-md border border-dashed border-brand/50 bg-brand-soft/80 text-sm font-medium text-brand-soft-foreground\"\n        >\n          Drop files to attach\n        </div>\n      )}\n      <textarea\n        aria-label={label}\n        rows={1}\n        value={value}\n        disabled={disabled || pending}\n        aria-describedby={failed ? errorId : undefined}\n        aria-invalid={failed || undefined}\n        placeholder={placeholder}\n        onChange={(e) => setValue(e.target.value)}\n        onPaste={(e) => {\n          if (!onAttach) return;\n          const files = Array.from(e.clipboardData?.files ?? []);\n          // Only take over the paste when it carries files; text pastes as text.\n          if (files.length) {\n            e.preventDefault();\n            attach(files);\n          }\n        }}\n        onKeyDown={(e) => {\n          if (\n            e.key === 'Enter' &&\n            !e.shiftKey &&\n            !e.nativeEvent.isComposing &&\n            e.nativeEvent.keyCode !== 229\n          ) {\n            e.preventDefault();\n            void send();\n          }\n        }}\n        className=\"field-sizing-content max-h-48 min-h-9 w-full resize-none bg-transparent px-2 py-1.5 text-base sm:text-sm leading-6 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      />\n      {failed && (\n        <p id={errorId} role=\"alert\" className=\"px-2 text-sm text-destructive\">\n          {submitErrorText}\n        </p>\n      )}\n      {attachments && <div className=\"flex flex-wrap gap-1.5 px-1\">{attachments}</div>}\n      <div className=\"flex items-center gap-1\">\n        {onAttach && (\n          <>\n            <input\n              ref={fileInput}\n              type=\"file\"\n              hidden\n              tabIndex={-1}\n              accept={accept}\n              multiple={multiple}\n              data-slot=\"composer-file-input\"\n              onChange={(e) => {\n                attach(e.target.files);\n                // Let the same file be picked again after a removal.\n                e.target.value = '';\n              }}\n            />\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"ghost\"\n              aria-label={attachLabel}\n              title={attachLabel}\n              disabled={disabled}\n              onClick={() => fileInput.current?.click()}\n              className=\"pointer-coarse:size-11\"\n            >\n              <Paperclip />\n            </Button>\n          </>\n        )}\n        {actions}\n        <div className=\"ml-auto\">\n          {streaming ? (\n            <Button\n              type=\"button\"\n              size=\"icon-sm\"\n              variant=\"secondary\"\n              aria-label=\"Stop\"\n              className=\"pointer-coarse:size-11\"\n              onClick={onStop}\n              disabled={!onStop || disabled}\n            >\n              <Square className=\"fill-current\" />\n            </Button>\n          ) : (\n            <Button\n              type=\"submit\"\n              size=\"icon-sm\"\n              aria-label=\"Send\"\n              className=\"pointer-coarse:size-11\"\n              loading={pending}\n              disabled={!canSend}\n            >\n              <ArrowUp />\n            </Button>\n          )}\n        </div>\n      </div>\n    </form>\n  );\n}\n\nexport interface SuggestionsProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  items: string[];\n  onSelect: (item: string) => void;\n}\n\n/** Starter prompts as chips. */\nfunction Suggestions({ items, onSelect, className, ...props }: SuggestionsProps) {\n  return (\n    <div\n      data-slot=\"suggestions\"\n      role=\"group\"\n      aria-label=\"Suggestions\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <button\n          key={item}\n          type=\"button\"\n          onClick={() => onSelect(item)}\n          className=\"animate-in rounded-full border border-border-strong bg-surface px-3 py-1.5 text-[13px] text-foreground outline-none transition-colors hover:border-brand/40 hover:bg-brand-soft hover:text-brand-soft-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n        >\n          {item}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport { Composer, Suggestions };\n"],"mappings":"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"}

package/dist/components/data-table.js

@@ -7,8 +7,8 @@ import { Skeleton } from "./skeleton.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import ChevronsUpDown from "@burtson-labs/icons/react/chevrons-up-down";
 import Search from "@burtson-labs/icons/react/search";
+import ChevronsUpDown from "@burtson-labs/icons/react/chevrons-up-down";
 import ArrowUp from "@burtson-labs/icons/react/arrow-up";
 import ArrowDown from "@burtson-labs/icons/react/arrow-down";
 //#region src/components/data-table.tsx

package/dist/components/message-actions.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+export type MessageFeedback = 'up' | 'down' | null;
+export interface MessageActionsProps extends React.ComponentProps<'div'> {
+    /** Text for the copy button; leave out to hide it. */
+    copyText?: string;
+    onRegenerate?: () => void;
+    /** Edit a sent message (user turns). Pair with MessageEditor. */
+    onEdit?: () => void;
+    /** The current rating; controlled. */
+    feedback?: MessageFeedback;
+    /** Adds thumbs up and down. Clicking the chosen one again clears it (null). */
+    onFeedback?: (value: MessageFeedback) => void;
+}
+/**
+ * The row under a message: copy, regenerate, edit and a thumbs rating, as
+ * small icon buttons. Pass it to Message's `actions`, which shows it on
+ * hover and focus (always on touch screens).
+ */
+declare function MessageActions({ copyText, onRegenerate, onEdit, feedback, onFeedback, className, ...props }: MessageActionsProps): React.JSX.Element;
+export interface MessageEditorProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {
+    /** The text being edited. */
+    defaultValue: string;
+    /** Save and send the edited message again. */
+    onSubmit: (text: string) => void;
+    onCancel: () => void;
+    submitLabel?: string;
+}
+/**
+ * Edit-and-resend in place of a sent message. Enter sends (never mid-IME
+ * composition), Shift+Enter adds a line, Escape cancels.
+ */
+declare function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel, className, ...props }: MessageEditorProps): React.JSX.Element;
+export interface MessageFile {
+    name: string;
+    /** Bytes. */
+    size?: number;
+    /** MIME type; audio renders a player, images a thumbnail. */
+    type?: string;
+    /** Where to open or play it. */
+    href?: string;
+    /** Waveform peaks for audio (see computePeaks). */
+    peaks?: number[];
+    /** Seconds, for audio. */
+    duration?: number;
+    /** Transcript for audio. */
+    transcript?: React.ReactNode;
+}
+export interface MessageAttachmentsProps extends React.ComponentProps<'div'> {
+    files: MessageFile[];
+}
+/**
+ * Files sent with a message: voice notes play inline, images show a
+ * thumbnail, anything else is a named chip that opens the file.
+ */
+declare function MessageAttachments({ files, className, ...props }: MessageAttachmentsProps): React.JSX.Element | null;
+export { MessageActions, MessageAttachments, MessageEditor };

package/dist/components/message-actions.js

@@ -0,0 +1,181 @@
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { formatBytes } from "./attachment.js";
+import { VoiceMessage } from "./audio-player.js";
+import { IconButton } from "./icon-button.js";
+import { CopyButton } from "./copy-button.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import FileText from "@burtson-labs/icons/react/file-text";
+import Edit from "@burtson-labs/icons/react/edit";
+import RotateCcw from "@burtson-labs/icons/react/rotate-ccw";
+import ThumbsDown from "@burtson-labs/icons/react/thumbs-down";
+import ThumbsUp from "@burtson-labs/icons/react/thumbs-up";
+//#region src/components/message-actions.tsx
+/**
+* The row under a message: copy, regenerate, edit and a thumbs rating, as
+* small icon buttons. Pass it to Message's `actions`, which shows it on
+* hover and focus (always on touch screens).
+*/
+function MessageActions({ copyText, onRegenerate, onEdit, feedback = null, onFeedback, className, ...props }) {
+	const small = "size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-actions",
+		role: "toolbar",
+		"aria-label": "Message actions",
+		className: cn("flex items-center gap-0.5", className),
+		...props,
+		children: [
+			copyText !== void 0 && /* @__PURE__ */ jsx(CopyButton, {
+				value: copyText,
+				label: "Copy message",
+				className: small
+			}),
+			onEdit && /* @__PURE__ */ jsx(IconButton, {
+				variant: "ghost",
+				size: "icon-sm",
+				label: "Edit message",
+				onClick: onEdit,
+				className: small,
+				children: /* @__PURE__ */ jsx(Edit, {})
+			}),
+			onRegenerate && /* @__PURE__ */ jsx(IconButton, {
+				variant: "ghost",
+				size: "icon-sm",
+				label: "Regenerate response",
+				onClick: onRegenerate,
+				className: small,
+				children: /* @__PURE__ */ jsx(RotateCcw, {})
+			}),
+			onFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+				variant: "ghost",
+				size: "icon-sm",
+				label: "Good response",
+				"aria-pressed": feedback === "up",
+				onClick: () => onFeedback(feedback === "up" ? null : "up"),
+				className: cn(small, feedback === "up" && "text-brand hover:text-brand"),
+				children: /* @__PURE__ */ jsx(ThumbsUp, { className: cn(feedback === "up" && "fill-current") })
+			}), /* @__PURE__ */ jsx(IconButton, {
+				variant: "ghost",
+				size: "icon-sm",
+				label: "Bad response",
+				"aria-pressed": feedback === "down",
+				onClick: () => onFeedback(feedback === "down" ? null : "down"),
+				className: cn(small, feedback === "down" && "text-foreground"),
+				children: /* @__PURE__ */ jsx(ThumbsDown, { className: cn(feedback === "down" && "fill-current") })
+			})] })
+		]
+	});
+}
+/**
+* Edit-and-resend in place of a sent message. Enter sends (never mid-IME
+* composition), Shift+Enter adds a line, Escape cancels.
+*/
+function MessageEditor({ defaultValue, onSubmit, onCancel, submitLabel = "Send", className, ...props }) {
+	const [value, setValue] = React.useState(defaultValue);
+	const send = () => {
+		if (value.trim()) onSubmit(value.trim());
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		"data-slot": "message-editor",
+		onSubmit: (e) => {
+			e.preventDefault();
+			send();
+		},
+		className: cn("grid w-full max-w-[85%] gap-2 justify-self-end", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("textarea", {
+			"aria-label": "Edit message",
+			value,
+			autoFocus: true,
+			onChange: (e) => setValue(e.target.value),
+			onKeyDown: (e) => {
+				if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;
+				if (e.key === "Escape") {
+					e.preventDefault();
+					onCancel();
+				} else if (e.key === "Enter" && !e.shiftKey) {
+					e.preventDefault();
+					send();
+				}
+			},
+			className: "field-sizing-content max-h-60 min-h-16 w-full resize-none rounded-lg border border-brand bg-surface px-3 py-2 text-base leading-6 ring-[3px] ring-ring/15 outline-none sm:text-sm"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-end gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				onClick: onCancel,
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				size: "sm",
+				disabled: !value.trim(),
+				children: submitLabel
+			})]
+		})]
+	});
+}
+/**
+* Files sent with a message: voice notes play inline, images show a
+* thumbnail, anything else is a named chip that opens the file.
+*/
+function MessageAttachments({ files, className, ...props }) {
+	if (!files.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-attachments",
+		className: cn("flex flex-wrap gap-2", className),
+		...props,
+		children: files.map((f, i) => {
+			const type = f.type ?? "";
+			if (type.startsWith("audio/") && f.href) return /* @__PURE__ */ jsx(VoiceMessage, {
+				src: f.href,
+				peaks: f.peaks,
+				duration: f.duration,
+				transcript: f.transcript,
+				title: f.name
+			}, `${f.name}-${i}`);
+			if (type.startsWith("image/") && f.href) return /* @__PURE__ */ jsx("a", {
+				href: f.href,
+				target: "_blank",
+				rel: "noreferrer",
+				className: "block overflow-hidden rounded-lg border outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20",
+				children: /* @__PURE__ */ jsx("img", {
+					src: f.href,
+					alt: f.name,
+					className: "h-28 w-auto max-w-56 object-cover"
+				})
+			}, `${f.name}-${i}`);
+			const chip = /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(FileText, {
+					"aria-hidden": true,
+					className: "size-4 shrink-0 text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate",
+					children: f.name
+				}),
+				f.size !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-xs text-muted-foreground",
+					children: formatBytes(f.size)
+				})
+			] });
+			const chipClass = "inline-flex max-w-64 items-center gap-2 rounded-md border bg-surface px-2.5 py-1.5 text-sm";
+			return f.href ? /* @__PURE__ */ jsx("a", {
+				href: f.href,
+				target: "_blank",
+				rel: "noreferrer",
+				className: cn(chipClass, "outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20"),
+				children: chip
+			}, `${f.name}-${i}`) : /* @__PURE__ */ jsx("span", {
+				className: chipClass,
+				children: chip
+			}, `${f.name}-${i}`);
+		})
+	});
+}
+//#endregion
+export { MessageActions, MessageAttachments, MessageEditor };
+
+//# sourceMappingURL=message-actions.js.map

package/dist/components/message-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-actions.js","names":["_Fragment"],"sources":["../../src/components/message-actions.tsx"],"sourcesContent":["import Edit from '@burtson-labs/icons/react/edit';\nimport FileText from '@burtson-labs/icons/react/file-text';\nimport RotateCcw from '@burtson-labs/icons/react/rotate-ccw';\nimport ThumbsDown from '@burtson-labs/icons/react/thumbs-down';\nimport ThumbsUp from '@burtson-labs/icons/react/thumbs-up';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { formatBytes } from './attachment';\nimport { VoiceMessage } from './audio-player';\nimport { Button } from './button';\nimport { CopyButton } from './copy-button';\nimport { IconButton } from './icon-button';\n\nexport type MessageFeedback = 'up' | 'down' | null;\n\nexport interface MessageActionsProps extends React.ComponentProps<'div'> {\n  /** Text for the copy button; leave out to hide it. */\n  copyText?: string;\n  onRegenerate?: () => void;\n  /** Edit a sent message (user turns). Pair with MessageEditor. */\n  onEdit?: () => void;\n  /** The current rating; controlled. */\n  feedback?: MessageFeedback;\n  /** Adds thumbs up and down. Clicking the chosen one again clears it (null). */\n  onFeedback?: (value: MessageFeedback) => void;\n}\n\n/**\n * The row under a message: copy, regenerate, edit and a thumbs rating, as\n * small icon buttons. Pass it to Message's `actions`, which shows it on\n * hover and focus (always on touch screens).\n */\nfunction MessageActions({\n  copyText,\n  onRegenerate,\n  onEdit,\n  feedback = null,\n  onFeedback,\n  className,\n  ...props\n}: MessageActionsProps) {\n  const small = 'size-7 text-muted-foreground hover:text-foreground pointer-coarse:size-10';\n  return (\n    <div\n      data-slot=\"message-actions\"\n      role=\"toolbar\"\n      aria-label=\"Message actions\"\n      className={cn('flex items-center gap-0.5', className)}\n      {...props}\n    >\n      {copyText !== undefined && (\n        <CopyButton value={copyText} label=\"Copy message\" className={small} />\n      )}\n      {onEdit && (\n        <IconButton\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          label=\"Edit message\"\n          onClick={onEdit}\n          className={small}\n        >\n          <Edit />\n        </IconButton>\n      )}\n      {onRegenerate && (\n        <IconButton\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          label=\"Regenerate response\"\n          onClick={onRegenerate}\n          className={small}\n        >\n          <RotateCcw />\n        </IconButton>\n      )}\n      {onFeedback && (\n        <>\n          <IconButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            label=\"Good response\"\n            aria-pressed={feedback === 'up'}\n            onClick={() => onFeedback(feedback === 'up' ? null : 'up')}\n            className={cn(small, feedback === 'up' && 'text-brand hover:text-brand')}\n          >\n            <ThumbsUp className={cn(feedback === 'up' && 'fill-current')} />\n          </IconButton>\n          <IconButton\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            label=\"Bad response\"\n            aria-pressed={feedback === 'down'}\n            onClick={() => onFeedback(feedback === 'down' ? null : 'down')}\n            className={cn(small, feedback === 'down' && 'text-foreground')}\n          >\n            <ThumbsDown className={cn(feedback === 'down' && 'fill-current')} />\n          </IconButton>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface MessageEditorProps extends Omit<React.ComponentProps<'form'>, 'onSubmit'> {\n  /** The text being edited. */\n  defaultValue: string;\n  /** Save and send the edited message again. */\n  onSubmit: (text: string) => void;\n  onCancel: () => void;\n  submitLabel?: string;\n}\n\n/**\n * Edit-and-resend in place of a sent message. Enter sends (never mid-IME\n * composition), Shift+Enter adds a line, Escape cancels.\n */\nfunction MessageEditor({\n  defaultValue,\n  onSubmit,\n  onCancel,\n  submitLabel = 'Send',\n  className,\n  ...props\n}: MessageEditorProps) {\n  const [value, setValue] = React.useState(defaultValue);\n  const send = () => {\n    if (value.trim()) onSubmit(value.trim());\n  };\n  return (\n    <form\n      data-slot=\"message-editor\"\n      onSubmit={(e) => {\n        e.preventDefault();\n        send();\n      }}\n      className={cn('grid w-full max-w-[85%] gap-2 justify-self-end', className)}\n      {...props}\n    >\n      <textarea\n        aria-label=\"Edit message\"\n        value={value}\n        // eslint-disable-next-line jsx-a11y/no-autofocus -- editing was just asked for\n        autoFocus\n        onChange={(e) => setValue(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229) return;\n          if (e.key === 'Escape') {\n            e.preventDefault();\n            onCancel();\n          } else if (e.key === 'Enter' && !e.shiftKey) {\n            e.preventDefault();\n            send();\n          }\n        }}\n        className=\"field-sizing-content max-h-60 min-h-16 w-full resize-none rounded-lg border border-brand bg-surface px-3 py-2 text-base leading-6 ring-[3px] ring-ring/15 outline-none sm:text-sm\"\n      />\n      <div className=\"flex justify-end gap-2\">\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button type=\"submit\" size=\"sm\" disabled={!value.trim()}>\n          {submitLabel}\n        </Button>\n      </div>\n    </form>\n  );\n}\n\nexport interface MessageFile {\n  name: string;\n  /** Bytes. */\n  size?: number;\n  /** MIME type; audio renders a player, images a thumbnail. */\n  type?: string;\n  /** Where to open or play it. */\n  href?: string;\n  /** Waveform peaks for audio (see computePeaks). */\n  peaks?: number[];\n  /** Seconds, for audio. */\n  duration?: number;\n  /** Transcript for audio. */\n  transcript?: React.ReactNode;\n}\n\nexport interface MessageAttachmentsProps extends React.ComponentProps<'div'> {\n  files: MessageFile[];\n}\n\n/**\n * Files sent with a message: voice notes play inline, images show a\n * thumbnail, anything else is a named chip that opens the file.\n */\nfunction MessageAttachments({ files, className, ...props }: MessageAttachmentsProps) {\n  if (!files.length) return null;\n  return (\n    <div\n      data-slot=\"message-attachments\"\n      className={cn('flex flex-wrap gap-2', className)}\n      {...props}\n    >\n      {files.map((f, i) => {\n        const type = f.type ?? '';\n        if (type.startsWith('audio/') && f.href) {\n          return (\n            <VoiceMessage\n              key={`${f.name}-${i}`}\n              src={f.href}\n              peaks={f.peaks}\n              duration={f.duration}\n              transcript={f.transcript}\n              title={f.name}\n            />\n          );\n        }\n        if (type.startsWith('image/') && f.href) {\n          return (\n            <a\n              key={`${f.name}-${i}`}\n              href={f.href}\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              className=\"block overflow-hidden rounded-lg border outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20\"\n            >\n              <img src={f.href} alt={f.name} className=\"h-28 w-auto max-w-56 object-cover\" />\n            </a>\n          );\n        }\n        const chip = (\n          <>\n            <FileText aria-hidden className=\"size-4 shrink-0 text-muted-foreground\" />\n            <span className=\"min-w-0 truncate\">{f.name}</span>\n            {f.size !== undefined && (\n              <span className=\"shrink-0 text-xs text-muted-foreground\">{formatBytes(f.size)}</span>\n            )}\n          </>\n        );\n        const chipClass =\n          'inline-flex max-w-64 items-center gap-2 rounded-md border bg-surface px-2.5 py-1.5 text-sm';\n        return f.href ? (\n          <a\n            key={`${f.name}-${i}`}\n            href={f.href}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className={cn(\n              chipClass,\n              'outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20',\n            )}\n          >\n            {chip}\n          </a>\n        ) : (\n          <span key={`${f.name}-${i}`} className={chipClass}>\n            {chip}\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { MessageActions, MessageAttachments, MessageEditor };\n"],"mappings":"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"}

package/dist/components/secret-input.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import { Input } from "./input.js";
 import { IconButton } from "./icon-button.js";
+import { Input } from "./input.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Eye from "@burtson-labs/icons/react/eye";

package/dist/components/select.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import { fieldClasses } from "./input.js";
 import { surfaceClasses } from "./popover.js";
+import { fieldClasses } from "./input.js";
 import ChevronDown from "@burtson-labs/icons/react/chevron-down";
 import { Select } from "radix-ui";
 import "react";

package/dist/components/voice-recorder.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export type VoiceRecorderState = 'idle' | 'requesting' | 'recording' | 'paused' | 'denied' | 'unsupported' | 'error';
+export interface VoiceRecording {
+    blob: Blob;
+    mimeType: string;
+    durationMs: number;
+}
+export interface VoiceRecorderProps extends React.ComponentProps<'div'> {
+    /** The finished recording, after Stop. */
+    onRecorded: (recording: VoiceRecording) => void;
+    onCancel?: () => void;
+    onStateChange?: (state: VoiceRecorderState) => void;
+    /** Stops by itself at this length. Default 5 minutes. */
+    maxDurationMs?: number;
+    /** Preferred container, used when the browser supports it (e.g. "audio/webm"). */
+    mimeType?: string;
+    /** Accessible name of the record button. */
+    label?: string;
+}
+/**
+ * A microphone control for a composer: tap to record, then pause, stop to
+ * keep the clip or discard it. While recording it shows a live level meter
+ * and the elapsed time, in the recording colour (a state, not an error).
+ * When the browser can't record or the microphone is blocked it says so and
+ * how to fix it.
+ */
+declare function VoiceRecorder({ onRecorded, onCancel, onStateChange, maxDurationMs, mimeType, label, className, ...props }: VoiceRecorderProps): React.JSX.Element;
+export { VoiceRecorder };