Collapsible

1import * as React from "react";
2import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
3 
4import { cn } from "@/lib/utils";
5 
6function CollapsibleRoot({ className, ...props }: BaseCollapsible.Root.Props) {
7  return (
8    <BaseCollapsible.Root
9      data-slot="collapsible"
10      className={cn("group/collapsible", className)}
11      {...props}
12    />
13  );
14}
15 
16function CollapsibleTrigger({
17  className,
18  ...props
19}: BaseCollapsible.Trigger.Props) {
20  return (
21    <BaseCollapsible.Trigger
22      data-slot="collapsible-trigger"
23      className={cn(
24        "bg-card border-border hover:bg-surface-hover group hover:text-accent-foreground focus-visible:outline-ring/50 flex w-full cursor-pointer items-center justify-between rounded-md border px-3 py-2 text-left text-sm font-medium shadow-[0_1px_3px_0_oklch(0.18_0_0_/_0.06)] outline-0 transition-[outline,outline-offset] duration-100 ease-out focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-60",
25        className,
26      )}
27      {...props}
28    />
29  );
30}
31 
32function CollapsibleContent({
33  className,
34  ...props
35}: BaseCollapsible.Panel.Props) {
36  return (
37    <BaseCollapsible.Panel
38      data-slot="collapsible-panel"
39      className={cn(
40        "h-[var(--collapsible-panel-height)] overflow-hidden text-sm transition-all duration-200 ease-out data-[ending-style]:h-0 data-[ending-style]:opacity-0 data-[starting-style]:h-0 data-[starting-style]:opacity-0",
41        className,
42      )}
43      {...props}
44    />
45  );
46}
47 
48const Collapsible = CollapsibleRoot;
49 
50export { Collapsible, CollapsibleTrigger, CollapsibleContent };