{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ecommerce-ecommerce-shipping-returns-accordion","type":"registry:block","title":"Accordion","files":[{"path":"components/blocks/ecommerce/ecommerce-shipping-returns/accordion.tsx","content":"import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport default function ShippingReturnsAccordion() {\n  return (\n    <div className=\"px-4 py-8 md:py-12\">\n      <div className=\"mx-auto max-w-3xl\">\n        <div className=\"mb-8 text-center\">\n          <h2 className=\"text-2xl font-bold tracking-tight md:text-3xl\">\n            Shipping & Returns\n          </h2>\n          <p className=\"text-muted-foreground mt-2\">\n            Everything you need to know about delivery and returns\n          </p>\n        </div>\n\n        <Accordion type=\"single\" collapsible className=\"w-full space-y-4\">\n          <AccordionItem\n            value=\"shipping-details\"\n            className=\"rounded-lg border px-6 py-2\"\n          >\n            <AccordionTrigger className=\"py-6 text-left hover:no-underline\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n                  <svg\n                    className=\"text-primary h-5 w-5\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h3 className=\"text-lg font-semibold\">Shipping Details</h3>\n                  <p className=\"text-muted-foreground text-sm\">\n                    Available shipping methods and costs\n                  </p>\n                </div>\n              </div>\n            </AccordionTrigger>\n            <AccordionContent className=\"pt-2 pb-6\">\n              <div className=\"space-y-6 text-sm\">\n                <div className=\"grid gap-4 md:grid-cols-2\">\n                  <div className=\"space-y-3\">\n                    <h4 className=\"font-medium\">Standard Shipping</h4>\n                    <ul className=\"text-muted-foreground space-y-2\">\n                      <li>• Free on orders over $75</li>\n                      <li>• $5.99 for orders under $75</li>\n                      <li>• 5-7 business days</li>\n                      <li>• Tracking included</li>\n                    </ul>\n                  </div>\n                  <div className=\"space-y-3\">\n                    <h4 className=\"font-medium\">Express Shipping</h4>\n                    <ul className=\"text-muted-foreground space-y-2\">\n                      <li>• $12.99 flat rate</li>\n                      <li>• 2-3 business days</li>\n                      <li>• Priority handling</li>\n                      <li>• Signature required</li>\n                    </ul>\n                  </div>\n                </div>\n                <div className=\"bg-muted/50 rounded-lg p-4\">\n                  <p className=\"text-sm\">\n                    <strong>Note:</strong> Shipping times may vary during peak\n                    seasons and holidays. International shipping available to\n                    select countries with additional fees and customs duties.\n                  </p>\n                </div>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n\n          <AccordionItem\n            value=\"estimated-delivery\"\n            className=\"rounded-lg border px-6 py-2\"\n          >\n            <AccordionTrigger className=\"py-6 text-left hover:no-underline\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n                  <svg\n                    className=\"text-primary h-5 w-5\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h3 className=\"text-lg font-semibold\">Estimated Delivery</h3>\n                  <p className=\"text-muted-foreground text-sm\">\n                    When to expect your order\n                  </p>\n                </div>\n              </div>\n            </AccordionTrigger>\n            <AccordionContent className=\"pt-2 pb-6\">\n              <div className=\"space-y-6 text-sm\">\n                <div className=\"grid gap-6 md:grid-cols-3\">\n                  <div className=\"text-center\">\n                    <div className=\"mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100 text-green-600\">\n                      <span className=\"font-bold\">1</span>\n                    </div>\n                    <h4 className=\"mb-2 font-medium\">Processing</h4>\n                    <p className=\"text-muted-foreground\">\n                      1-2 business days for order verification and preparation\n                    </p>\n                  </div>\n                  <div className=\"text-center\">\n                    <div className=\"mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-blue-600\">\n                      <span className=\"font-bold\">2</span>\n                    </div>\n                    <h4 className=\"mb-2 font-medium\">In Transit</h4>\n                    <p className=\"text-muted-foreground\">\n                      3-5 days standard, 1-2 days express shipping\n                    </p>\n                  </div>\n                  <div className=\"text-center\">\n                    <div className=\"mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-purple-100 text-purple-600\">\n                      <span className=\"font-bold\">3</span>\n                    </div>\n                    <h4 className=\"mb-2 font-medium\">Delivered</h4>\n                    <p className=\"text-muted-foreground\">\n                      Tracking confirmation and delivery notification\n                    </p>\n                  </div>\n                </div>\n                <div className=\"border-primary bg-primary/5 rounded-lg border-l-4 p-4\">\n                  <h4 className=\"mb-2 font-medium\">Order Tracking</h4>\n                  <p className=\"text-muted-foreground\">\n                    You&apos;ll receive a tracking number via email once your\n                    order ships. Track your package in real-time through our\n                    customer portal or directly with the carrier.\n                  </p>\n                </div>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n\n          <AccordionItem\n            value=\"return-policy\"\n            className=\"rounded-lg border px-6 py-2 last:border-b\"\n          >\n            <AccordionTrigger className=\"py-6 text-left hover:no-underline\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n                  <svg\n                    className=\"text-primary h-5 w-5\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6\"\n                    />\n                  </svg>\n                </div>\n                <div>\n                  <h3 className=\"text-lg font-semibold\">Return Policy</h3>\n                  <p className=\"text-muted-foreground text-sm\">\n                    Easy returns and exchanges\n                  </p>\n                </div>\n              </div>\n            </AccordionTrigger>\n            <AccordionContent className=\"pt-2 pb-6\">\n              <div className=\"space-y-6 text-sm\">\n                <div className=\"grid gap-6 md:grid-cols-2\">\n                  <div>\n                    <h4 className=\"mb-3 font-medium text-green-600\">\n                      ✓ What&apos;s Returnable\n                    </h4>\n                    <ul className=\"text-muted-foreground space-y-2\">\n                      <li>• Items in original condition</li>\n                      <li>• Unused products with tags</li>\n                      <li>• Original packaging included</li>\n                      <li>• Within 30 days of delivery</li>\n                    </ul>\n                  </div>\n                  <div>\n                    <h4 className=\"mb-3 font-medium text-red-600\">\n                      ✗ Non-Returnable Items\n                    </h4>\n                    <ul className=\"text-muted-foreground space-y-2\">\n                      <li>• Personalized or custom items</li>\n                      <li>• Perishable goods</li>\n                      <li>• Digital downloads</li>\n                      <li>• Items marked as final sale</li>\n                    </ul>\n                  </div>\n                </div>\n\n                <div className=\"space-y-4\">\n                  <h4 className=\"font-medium\">Return Process</h4>\n                  <div className=\"grid gap-4 md:grid-cols-3\">\n                    <div className=\"bg-muted/30 rounded-lg p-4 text-center\">\n                      <div className=\"mb-2 font-medium\">1. Request Return</div>\n                      <p className=\"text-muted-foreground text-xs\">\n                        Contact us or use our online return portal\n                      </p>\n                    </div>\n                    <div className=\"bg-muted/30 rounded-lg p-4 text-center\">\n                      <div className=\"mb-2 font-medium\">2. Ship Back</div>\n                      <p className=\"text-muted-foreground text-xs\">\n                        Use our prepaid return label\n                      </p>\n                    </div>\n                    <div className=\"bg-muted/30 rounded-lg p-4 text-center\">\n                      <div className=\"mb-2 font-medium\">3. Get Refund</div>\n                      <p className=\"text-muted-foreground text-xs\">\n                        Processed within 3-5 business days\n                      </p>\n                    </div>\n                  </div>\n                </div>\n\n                <div className=\"rounded-lg border border-blue-200 bg-blue-50 p-4\">\n                  <h4 className=\"mb-2 font-medium text-blue-900\">\n                    Free Returns\n                  </h4>\n                  <p className=\"text-sm text-blue-800\">\n                    We provide free return shipping labels for all domestic\n                    returns. International returns may incur shipping fees\n                    deducted from your refund.\n                  </p>\n                </div>\n              </div>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/ecommerce/ecommerce-shipping-returns/accordion.tsx"},{"path":"components/ui/accordion.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\" />\n        <ChevronUpIcon data-slot=\"accordion-trigger-icon\" className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n","type":"registry:ui","target":"components/ui/accordion.tsx"}],"description":"An accordion that collapses shipping and returns details into expandable rows. Keeps long policy text tidy on a product page until shoppers tap to read.","dependencies":["lucide-react","radix-ui"]}