Panel

1"use client";
2 
3import * as React from "react";
4import { X } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { StatusBadge, type StatusBadgeProps } from "@/registry/blacksite/ui/status-badge";
8 
9interface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
10  /** Panel title (rendered uppercase + monospace). */
11  title?: React.ReactNode;
12  /** Optional secondary title segment after a slash divider. */
13  subtitle?: React.ReactNode;
14  /** Status badge shown on the right of the header. */
15  status?: StatusBadgeProps["status"];
16  /** Custom slot for header right-side controls. */
17  actions?: React.ReactNode;
18  /** Show a close (X) button. */
19  closable?: boolean;
20  onClose?: () => void;
21  /** Density: "default" 16px padding, "compact" 12px. */
22  density?: "default" | "compact";
23  /** Hide the inner padding (e.g. for full-bleed maps/charts). */
24  bleed?: boolean;
25}
26 
27const Panel = React.forwardRef<HTMLDivElement, PanelProps>(
28  (
29    {
30      className,
31      title,
32      subtitle,
33      status,
34      actions,
35      closable,
36      onClose,
37      density = "default",
38      bleed = false,
39      children,
40      ...props
41    },
42    ref,
43  ) => {
44    return (
45      <section
46        ref={ref}
47        className={cn(
48          "border-border bg-card text-card-foreground relative flex flex-col rounded-md border",
49          "overflow-hidden shadow-[var(--shadow-panel)]",
50          className,
51        )}
52        {...props}
53      >
54        {(title || actions || status || closable) && (
55          <header
56            className={cn(
57              "border-border flex items-center justify-between gap-3 border-b",
58              density === "compact" ? "h-8 px-2.5" : "h-9 px-3",
59            )}
60          >
61            <div className="flex min-w-0 items-center gap-2">
62              {title && (
63                <h3 className="text-mono text-foreground-muted truncate text-[11px] tracking-[0.1em] uppercase">
64                  {title}
65                  {subtitle && <span className="text-foreground-subtle"> / {subtitle}</span>}
66                </h3>
67              )}
68            </div>
69            <div className="flex items-center gap-2">
70              {actions}
71              {status && <StatusBadge status={status} />}
72              {closable && (
73                <button
74                  type="button"
75                  aria-label="Close panel"
76                  onClick={onClose}
77// … truncated