Accordion

1"use client";
2 
3import "./accordion.css";
4import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { AccordionContext, useAccordionContext } from "./accordion.context";
9import { accordionVariants, type AccordionVariants } from "./accordion.variants";
10 
11export type AccordionProps = AccordionVariants & React.ComponentProps<typeof BaseAccordion.Root>;
12 
13export const AccordionRoot = ({ children, className, variant, ...props }: AccordionProps) => {
14  const slots = accordionVariants({ variant });
15 
16  return (
17    <AccordionContext.Provider value={{ slots }}>
18      <BaseAccordion.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseAccordion.Root>
21    </AccordionContext.Provider>
22  );
23};
24 
25export type AccordionItemProps = React.ComponentProps<typeof BaseAccordion.Item>;
26 
27export const AccordionItem = ({ className, ...props }: AccordionItemProps) => {
28  const { slots } = useAccordionContext();
29  return <BaseAccordion.Item className={cn(slots.item(), className)} {...props} />;
30};
31 
32export type AccordionHeaderProps = React.ComponentProps<typeof BaseAccordion.Header>;
33 
34export const AccordionHeader = ({ className, ...props }: AccordionHeaderProps) => {
35  const { slots } = useAccordionContext();
36  return <BaseAccordion.Header className={cn(slots.header(), className)} {...props} />;
37};
38 
39export type AccordionTriggerProps = React.ComponentProps<typeof BaseAccordion.Trigger> & {
40  hideChevron?: boolean;
41};
42 
43export const AccordionTrigger = ({
44  children,
45  className,
46  hideChevron = false,
47  ...props
48}: AccordionTriggerProps) => {
49  const { slots } = useAccordionContext();
50  return (
51    <BaseAccordion.Trigger className={cn(slots.trigger(), className)} {...props}>
52      {children}
53      {!hideChevron && (
54        <svg
55          className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200 group-data-panel-open:rotate-180"
56          fill="none"
57          stroke="currentColor"
58          strokeLinecap="round"
59          strokeLinejoin="round"
60          strokeWidth="2"
61          viewBox="0 0 24 24"
62        >
63          <path d="m6 9 6 6 6-6" />
64        </svg>
65      )}
66    </BaseAccordion.Trigger>
67  );
68};
69 
70export type AccordionPanelProps = React.ComponentProps<typeof BaseAccordion.Panel>;
71 
72export const AccordionPanel = ({ children, className, ...props }: AccordionPanelProps) => {
73  const { slots } = useAccordionContext();
74  return (
75// … truncated