Resizable

1"use client";
2 
3import { DotsSixVerticalIcon } from "@phosphor-icons/react";
4import type * as React from "react";
5import * as ResizablePrimitive from "react-resizable-panels";
6import { cn } from "@/lib/utils";
7 
8// react-resizable-panels v4: PanelGroup → Group (sets its own flex-direction from `orientation`),
9// PanelResizeHandle → Separator (carries aria-orientation). Handle styling keys off aria-[orientation].
10function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Group>) {
11  return <ResizablePrimitive.Group data-slot="resizable-panel-group" className={cn("flex h-full w-full", className)} {...props} />;
12}
13 
14function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
15  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
16}
17 
18function ResizableHandle({
19  withHandle,
20  className,
21  ...props
22}: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
23  withHandle?: boolean;
24}) {
25  return (
26    <ResizablePrimitive.Separator
27      data-slot="resizable-handle"
28      className={cn(
29        "relative flex w-px items-center justify-center bg-[var(--glass-border)] after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none aria-[orientation=vertical]:h-px aria-[orientation=vertical]:w-full aria-[orientation=vertical]:after:left-0 aria-[orientation=vertical]:after:h-1 aria-[orientation=vertical]:after:w-full aria-[orientation=vertical]:after:-translate-y-1/2 aria-[orientation=vertical]:after:translate-x-0 [&[aria-orientation=vertical]>div]:rotate-90",
30        className,
31      )}
32      {...props}
33    >
34      {withHandle && (
35        <div className="glass z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-[var(--glass-border)]">
36          <DotsSixVerticalIcon className="h-2.5 w-2.5 text-foreground" />
37        </div>
38      )}
39    </ResizablePrimitive.Separator>
40  );
41}
42 
43export { ResizableHandle, ResizablePanel, ResizablePanelGroup };