accordion

1"use client"
2 
3import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
4import { ChevronDownIcon } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7 
8// Smooth, premium easing for the open/close — fast out of the gate, gentle
9// settle. Shared by the panel height and the chevron so they move in lockstep.
10const EASE = "ease-[cubic-bezier(0.32,0.72,0,1)]"
11 
12function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
13  return (
14    <AccordionPrimitive.Root
15      data-slot="accordion"
16      className={cn("flex w-full flex-col gap-3", className)}
17      {...props}
18    />
19  )
20}
21 
22function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
23  return (
24    <AccordionPrimitive.Item
25      data-slot="accordion-item"
26      className={cn(
27        "overflow-hidden rounded border-2 bg-background text-foreground shadow-md transition-shadow duration-200 hover:shadow-sm data-[open]:shadow-sm",
28        className
29      )}
30      {...props}
31    />
32  )
33}
34 
35function AccordionTrigger({
36  className,
37  children,
38  ...props
39}: AccordionPrimitive.Trigger.Props) {
40  return (
41    <AccordionPrimitive.Header data-slot="accordion-header" className="flex">
42      <AccordionPrimitive.Trigger
43        data-slot="accordion-trigger"
44        className={cn(
45          "flex flex-1 cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left font-head transition-colors hover:bg-muted/50 data-[open]:bg-muted/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary [&[data-open]>svg]:rotate-180",
46          className
47        )}
48        {...props}
49      >
50        {children}
51        <ChevronDownIcon
52          aria-hidden
53          data-slot="accordion-trigger-icon"
54          className={cn(
55            "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-300",
56            EASE
57          )}
58        />
59      </AccordionPrimitive.Trigger>
60    </AccordionPrimitive.Header>
61  )
62}
63 
64function AccordionContent({
65  className,
66  children,
67  ...props
68}: AccordionPrimitive.Panel.Props) {
69  return (
70    <AccordionPrimitive.Panel
71      data-slot="accordion-content"
72      // Base UI publishes the measured panel height as `--accordion-panel-height`
73      // and flags the entering/leaving frames with `data-starting-style` /
74      // `data-ending-style`. Transitioning `height` between that var and 0 gives a
75      // real slide open/close.
76      className={cn(
77// … truncated