Aurora Collapsible

1"use client"
2 
3import * as React from "react"
4import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
5import { ChevronRight } from "lucide-react"
6import { cn } from "@/lib/utils"
7 
8const CollapsibleRoot = CollapsiblePrimitive.Root
9 
10function CollapsibleTrigger({
11  className,
12  children,
13  style,
14  ...props
15}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
16  return (
17    <CollapsiblePrimitive.CollapsibleTrigger
18      data-slot="collapsible-trigger"
19      className={cn(
20        "group flex w-full items-center gap-3 px-5 py-3.5 text-left outline-none transition-colors duration-150",
21        "focus-visible:ring-2 focus-visible:ring-[var(--aurora-focus-ring)] focus-visible:ring-inset",
22        className
23      )}
24      style={{
25        color: "var(--aurora-text-primary)",
26        fontFamily: "var(--aurora-font-display)",
27        fontSize: "15px",
28        fontWeight: "var(--aurora-weight-heading)",
29        ...style,
30      }}
31      {...props}
32    >
33      <ChevronRight
34        className="size-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90"
35        strokeWidth={2}
36        aria-hidden
37        style={{ color: "var(--aurora-text-muted)" }}
38      />
39      <span className="truncate">{children}</span>
40    </CollapsiblePrimitive.CollapsibleTrigger>
41  )
42}
43 
44function CollapsibleContent({
45  className,
46  children,
47  style,
48  ...props
49}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
50  return (
51    <CollapsiblePrimitive.CollapsibleContent
52      data-slot="collapsible-content"
53      className={cn(
54        "overflow-hidden border-t data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
55        className
56      )}
57      style={{ borderColor: "var(--aurora-border-default)" }}
58      {...props}
59    >
60      <div
61        className="px-5 pb-4 pt-3"
62        style={{
63          color: "var(--aurora-text-muted)",
64          fontFamily: "var(--aurora-font-sans)",
65          fontSize: "var(--aurora-type-body)",
66          lineHeight: 1.55,
67          ...style,
68        }}
69      >
70        {children}
71      </div>
72    </CollapsiblePrimitive.CollapsibleContent>
73  )
74}
75 
76export interface CollapsibleProps
77  extends Omit<
78    React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>,
79    "children" | "title"
80  > {
81  title: React.ReactNode
82  children: React.ReactNode
83  triggerClassName?: string
84  contentClassName?: string
85// … truncated