Accordion

1"use client";
2 
3import { CaretDownIcon } from "@phosphor-icons/react";
4import { Accordion as AccordionPrimitive } from "radix-ui";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const Accordion = AccordionPrimitive.Root;
10 
11const AccordionItem = React.forwardRef<
12  React.ElementRef<typeof AccordionPrimitive.Item>,
13  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14>(({ className, ...props }, ref) => (
15  <AccordionPrimitive.Item
16    ref={ref}
17    data-slot="accordion-item"
18    className={cn("border-b border-[var(--glass-border)] last:border-b-0", className)}
19    {...props}
20  />
21));
22AccordionItem.displayName = "AccordionItem";
23 
24const AccordionTrigger = React.forwardRef<
25  React.ElementRef<typeof AccordionPrimitive.Trigger>,
26  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
27    variant?: "default" | "glass";
28    /** Glow rides the OPEN state (folded from the glass wrapper). */
29    glow?: boolean;
30  }
31>(({ className, variant = "glass", glow, children, ...props }, ref) => {
32  // No glass surface here — the variants are hover tints only, so no resolveMaterial.
33  const variants = {
34    default: "hover:bg-accent",
35    glass: "hover:bg-muted/50",
36  };
37 
38  return (
39    <AccordionPrimitive.Header className="flex">
40      <AccordionPrimitive.Trigger
41        ref={ref}
42        data-slot="accordion-trigger"
43        className={cn(
44          "flex flex-1 items-start justify-between gap-4 rounded-md px-4 py-4 text-left font-medium outline-none transition-[color,background-color,box-shadow,border-color] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
45          variants[variant],
46          glow && "data-[state=open]:glass-glow",
47          className,
48        )}
49        {...props}
50      >
51        {children}
52        <CaretDownIcon className="pointer-events-none h-4 w-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
53      </AccordionPrimitive.Trigger>
54    </AccordionPrimitive.Header>
55  );
56});
57AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
58 
59const AccordionContent = React.forwardRef<
60  React.ElementRef<typeof AccordionPrimitive.Content>,
61  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
62>(({ className, children, ...props }, ref) => (
63  <AccordionPrimitive.Content
64    ref={ref}
65    data-slot="accordion-content"
66// … truncated