{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-accordion-11","type":"registry:block","title":"Accordion component for onboarding or setup steps with icons, badges, and QR codes","description":"Accordion component for onboarding or setup steps with icons, badges, and QR codes","dependencies":[],"registryDependencies":["accordion","@reui/badge","button","button-group","input","spinner"],"files":[{"path":"c-accordion-11.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Button } from \"@/components/ui/button\"\nimport { ButtonGroup } from \"@/components/ui/button-group\"\nimport { Input } from \"@/components/ui/input\"\nimport { Spinner } from \"@/components/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto mb-auto w-full max-w-lg\">\n      <Accordion\n        multiple={false}\n        defaultValue={[\"pos-app\"]}\n        className=\"border-border rounded-lg overflow-hidden border\"\n      >\n        {/* Step 1: Completed */}\n        <AccordionItem\n          value=\"add-products\"\n          className=\"bg-transparent px-4\"\n        >\n          <AccordionTrigger className=\"items-center py-4 font-semibold hover:no-underline\">\n            <div className=\"flex w-full items-center justify-between pr-4\">\n              <div className=\"flex items-center justify-center gap-3\">\n                <div className=\"flex size-5 items-center justify-center\">\n                  <IconPlaceholder\n                    lucide=\"CircleCheckIcon\"\n                    tabler=\"IconCircleCheck\"\n                    hugeicons=\"CheckmarkCircle01Icon\"\n                    phosphor=\"CheckCircleIcon\"\n                    remixicon=\"RiCheckboxCircleLine\"\n                    className=\"fill-success text-background size-5\"\n                  />\n                </div>\n                <span className=\"text-sm font-medium\">Add products</span>\n              </div>\n              <Badge variant=\"success-light\">Ready</Badge>\n            </div>\n          </AccordionTrigger>\n          <AccordionContent className=\"text-muted-foreground pr-0 pb-4 pl-8 leading-relaxed\">\n            Your products have been successfully added and are ready for sale.\n          </AccordionContent>\n        </AccordionItem>\n\n        {/* Step 2: Expanded/In Progress */}\n        <AccordionItem\n          value=\"pos-app\"\n          className=\"bg-transparent px-4\"\n        >\n          <AccordionTrigger className=\"items-center py-4 font-semibold hover:no-underline\">\n            <div className=\"flex w-full items-center justify-between pr-4\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"flex size-5 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-950\">\n                  <div className=\"size-2 rounded-full bg-yellow-500\" />\n                </div>\n                <span className=\"text-foreground text-sm font-medium\">\n                  Get the point of sale application\n                </span>\n              </div>\n            </div>\n          </AccordionTrigger>\n          <AccordionContent className=\"pt-2 pl-8\">\n            <div className=\"flex flex-col gap-6 md:flex-row md:items-start md:justify-between\">\n              <div className=\"flex-1 space-y-6\">\n                <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                  Scan the QR code or send yourself the link to get the app. The\n                  mobile app is where you&apos;ll manage orders, track\n                  inventory, and view analytics on the go.\n                </p>\n                <ButtonGroup>\n                  <Input placeholder=\"james@alignui.com\" />\n                  <Button variant=\"outline\" aria-label=\"Send link\">\n                    Send link\n                  </Button>\n                </ButtonGroup>\n              </div>\n              <div className=\"bg-muted/30 border-border rounded-lg flex shrink-0 items-center justify-center border p-3\">\n                <IconPlaceholder\n                  lucide=\"QrCodeIcon\"\n                  tabler=\"IconQrcode\"\n                  hugeicons=\"QrCodeIcon\"\n                  phosphor=\"QrCodeIcon\"\n                  remixicon=\"RiQrCodeLine\"\n                  className=\"size-20\"\n                  strokeWidth={1.5}\n                />\n              </div>\n            </div>\n          </AccordionContent>\n        </AccordionItem>\n\n        {/* Step 3: Pending */}\n        <AccordionItem\n          value=\"price-stock\"\n          className=\"bg-transparent px-4\"\n        >\n          <AccordionTrigger className=\"items-center py-4 font-semibold hover:no-underline\">\n            <div className=\"flex w-full items-center justify-between pr-4\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"flex size-5 items-center justify-center\">\n                  <Spinner className=\"opacity-60\" />\n                </div>\n                <span className=\"text-muted-foreground text-sm font-medium\">\n                  Product price & stock\n                </span>\n              </div>\n            </div>\n          </AccordionTrigger>\n          <AccordionContent className=\"text-muted-foreground pl-8 text-sm leading-relaxed\">\n            Configure your product pricing and manage stock levels across all\n            locations.\n          </AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </div>\n  )\n}","target":"components/examples/c-accordion-11.tsx"}],"meta":{"order":11,"label":"Setup Steps"}}