Animated Accordion

1"use client";
2 
3import * as React from "react";
4import { motion, useReducedMotion, type Transition } from "motion/react";
5import * as AccordionPrimitive from "@radix-ui/react-accordion";
6 
7import { cn } from "@/lib/utils";
8 
9const EASE: Transition["ease"] = [0.2, 0, 0, 1];
10 
11/**
12 * AnimatedAccordion — Radix Accordion with Motion height/opacity reveal and a
13 * rotating chevron.
14 *
15 * Accessibility: Radix owns the trigger button semantics, `aria-expanded`,
16 * keyboard interaction, single/multiple modes, and disabled state — untouched.
17 * The chevron is decorative (`aria-hidden`). Content animates on the
18 * `data-state` attribute so it stays in the a11y tree throughout. Under
19 * `prefers-reduced-motion` open/close is instant with no height animation.
20 * Clean-room original.
21 */
22export const AnimatedAccordion = AccordionPrimitive.Root;
23 
24export const AnimatedAccordionItem = React.forwardRef<
25  React.ElementRef<typeof AccordionPrimitive.Item>,
26  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
27>(({ className, ...props }, ref) => (
28  <AccordionPrimitive.Item
29    ref={ref}
30    className={cn(
31      "border-b border-[var(--color-border,#e4e7ec)] last:border-b-0",
32      className,
33    )}
34    {...props}
35  />
36));
37AnimatedAccordionItem.displayName = "AnimatedAccordionItem";
38 
39export interface AnimatedAccordionTriggerProps
40  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {}
41 
42export const AnimatedAccordionTrigger = React.forwardRef<
43  React.ElementRef<typeof AccordionPrimitive.Trigger>,
44  AnimatedAccordionTriggerProps
45>(({ className, children, ...props }, ref) => (
46  <AccordionPrimitive.Header className="flex">
47    <AccordionPrimitive.Trigger
48      ref={ref}
49      className={cn(
50        "group flex flex-1 items-center justify-between gap-4 py-4 text-left text-sm font-medium",
51        "text-[var(--color-fg,#111318)] transition-colors",
52        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent,#695cff)]",
53        "disabled:pointer-events-none disabled:opacity-50",
54        className,
55      )}
56      {...props}
57    >
58      {children}
59      {/* Decorative chevron; rotates via data-state, no motion component needed
60          so it respects reduced-motion through CSS transitions we scope off. */}
61      <svg
62        aria-hidden="true"
63        focusable="false"
64        viewBox="0 0 24 24"
65        width={18}
66        height={18}
67        fill="none"
68        stroke="currentColor"
69        strokeWidth={2}
70// … truncated