Attachment

1import { ComponentProps } from "react"
2import { mergeProps } from "@base-ui/react/merge-props"
3import { useRender } from "@base-ui/react/use-render"
4import { cva, type VariantProps } from "class-variance-authority"
5
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8
9const attachmentVariants = cva(
10  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
11  {
12    variants: {
13      size: {
14        default:
15          "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
16        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
17        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
18      },
19      orientation: {
20        horizontal: "min-w-40 items-center",
21        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
22      },
23    },
24  }
25)
26
27function Attachment({
28  className,
29  state = "done",
30  size = "default",
31  orientation = "horizontal",
32  ...props
33}: ComponentProps<"div"> &
34  VariantProps<typeof attachmentVariants> & {
35    state?: "idle" | "uploading" | "processing" | "error" | "done"
36  }) {
37  const resolvedOrientation = orientation ?? "horizontal"
38
39  return (
40    <div
41      data-slot="attachment"
42      data-state={state}
43      data-size={size}
44      data-orientation={resolvedOrientation}
45      className={cn(attachmentVariants({ size, orientation }), className)}
46      {...props}
47    />
48  )
49}
50
51const attachmentMediaVariants = cva(
52// … truncated