Accordion

1"use client";
2 
3import * as React from "react";
4import * as AccordionPrimitive from "@radix-ui/react-accordion";
5import { ChevronDown } from "lucide-react";
6 
7import { cn } from "@/lib/utils";
8import {
9  accordionMotion,
10  floatingSurfaceVariants,
11  type FloatingSurfaceProps,
12} from "@/components/ui/recipes";
13 
14const Accordion = AccordionPrimitive.Root;
15 
16const AccordionItem = React.forwardRef<
17  React.ElementRef<typeof AccordionPrimitive.Item>,
18  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> &
19    FloatingSurfaceProps & { separated?: boolean }
20>(({ className, surface, radius, separated = false, ...props }, ref) => (
21  <AccordionPrimitive.Item
22    ref={ref}
23    className={cn(
24      "border-b border-border transition-colors duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]",
25      "data-[state=open]:border-border-strong",
26      separated && floatingSurfaceVariants({ surface, radius }),
27      separated && "mb-2 border p-0 data-[state=open]:border-border-strong",
28      className,
29    )}
30    {...props}
31  />
32));
33AccordionItem.displayName = "AccordionItem";
34 
35const AccordionTrigger = React.forwardRef<
36  React.ElementRef<typeof AccordionPrimitive.Trigger>,
37  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
38>(({ className, children, ...props }, ref) => (
39  <AccordionPrimitive.Header className="flex">
40    <AccordionPrimitive.Trigger
41      ref={ref}
42      className={cn(
43        "flex flex-1 items-center justify-between py-3 font-medium",
44        "transition-colors duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] hover:text-foreground",
45        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
46        "[&[data-state=open]>svg]:rotate-180",
47        className,
48      )}
49      {...props}
50    >
51      {children}
52      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]" />
53    </AccordionPrimitive.Trigger>
54  </AccordionPrimitive.Header>
55));
56AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
57 
58const AccordionContent = React.forwardRef<
59  React.ElementRef<typeof AccordionPrimitive.Content>,
60  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
61>(({ className, children, ...props }, ref) => (
62  <AccordionPrimitive.Content
63    ref={ref}
64// … truncated