{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-resizable-6","type":"registry:block","title":"Handle pill with spring scale on drag","description":"Handle pill with spring scale on drag","dependencies":[],"registryDependencies":["resizable"],"files":[{"path":"c-resizable-6.tsx","type":"registry:block","content":"\"use client\"\n\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from \"@/components/ui/resizable\"\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto w-full max-w-lg\">\n      <ResizablePanelGroup\n        orientation=\"horizontal\"\n        className=\"rounded-2xl min-h-[200px] border\"\n      >\n        <ResizablePanel defaultSize={30}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"text-sm font-semibold\">Sidebar</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle className=\"before:bg-muted-foreground/20 hover:before:bg-muted-foreground/40 active:before:bg-primary before:pointer-events-none before:absolute before:top-1/2 before:left-1/2 before:z-10 before:h-8 before:w-1 before:-translate-x-1/2 before:-translate-y-1/2 before:scale-y-75 before:rounded-full before:transition-all before:duration-300 before:ease-[cubic-bezier(0.32,0.72,0,1)] hover:before:scale-y-100 active:before:h-14 active:before:w-1.5 active:before:scale-y-100\" />\n        <ResizablePanel defaultSize={70}>\n          <div className=\"flex h-full items-center justify-center p-6\">\n            <span className=\"text-sm font-semibold\">Content</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </div>\n  )\n}","target":"components/examples/c-resizable-6.tsx"}],"meta":{"order":6,"gridSize":1,"label":"Spring Pill"}}