Accordion (Tailwind)

1"use client";
2 
3import { Accordion } from "@base-ui/react/accordion";
4import { cn } from "@/lib/utils";
5 
6function AccordionRoot({ className, ...props }: Accordion.Root.Props) {
7  return (
8    <Accordion.Root
9      className={cn("flex w-[32rem] max-w-[calc(100vw-8rem)] flex-col max-sm:w-full max-sm:max-w-full", className)}
10      data-slot="accordion-root"
11      {...props}
12    />
13  );
14}
15 
16function AccordionItem({ className, ...props }: Accordion.Item.Props) {
17  return (
18    <Accordion.Item
19      className={cn(
20        "overflow-hidden border-border border-b-[0.5px] bg-[var(--mix-card-75-bg)] p-4",
21        "transition-[margin,border-radius,border-color] duration-200 ease-[var(--ease-in-out-quad)]",
22        // Default state - first item has top rounded, last item has bottom rounded
23        "first:rounded-t-3xl",
24        "last:rounded-b-3xl last:border-b-transparent",
25        "first:last:rounded-3xl",
26        // Expanded item gets full rounded corners and unsticks with margins
27        "data-[open]:my-2 data-[open]:rounded-3xl data-[open]:border-b-transparent",
28        "data-[open]:last:mb-0 data-[open]:first:mt-0",
29        // Item before an expanded item gets rounded bottom only
30        "[&:has(+*[data-open]):not([data-open])]:rounded-t-none [&:has(+*[data-open]):not([data-open])]:rounded-b-3xl [&:has(+*[data-open]):not([data-open])]:border-b-transparent",
31        "[&:has(+*[data-open]):not([data-open]):first-child]:rounded-3xl",
32        // Item after an expanded item gets rounded top only
33        "[*[data-open]+&:not([data-open])]:rounded-t-3xl [*[data-open]+&:not([data-open])]:rounded-b-none",
34        "[*[data-open]+&:not([data-open]):last-child]:rounded-3xl",
35        // Item sandwiched between two expanded items gets full rounded corners
36        "[*[data-open]+&:not([data-open]):has(+*[data-open])]:rounded-3xl [*[data-open]+&:not([data-open]):has(+*[data-open])]:border-b-transparent",
37        className
38      )}
39      data-slot="accordion-item"
40      {...props}
41    />
42  );
43}
44 
45function AccordionHeader({ className, ...props }: Accordion.Header.Props) {
46  return <Accordion.Header className={cn("m-0", className)} data-slot="accordion-header" {...props} />;
47}
48 
49function AccordionTrigger({ className, children, ...props }: Accordion.Trigger.Props) {
50  return (
51    <Accordion.Trigger
52      className={cn(
53        "group flex w-full cursor-pointer items-center gap-4 border-none bg-transparent text-left max-sm:gap-3",
54// … truncated