Accordion

<!-- Accordion using native <details> + <summary> -->
<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-trigger">
      <h3>What is your return policy?</h3>
      <svg class="chevron" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path d="M5.47 7.47a.75.75 0 0 1 1.06 0L10 10.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"/>
      </svg>
    </summary>
    <div class="accordion-content">
      <p>You can return any item within 30 days of purchase for a full refund.
         Items must be in their original packaging.</p>
    </div>
  </details>

  <details class="accordion-item">
    <summary class="accordion-trigger">
      <h3>How long does shipping take?</h3>
      <svg class="chevron" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path d="M5.47 7.47a.75.75 0 0 1 1.06 0L10 10.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"/>
      </svg>
    </summary>
    <div class="accordion-content">
      <p>Standard shipping takes 5-7 business days. Express shipping (2-3 days)
         is available at checkout for an additional fee.</p>
    </div>
  </details>

  <details class="accordion-item">
    <summary class="accordion-trigger">
      <h3>Do you offer international shipping?</h3>
      <svg class="chevron" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path d="M5.47 7.47a.75.75 0 0 1 1.06 0L10 10.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"/>
      </svg>
    </summary>
    <div class="accordion-content">
      <p>Yes, we ship to over 40 countries. International delivery typically
         takes 10-14 business days depending on your location.</p>
    </div>
  </details>
</div>

<!-- ARIA-enhanced version for custom accordion behavior -->
<div class="accordion" role="presentation">
  <h3>
    <button
      type="button"
      class="accordion-trigger"
      aria-expanded="true"
      aria-controls="panel-1"
      id="trigger-1"
    >
      What is your return policy?
      <span class="chevron" aria-hidden="true">▾</span>
    </button>
  </h3>
  <div
    id="panel-1"
    role="region"
    aria-labelledby="trigger-1"
    class="accordion-content"
  >
    <p>You can return any item within 30 days of purchase.</p>
  </div>
</div>

import { useState, useCallback, type ReactNode } from "react";

interface AccordionItem {
  value: string;
  trigger: ReactNode;
  content: ReactNode;
  disabled?: boolean;
}

interface AccordionProps {
  items: AccordionItem[];
  type?: "single" | "multiple";
  defaultValue?: string[];
  collapsible?: boolean;
}

export default function Accordion({
  items,
  type = "single",
  defaultValue = [],
  collapsible = true,
}: AccordionProps) {
  const [openItems, setOpenItems] = useState<string[]>(defaultValue);

  const toggle = useCallback(
    (value: string) => {
      setOpenItems((prev) => {
        const isOpen = prev.includes(value);
        if (type === "single") {
          if (isOpen && collapsible) return [];
          if (isOpen && !collapsible) return prev;
          return [value];
        }
        // multiple
        return isOpen ? prev.filter((v) => v !== value) : [...prev, value];
      });
    },
    [type, collapsible],
  );

  return (
    <div className="accordion">
      {items.map((item) => {
        const isOpen = openItems.includes(item.value);
        const triggerId = `accordion-trigger-${item.value}`;
        const panelId = `accordion-panel-${item.value}`;

        return (
          <div key={item.value} className="accordion-item" data-state={isOpen ? "open" : "closed"}>
            <h3>
              <button
                type="button"
                id={triggerId}
                className="accordion-trigger"
                aria-expanded={isOpen}
                aria-controls={panelId}
                disabled={item.disabled}
                onClick={() => toggle(item.value)}
              >
                {item.trigger}
                <svg
                  className={`chevron ${isOpen ? "rotated" : ""}`}
                  aria-hidden="true"
                  width="20"
                  height="20"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path d="M5.47 7.47a.75.75 0 0 1 1.06 0L10 10.94l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z" />
                </svg>
              </button>
            </h3>
            <div
              id={panelId}
              role="region"
              aria-labelledby={triggerId}
              className="accordion-content"
              data-state={isOpen ? "open" : "closed"}
            >
              <div className="accordion-content-inner">{item.content}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// Usage
<Accordion
  type="single"
  defaultValue={["returns"]}
  items={[
    {
      value: "returns",
      trigger: "What is your return policy?",
      content: <p>Return any item within 30 days for a full refund.</p>,
    },
    {
      value: "shipping",
      trigger: "How long does shipping take?",
      content: <p>Standard: 5-7 business days. Express: 2-3 days.</p>,
    },
    {
      value: "international",
      trigger: "Do you offer international shipping?",
      content: <p>Yes — we ship to 40+ countries worldwide.</p>,
    },
  ]}
/>