Expanding Panel

1"use client";
2 
3import { ChevronsUpDown } from "lucide-react";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8 
9const PANEL_TRANSITION = {
10  type: "spring",
11  duration: 0.24,
12  bounce: 0,
13} as const;
14const CONTENT_TRANSITION = {
15  duration: 0.2,
16  ease: [0.16, 1, 0.3, 1],
17} as const;
18const REDUCED_TRANSITION = { duration: 0 } as const;
19// Single source of truth for the panel's height cap. Applied to the content
20// region so consumers can add a scroll area / pinned footer without knowing it.
21const CONTENT_MAX_HEIGHT =
22  "var(--expanding-panel-max-height, min(15.5rem, calc(100dvh - 8rem)))";
23 
24type ExpandingPanelContextValue = {
25  open: boolean;
26  setOpen: (open: boolean) => void;
27};
28 
29const ExpandingPanelContext =
30  React.createContext<ExpandingPanelContextValue | null>(null);
31 
32/**
33 * Access the expanding panel's open state from within its `children`, e.g. to
34 * collapse the panel after an action. Throws when used outside the component.
35 */
36export function useExpandingPanel() {
37  const context = React.useContext(ExpandingPanelContext);
38 
39  if (!context) {
40    throw new Error(
41      "useExpandingPanel must be used within an <ExpandingPanel>.",
42    );
43  }
44 
45  return context;
46}
47 
48export type ExpandingPanelClassNames = {
49  panel?: string;
50  content?: string;
51  trigger?: string;
52};
53 
54export type ExpandingPanelProps = Omit<
55  React.ComponentPropsWithoutRef<"aside">,
56  "children"
57> & {
58  open?: boolean;
59  defaultOpen?: boolean;
60  onOpenChange?: (open: boolean) => void;
61  triggerIcon?: React.ReactNode;
62  openLabel?: string;
63  closeLabel?: string;
64  closeOnEscape?: boolean;
65  closeOnOutsideClick?: boolean;
66  classNames?: ExpandingPanelClassNames;
67  children?: React.ReactNode;
68};
69 
70/**
71 * A floating panel that grows in width and height from a compact icon trigger
72 * in its top-right corner. It is intentionally content-agnostic.
73 *
74 * The panel is bounded by `--expanding-panel-width` and
75 * `--expanding-panel-max-height` and clips overflow, so the morph never runs
76 * off-screen. The content region is a flex column capped at that height, so
77 * tall content can add a `flex-1` scroll area (and, e.g., a `shrink-0` pinned
78 * footer) without re-declaring the cap.
79 *
80 * The trigger overlays the top-right corner; content that reaches it should
81 * clear it with `pr-[var(--expanding-panel-trigger-inset)]` (defaults to the
82 * 2rem trigger size).
83 */
84export function ExpandingPanel({
85  open,
86// … truncated