attachment

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import { Polymorphic } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import type { VariantProps } from "class-variance-authority";
6import { cva } from "class-variance-authority";
7import type { Component, ComponentProps, ValidComponent } from "solid-js";
8import { splitProps } from "solid-js";
9import type { ButtonProps } from "./button.tsx";
10 
11import { Button } from "./button.tsx";
12 
13const attachmentVariants = cva(
14  "w-fit rounded-xl focus-within:ring-1 focus-within:ring-ring/50 group/attachment relative flex max-w-full min-w-0 shrink-0 flex-wrap border bg-card text-card-foreground transition-colors has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
15  {
16    variants: {
17      size: {
18        default: "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",
19        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",
20        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",
21      },
22      orientation: {
23        horizontal: "min-w-40 items-center",
24        vertical: "w-24 has-data-[slot=attachment-content]:w-30 flex-col",
25      },
26    },
27    defaultVariants: {
28      size: "default",
29      orientation: "horizontal",
30    },
31  },
32);
33 
34type AttachmentProps =
35  & ComponentProps<"div">
36  & VariantProps<typeof attachmentVariants>
37  & {
38    state?: "idle" | "uploading" | "processing" | "error" | "done";
39  };
40 
41const Attachment: Component<AttachmentProps> = (props) => {
42  const [local, others] = splitProps(props, [
43    "class",
44    "state",
45    "size",
46    "orientation",
47  ]);
48  return (
49    <div
50      data-slot="attachment"
51      data-state={local.state ?? "done"}
52      data-size={local.size ?? "default"}
53      data-orientation={local.orientation ?? "horizontal"}
54      class={cn(
55        attachmentVariants({
56          size: local.size,
57          orientation: local.orientation,
58        }),
59        local.class,
60      )}
61      {...others}
62    />
63  );
64};
65 
66const attachmentMediaVariants = cva(
67// … truncated