{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-attachment-4","type":"registry:block","title":"Three sizes carrying three levels of an answer","description":"Three sizes carrying three levels of an answer","dependencies":[],"registryDependencies":["attachment"],"files":[{"path":"c-attachment-4.tsx","type":"registry:block","content":"import {\n  Attachment,\n  AttachmentContent,\n  AttachmentDescription,\n  AttachmentGroup,\n  AttachmentMedia,\n  AttachmentTitle,\n} from \"@/components/ui/attachment\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst ICON_REPORT = (\n  <IconPlaceholder\n    lucide=\"FileTextIcon\"\n    tabler=\"IconFileText\"\n    hugeicons=\"File02Icon\"\n    phosphor=\"FileTextIcon\"\n    remixicon=\"RiFileTextLine\"\n    aria-hidden=\"true\"\n  />\n)\n\nconst ICON_SHEET = (\n  <IconPlaceholder\n    lucide=\"FileSpreadsheetIcon\"\n    tabler=\"IconFileSpreadsheet\"\n    hugeicons=\"GoogleSheetIcon\"\n    phosphor=\"FileTextIcon\"\n    remixicon=\"RiFileTextLine\"\n    aria-hidden=\"true\"\n  />\n)\n\nconst ICON_JSON = (\n  <IconPlaceholder\n    lucide=\"FileJsonIcon\"\n    tabler=\"IconFileCode\"\n    hugeicons=\"FileBracesCornerIcon\"\n    phosphor=\"FileCodeIcon\"\n    remixicon=\"RiFileCodeLine\"\n    aria-hidden=\"true\"\n  />\n)\n\nconst ICON_CODE = (\n  <IconPlaceholder\n    lucide=\"CodeIcon\"\n    tabler=\"IconCode\"\n    hugeicons=\"SourceCodeIcon\"\n    phosphor=\"CodeIcon\"\n    remixicon=\"RiCodeSSlashLine\"\n    aria-hidden=\"true\"\n  />\n)\n\nexport function Pattern() {\n  // Size is hierarchy here, not decoration: default is the one thing the\n  // reader is meant to open, sm is the working set behind it, and xs is the\n  // evidence the answer cites. Three rungs, three jobs, no controls.\n  return (\n    <div className=\"mx-auto flex w-full max-w-sm flex-col gap-4\">\n      <div className=\"flex flex-col gap-2\">\n        {/*\n         * Each band still says in text what its size is already saying. Size\n         * alone is a weak signal on screen and no signal at all in a reader.\n         */}\n        <p className=\"text-muted-foreground text-xs font-medium\">Deliverable</p>\n        <Attachment className=\"w-full\">\n          <AttachmentMedia>{ICON_REPORT}</AttachmentMedia>\n          <AttachmentContent>\n            <AttachmentTitle>billing-incident-report.pdf</AttachmentTitle>\n            <AttachmentDescription>\n              PDF\n              <span\n                aria-hidden=\"true\"\n                className=\"bg-muted-foreground/40 mx-1.5 inline-block size-1 rounded-full align-middle\"\n              />\n              2.3 MB\n            </AttachmentDescription>\n          </AttachmentContent>\n        </Attachment>\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <p className=\"text-muted-foreground text-xs font-medium\">\n          Working files\n        </p>\n        {/*\n         * The first two bands stretch. The xs chips below keep their natural\n         * width instead, so the group can scroll them rather than squeeze them.\n         */}\n        <Attachment size=\"sm\" className=\"w-full\">\n          <AttachmentMedia>{ICON_SHEET}</AttachmentMedia>\n          <AttachmentContent>\n            <AttachmentTitle>refund-queue.csv</AttachmentTitle>\n            <AttachmentDescription>\n              CSV\n              <span\n                aria-hidden=\"true\"\n                className=\"bg-muted-foreground/40 mx-1.5 inline-block size-1 rounded-full align-middle\"\n              />\n              96 KB\n            </AttachmentDescription>\n          </AttachmentContent>\n        </Attachment>\n        <Attachment size=\"sm\" className=\"w-full\">\n          <AttachmentMedia>{ICON_JSON}</AttachmentMedia>\n          <AttachmentContent>\n            <AttachmentTitle>webhook-replays.json</AttachmentTitle>\n            <AttachmentDescription>\n              JSON\n              <span\n                aria-hidden=\"true\"\n                className=\"bg-muted-foreground/40 mx-1.5 inline-block size-1 rounded-full align-middle\"\n              />\n              41 KB\n            </AttachmentDescription>\n          </AttachmentContent>\n        </Attachment>\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <p className=\"text-muted-foreground text-xs font-medium\">\n          Cited snippets\n        </p>\n        {/*\n         * Only this band takes tabIndex: its chips carry no buttons, so the\n         * ones scrolled off the end would be unreachable by keyboard without\n         * a tab stop on the group itself.\n         */}\n        <AttachmentGroup tabIndex={0} role=\"group\" aria-label=\"Cited snippets\">\n          {/*\n           * Dropping AttachmentDescription is also what tightens the padding\n           * here: the per-style rule keys off whether a content slot exists.\n           */}\n          <Attachment size=\"xs\">\n            <AttachmentMedia>{ICON_CODE}</AttachmentMedia>\n            <AttachmentContent>\n              <AttachmentTitle>dunning.ts</AttachmentTitle>\n            </AttachmentContent>\n          </Attachment>\n          <Attachment size=\"xs\">\n            <AttachmentMedia>{ICON_CODE}</AttachmentMedia>\n            <AttachmentContent>\n              <AttachmentTitle>webhook-router.ts</AttachmentTitle>\n            </AttachmentContent>\n          </Attachment>\n          <Attachment size=\"xs\">\n            <AttachmentMedia>{ICON_REPORT}</AttachmentMedia>\n            <AttachmentContent>\n              <AttachmentTitle>retry-policy.md</AttachmentTitle>\n            </AttachmentContent>\n          </Attachment>\n        </AttachmentGroup>\n      </div>\n    </div>\n  )\n}","target":"components/examples/c-attachment-4.tsx"}],"meta":{"order":4,"gridSize":2}}