{"_id":"@a4banana/react-layout-primitives","_rev":"7-846d6667a8ae6171af8f1ddadf037df8","name":"@a4banana/react-layout-primitives","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.0":{"name":"@a4banana/react-layout-primitives","version":"1.0.0","keywords":["react","layout","flexbox","components","ui","typescript"],"author":{"name":"a4banana"},"license":"MIT","_id":"@a4banana/react-layout-primitives@1.0.0","maintainers":[{"name":"a4banana","email":"apple4banana@gmail.com"}],"dist":{"shasum":"059a2f33347a22d5715357d92a55a232974edcbb","tarball":"https://registry.npmjs.org/@a4banana/react-layout-primitives/-/react-layout-primitives-1.0.0.tgz","fileCount":5,"integrity":"sha512-lEcBfBd/KdLuO43TxFRDBbLGj8zRo68ItRe+WxEV09zFA47bQ34VX3Mobn4oY+ZG5IX0XZwIuExu/ym6+N7Efg==","signatures":[{"sig":"MEQCIA8gGyzXfVVRnFAkl5DLNkWtNNnIQEHoS07+hUv2PX0VAiBX0yzoeeoO16G1mvOxQ+HShQ9L8dkv+g29TopkNyYAVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":35469},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":"^22.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"dev":"vite","build":"vite build","watch":"vite build --watch","preview":"vite preview"},"_npmUser":{"name":"a4banana","email":"apple4banana@gmail.com"},"_npmVersion":"10.8.2","description":"Flexible and reusable React layout primitive components for modern React applications.","directories":{},"_nodeVersion":"22.6.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.7","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.0","@types/node":"^20.11.24","@types/react":"^19.0.0","vite-plugin-dts":"^3.7.3","@types/react-dom":"^19.0.0","@vitejs/plugin-react-swc":"^3.6.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-layout-primitives_1.0.0_1736255685230_0.5929752403385009","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@a4banana/react-layout-primitives","version":"1.1.0","keywords":["react","layout","flexbox","components","ui","typescript"],"author":{"name":"a4banana"},"license":"MIT","_id":"@a4banana/react-layout-primitives@1.1.0","maintainers":[{"name":"a4banana","email":"apple4banana@gmail.com"}],"dist":{"shasum":"465eabd702245193b63aaf6e076f58e51a80a187","tarball":"https://registry.npmjs.org/@a4banana/react-layout-primitives/-/react-layout-primitives-1.1.0.tgz","fileCount":5,"integrity":"sha512-a9RGyTnWWjqWgBeYdjucaIj7RwLAYwY2LEfZ0LH2nB7y9gH2x5GfNeeUsfOXxMLdJp/luUel/rmDSDEcfxy5jQ==","signatures":[{"sig":"MEYCIQDkNR2yOWvRea23EIgf9obn3Wvr7lVpKnsB7EvIQlJMDwIhAM1KO+vAngYoaVSPGd5p2O75noyu+AsSysF+u6w4U6HX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":36093},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":"^22.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"dev":"vite","build":"vite build","watch":"vite build --watch","preview":"vite preview"},"_npmUser":{"name":"a4banana","email":"apple4banana@gmail.com"},"_npmVersion":"10.9.3","description":"Flexible and reusable React layout primitive components for modern React applications.","directories":{},"_nodeVersion":"22.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.7","react":"^19.0.0","typescript":"^5.7.0","@types/node":"^20.11.24","@types/react":"^19.0.0","vite-plugin-dts":"^3.7.3","@vitejs/plugin-react-swc":"^3.6.0"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-layout-primitives_1.1.0_1765954860872_0.09817713951260987","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@a4banana/react-layout-primitives","version":"1.2.0","keywords":["react","layout","flexbox","components","ui","typescript"],"author":{"name":"a4banana"},"license":"MIT","_id":"@a4banana/react-layout-primitives@1.2.0","maintainers":[{"name":"a4banana","email":"apple4banana@gmail.com"}],"dist":{"shasum":"b5cfba3ba49d976ccebfbed39c2c1138d796c7f2","tarball":"https://registry.npmjs.org/@a4banana/react-layout-primitives/-/react-layout-primitives-1.2.0.tgz","fileCount":10,"integrity":"sha512-5orsy0RU5sEOJX3WWOfgghs7Wx3ItBQzU2MANyz/wSzS70qGEGDTDDV0iawN3YItt5wKEnju3lnVsqwBfRKKAQ==","signatures":[{"sig":"MEYCIQCnBF4wzZSqKz44SfBxv8cK6UVLqcC+epBYNWAteYcXIgIhANfpLh9zhWnLqIspGYk/KaErS+QOqHUcDF8cMmhJ/+Fp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63956},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=22.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./motion":{"types":"./dist/motion.d.ts","import":"./dist/motion.js","require":"./dist/motion.cjs"}},"scripts":{"dev":"vite","build":"vite build","watch":"vite build --watch","preview":"vite preview"},"_npmUser":{"name":"a4banana","email":"apple4banana@gmail.com"},"_npmVersion":"11.8.0","description":"Flexible and reusable React layout primitive components for modern React applications.","directories":{},"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","react":"^19.2.4","motion":"^12.33.0","typescript":"^5.9.3","@types/node":"^25.2.1","@types/react":"^19.2.13","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react-swc":"^4.2.3"},"peerDependencies":{"react":"^19.0.0","motion":"^12.0.0","react-dom":"^19.0.0"},"peerDependenciesMeta":{"motion":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-layout-primitives_1.2.0_1770356028413_0.10835092847053307","host":"s3://npm-registry-packages-npm-production"}},"1.3.0":{"name":"@a4banana/react-layout-primitives","version":"1.3.0","keywords":["react","layout","flexbox","row","column","components","ui","typescript","motion","animation"],"author":{"name":"a4banana"},"license":"MIT","_id":"@a4banana/react-layout-primitives@1.3.0","maintainers":[{"name":"a4banana","email":"apple4banana@gmail.com"}],"dist":{"shasum":"a9d10750f2bc3477a79d965540a7331973f2032d","tarball":"https://registry.npmjs.org/@a4banana/react-layout-primitives/-/react-layout-primitives-1.3.0.tgz","fileCount":10,"integrity":"sha512-dtje7tDNtt0VLqIgFQ+hO3XoEI0Pc48Rhu05PlLtf62mlr3CTblnPlHw2yIErnnOFbM6WM/LObd2rcmL3m+zIw==","signatures":[{"sig":"MEQCIBqZ8Ea9npdIJpcJw5Rb0M7XV3oQ3tb+AaBRwDiIvM0hAiB4ez18nnpzi1zEVJ+6MFn43Ec047MlgfDHlnNnkzA2bA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66020},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=22.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./motion":{"types":"./dist/motion.d.ts","import":"./dist/motion.js","require":"./dist/motion.cjs"}},"scripts":{"dev":"vite","build":"vite build","watch":"vite build --watch","preview":"vite preview"},"_npmUser":{"name":"a4banana","email":"apple4banana@gmail.com"},"_npmVersion":"11.8.0","description":"Flexible and type-safe React layout components inspired by Jetpack Compose","directories":{},"sideEffects":false,"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","react":"^19.2.4","motion":"^12.33.0","typescript":"^5.9.3","@types/node":"^25.2.1","@types/react":"^19.2.13","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react-swc":"^4.2.3"},"peerDependencies":{"react":"^19.0.0","motion":"^12.0.0","react-dom":"^19.0.0"},"peerDependenciesMeta":{"motion":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-layout-primitives_1.3.0_1770356495769_0.3059006786330407","host":"s3://npm-registry-packages-npm-production"}},"1.3.1":{"name":"@a4banana/react-layout-primitives","version":"1.3.1","keywords":["react","layout","flexbox","row","column","components","ui","typescript","motion","animation"],"author":{"name":"a4banana"},"license":"MIT","_id":"@a4banana/react-layout-primitives@1.3.1","maintainers":[{"name":"a4banana","email":"apple4banana@gmail.com"}],"dist":{"shasum":"b8ef0d37a0bc7191d766c127596ceab36e82e646","tarball":"https://registry.npmjs.org/@a4banana/react-layout-primitives/-/react-layout-primitives-1.3.1.tgz","fileCount":10,"integrity":"sha512-DNb2mhZX9q7dfqzw3uDWY9VenkNBaSJMK4tihebCAl63yX4hWJOPCrUQDOb+LtQnfXGxLXl4DdPLYvdO+I7SmA==","signatures":[{"sig":"MEUCIHm7ruQ5QFXiSTNFxZPsLARM2vJcYEROC2Fepysi9TXbAiEApAoDNhT/nIZgSAXl59iaAOE3xvlTmSKSnUUIJc9uROI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66020},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=22.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./motion":{"types":"./dist/motion.d.ts","import":"./dist/motion.js","require":"./dist/motion.cjs"}},"scripts":{"dev":"vite","build":"vite build","watch":"vite build --watch","preview":"vite preview"},"_npmUser":{"name":"a4banana","email":"apple4banana@gmail.com"},"_npmVersion":"11.8.0","description":"Flexible and type-safe React layout components inspired by Jetpack Compose","directories":{},"sideEffects":false,"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","react":"^19.2.4","motion":"^12.33.0","typescript":"^5.9.3","@types/node":"^25.2.1","@types/react":"^19.2.13","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react-swc":"^4.2.3"},"peerDependencies":{"react":"^19.0.0","motion":"^12.0.0","react-dom":"^19.0.0"},"peerDependenciesMeta":{"motion":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-layout-primitives_1.3.1_1770356585621_0.28666972589745177","host":"s3://npm-registry-packages-npm-production"}},"1.3.2":{"name":"@a4banana/react-layout-primitives","version":"1.3.2","keywords":["react","layout","flexbox","row","column","components","ui","typescript","motion","animation"],"author":{"name":"a4banana"},"license":"MIT","_id":"@a4banana/react-layout-primitives@1.3.2","maintainers":[{"name":"a4banana","email":"apple4banana@gmail.com"}],"dist":{"shasum":"2e0470e27e0dfa8be3e06f93c204728c11b688ec","tarball":"https://registry.npmjs.org/@a4banana/react-layout-primitives/-/react-layout-primitives-1.3.2.tgz","fileCount":10,"integrity":"sha512-5fZ2XsUQ+NVpRgMjuhxfD4wumUlAea44mdv82uh/OZ7IKl1CzhNatNanjg/bnTpnpM4Ib8bW1dNojXuRlgljUw==","signatures":[{"sig":"MEQCIBx8dKlPZ7QuYh4tn4V77lKZKgaazBTlOL6/sZCTXF7yAiBFv/zZji2HcMyhjLcspX5tM0pcoDvD1VNO13F0DBGZEQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":66037},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=22.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./motion":{"types":"./dist/motion.d.ts","import":"./dist/motion.js","require":"./dist/motion.cjs"}},"scripts":{"dev":"vite","build":"vite build","watch":"vite build --watch","preview":"vite preview"},"_npmUser":{"name":"a4banana","email":"apple4banana@gmail.com"},"_npmVersion":"11.8.0","description":"Flexible and type-safe React layout components inspired by Jetpack Compose","directories":{},"sideEffects":false,"_nodeVersion":"25.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.3.1","react":"^19.2.4","motion":"^12.33.0","typescript":"^5.9.3","@types/node":"^25.2.1","@types/react":"^19.2.13","vite-plugin-dts":"^4.5.4","@vitejs/plugin-react-swc":"^4.2.3"},"peerDependencies":{"react":"^19.0.0","motion":"^12.0.0","react-dom":"^19.0.0"},"peerDependenciesMeta":{"motion":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/react-layout-primitives_1.3.2_1770356668829_0.8048025047923024","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@a4banana/react-layout-primitives","version":"2.0.0","description":"Flexible and type-safe React layout components inspired by Jetpack Compose","type":"module","sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"dev":"vite","build":"vite build","watch":"vite build --watch","preview":"vite preview"},"devDependencies":{"@types/node":"^25.2.1","@types/react":"^19.2.13","@vitejs/plugin-react-swc":"^4.2.3","react":"^19.2.4","typescript":"^5.9.3","vite":"^7.3.1","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"engines":{"node":">=22.0.0"},"publishConfig":{"access":"public"},"keywords":["react","layout","flexbox","row","column","components","ui","typescript"],"author":{"name":"a4banana"},"license":"MIT","_id":"@a4banana/react-layout-primitives@2.0.0","_nodeVersion":"25.5.0","_npmVersion":"11.8.0","dist":{"integrity":"sha512-OWTyYcKWFal/AOqzExwIQe8eGZjW9ikVbvQec3lhoIyFcRpI6EroqQEwpj8XUKbh3AQCG9tM+Ayh3asBSjsVsA==","shasum":"6399fe348ac7723d6ae90705ebd9dd1e3e455017","tarball":"https://registry.npmjs.org/@a4banana/react-layout-primitives/-/react-layout-primitives-2.0.0.tgz","fileCount":5,"unpackedSize":26523,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDZY+dNDlgK8DpQvZO4ma03l06sR5gtp3lYgk9lv2hxCwIgRWx2rpPHwWoQK3sgntw9WiK2aQnWy35bgGuMOuB85Qw="}]},"_npmUser":{"name":"a4banana","email":"apple4banana@gmail.com"},"directories":{},"maintainers":[{"name":"a4banana","email":"apple4banana@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-layout-primitives_2.0.0_1770357241635_0.8323258999082015"},"_hasShrinkwrap":false}},"time":{"created":"2025-01-07T13:14:45.148Z","modified":"2026-02-06T05:54:01.890Z","1.0.0":"2025-01-07T13:14:45.556Z","1.1.0":"2025-12-17T07:01:01.009Z","1.2.0":"2026-02-06T05:33:48.577Z","1.3.0":"2026-02-06T05:41:35.914Z","1.3.1":"2026-02-06T05:43:05.754Z","1.3.2":"2026-02-06T05:44:28.984Z","2.0.0":"2026-02-06T05:54:01.775Z"},"author":{"name":"a4banana"},"license":"MIT","keywords":["react","layout","flexbox","row","column","components","ui","typescript"],"description":"Flexible and type-safe React layout components inspired by Jetpack Compose","maintainers":[{"name":"a4banana","email":"apple4banana@gmail.com"}],"readme":"# React Layout Primitives\n\nFlexible and type-safe React layout components inspired by Jetpack Compose's Row and Column.\n\n## Features\n\n- **Type-safe** - Full TypeScript support with exported constants for arrangement and alignment\n- **React 19+** - Uses modern ref-as-prop pattern\n- **Lightweight** - Zero dependencies, minimal bundle size\n- **Motion compatible** - Works seamlessly with [Motion](https://motion.dev) for animations\n\n## Requirements\n\n- React 19.0.0 or later\n- Node.js 22.0.0 or later\n- TypeScript 5.7 or later (recommended)\n\n## Installation\n\n```bash\nnpm install @a4banana/react-layout-primitives\n```\n\n## Usage\n\n### Basic Usage\n\n```tsx\nimport {\n Row,\n Column,\n HorizontalArrangement,\n VerticalArrangement,\n HorizontalAlignment,\n VerticalAlignment,\n} from '@a4banana/react-layout-primitives';\n\nfunction App() {\n return (\n \n

Title

\n \n \n \n \n \n );\n}\n```\n\n### With Motion\n\nYou can easily add animations using [Motion](https://motion.dev):\n\n```bash\nnpm install motion\n```\n\n```tsx\nimport { motion } from 'motion/react';\nimport { Row, Column, HorizontalArrangement } from '@a4banana/react-layout-primitives';\n\n// Create motion-enabled components\nconst MotionRow = motion.create(Row);\nconst MotionColumn = motion.create(Column);\n\nfunction AnimatedLayout() {\n return (\n \n \n Item 1\n Item 2\n \n \n );\n}\n```\n\n## API\n\n### Row\n\nArranges children horizontally (flex-direction: row).\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `arrangement` | `HorizontalArrangement` | `'start'` | Main axis distribution |\n| `alignment` | `VerticalAlignment` | `'stretch'` | Cross axis alignment |\n| `gap` | `number` | `0` | Gap between children (px) |\n| `as` | `ElementType` | `'div'` | Element to render as |\n| `ref` | `Ref` | - | Ref to DOM element |\n\n### Column\n\nArranges children vertically (flex-direction: column).\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `arrangement` | `VerticalArrangement` | `'top'` | Main axis distribution |\n| `alignment` | `HorizontalAlignment` | `'stretch'` | Cross axis alignment |\n| `gap` | `number` | `0` | Gap between children (px) |\n| `as` | `ElementType` | `'div'` | Element to render as |\n| `ref` | `Ref` | - | Ref to DOM element |\n\n### Arrangement & Alignment Values\n\n```tsx\n// Row arrangement (horizontal)\nHorizontalArrangement.Start // 'start'\nHorizontalArrangement.End // 'end'\nHorizontalArrangement.Center // 'center'\nHorizontalArrangement.SpaceBetween // 'space-between'\nHorizontalArrangement.SpaceAround // 'space-around'\nHorizontalArrangement.SpaceEvenly // 'space-evenly'\n\n// Column arrangement (vertical)\nVerticalArrangement.Top // 'top'\nVerticalArrangement.Bottom // 'bottom'\nVerticalArrangement.Center // 'center'\nVerticalArrangement.SpaceBetween // 'space-between'\nVerticalArrangement.SpaceAround // 'space-around'\nVerticalArrangement.SpaceEvenly // 'space-evenly'\n\n// Row alignment (vertical)\nVerticalAlignment.Top // 'top'\nVerticalAlignment.Center // 'center'\nVerticalAlignment.Bottom // 'bottom'\nVerticalAlignment.Stretch // 'stretch'\n\n// Column alignment (horizontal)\nHorizontalAlignment.Start // 'start'\nHorizontalAlignment.Center // 'center'\nHorizontalAlignment.End // 'end'\nHorizontalAlignment.Stretch // 'stretch'\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}