Accordion Multiselect

1"use client"
2 
3import * as React from "react"
4import * as AccordionPrimitive from "@radix-ui/react-accordion"
5import { Check, ChevronDown } from "lucide-react"
6import { cn } from "@/lib/utils"
7import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
8 
9// --- Architecture: Primitives (Unstyled but behaving) ---
10// We are using Radix UI Accordion and Checkbox primitives directly.
11// This component acts as a "Component" layer in the architecture:
12// - Wraps primitives with styling
13// - Supports controlled/uncontrolled usage
14// - Uses data-attributes for state and slots for targeting
15 
16// --- Context ---
17// We use a context to share selection state between the root and items/checkboxes
18// This allows for the Compound Component pattern.
19interface AccordionMultiselectContextValue {
20  selectedValues: string[]
21  onSelectionChange: (value: string, checked: boolean) => void
22}
23 
24const AccordionMultiselectContext = React.createContext<AccordionMultiselectContextValue | null>(null)
25 
26function useAccordionMultiselect() {
27  const context = React.useContext(AccordionMultiselectContext)
28  if (!context) {
29    throw new Error("AccordionMultiselect subcomponents must be used within AccordionMultiselect")
30  }
31  return context
32}
33 
34// --- Components ---
35 
36// We can't directly extend AccordionPrimitive.Root because it has specific props that might conflict or be typed in a way TS doesn't like for intersection
37// Instead, we'll define our props and intersect with the primitive's props, excluding what we override/don't need if necessary
38type AccordionRootProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
39 
40interface AccordionMultiselectProps
41  extends Omit<AccordionRootProps, "type" | "value" | "defaultValue" | "onValueChange"> {
42  value?: string[]
43  onValueChange?: (value: string[]) => void
44  defaultValue?: string[]
45}
46 
47function AccordionMultiselect({
48  value: controlledValue,
49  onValueChange,
50  defaultValue = [],
51  className,
52  children,
53  ...props
54}: AccordionMultiselectProps) {
55  // Controlled/Uncontrolled pattern
56  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue)
57  const isControlled = controlledValue !== undefined
58  const selectedValues = isControlled ? controlledValue : internalValue
59 
60  const handleSelectionChange = React.useCallback(
61    (value: string, checked: boolean) => {
62      let newValues: string[]
63      if (checked) {
64        newValues = [...selectedValues, value]
65      } else {
66// … truncated