Collapsible

1"use client";
2 
3import "./collapsible.css";
4import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { CollapsibleContext, useCollapsibleContext } from "./collapsible.context";
9import { collapsibleVariants, type CollapsibleVariants } from "./collapsible.variants";
10 
11export type CollapsibleProps = CollapsibleVariants &
12  React.ComponentProps<typeof BaseCollapsible.Root>;
13 
14export const CollapsibleRoot = ({ children, className, variant, ...props }: CollapsibleProps) => {
15  const slots = collapsibleVariants({ variant });
16 
17  return (
18    <CollapsibleContext.Provider value={{ slots }}>
19      <BaseCollapsible.Root className={cn(slots.root(), className)} {...props}>
20        {children}
21      </BaseCollapsible.Root>
22    </CollapsibleContext.Provider>
23  );
24};
25 
26export type CollapsibleTriggerProps = React.ComponentProps<typeof BaseCollapsible.Trigger> & {
27  hideChevron?: boolean;
28};
29 
30export const CollapsibleTrigger = ({
31  children,
32  className,
33  hideChevron = false,
34  ...props
35}: CollapsibleTriggerProps) => {
36  const { slots } = useCollapsibleContext();
37  return (
38    <BaseCollapsible.Trigger className={cn(slots.trigger(), className)} {...props}>
39      {children}
40      {!hideChevron && (
41        <svg
42          className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-150 group-data-panel-open:rotate-90"
43          fill="none"
44          stroke="currentColor"
45          strokeLinecap="round"
46          strokeLinejoin="round"
47          strokeWidth="2"
48          viewBox="0 0 24 24"
49        >
50          <path d="m9 18 6-6-6-6" />
51        </svg>
52      )}
53    </BaseCollapsible.Trigger>
54  );
55};
56 
57export type CollapsiblePanelProps = React.ComponentProps<typeof BaseCollapsible.Panel>;
58 
59export const CollapsiblePanel = ({ children, className, ...props }: CollapsiblePanelProps) => {
60  const { slots } = useCollapsibleContext();
61  return (
62    <BaseCollapsible.Panel className={cn(slots.panel(), className)} {...props}>
63      <div className="text-muted-foreground px-1 py-2">{children}</div>
64    </BaseCollapsible.Panel>
65  );
66};