4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T140a,"use client"; import { Children, useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; type Direction = "horizontal" | "vertical"; interface ResizablePanelsProps { children: React.ReactNode; className?: string; defaultSizes?: number[]; direction?: Direction; maxSize?: number; minSize?: number; resizeHandleSize?: number; } function getEqualSizes(count: number): number[] { const size = 100 / count; return Array.from({ length: count }, () => size); } const DEFAULT_HANDLE_SIZE = 24; export function ResizablePanels({ children, className, direction = "horizontal", defaultSizes, minSize = 10, maxSize = 90, resizeHandleSize = DEFAULT_HANDLE_SIZE, }: ResizablePanelsProps) { const panels = Children.toArray(children); const count = panels.length; const [sizes, setSizes] = useState(() => { if (defaultSizes && defaultSizes.length === count) { const sum = defaultSizes.reduce((a, b) => a + b, 0); return defaultSizes.map((s) => (s / sum) * 100); } return getEqualSizes(count); }); const containerRef = useRef(null); const draggingRef = useRef<{ index: number; startSizes: number[]; startPos: number } | null>(null); const clamp = useCallback((value: number) => Math.max(minSize, Math.min(maxSize, value)), [minSize, maxSize]); const handlePointerDown = useCallback( (index: number) => (e: React.PointerEvent) => { e.preventDefault(); (e.target as HTMLElement).setPointerCapture(e.pointerId); document.body.style.touchAction = "none"; draggingRef.current = { index, startPos: direction === "horizontal" ? e.clientX : e.clientY, startSizes: [...sizes], }; }, [sizes, direction], ); useEffect(() => { const handlePointerMove = (e: PointerEvent) => { const drag = draggingRef.current; if (!drag) { return; } if (!containerRef.current) { return; } const pos = direction === "horizontal" ? e.clientX : e.clientY; const delta = pos - drag.startPos; const rect = containerRef.current.getBoundingClientRect(); const total = direction === "horizontal" ? rect.width : rect.height; const deltaPercent = (delta / total) * 100; const leftIdx = drag.index; const rightIdx = drag.index + 1; const leftStart = drag.startSizes[leftIdx] ?? 0; const rightStart = drag.startSizes[rightIdx] ?? 0; const newSizes = [...drag.startSizes]; let leftNew = leftStart + deltaPercent; let rightNew = rightStart - deltaPercent; leftNew = clamp(leftNew); rightNew = clamp(rightNew); const totalAdjacent = leftStart + rightStart; const newTotal = leftNew + rightNew; if (Math.abs(newTotal - totalAdjacent) > 0.01) { const scale = totalAdjacent / newTotal; leftNew *= scale; rightNew *= scale; } newSizes[leftIdx] = leftNew; newSizes[rightIdx] = rightNew; setSizes(newSizes); }; const handlePointerUp = () => { draggingRef.current = null; document.body.style.cursor = ""; document.body.style.touchAction = ""; document.body.style.userSelect = ""; }; window.addEventListener("pointermove", handlePointerMove); window.addEventListener("pointerup", handlePointerUp); window.addEventListener("pointercancel", handlePointerUp); return () => { window.removeEventListener("pointermove", handlePointerMove); window.removeEventListener("pointerup", handlePointerUp); window.removeEventListener("pointercancel", handlePointerUp); }; }, [direction, clamp]); useEffect(() => { if (sizes.length !== count) { setSizes(getEqualSizes(count)); } }, [count, sizes.length]); const isHorizontal = direction === "horizontal"; const elements: React.ReactNode[] = []; for (let i = 0; i < count; i++) { elements.push(

{panels[i]}

, ); if (i < count - 1) { elements.push(

, ); } } return (

{elements}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://pulkit.page/components/resizable-panels.json","proxyUrl":"https://shadcnregistry.com/r/pulkitxm/resizable-panels","itemId":"@pulkitxm/resizable-panels"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/new-york/resizable-panels/resizable-panels.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

Resizable Panels

Installation

Files

components

Styles