1import type { ComponentProps, ReactNode } from "react";
2import { ChevronDownIcon } from "lucide-react";
3import { cn } from "../../lib/utils";
4
5const tones = {
6 muted: { label: "text-sidebar-muted-foreground/60", line: "bg-sidebar-border/60" },
7 info: { label: "text-blue-600 dark:text-blue-400", line: "bg-blue-500/20 dark:bg-blue-400/15" },
8 emphasized: { label: "text-sidebar-foreground/80", line: "bg-sidebar-foreground/25" },
9 accent: { label: "text-primary", line: "bg-primary/50" },
10} as const;
11
12/** Callers own the section state and content; this owns all header geometry. */
13export function CollapsibleSectionHeader({
14 children,
15 expanded,
16 tone = "muted",
17 variant = "default",
18 accessory,
19 ...buttonProps
20}: Omit<ComponentProps<"button">, "className" | "style" | "aria-expanded"> & {
21 expanded: boolean;
22 tone?: keyof typeof tones;
23 variant?: "default" | "panel";
24 accessory?: ReactNode;
25}) {
26 return (
27 <button
28 {...buttonProps}
29 type="button"
30 aria-expanded={expanded}
31 className={cn(
32 "flex h-8 w-full cursor-pointer items-center gap-2 rounded-md text-left text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/70",
33 variant === "panel" ? "ps-2 pe-2.5" : "px-2",
34 tones[tone].label,
35 )}
36 >
37 <span className="shrink-0">{children}</span>
38 <span aria-hidden className={cn("h-px min-w-2 flex-1", tones[tone].line)} />
39 {accessory}
40 <ChevronDownIcon
41 aria-hidden
42 className={cn("size-3 shrink-0 transition-transform", !expanded && "rotate-180")}
43 />
44 </button>
45 );
46}
47
48export function SectionHeaderStatus({ children }: { children: ReactNode }) {
49 return (
50 <span className="shrink-0 text-3xs leading-none text-destructive-foreground">{children}</span>
51 );
52}