snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/examples/radix/attachment-group.tsx
+++ b/apps/v4/examples/radix/attachment-group.tsx
@@ -0,0 +1,71 @@
+import {
+  FileCodeIcon,
+  FileTextIcon,
+  TableIcon,
+  XIcon,
+  type LucideIcon,
+} from "lucide-react"
+
+import {
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+} from "@/styles/radix-rhea/ui/attachment"
+
+type Item = {
+  name: string
+  meta: string
+  icon?: LucideIcon
+  src?: string
+}
+
+const items: Item[] = [
+  { name: "briefing-notes.pdf", meta: "PDF · 1.4 MB", icon: FileTextIcon },
+  {
+    name: "workspace.png",
+    meta: "PNG · 820 KB",
+    src: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
+  },
+  { name: "customers.csv", meta: "CSV · 18 KB", icon: TableIcon },
+  { name: "renderer.tsx", meta: "TSX · 12 KB", icon: FileCodeIcon },
+]
+
+export function AttachmentGroupDemo() {
+  return (
+    <div className="mx-auto w-full max-w-sm py-12">
+      <AttachmentGroup className="w-full">
+        {items.map((item) => {
+          const Icon = item.icon
+
+          return (
+            <Attachment key={item.name} className="w-64">
+              {item.src ? (
+                <AttachmentMedia variant="image">
+                  <img src={item.src} alt={item.name} />
+                </AttachmentMedia>
+              ) : Icon ? (
+                <AttachmentMedia>
+                  <Icon />
+                </AttachmentMedia>
+              ) : null}
+              <AttachmentContent>
+                <AttachmentTitle>{item.name}</AttachmentTitle>
+                <AttachmentDescription>{item.meta}</AttachmentDescription>
+              </AttachmentContent>
+              <AttachmentActions>
+                <AttachmentAction aria-label={`Remove ${item.name}`}>
+                  <XIcon />
+                </AttachmentAction>
+              </AttachmentActions>
+            </Attachment>
+          )
+        })}
+      </AttachmentGroup>
+    </div>
+  )
+}