"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from "@/lib/utils";

export interface AccordionItem {
  id?: string;
  title: string;
  content: React.ReactNode;
  disabled?: boolean;
}

interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  items: AccordionItem[];
  type?: "single" | "multiple";
  defaultValue?: string[];
}

function Accordion({
  items,
  type = "single",
  defaultValue,
  className,
  ...props
}: AccordionProps) {
  const fallbackId = React.useId();
  const [openItems, setOpenItems] = React.useState<Set<string>>(() => {
    if (!defaultValue) return new Set();
    return new Set(defaultValue);
  });

  const toggleItem = (value: string) => {
    setOpenItems((prev) => {
      const next = new Set(prev);
      if (type === "single") {
        if (next.has(value)) {
          next.clear();
        } else {
          next.clear();
          next.add(value);
        }
        return next;
      }
      if (next.has(value)) {
        next.delete(value);
      } else {
        next.add(value);
      }
      return next;
    });
  };

  return (
    <div className={cn("space-y-3", className)} {...props}>
      {items.map((item, index) => {
        const value = item.id ?? `${fallbackId}-${index}`;
        const isOpen = openItems.has(value);
        return (
          <div
            key={value}
            className={cn(
              "rounded-xl border border-border bg-card px-4 py-3 text-card-foreground",
              item.disabled && "opacity-60"
            )}
          >
            <button
              type="button"
              onClick={() => !item.disabled && toggleItem(value)}
              className="flex w-full items-center justify-between gap-4 text-left"
              aria-expanded={isOpen}
              aria-controls={`${value}-content`}
              disabled={item.disabled}
            >
              <span className="text-sm font-semibold text-foreground">
                {item.title}
              </span>
              <motion.span
                className="flex h-6 w-6 items-center justify-center rounded-full border border-border text-muted-foreground"
                animate={{ rotate: isOpen ? 180 : 0 }}
                transition={{ duration: 0.2 }}
              >
                <svg
                  viewBox="0 0 20 20"
                  className="h-3.5 w-3.5"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M6 8l4 4 4-4" />
                </svg>
              </motion.span>
            </button>
            <AnimatePresence initial={false}>
              {isOpen && (
                <motion.div
                  id={`${value}-content`}
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.25, ease: "easeOut" }}
                  className="overflow-hidden"
                >
                  <div className="pt-3 text-sm text-muted-foreground">
                    {item.content}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        );
      })}
    </div>
  );
}

export { Accordion };
export type { AccordionProps };
Accordion

Dependencies

Files

Installation
