Collapsible (Tailwind)

1"use client";
2 
3import { Collapsible } from "@base-ui/react/collapsible";
4import { cn } from "@/lib/utils";
5 
6function CollapsibleRoot({ className, ...props }: Collapsible.Root.Props) {
7  return (
8    <Collapsible.Root
9      className={cn("flex w-full max-w-56 flex-col justify-center text-foreground", className)}
10      data-slot="collapsible-root"
11      {...props}
12    />
13  );
14}
15 
16function CollapsibleTrigger({ className, children, ...props }: Collapsible.Trigger.Props) {
17  return (
18    <Collapsible.Trigger
19      className={cn(
20        "m-0 flex items-center justify-between rounded px-2 py-1 outline-none",
21        "bg-[var(--mix-card-15-bg)] text-foreground",
22        "cursor-pointer font-inherit font-medium text-sm leading-5",
23        "border border-border transition-all duration-150 ease-out",
24        "hover:bg-[var(--mix-card-50-bg)]",
25        "active:bg-[var(--mix-card-15-bg)]",
26        "focus-visible:outline-2 focus-visible:outline-ring",
27        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
28        "data-[disabled]:hover:bg-muted",
29        className
30      )}
31      data-slot="collapsible-trigger"
32      {...props}
33    >
34      {children}
35      <svg
36        aria-hidden="true"
37        className={cn(
38          "h-3 w-3 flex-shrink-0 text-muted-foreground",
39          "[&_path:first-child]:transition-transform [&_path:first-child]:duration-200 [&_path:first-child]:ease-[var(--ease-out-expo)]",
40          "[&_path:first-child]:origin-center",
41          "[&_path:last-child]:transition-transform [&_path:last-child]:duration-200 [&_path:last-child]:ease-[var(--ease-out-expo)]",
42          "[&_path:last-child]:origin-center",
43          "[[data-panel-open]_&_path:first-child]:-translate-y-2.5",
44          "[[data-panel-open]_&_path:last-child]:translate-y-2.5"
45        )}
46        fill="none"
47        height="16"
48        viewBox="0 0 24 24"
49        width="16"
50      >
51        <path d="m7 15 5 5 5-5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
52        <path d="m7 9 5-5 5 5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
53      </svg>
54    </Collapsible.Trigger>
55  );
56}
57 
58function CollapsiblePanel({ className, ...props }: Collapsible.Panel.Props) {
59  return (
60    <Collapsible.Panel
61      className={cn(
62        "flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden",
63        "box-border w-full text-sm leading-5 transition-all duration-150 ease-out",
64// … truncated