Aurora Accordion

1"use client"
2 
3import * as React from "react"
4import * as AccordionPrimitive from "@radix-ui/react-accordion"
5import { ChevronDown } from "lucide-react"
6import { cn } from "@/lib/utils"
7 
8export interface AuroraAccordionProps
9  extends Omit<
10    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>,
11    "children" | "collapsible" | "defaultValue" | "onValueChange" | "type" | "value"
12  > {
13  children: React.ReactNode
14  type?: "single" | "multiple"
15  collapsible?: boolean
16  defaultValue?: string | string[]
17  value?: string | string[]
18  onValueChange?: ((value: string) => void) | ((value: string[]) => void)
19  ref?: React.Ref<React.ComponentRef<typeof AccordionPrimitive.Root>>
20}
21 
22export interface AuroraAccordionItemProps
23  extends Omit<
24    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>,
25    "children" | "title" | "value"
26  > {
27  title: React.ReactNode
28  meta?: React.ReactNode
29  defaultOpen?: boolean
30  value?: string
31  children: React.ReactNode
32  ref?: React.Ref<React.ComponentRef<typeof AccordionPrimitive.Item>>
33}
34 
35export type AccordionProps = AuroraAccordionProps
36export type AccordionItemProps = AuroraAccordionItemProps
37 
38function Accordion({
39  ref,
40  children,
41  className,
42  type = "multiple",
43  collapsible = true,
44  defaultValue,
45  value,
46  onValueChange,
47  style,
48  ...props
49}: AuroraAccordionProps) {
50  const items = React.Children.toArray(children)
51 
52  const normalizedChildren = items.map((child, index) => {
53    if (!React.isValidElement<AuroraAccordionItemProps>(child)) {
54      return child
55    }
56 
57    return React.cloneElement(child, {
58      value: child.props.value ?? `accordion-item-${index}`,
59    })
60  })
61 
62  const derivedDefaultValue = React.useMemo(() => {
63    if (defaultValue !== undefined) {
64      return defaultValue
65    }
66 
67    const openValues = items.flatMap((child, index) => {
68      if (!React.isValidElement<AuroraAccordionItemProps>(child) || !child.props.defaultOpen) {
69        return []
70      }
71 
72      return [child.props.value ?? `accordion-item-${index}`]
73    })
74 
75    return type === "multiple" ? openValues : openValues[0]
76  }, [defaultValue, items, type])
77 
78  const rootClassName = cn("overflow-hidden rounded-[12px] border", className)
79  const rootStyle = {
80    background: "var(--aurora-panel-medium)",
81    borderColor: "var(--aurora-border-default)",
82    ...style,
83  }
84 
85  if (type === "multiple") {
86    return (
87      <AccordionPrimitive.Root
88        ref={ref}
89        data-slot="accordion"
90        type="multiple"
91// … truncated