attachment

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { Slot } from "radix-ui"
4 
5import { cn } from "@/lib/utils"
6import { Button } from "@/components/ui/button"
7 
8const attachmentVariants = cva(
9  "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",
10  {
11    variants: {
12      size: {
13        default:
14          "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",
15        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",
16        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",
17      },
18      orientation: {
19        horizontal: "min-w-40 items-center",
20        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
21      },
22    },
23  }
24)
25 
26function Attachment({
27  className,
28  state = "done",
29  size = "default",
30  orientation = "horizontal",
31  ...props
32}: React.ComponentProps<"div"> &
33  VariantProps<typeof attachmentVariants> & {
34    state?: "idle" | "uploading" | "processing" | "error" | "done"
35  }) {
36  return (
37    <div
38      data-slot="attachment"
39      data-state={state}
40      data-size={size}
41      data-orientation={orientation}
42      className={cn(attachmentVariants({ size, orientation }), className)}
43      {...props}
44    />
45  )
46}
47 
48const attachmentMediaVariants = cva(
49  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
50  {
51    variants: {
52// … truncated