Accordion

1"use client";
2 
3import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
4import { CaretDown } from "@phosphor-icons/react/dist/ssr";
5import { createContext, useContext } from "react";
6import type * as React from "react";
7import { cn } from "@/lib/utils";
8import { selectionFocus } from "@/lib/recipes";
9 
10/** One primitive for every disclosure pattern.
11 *
12 *  Pass `openMultiple={false}` for one-open-at-a-time; a single-item
13 *  Accordion covers inline "show more" reveals without needing a
14 *  separate primitive.
15 *
16 *  `variant` controls visual language:
17 *    - `flush` (default) — borderless, tight, no chrome. Filter panels,
18 *      inline "show more" reveals.
19 *    - `bordered` — hairline row separators between items. Notion /
20 *      settings-style FAQs.
21 *    - `card` — each item is its own bordered card with padding. Marketing
22 *      FAQs, dashboard collapsible panels.
23 *
24 *  Panels stay mounted (`keepMounted`) for find-in-page compatibility. */
25 
26type AccordionVariant = "flush" | "bordered" | "card";
27 
28const AccordionVariantContext = createContext<AccordionVariant>("flush");
29 
30export type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {
31  variant?: AccordionVariant;
32};
33 
34export function Accordion({
35  variant = "flush",
36  className,
37  ...props
38}: AccordionProps): React.ReactElement {
39  return (
40    <AccordionVariantContext.Provider value={variant}>
41      <AccordionPrimitive.Root
42        data-slot="accordion"
43        data-variant={variant}
44        className={cn(
45          variant === "card" && "flex flex-col gap-2",
46          className,
47        )}
48        {...props}
49      />
50    </AccordionVariantContext.Provider>
51  );
52}
53 
54export type AccordionItemProps = React.ComponentProps<
55  typeof AccordionPrimitive.Item
56>;
57 
58export function AccordionItem({
59  className,
60  ...props
61}: AccordionItemProps): React.ReactElement {
62  const variant = useContext(AccordionVariantContext);
63  return (
64    <AccordionPrimitive.Item
65      data-slot="accordion-item"
66      className={cn(
67        variant === "bordered" &&
68          "[&:not(:first-child)]:border-t [&:not(:first-child)]:border-hairline",
69        variant === "card" && "rounded-[var(--radius-8)] border border-hairline px-4",
70        className,
71      )}
72      {...props}
73    />
74  );
75}
76 
77export type AccordionTriggerProps = React.ComponentProps<
78  typeof AccordionPrimitive.Trigger
79> & {
80  /** Trailing chevron slot. `null` hides the caret; pass any node to
81// … truncated