{"_id":"@blitzd/resizable-panels","name":"@blitzd/resizable-panels","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@blitzd/resizable-panels","version":"0.1.0","description":"Headless, animated, resizable panel layout primitives for React. Persistence, collapsible panels, nested groups.","license":"MIT","author":{"name":"blitzd"},"repository":{"type":"git","url":"git+https://github.com/blitzd-dev/resizable-panels.git","directory":"packages/resizable-panels"},"homepage":"https://resizable-panels.blitzd.dev","bugs":{"url":"https://github.com/blitzd-dev/resizable-panels/issues"},"keywords":["react","panels","resizable","layout","split","splitter","animated","headless"],"type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./package.json":"./package.json"},"sideEffects":false,"scripts":{"build":"vite build && tsc -p tsconfig.build.json","dev":"vite build --watch","prepack":"bun run build && bun run verify:package","test":"vitest run","test:package":"node ./scripts/package-smoke-test.mjs","test:e2e":"playwright test","test:e2e:react18":"RESIZABLE_PANELS_REACT_VERSION=18 playwright test","test:e2e:react19":"RESIZABLE_PANELS_REACT_VERSION=19 playwright test","test:e2e:headed":"playwright test --headed","typecheck":"tsc --noEmit && tsc -p e2e --noEmit","verify:budgets":"node ./scripts/measure-bundle-budgets.mjs","verify:package":"node ./scripts/verify-package-entrypoints.mjs","verify:publish":"node ./scripts/verify-publish.mjs"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0"},"dependencies":{},"devDependencies":{"@playwright/test":"^1.59.1","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react18":"npm:@types/react@^18.3.0","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","jsdom":"^29.1.1","react":"^19.2.5","react18":"npm:react@^18.3.1","react-dom":"^19.2.5","react-dom18":"npm:react-dom@^18.3.1","rollup-preserve-directives":"^1.1.3","typescript":"~6.0.2","vite":"8.0.16","vitest":"^4.1.6"},"publishConfig":{"access":"public"},"_id":"@blitzd/resizable-panels@0.1.0","gitHead":"8262fa1f8313d8b8fb32dc6b44e17c1d6a6b10c1","_nodeVersion":"23.6.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-8u2wA8BVKuIiUGW04yDQ9gBoHMKJDDssyWUfHsXXZ7wqY4yXO23FQ2yQGfKdBUWwX6iOERUXGoBbVC8x5cw/kw==","shasum":"bf6993664bed567ead3b3b6a600a4419880b84c5","tarball":"https://registry.npmjs.org/@blitzd/resizable-panels/-/resizable-panels-0.1.0.tgz","fileCount":139,"unpackedSize":1113340,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDGHn1qs8KyMwS4qxQvVBptqSMCvN1xcnwsjK8sB0XNrAiEAsSiOgTnI+D4dQucsOpvz2ZB18cMIxMLf+WlEM//ZnFQ="}]},"_npmUser":{"name":"tristansinclair","email":"tristan@tristansinclair.dev"},"directories":{},"maintainers":[{"name":"tristansinclair","email":"tristan@tristansinclair.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/resizable-panels_0.1.0_1785280171532_0.48785450498201466"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-28T23:09:31.407Z","0.1.0":"2026-07-28T23:09:31.702Z","modified":"2026-07-28T23:09:31.901Z"},"maintainers":[{"name":"tristansinclair","email":"tristan@tristansinclair.dev"}],"description":"Headless, animated, resizable panel layout primitives for React. Persistence, collapsible panels, nested groups.","homepage":"https://resizable-panels.blitzd.dev","keywords":["react","panels","resizable","layout","split","splitter","animated","headless"],"repository":{"type":"git","url":"git+https://github.com/blitzd-dev/resizable-panels.git","directory":"packages/resizable-panels"},"author":{"name":"blitzd"},"bugs":{"url":"https://github.com/blitzd-dev/resizable-panels/issues"},"license":"MIT","readme":"# @blitzd/resizable-panels\n\nHeadless, animated, resizable panel layouts for React.\n\n- **Headless** — no stylesheet to import, no design opinions. You style the DOM.\n- **No setup** — a single `` works on its own; no provider to wire up.\n- **Complete** — docked & peer panels, nested groups, collapse (animated or to a\n rail), drag-to-collapse thresholds, persistence, RTL, SSR, and a full keyboard\n and screen-reader story.\n\n## Install\n\n```sh\nnpm install @blitzd/resizable-panels\n```\n\nReact 18.2+ and 19. ESM only. Modern Chrome, Firefox, Safari, and Edge.\n\n## Quick start\n\nThree pieces: a `PanelGroup` sets the axis, `Panel`s sit inside it, and a\n`PanelResizeHandle` goes between two panels as their direct sibling. The group\nfills its container, so give the container a size.\n\n```tsx\nimport { Panel, PanelGroup, PanelResizeHandle } from \"@blitzd/resizable-panels\";\n\nexport function Split() {\n return (\n
\n \n Left\n \n Right\n \n
\n );\n}\n```\n\nDrag the seam — the two panels share the space. That is the whole model.\n\n## A collapsible sidebar\n\nGive a panel a `side` and it becomes a *docked* panel: it has its own size and\ncollapses (by default, animated). Everything else stays a *peer* that shares the\nremaining space.\n\n```tsx\n
\n \n \n Sidebar\n \n \n Editor\n \n
\n```\n\nSizes accept pixels or a CSS-ish string — `defaultSize=\"30%\"`,\n`minSize=\"16rem\"`, `maxSize=\"calc(100% - 320px)\"`.\n\n## Control it from your app\n\nGive a panel a `panelId` and its group a `groupId`, and read or drive it from\nanywhere — no prop drilling:\n\n```tsx\nimport { usePanelControls } from \"@blitzd/resizable-panels\";\n\nfunction SidebarToggle() {\n const sidebar = usePanelControls({ groupId: \"workspace\", panelId: \"sidebar\" });\n return ;\n}\n```\n\nPrefer to own the state yourself? Every collapsible panel takes a controlled\n`collapsed` prop, and every group takes a controlled `value` — both propose\nchanges through callbacks you accept or decline.\n\n## Documentation\n\nFull guides, live examples, and the API reference:\n[resizable-panels.blitzd.dev](https://resizable-panels.blitzd.dev)\n\n## License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md","_rev":"1-0c1480d10b1e8c463de1760ec59a92ee"}