"use client";
import * as React from "react";
import { Group, Panel, Separator } from "react-resizable-panels";
import { DotsSixVerticalIcon } from "@phosphor-icons/react";
import { cn } from "@/lib/utils";

/** shadcn-compatible names over react-resizable-panels v4 (Group / Panel / Separator). */
export function ResizablePanelGroup({ className, ...p }: React.ComponentProps<typeof Group>) {
  return <Group className={cn("flex size-full", className)} {...p} />;
}
export function ResizablePanel(p: React.ComponentProps<typeof Panel>) {
  return <Panel {...p} />;
}

// Separator aria-orientation is "vertical" for a side-by-side split, "horizontal" for stacked panels.

export function ResizableHandle({ withHandle, className, ...p }: React.ComponentProps<typeof Separator> & { withHandle?: boolean }) {
  return (
    <Separator
      className={cn(
        "group/handle relative flex w-3 items-center justify-center outline-none focus-visible:ring-4 focus-visible:ring-ring/40",
        "aria-[orientation=horizontal]:h-3 aria-[orientation=horizontal]:w-full",
        className
      )}
      {...p}
    >
      <span
        aria-hidden
        className={cn("absolute inset-y-3 left-1/2 w-px -translate-x-1/2 bg-outline/60", "group-aria-[orientation=horizontal]/handle:inset-x-3 group-aria-[orientation=horizontal]/handle:inset-y-auto group-aria-[orientation=horizontal]/handle:left-auto group-aria-[orientation=horizontal]/handle:top-1/2 group-aria-[orientation=horizontal]/handle:h-px group-aria-[orientation=horizontal]/handle:w-auto group-aria-[orientation=horizontal]/handle:translate-x-0 group-aria-[orientation=horizontal]/handle:-translate-y-1/2")}
      />
      {withHandle && (
        <div
          className={cn(
            "z-10 grid h-8 w-4 place-items-center rounded-full bg-surface text-on-surface-muted shadow-clay-sm transition-[height,width,color] duration-200 ease-[cubic-bezier(.3,1.6,.5,1)]",
            "group-hover/handle:h-12 group-hover/handle:text-primary group-data-[separator=active]/handle:h-14 group-data-[separator=active]/handle:text-primary",
            "group-aria-[orientation=horizontal]/handle:h-4 group-aria-[orientation=horizontal]/handle:w-8 group-aria-[orientation=horizontal]/handle:group-hover/handle:h-4 group-aria-[orientation=horizontal]/handle:group-hover/handle:w-12 group-aria-[orientation=horizontal]/handle:group-data-[separator=active]/handle:h-4 group-aria-[orientation=horizontal]/handle:group-data-[separator=active]/handle:w-14"
          )}
        >
          <DotsSixVerticalIcon weight="bold" className={cn("size-3.5", "group-aria-[orientation=horizontal]/handle:rotate-90")} />
        </div>
      )}
    </Separator>
  );
}
Installation
