@sero-ai/ui 0.3.0 → 0.3.2

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

@@ -0,0 +1,283 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+var _jsxruntime = require('react/jsx-runtime');
+var _button = require('../ui/button');
+
+
+
+
+var _hovercard = require('../ui/hover-card');
+var _utils = require('../../lib/utils');
+
+
+
+
+
+
+
+
+var _lucidereact = require('lucide-react');
+var _react = require('react');
+const mediaCategoryIcons = {
+  audio: _lucidereact.Music2Icon,
+  document: _lucidereact.FileTextIcon,
+  image: _lucidereact.ImageIcon,
+  source: _lucidereact.GlobeIcon,
+  unknown: _lucidereact.PaperclipIcon,
+  video: _lucidereact.VideoIcon
+};
+const getMediaCategory = (data) => {
+  if (data.type === "source-document") {
+    return "source";
+  }
+  const mediaType = _nullishCoalesce(data.mediaType, () => ( ""));
+  if (mediaType.startsWith("image/")) {
+    return "image";
+  }
+  if (mediaType.startsWith("video/")) {
+    return "video";
+  }
+  if (mediaType.startsWith("audio/")) {
+    return "audio";
+  }
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) {
+    return "document";
+  }
+  return "unknown";
+};
+const getAttachmentLabel = (data) => {
+  if (data.type === "source-document") {
+    return data.title || data.filename || "Source";
+  }
+  const category = getMediaCategory(data);
+  return data.filename || (category === "image" ? "Image" : "Attachment");
+};
+const renderAttachmentImage = (url, filename, isGrid) => isGrid ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "img",
+  {
+    alt: filename || "Image",
+    className: "size-full object-cover",
+    height: 96,
+    src: url,
+    width: 96
+  }
+) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "img",
+  {
+    alt: filename || "Image",
+    className: "size-full rounded object-cover",
+    height: 20,
+    src: url,
+    width: 20
+  }
+);
+const AttachmentsContext = _react.createContext.call(void 0, null);
+const AttachmentContext = _react.createContext.call(void 0, null);
+const useAttachmentsContext = () => _nullishCoalesce(_react.use.call(void 0, AttachmentsContext), () => ( { variant: "grid" }));
+const useAttachmentContext = () => {
+  const ctx = _react.use.call(void 0, AttachmentContext);
+  if (!ctx) {
+    throw new Error("Attachment components must be used within <Attachment>");
+  }
+  return ctx;
+};
+const Attachments = ({
+  variant = "grid",
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = _react.useMemo.call(void 0, () => ({ variant }), [variant]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AttachmentsContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "flex items-start",
+        variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
+        variant === "grid" && "ml-auto w-fit",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+const Attachment = ({
+  data,
+  onRemove,
+  className,
+  children,
+  ...props
+}) => {
+  const { variant } = useAttachmentsContext();
+  const mediaCategory = getMediaCategory(data);
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({ data, mediaCategory, onRemove, variant }),
+    [data, mediaCategory, onRemove, variant]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AttachmentContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "group relative",
+        variant === "grid" && "size-24 overflow-hidden rounded-lg",
+        variant === "inline" && [
+          "flex h-8 cursor-pointer select-none items-center gap-1.5",
+          "rounded-md border border-border px-1.5",
+          "font-medium text-sm transition-all",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+        ],
+        variant === "list" && [
+          "flex w-full items-center gap-3 rounded-lg border p-3",
+          "hover:bg-accent/50"
+        ],
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+const AttachmentPreview = ({
+  fallbackIcon,
+  className,
+  ...props
+}) => {
+  const { data, mediaCategory, variant } = useAttachmentContext();
+  const iconSize = variant === "inline" ? "size-3" : "size-4";
+  const renderIcon = (Icon) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: _utils.cn.call(void 0, iconSize, "text-muted-foreground") });
+  const renderContent = () => {
+    if (mediaCategory === "image" && data.type === "file" && data.url) {
+      return renderAttachmentImage(data.url, data.filename, variant === "grid");
+    }
+    if (mediaCategory === "video" && data.type === "file" && data.url) {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "video", { "aria-label": "Video preview", className: "size-full object-cover", muted: true, src: data.url });
+    }
+    const Icon = mediaCategoryIcons[mediaCategory];
+    return _nullishCoalesce(fallbackIcon, () => ( renderIcon(Icon)));
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _utils.cn.call(void 0, 
+        "flex shrink-0 items-center justify-center overflow-hidden",
+        variant === "grid" && "size-full bg-muted",
+        variant === "inline" && "size-5 rounded bg-background",
+        variant === "list" && "size-12 rounded bg-muted",
+        className
+      ),
+      ...props,
+      children: renderContent()
+    }
+  );
+};
+const AttachmentInfo = ({
+  showMediaType = false,
+  className,
+  ...props
+}) => {
+  const { data, variant } = useAttachmentContext();
+  const label = getAttachmentLabel(data);
+  if (variant === "grid") {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _utils.cn.call(void 0, "min-w-0 flex-1", className), ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block truncate", children: label }),
+    showMediaType && data.mediaType && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "block truncate text-muted-foreground text-xs", children: data.mediaType })
+  ] });
+};
+const AttachmentRemove = ({
+  label = "Remove",
+  className,
+  children,
+  ...props
+}) => {
+  const { onRemove, variant } = useAttachmentContext();
+  const handleClick = _react.useCallback.call(void 0, 
+    (e) => {
+      e.stopPropagation();
+      _optionalChain([onRemove, 'optionalCall', _ => _()]);
+    },
+    [onRemove]
+  );
+  if (!onRemove) {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _button.Button,
+    {
+      "aria-label": label,
+      className: _utils.cn.call(void 0, 
+        variant === "grid" && [
+          "absolute top-2 right-2 size-6 rounded-full p-0",
+          "bg-background/80 backdrop-blur-sm",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "hover:bg-background",
+          "[&>svg]:size-3"
+        ],
+        variant === "inline" && [
+          "size-5 rounded p-0",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "[&>svg]:size-2.5"
+        ],
+        variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
+        className
+      ),
+      onClick: handleClick,
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: [
+        _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.XIcon, {}))),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+};
+const AttachmentHoverCard = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _hovercard.HoverCard, { closeDelay, openDelay, ...props });
+const AttachmentHoverCardTrigger = (props) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _hovercard.HoverCardTrigger, { ...props });
+const AttachmentHoverCardContent = ({
+  align = "start",
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  _hovercard.HoverCardContent,
+  {
+    align,
+    className: _utils.cn.call(void 0, "w-auto p-2", className),
+    ...props
+  }
+);
+const AttachmentEmpty = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _utils.cn.call(void 0, 
+      "flex items-center justify-center p-4 text-muted-foreground text-sm",
+      className
+    ),
+    ...props,
+    children: _nullishCoalesce(children, () => ( "No attachments"))
+  }
+);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Attachment = Attachment; exports.AttachmentEmpty = AttachmentEmpty; exports.AttachmentHoverCard = AttachmentHoverCard; exports.AttachmentHoverCardContent = AttachmentHoverCardContent; exports.AttachmentHoverCardTrigger = AttachmentHoverCardTrigger; exports.AttachmentInfo = AttachmentInfo; exports.AttachmentPreview = AttachmentPreview; exports.AttachmentRemove = AttachmentRemove; exports.Attachments = Attachments; exports.getAttachmentLabel = getAttachmentLabel; exports.getMediaCategory = getMediaCategory; exports.useAttachmentContext = useAttachmentContext; exports.useAttachmentsContext = useAttachmentsContext;

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

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FileUIPart, SourceDocumentUIPart } from 'ai';
+import { HTMLAttributes, ComponentProps, ReactNode } from 'react';
+import { Button } from '../ui/button.cjs';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type AttachmentData = (FileUIPart & {
+    id: string;
+}) | (SourceDocumentUIPart & {
+    id: string;
+});
+type AttachmentMediaCategory = "image" | "video" | "audio" | "document" | "source" | "unknown";
+type AttachmentVariant = "grid" | "inline" | "list";
+declare const getMediaCategory: (data: AttachmentData) => AttachmentMediaCategory;
+declare const getAttachmentLabel: (data: AttachmentData) => string;
+interface AttachmentsContextValue {
+    variant: AttachmentVariant;
+}
+interface AttachmentContextValue {
+    data: AttachmentData;
+    mediaCategory: AttachmentMediaCategory;
+    onRemove?: () => void;
+    variant: AttachmentVariant;
+}
+declare const useAttachmentsContext: () => AttachmentsContextValue;
+declare const useAttachmentContext: () => AttachmentContextValue;
+type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: AttachmentVariant;
+};
+declare const Attachments: ({ variant, className, children, ...props }: AttachmentsProps) => react_jsx_runtime.JSX.Element;
+type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
+    data: AttachmentData;
+    onRemove?: () => void;
+};
+declare const Attachment: ({ data, onRemove, className, children, ...props }: AttachmentProps) => react_jsx_runtime.JSX.Element;
+type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
+    fallbackIcon?: ReactNode;
+};
+declare const AttachmentPreview: ({ fallbackIcon, className, ...props }: AttachmentPreviewProps) => react_jsx_runtime.JSX.Element;
+type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
+    showMediaType?: boolean;
+};
+declare const AttachmentInfo: ({ showMediaType, className, ...props }: AttachmentInfoProps) => react_jsx_runtime.JSX.Element | null;
+type AttachmentRemoveProps = ComponentProps<typeof Button> & {
+    label?: string;
+};
+declare const AttachmentRemove: ({ label, className, children, ...props }: AttachmentRemoveProps) => react_jsx_runtime.JSX.Element | null;
+type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
+declare const AttachmentHoverCard: ({ openDelay, closeDelay, ...props }: AttachmentHoverCardProps) => react_jsx_runtime.JSX.Element;
+type AttachmentHoverCardTriggerProps = ComponentProps<typeof HoverCardTrigger>;
+declare const AttachmentHoverCardTrigger: (props: AttachmentHoverCardTriggerProps) => react_jsx_runtime.JSX.Element;
+type AttachmentHoverCardContentProps = ComponentProps<typeof HoverCardContent>;
+declare const AttachmentHoverCardContent: ({ align, className, ...props }: AttachmentHoverCardContentProps) => react_jsx_runtime.JSX.Element;
+type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
+declare const AttachmentEmpty: ({ className, children, ...props }: AttachmentEmptyProps) => react_jsx_runtime.JSX.Element;
+
+export { Attachment, type AttachmentData, AttachmentEmpty, type AttachmentEmptyProps, AttachmentHoverCard, AttachmentHoverCardContent, type AttachmentHoverCardContentProps, type AttachmentHoverCardProps, AttachmentHoverCardTrigger, type AttachmentHoverCardTriggerProps, AttachmentInfo, type AttachmentInfoProps, type AttachmentMediaCategory, AttachmentPreview, type AttachmentPreviewProps, type AttachmentProps, AttachmentRemove, type AttachmentRemoveProps, type AttachmentVariant, Attachments, type AttachmentsProps, getAttachmentLabel, getMediaCategory, useAttachmentContext, useAttachmentsContext };

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

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FileUIPart, SourceDocumentUIPart } from 'ai';
+import { HTMLAttributes, ComponentProps, ReactNode } from 'react';
+import { Button } from '../ui/button.js';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import 'radix-ui';
+
+type AttachmentData = (FileUIPart & {
+    id: string;
+}) | (SourceDocumentUIPart & {
+    id: string;
+});
+type AttachmentMediaCategory = "image" | "video" | "audio" | "document" | "source" | "unknown";
+type AttachmentVariant = "grid" | "inline" | "list";
+declare const getMediaCategory: (data: AttachmentData) => AttachmentMediaCategory;
+declare const getAttachmentLabel: (data: AttachmentData) => string;
+interface AttachmentsContextValue {
+    variant: AttachmentVariant;
+}
+interface AttachmentContextValue {
+    data: AttachmentData;
+    mediaCategory: AttachmentMediaCategory;
+    onRemove?: () => void;
+    variant: AttachmentVariant;
+}
+declare const useAttachmentsContext: () => AttachmentsContextValue;
+declare const useAttachmentContext: () => AttachmentContextValue;
+type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
+    variant?: AttachmentVariant;
+};
+declare const Attachments: ({ variant, className, children, ...props }: AttachmentsProps) => react_jsx_runtime.JSX.Element;
+type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
+    data: AttachmentData;
+    onRemove?: () => void;
+};
+declare const Attachment: ({ data, onRemove, className, children, ...props }: AttachmentProps) => react_jsx_runtime.JSX.Element;
+type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
+    fallbackIcon?: ReactNode;
+};
+declare const AttachmentPreview: ({ fallbackIcon, className, ...props }: AttachmentPreviewProps) => react_jsx_runtime.JSX.Element;
+type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
+    showMediaType?: boolean;
+};
+declare const AttachmentInfo: ({ showMediaType, className, ...props }: AttachmentInfoProps) => react_jsx_runtime.JSX.Element | null;
+type AttachmentRemoveProps = ComponentProps<typeof Button> & {
+    label?: string;
+};
+declare const AttachmentRemove: ({ label, className, children, ...props }: AttachmentRemoveProps) => react_jsx_runtime.JSX.Element | null;
+type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
+declare const AttachmentHoverCard: ({ openDelay, closeDelay, ...props }: AttachmentHoverCardProps) => react_jsx_runtime.JSX.Element;
+type AttachmentHoverCardTriggerProps = ComponentProps<typeof HoverCardTrigger>;
+declare const AttachmentHoverCardTrigger: (props: AttachmentHoverCardTriggerProps) => react_jsx_runtime.JSX.Element;
+type AttachmentHoverCardContentProps = ComponentProps<typeof HoverCardContent>;
+declare const AttachmentHoverCardContent: ({ align, className, ...props }: AttachmentHoverCardContentProps) => react_jsx_runtime.JSX.Element;
+type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
+declare const AttachmentEmpty: ({ className, children, ...props }: AttachmentEmptyProps) => react_jsx_runtime.JSX.Element;
+
+export { Attachment, type AttachmentData, AttachmentEmpty, type AttachmentEmptyProps, AttachmentHoverCard, AttachmentHoverCardContent, type AttachmentHoverCardContentProps, type AttachmentHoverCardProps, AttachmentHoverCardTrigger, type AttachmentHoverCardTriggerProps, AttachmentInfo, type AttachmentInfoProps, type AttachmentMediaCategory, AttachmentPreview, type AttachmentPreviewProps, type AttachmentProps, AttachmentRemove, type AttachmentRemoveProps, type AttachmentVariant, Attachments, type AttachmentsProps, getAttachmentLabel, getMediaCategory, useAttachmentContext, useAttachmentsContext };

package/dist/components/ai-elements/attachments.js

@@ -0,0 +1,283 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from "../ui/hover-card";
+import { cn } from "../../lib/utils";
+import {
+  FileTextIcon,
+  GlobeIcon,
+  ImageIcon,
+  Music2Icon,
+  PaperclipIcon,
+  VideoIcon,
+  XIcon
+} from "lucide-react";
+import { createContext, useCallback, use, useMemo } from "react";
+const mediaCategoryIcons = {
+  audio: Music2Icon,
+  document: FileTextIcon,
+  image: ImageIcon,
+  source: GlobeIcon,
+  unknown: PaperclipIcon,
+  video: VideoIcon
+};
+const getMediaCategory = (data) => {
+  if (data.type === "source-document") {
+    return "source";
+  }
+  const mediaType = data.mediaType ?? "";
+  if (mediaType.startsWith("image/")) {
+    return "image";
+  }
+  if (mediaType.startsWith("video/")) {
+    return "video";
+  }
+  if (mediaType.startsWith("audio/")) {
+    return "audio";
+  }
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) {
+    return "document";
+  }
+  return "unknown";
+};
+const getAttachmentLabel = (data) => {
+  if (data.type === "source-document") {
+    return data.title || data.filename || "Source";
+  }
+  const category = getMediaCategory(data);
+  return data.filename || (category === "image" ? "Image" : "Attachment");
+};
+const renderAttachmentImage = (url, filename, isGrid) => isGrid ? /* @__PURE__ */ jsx(
+  "img",
+  {
+    alt: filename || "Image",
+    className: "size-full object-cover",
+    height: 96,
+    src: url,
+    width: 96
+  }
+) : /* @__PURE__ */ jsx(
+  "img",
+  {
+    alt: filename || "Image",
+    className: "size-full rounded object-cover",
+    height: 20,
+    src: url,
+    width: 20
+  }
+);
+const AttachmentsContext = createContext(null);
+const AttachmentContext = createContext(null);
+const useAttachmentsContext = () => use(AttachmentsContext) ?? { variant: "grid" };
+const useAttachmentContext = () => {
+  const ctx = use(AttachmentContext);
+  if (!ctx) {
+    throw new Error("Attachment components must be used within <Attachment>");
+  }
+  return ctx;
+};
+const Attachments = ({
+  variant = "grid",
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(() => ({ variant }), [variant]);
+  return /* @__PURE__ */ jsx(AttachmentsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-start",
+        variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
+        variant === "grid" && "ml-auto w-fit",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+const Attachment = ({
+  data,
+  onRemove,
+  className,
+  children,
+  ...props
+}) => {
+  const { variant } = useAttachmentsContext();
+  const mediaCategory = getMediaCategory(data);
+  const contextValue = useMemo(
+    () => ({ data, mediaCategory, onRemove, variant }),
+    [data, mediaCategory, onRemove, variant]
+  );
+  return /* @__PURE__ */ jsx(AttachmentContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group relative",
+        variant === "grid" && "size-24 overflow-hidden rounded-lg",
+        variant === "inline" && [
+          "flex h-8 cursor-pointer select-none items-center gap-1.5",
+          "rounded-md border border-border px-1.5",
+          "font-medium text-sm transition-all",
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+        ],
+        variant === "list" && [
+          "flex w-full items-center gap-3 rounded-lg border p-3",
+          "hover:bg-accent/50"
+        ],
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
+const AttachmentPreview = ({
+  fallbackIcon,
+  className,
+  ...props
+}) => {
+  const { data, mediaCategory, variant } = useAttachmentContext();
+  const iconSize = variant === "inline" ? "size-3" : "size-4";
+  const renderIcon = (Icon) => /* @__PURE__ */ jsx(Icon, { className: cn(iconSize, "text-muted-foreground") });
+  const renderContent = () => {
+    if (mediaCategory === "image" && data.type === "file" && data.url) {
+      return renderAttachmentImage(data.url, data.filename, variant === "grid");
+    }
+    if (mediaCategory === "video" && data.type === "file" && data.url) {
+      return /* @__PURE__ */ jsx("video", { "aria-label": "Video preview", className: "size-full object-cover", muted: true, src: data.url });
+    }
+    const Icon = mediaCategoryIcons[mediaCategory];
+    return fallbackIcon ?? renderIcon(Icon);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-center overflow-hidden",
+        variant === "grid" && "size-full bg-muted",
+        variant === "inline" && "size-5 rounded bg-background",
+        variant === "list" && "size-12 rounded bg-muted",
+        className
+      ),
+      ...props,
+      children: renderContent()
+    }
+  );
+};
+const AttachmentInfo = ({
+  showMediaType = false,
+  className,
+  ...props
+}) => {
+  const { data, variant } = useAttachmentContext();
+  const label = getAttachmentLabel(data);
+  if (variant === "grid") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "block truncate", children: label }),
+    showMediaType && data.mediaType && /* @__PURE__ */ jsx("span", { className: "block truncate text-muted-foreground text-xs", children: data.mediaType })
+  ] });
+};
+const AttachmentRemove = ({
+  label = "Remove",
+  className,
+  children,
+  ...props
+}) => {
+  const { onRemove, variant } = useAttachmentContext();
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onRemove?.();
+    },
+    [onRemove]
+  );
+  if (!onRemove) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "aria-label": label,
+      className: cn(
+        variant === "grid" && [
+          "absolute top-2 right-2 size-6 rounded-full p-0",
+          "bg-background/80 backdrop-blur-sm",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "hover:bg-background",
+          "[&>svg]:size-3"
+        ],
+        variant === "inline" && [
+          "size-5 rounded p-0",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "[&>svg]:size-2.5"
+        ],
+        variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
+        className
+      ),
+      onClick: handleClick,
+      type: "button",
+      variant: "ghost",
+      ...props,
+      children: [
+        children ?? /* @__PURE__ */ jsx(XIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+};
+const AttachmentHoverCard = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}) => /* @__PURE__ */ jsx(HoverCard, { closeDelay, openDelay, ...props });
+const AttachmentHoverCardTrigger = (props) => /* @__PURE__ */ jsx(HoverCardTrigger, { ...props });
+const AttachmentHoverCardContent = ({
+  align = "start",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  HoverCardContent,
+  {
+    align,
+    className: cn("w-auto p-2", className),
+    ...props
+  }
+);
+const AttachmentEmpty = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-center p-4 text-muted-foreground text-sm",
+      className
+    ),
+    ...props,
+    children: children ?? "No attachments"
+  }
+);
+export {
+  Attachment,
+  AttachmentEmpty,
+  AttachmentHoverCard,
+  AttachmentHoverCardContent,
+  AttachmentHoverCardTrigger,
+  AttachmentInfo,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+  getAttachmentLabel,
+  getMediaCategory,
+  useAttachmentContext,
+  useAttachmentsContext
+};