Attachment

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