feat: AttachmentPrimitive

apps/docs/content/docs/ui/primitives/Attachment.mdx

@@ -0,0 +1,113 @@
+---
+title: ActionBar
+---
+
+Buttons to interact with attachments.
+
+import { ParametersTable, DataAttributesTable } from "@/components/docs";
+import { Code } from "@radix-ui/themes";
+import { Callout } from "fumadocs-ui/components/callout";
+
+<Callout>
+ **Dual Use!** Attachments can appear in both messages and composers.
+</Callout>
+
+## Anatomy
+
+```tsx
+import { AttachmentPrimitive } from "@assistant-ui/react";
+
+const MyMessageAttachment = () => (
+ <AttachmentPrimitive.Root>
+ <AttachmentPrimitive.Thumbnail />
+ <AttachmentPrimitive.Name />
+ </AttachmentPrimitive.Root>
+);
+
+const MyComposerAttachment = () => (
+ <AttachmentPrimitive.Root>
+ <AttachmentPrimitive.Thumbnail />
+ <AttachmentPrimitive.Name />
+ <AttachmentPrimitive.Remove />
+ </AttachmentPrimitive.Root>
+);
+```
+
+## API Reference
+
+### Container
+
+Containts all parts of the attachment.
+
+This primitive renders a `<div>` element unless `asChild` is set.
+
+<ParametersTable
+ type="AttachmentPrimitiveRootProps"
+ parameters={[
+ {
+ name: "asChild",
+ },
+ ]}
+/>
+
+### Thumbnail
+
+The thumbnail of the attachment.
+
+This primitive renders a `<div>` element unless `asChild` is set.
+
+<ParametersTable
+ type="AttachmentPrimitiveThumbnailProps"
+ parameters={[
+ {
+ name: "asChild",
+ },
+ ]}
+/>
+
+### Name
+
+The name of the attachment.
+
+This primitive renders a `<div>` element unless `asChild` is set.
+
+<ParametersTable
+ type="AttachmentPrimitiveNameProps"
+ parameters={[
+ {
+ name: "asChild",
+ },
+ ]}
+/>
+
+### Remove
+
+Removes the attachment.
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+<ParametersTable
+ type="AttachmentPrimitiveRemoveProps"
+ parameters={[
+ {
+ name: "asChild",
+ },
+ ]}
+/>
+
+#### `useAttachmentRemove`
+
+Provides the `Remove` functionality as a hook.
+
+```tsx
+import { useAttachmentRemove } from "@assistant-ui/react";
+
+const Remove = () => {
+ const remove = useAttachmentRemove();
+
+ // remove action is not available
+ if (!remove) return null;
+
+ return <button onClick={remove}>Remove</button>;
+};
+```