@sero-ai/ui 0.3.0 → 0.3.2

package/dist/components/ai-elements/prompt-input.js

@@ -0,0 +1,306 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { InputGroup } from "../ui/input-group";
+import { cn } from "../../lib/utils";
+import { nanoid } from "nanoid";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  useOptionalPromptInputController,
+  LocalAttachmentsContext,
+  LocalReferencedSourcesContext
+} from "./prompt-input-context";
+export * from "./prompt-input-context";
+export * from "./prompt-input-textarea";
+export * from "./prompt-input-elements";
+const convertBlobUrlToDataUrl = async (url) => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.onerror = () => resolve(null);
+      reader.readAsDataURL(blob);
+    });
+  } catch {
+    return null;
+  }
+};
+const PromptInput = ({
+  className,
+  accept,
+  multiple,
+  globalDrop,
+  syncHiddenInput,
+  maxFiles,
+  maxFileSize,
+  onError,
+  onSubmit,
+  children,
+  ...props
+}) => {
+  const controller = useOptionalPromptInputController();
+  const usingProvider = !!controller;
+  const inputRef = useRef(null);
+  const formRef = useRef(null);
+  const [items, setItems] = useState([]);
+  const files = usingProvider ? controller.attachments.files : items;
+  const [referencedSources, setReferencedSources] = useState([]);
+  const filesRef = useRef(files);
+  useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  const openFileDialogLocal = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+  const matchesAccept = useCallback(
+    (f) => {
+      if (!accept || accept.trim() === "") return true;
+      const patterns = accept.split(",").map((s) => s.trim()).filter(Boolean);
+      return patterns.some((pattern) => {
+        if (pattern.endsWith("/*")) {
+          const prefix = pattern.slice(0, -1);
+          return f.type.startsWith(prefix);
+        }
+        return f.type === pattern;
+      });
+    },
+    [accept]
+  );
+  const addLocal = useCallback(
+    (fileList) => {
+      const incoming = [...fileList];
+      const accepted = incoming.filter((f) => matchesAccept(f));
+      if (incoming.length && accepted.length === 0) {
+        onError?.({ code: "accept", message: "No files match the accepted types." });
+        return;
+      }
+      const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+      const sized = accepted.filter(withinSize);
+      if (accepted.length > 0 && sized.length === 0) {
+        onError?.({ code: "max_file_size", message: "All files exceed the maximum size." });
+        return;
+      }
+      setItems((prev) => {
+        const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - prev.length) : void 0;
+        const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+        if (typeof capacity === "number" && sized.length > capacity) {
+          onError?.({ code: "max_files", message: "Too many files. Some were not added." });
+        }
+        const next = [];
+        for (const file of capped) {
+          next.push({ filename: file.name, id: nanoid(), mediaType: file.type, type: "file", url: URL.createObjectURL(file) });
+        }
+        return [...prev, ...next];
+      });
+    },
+    [matchesAccept, maxFiles, maxFileSize, onError]
+  );
+  const removeLocal = useCallback(
+    (id) => setItems((prev) => {
+      const found = prev.find((file) => file.id === id);
+      if (found?.url) URL.revokeObjectURL(found.url);
+      return prev.filter((file) => file.id !== id);
+    }),
+    []
+  );
+  const addWithProviderValidation = useCallback(
+    (fileList) => {
+      const incoming = [...fileList];
+      const accepted = incoming.filter((f) => matchesAccept(f));
+      if (incoming.length && accepted.length === 0) {
+        onError?.({ code: "accept", message: "No files match the accepted types." });
+        return;
+      }
+      const withinSize = (f) => maxFileSize ? f.size <= maxFileSize : true;
+      const sized = accepted.filter(withinSize);
+      if (accepted.length > 0 && sized.length === 0) {
+        onError?.({ code: "max_file_size", message: "All files exceed the maximum size." });
+        return;
+      }
+      const capacity = typeof maxFiles === "number" ? Math.max(0, maxFiles - files.length) : void 0;
+      const capped = typeof capacity === "number" ? sized.slice(0, capacity) : sized;
+      if (typeof capacity === "number" && sized.length > capacity) {
+        onError?.({ code: "max_files", message: "Too many files. Some were not added." });
+      }
+      if (capped.length > 0) controller?.attachments.add(capped);
+    },
+    [matchesAccept, maxFileSize, maxFiles, onError, files.length, controller]
+  );
+  const clearAttachments = useCallback(
+    () => usingProvider ? controller?.attachments.clear() : setItems((prev) => {
+      for (const file of prev) {
+        if (file.url) URL.revokeObjectURL(file.url);
+      }
+      return [];
+    }),
+    [usingProvider, controller]
+  );
+  const clearReferencedSources = useCallback(() => setReferencedSources([]), []);
+  const add = usingProvider ? addWithProviderValidation : addLocal;
+  const remove = usingProvider ? controller.attachments.remove : removeLocal;
+  const openFileDialog = usingProvider ? controller.attachments.openFileDialog : openFileDialogLocal;
+  const clear = useCallback(() => {
+    clearAttachments();
+    clearReferencedSources();
+  }, [clearAttachments, clearReferencedSources]);
+  useEffect(() => {
+    if (!usingProvider) return;
+    controller.__registerFileInput(inputRef, () => inputRef.current?.click());
+  }, [usingProvider, controller]);
+  useEffect(() => {
+    if (syncHiddenInput && inputRef.current && files.length === 0) {
+      inputRef.current.value = "";
+    }
+  }, [files, syncHiddenInput]);
+  useEffect(() => {
+    const form = formRef.current;
+    if (!form || globalDrop) return;
+    const onDragOver = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+    };
+    const onDrop = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+    };
+    form.addEventListener("dragover", onDragOver);
+    form.addEventListener("drop", onDrop);
+    return () => {
+      form.removeEventListener("dragover", onDragOver);
+      form.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  useEffect(() => {
+    if (!globalDrop) return;
+    const onDragOver = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+    };
+    const onDrop = (e) => {
+      if (e.dataTransfer?.types?.includes("Files")) e.preventDefault();
+      if (e.dataTransfer?.files && e.dataTransfer.files.length > 0) add(e.dataTransfer.files);
+    };
+    document.addEventListener("dragover", onDragOver);
+    document.addEventListener("drop", onDrop);
+    return () => {
+      document.removeEventListener("dragover", onDragOver);
+      document.removeEventListener("drop", onDrop);
+    };
+  }, [add, globalDrop]);
+  useEffect(
+    () => () => {
+      if (!usingProvider) {
+        for (const f of filesRef.current) {
+          if (f.url) URL.revokeObjectURL(f.url);
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- cleanup only on unmount; filesRef always current
+    [usingProvider]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      if (event.currentTarget.files) add(event.currentTarget.files);
+      event.currentTarget.value = "";
+    },
+    [add]
+  );
+  const attachmentsCtx = useMemo(
+    () => ({
+      add,
+      clear: clearAttachments,
+      fileInputRef: inputRef,
+      files: files.map((item) => ({ ...item, id: item.id })),
+      openFileDialog,
+      remove
+    }),
+    [files, add, remove, clearAttachments, openFileDialog]
+  );
+  const refsCtx = useMemo(
+    () => ({
+      add: (incoming) => {
+        const array = Array.isArray(incoming) ? incoming : [incoming];
+        setReferencedSources((prev) => [
+          ...prev,
+          ...array.map((s) => ({ ...s, id: nanoid() }))
+        ]);
+      },
+      clear: clearReferencedSources,
+      remove: (id) => {
+        setReferencedSources((prev) => prev.filter((s) => s.id !== id));
+      },
+      sources: referencedSources
+    }),
+    [referencedSources, clearReferencedSources]
+  );
+  const handleSubmit = useCallback(
+    async (event) => {
+      event.preventDefault();
+      const form = event.currentTarget;
+      const text = usingProvider ? controller.textInput.value : (() => {
+        const formData = new FormData(form);
+        return formData.get("message") || "";
+      })();
+      if (!usingProvider) form.reset();
+      try {
+        const convertedFiles = await Promise.all(
+          files.map(async ({ id: _id, ...item }) => {
+            if (item.url?.startsWith("blob:")) {
+              const dataUrl = await convertBlobUrlToDataUrl(item.url);
+              return { ...item, url: dataUrl ?? item.url };
+            }
+            return item;
+          })
+        );
+        const result = onSubmit({ files: convertedFiles, text }, event);
+        if (result instanceof Promise) {
+          try {
+            await result;
+            clear();
+            if (usingProvider) controller.textInput.clear();
+          } catch {
+          }
+        } else {
+          clear();
+          if (usingProvider) controller.textInput.clear();
+        }
+      } catch {
+      }
+    },
+    [usingProvider, controller, files, onSubmit, clear]
+  );
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        accept,
+        "aria-label": "Upload files",
+        className: "hidden",
+        multiple,
+        onChange: handleChange,
+        ref: inputRef,
+        title: "Upload files",
+        type: "file"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "form",
+      {
+        className: cn("w-full", className),
+        onSubmit: handleSubmit,
+        ref: formRef,
+        ...props,
+        children: /* @__PURE__ */ jsx(InputGroup, { className: "overflow-hidden", children })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(LocalAttachmentsContext.Provider, { value: attachmentsCtx, children: /* @__PURE__ */ jsx(LocalReferencedSourcesContext.Provider, { value: refsCtx, children: inner }) });
+};
+export {
+  PromptInput
+};

package/dist/components/ai-elements/queue.cjs

@@ -0,0 +1,193 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _button = require('../ui/button');
+
+
+
+
+var _collapsible = require('../ui/collapsible');
+var _scrollarea = require('../ui/scroll-area');
+var _utils = require('../../lib/utils');
+var _lucidereact = require('lucide-react');
+const QueueItem = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "li",
+  {
+    className: _utils.cn.call(void 0, 
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      className
+    ),
+    ...props
+  }
+);
+const QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "span",
+  {
+    className: _utils.cn.call(void 0, 
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed ? "border-muted-foreground/20 bg-muted-foreground/10" : "border-muted-foreground/50",
+      className
+    ),
+    ...props
+  }
+);
+const QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "span",
+  {
+    className: _utils.cn.call(void 0, 
+      "line-clamp-1 grow break-words",
+      completed ? "text-muted-foreground/50 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+const QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "ml-6 text-xs",
+      completed ? "text-muted-foreground/40 line-through" : "text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+);
+const QueueItemActions = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "flex gap-1", className), ...props });
+const QueueItemAction = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _button.Button,
+  {
+    className: _utils.cn.call(void 0, 
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className
+    ),
+    size: "icon",
+    type: "button",
+    variant: "ghost",
+    ...props
+  }
+);
+const QueueItemAttachment = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _utils.cn.call(void 0, "mt-1 flex flex-wrap gap-2", className), ...props });
+const QueueItemImage = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "img",
+  {
+    alt: "",
+    className: _utils.cn.call(void 0, "size-8 rounded border object-cover", className),
+    height: 32,
+    width: 32,
+    ...props
+  }
+);
+const QueueItemFile = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  "span",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.PaperclipIcon, { size: 12 }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "max-w-[100px] truncate", children })
+    ]
+  }
+);
+const QueueList = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _scrollarea.ScrollArea, { className: _utils.cn.call(void 0, "mt-2 -mb-1", className), ...props, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "max-h-40 pr-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { children }) }) });
+const QueueSection = ({
+  className,
+  defaultOpen = true,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.Collapsible, { className: _utils.cn.call(void 0, className), defaultOpen, ...props });
+const QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "button",
+  {
+    className: _utils.cn.call(void 0, 
+      "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+      className
+    ),
+    type: "button",
+    ...props,
+    children
+  }
+) });
+const QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: _utils.cn.call(void 0, "flex items-center gap-2", className), ...props, children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDownIcon, { className: "size-4 transition-transform group-data-[state=closed]:-rotate-90" }),
+  icon,
+  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+    count,
+    " ",
+    label
+  ] })
+] });
+const QueueSectionContent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _collapsible.CollapsibleContent, { className: _utils.cn.call(void 0, className), ...props });
+const Queue = ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className
+    ),
+    ...props
+  }
+);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Queue = Queue; exports.QueueItem = QueueItem; exports.QueueItemAction = QueueItemAction; exports.QueueItemActions = QueueItemActions; exports.QueueItemAttachment = QueueItemAttachment; exports.QueueItemContent = QueueItemContent; exports.QueueItemDescription = QueueItemDescription; exports.QueueItemFile = QueueItemFile; exports.QueueItemImage = QueueItemImage; exports.QueueItemIndicator = QueueItemIndicator; exports.QueueList = QueueList; exports.QueueSection = QueueSection; exports.QueueSectionContent = QueueSectionContent; exports.QueueSectionLabel = QueueSectionLabel; exports.QueueSectionTrigger = QueueSectionTrigger;

package/dist/components/ai-elements/queue.d.cts

@@ -0,0 +1,68 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Button } from '../ui/button.cjs';
+import { Collapsible, CollapsibleContent } from '../ui/collapsible.cjs';
+import { ScrollArea } from '../ui/scroll-area.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+interface QueueMessagePart {
+    type: string;
+    text?: string;
+    url?: string;
+    filename?: string;
+    mediaType?: string;
+}
+interface QueueMessage {
+    id: string;
+    parts: QueueMessagePart[];
+}
+interface QueueTodo {
+    id: string;
+    title: string;
+    description?: string;
+    status?: "pending" | "completed";
+}
+type QueueItemProps = ComponentProps<"li">;
+declare const QueueItem: ({ className, ...props }: QueueItemProps) => react_jsx_runtime.JSX.Element;
+type QueueItemIndicatorProps = ComponentProps<"span"> & {
+    completed?: boolean;
+};
+declare const QueueItemIndicator: ({ completed, className, ...props }: QueueItemIndicatorProps) => react_jsx_runtime.JSX.Element;
+type QueueItemContentProps = ComponentProps<"span"> & {
+    completed?: boolean;
+};
+declare const QueueItemContent: ({ completed, className, ...props }: QueueItemContentProps) => react_jsx_runtime.JSX.Element;
+type QueueItemDescriptionProps = ComponentProps<"div"> & {
+    completed?: boolean;
+};
+declare const QueueItemDescription: ({ completed, className, ...props }: QueueItemDescriptionProps) => react_jsx_runtime.JSX.Element;
+type QueueItemActionsProps = ComponentProps<"div">;
+declare const QueueItemActions: ({ className, ...props }: QueueItemActionsProps) => react_jsx_runtime.JSX.Element;
+type QueueItemActionProps = Omit<ComponentProps<typeof Button>, "variant" | "size">;
+declare const QueueItemAction: ({ className, ...props }: QueueItemActionProps) => react_jsx_runtime.JSX.Element;
+type QueueItemAttachmentProps = ComponentProps<"div">;
+declare const QueueItemAttachment: ({ className, ...props }: QueueItemAttachmentProps) => react_jsx_runtime.JSX.Element;
+type QueueItemImageProps = ComponentProps<"img">;
+declare const QueueItemImage: ({ className, ...props }: QueueItemImageProps) => react_jsx_runtime.JSX.Element;
+type QueueItemFileProps = ComponentProps<"span">;
+declare const QueueItemFile: ({ children, className, ...props }: QueueItemFileProps) => react_jsx_runtime.JSX.Element;
+type QueueListProps = ComponentProps<typeof ScrollArea>;
+declare const QueueList: ({ children, className, ...props }: QueueListProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionProps = ComponentProps<typeof Collapsible>;
+declare const QueueSection: ({ className, defaultOpen, ...props }: QueueSectionProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionTriggerProps = ComponentProps<"button">;
+declare const QueueSectionTrigger: ({ children, className, ...props }: QueueSectionTriggerProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionLabelProps = ComponentProps<"span"> & {
+    count?: number;
+    label: string;
+    icon?: React.ReactNode;
+};
+declare const QueueSectionLabel: ({ count, label, icon, className, ...props }: QueueSectionLabelProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const QueueSectionContent: ({ className, ...props }: QueueSectionContentProps) => react_jsx_runtime.JSX.Element;
+type QueueProps = ComponentProps<"div">;
+declare const Queue: ({ className, ...props }: QueueProps) => react_jsx_runtime.JSX.Element;
+
+export { Queue, QueueItem, QueueItemAction, type QueueItemActionProps, QueueItemActions, type QueueItemActionsProps, QueueItemAttachment, type QueueItemAttachmentProps, QueueItemContent, type QueueItemContentProps, QueueItemDescription, type QueueItemDescriptionProps, QueueItemFile, type QueueItemFileProps, QueueItemImage, type QueueItemImageProps, QueueItemIndicator, type QueueItemIndicatorProps, type QueueItemProps, QueueList, type QueueListProps, type QueueMessage, type QueueMessagePart, type QueueProps, QueueSection, QueueSectionContent, type QueueSectionContentProps, QueueSectionLabel, type QueueSectionLabelProps, type QueueSectionProps, QueueSectionTrigger, type QueueSectionTriggerProps, type QueueTodo };

package/dist/components/ai-elements/queue.d.ts

@@ -0,0 +1,68 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Button } from '../ui/button.js';
+import { Collapsible, CollapsibleContent } from '../ui/collapsible.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+interface QueueMessagePart {
+    type: string;
+    text?: string;
+    url?: string;
+    filename?: string;
+    mediaType?: string;
+}
+interface QueueMessage {
+    id: string;
+    parts: QueueMessagePart[];
+}
+interface QueueTodo {
+    id: string;
+    title: string;
+    description?: string;
+    status?: "pending" | "completed";
+}
+type QueueItemProps = ComponentProps<"li">;
+declare const QueueItem: ({ className, ...props }: QueueItemProps) => react_jsx_runtime.JSX.Element;
+type QueueItemIndicatorProps = ComponentProps<"span"> & {
+    completed?: boolean;
+};
+declare const QueueItemIndicator: ({ completed, className, ...props }: QueueItemIndicatorProps) => react_jsx_runtime.JSX.Element;
+type QueueItemContentProps = ComponentProps<"span"> & {
+    completed?: boolean;
+};
+declare const QueueItemContent: ({ completed, className, ...props }: QueueItemContentProps) => react_jsx_runtime.JSX.Element;
+type QueueItemDescriptionProps = ComponentProps<"div"> & {
+    completed?: boolean;
+};
+declare const QueueItemDescription: ({ completed, className, ...props }: QueueItemDescriptionProps) => react_jsx_runtime.JSX.Element;
+type QueueItemActionsProps = ComponentProps<"div">;
+declare const QueueItemActions: ({ className, ...props }: QueueItemActionsProps) => react_jsx_runtime.JSX.Element;
+type QueueItemActionProps = Omit<ComponentProps<typeof Button>, "variant" | "size">;
+declare const QueueItemAction: ({ className, ...props }: QueueItemActionProps) => react_jsx_runtime.JSX.Element;
+type QueueItemAttachmentProps = ComponentProps<"div">;
+declare const QueueItemAttachment: ({ className, ...props }: QueueItemAttachmentProps) => react_jsx_runtime.JSX.Element;
+type QueueItemImageProps = ComponentProps<"img">;
+declare const QueueItemImage: ({ className, ...props }: QueueItemImageProps) => react_jsx_runtime.JSX.Element;
+type QueueItemFileProps = ComponentProps<"span">;
+declare const QueueItemFile: ({ children, className, ...props }: QueueItemFileProps) => react_jsx_runtime.JSX.Element;
+type QueueListProps = ComponentProps<typeof ScrollArea>;
+declare const QueueList: ({ children, className, ...props }: QueueListProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionProps = ComponentProps<typeof Collapsible>;
+declare const QueueSection: ({ className, defaultOpen, ...props }: QueueSectionProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionTriggerProps = ComponentProps<"button">;
+declare const QueueSectionTrigger: ({ children, className, ...props }: QueueSectionTriggerProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionLabelProps = ComponentProps<"span"> & {
+    count?: number;
+    label: string;
+    icon?: React.ReactNode;
+};
+declare const QueueSectionLabel: ({ count, label, icon, className, ...props }: QueueSectionLabelProps) => react_jsx_runtime.JSX.Element;
+type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const QueueSectionContent: ({ className, ...props }: QueueSectionContentProps) => react_jsx_runtime.JSX.Element;
+type QueueProps = ComponentProps<"div">;
+declare const Queue: ({ className, ...props }: QueueProps) => react_jsx_runtime.JSX.Element;
+
+export { Queue, QueueItem, QueueItemAction, type QueueItemActionProps, QueueItemActions, type QueueItemActionsProps, QueueItemAttachment, type QueueItemAttachmentProps, QueueItemContent, type QueueItemContentProps, QueueItemDescription, type QueueItemDescriptionProps, QueueItemFile, type QueueItemFileProps, QueueItemImage, type QueueItemImageProps, QueueItemIndicator, type QueueItemIndicatorProps, type QueueItemProps, QueueList, type QueueListProps, type QueueMessage, type QueueMessagePart, type QueueProps, QueueSection, QueueSectionContent, type QueueSectionContentProps, QueueSectionLabel, type QueueSectionLabelProps, type QueueSectionProps, QueueSectionTrigger, type QueueSectionTriggerProps, type QueueTodo };