Accordion

1import * as React from "react";
2import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
3import { cn } from "@/lib/utils";
4
5import { HugeiconsIcon } from "@hugeicons/react";
6import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
7type AccordionVariant =
8  | "default"
9  | "split"
10  | "outline"
11  | "nested"
12  | "isolated-bordered"
13  | "isolated-filled"
14  | "isolated-filled-bordered";
15
16function Accordion({
17  className,
18  multiple = false,
19  variant = "default",
20  ...props
21}: BaseAccordion.Root.Props & { variant?: AccordionVariant }) {
22  return (
23    <BaseAccordion.Root
24      data-slot="accordion"
25      data-variant={variant}
26      multiple={multiple}
27      className={cn(
28        "group flex w-full flex-col",
29        variant === "split" && "space-y-2",
30        variant === "outline" && "bg-card overflow-hidden rounded-lg border",
31        variant === "nested" && "bg-muted rounded-lg border p-1",
32        className,
33      )}
34      {...props}
35    />
36  );
37}
38
39function AccordionItem({ className, ...props }: BaseAccordion.Item.Props) {
40  return (
41    <BaseAccordion.Item
42      data-slot="accordion-item"
43      className={cn(
44        "ease-out-expo transition-[margin,border-radius,border] duration-250",
45        // Default variant styles
46        "group-data-[variant=default]:border-b group-data-[variant=default]:last:border-b-0",
47        // Split variant styles (individual cards)
48        "group-data-[variant=split]:bg-card group-data-[variant=split]:border-border group-data-[variant=split]:overflow-hidden group-data-[variant=split]:rounded-lg group-data-[variant=split]:border",
49        // Outline variant styles (items within single card)
50        "group-data-[variant=outline]:border-border group-data-[variant=outline]:border-b group-data-[variant=outline]:last:border-b-0",
51        // Nested variant styles - items within the single outer card
52        "group-data-[variant=nested]:mt-0.5 group-data-[variant=nested]:first:mt-0",
53        // Isolated bordered variant styles - dynamically separates open items from closed ones
54        // Base styles: all items have borders and background to look like cards
55        "group-data-[variant=isolated-bordered]:bg-card group-data-[variant=isolated-bordered]:border-border group-data-[variant=isolated-bordered]:overflow-hidden group-data-[variant=isolated-bordered]:border",
56        // Closed items: group together by overlapping borders with negative margin
57// … truncated