attachment

1import * as React 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}: React.ComponentProps<"div"> &
34  VariantProps<typeof attachmentVariants> & {
35    state?: "idle" | "uploading" | "processing" | "error" | "done"
36  }) {
37  return (
38    <div
39      data-slot="attachment"
40      data-state={state}
41      data-size={size}
42      data-orientation={orientation}
43      className={cn(attachmentVariants({ size, orientation }), className)}
44      {...props}
45    />
46  )
47}
48 
49const attachmentMediaVariants = cva(
50// … truncated