{"_id":"@adikris/react-slot","_rev":"3-ca5c1adc727cb8e1e31a6794e2c11afb","name":"@adikris/react-slot","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@adikris/react-slot","version":"0.0.1","keywords":["react","component","slot","composition"],"author":{"url":"https://github.com/adithyaakrishna","name":"Aditya Krishna","email":"adithyakris@gmail.com"},"license":"MIT","_id":"@adikris/react-slot@0.0.1","maintainers":[{"name":"adikris","email":"aadithya794@gmail.com"}],"dist":{"shasum":"56e79b85b8a3e99cffb283961305a4c36c0e2ede","tarball":"https://registry.npmjs.org/@adikris/react-slot/-/react-slot-0.0.1.tgz","fileCount":6,"integrity":"sha512-YYR5i5SqKshUTgerZbf22mZ4RJQ8S8UiItaRlizFLnRycHBPq+zPYXaosFRAmfcmrB414IwE7D1Pqv/NBx1NCQ==","signatures":[{"sig":"MEQCIDDlMpSJE3SWHwkyscsnRr82zgw8TGWa4E3I91IP3oeKAiAyCkMvHX2mDvIj7+czzD6h2m84wr2gk5d99mfm7CaFyA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23855},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"adikris","email":"aadithya794@gmail.com"},"_npmVersion":"10.9.2","description":"A React component library inspired by vintage split-flap display boards, like those classic railway station information boards","directories":{},"_nodeVersion":"22.14.0","dependencies":{"gsap":"^3.12.7"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.7.1","devDependencies":{"tslib":"^2.8.1","rollup":"^4.40.0","typescript":"^5.8.3","rollup-plugin-dts":"^6.2.1","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0","@types/react":"^19.1.2","@types/react-dom":"^19.1.2"},"_npmOperationalInternal":{"tmp":"tmp/react-slot_0.0.1_1745238232149_0.6660772253078668","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@adikris/react-slot","version":"0.0.2","keywords":["react","component","slot","composition"],"author":{"url":"https://github.com/adithyaakrishna","name":"Aditya Krishna","email":"adithyakris@gmail.com"},"license":"MIT","_id":"@adikris/react-slot@0.0.2","maintainers":[{"name":"adikris","email":"aadithya794@gmail.com"}],"dist":{"shasum":"38f28a4ffc763f3454a4361e9fd1b756f729ff96","tarball":"https://registry.npmjs.org/@adikris/react-slot/-/react-slot-0.0.2.tgz","fileCount":14,"integrity":"sha512-/jj26OXEHtjXIn7tqgLDwJaiFkpiJIYcAJT8oQJ4T4mlDS9srJnesBC5mFch7G2l9c/ZYG4bkpZp6P8c/OArAg==","signatures":[{"sig":"MEYCIQDw7AO2eTaOgYNYHEXXddxy5lbdfnlpwL04FSLFttQBBAIhALoQ9PKkRiwF16lNE7Ham2hJ3UiCB10Y591X932CfZIZ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26516},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"adikris","email":"aadithya794@gmail.com"},"_npmVersion":"10.9.2","description":"A React component library inspired by vintage split-flap display boards, like those classic railway station information boards","directories":{},"_nodeVersion":"22.14.0","dependencies":{"gsap":"^3.12.7"},"_hasShrinkwrap":false,"packageManager":"pnpm@10.7.1","devDependencies":{"tslib":"^2.8.1","rollup":"^4.40.0","typescript":"^5.8.3","rollup-plugin-dts":"^6.2.1","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0","@types/react":"^19.1.2","@types/react-dom":"^19.1.2"},"_npmOperationalInternal":{"tmp":"tmp/react-slot_0.0.2_1745238981451_0.5238761389681985","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@adikris/react-slot","version":"0.0.3","description":"A React component library inspired by vintage split-flap display boards, like those classic railway station information boards","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","component","slot","composition"],"author":{"name":"Aditya Krishna","email":"adithyakris@gmail.com","url":"https://github.com/adithyaakrishna"},"license":"MIT","packageManager":"pnpm@10.7.1","peerDependencies":{"@types/react":"^19.1.2","@types/react-dom":"^19.1.2","react":"^19.1.0","react-dom":"^19.1.0"},"devDependencies":{"@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-typescript":"^12.1.2","rollup":"^4.40.0","rollup-plugin-dts":"^6.2.1","tslib":"^2.8.1","typescript":"^5.8.3"},"dependencies":{"gsap":"^3.12.7"},"_id":"@adikris/react-slot@0.0.3","gitHead":"41847a88dcc4cd99c03f71c3809441991d7933b9","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-mH0Am3U54RSpStpZl3MzClIZRNNNMeynWNn3PYJ8XYnTKZ1dst4ghdfWTg42Il6A/EfBGfn4wPO2F1FIngVG2g==","shasum":"361fc96f168583a63521d01d661ac11ba65d746c","tarball":"https://registry.npmjs.org/@adikris/react-slot/-/react-slot-0.0.3.tgz","fileCount":27,"unpackedSize":323072,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHsM9RhQs5lk0UkBlXKdXJW6/OMR1V60ne8Zkc122JpcAiEAwRBRcAFO1VN6ZBczLZIvC60z/zeRiBDc/ATq6lUU3WU="}]},"_npmUser":{"name":"adikris","email":"aadithya794@gmail.com"},"directories":{},"maintainers":[{"name":"adikris","email":"aadithya794@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-slot_0.0.3_1745240021555_0.9748082115527963"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-21T12:23:52.004Z","modified":"2025-04-21T12:53:41.968Z","0.0.1":"2025-04-21T12:23:52.320Z","0.0.2":"2025-04-21T12:36:21.612Z","0.0.3":"2025-04-21T12:53:41.783Z"},"author":{"name":"Aditya Krishna","email":"adithyakris@gmail.com","url":"https://github.com/adithyaakrishna"},"license":"MIT","keywords":["react","component","slot","composition"],"description":"A React component library inspired by vintage split-flap display boards, like those classic railway station information boards","maintainers":[{"name":"adikris","email":"aadithya794@gmail.com"}],"readme":"# @adikris/react-slot\n\nA React component library inspired by vintage split-flap display boards, like those classic railway station information boards. Built with TypeScript, GSAP animations, and modern React patterns.\n\n## Installation\n\n```bash\nnpm install @adikris/react-slot\n# or\nyarn add @adikris/react-slot\n```\n\n## Features\n\n- 🎨 Customizable split-flap animations\n- 🔄 Smooth GSAP-powered transitions\n- 📱 Responsive design\n- 🌗 Light/Dark/System theme support\n- 🎛️ Configurable board and line properties\n- 🔧 TypeScript support\n\n## Basic Usage\n\n```tsx\nimport { FlipBoard } from '@adikris/react-slot';\n\nfunction App() {\n return (\n \n );\n}\n```\n\n## Props\n\n### FlipBoard Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| lines | `LineConfig[]` | `[]` | Array of line configurations |\n| boardBackground | `string` | `'hsl(0 0% 15%)'` | Board background color |\n| gap | `string` | `'0.5ch'` | Gap between lines |\n| padding | `string` | `'6px'` | Board padding |\n| perspective | `number` | `1` | 3D perspective effect |\n| theme | `'light' \\| 'dark' \\| 'system'` | `'dark'` | Color theme |\n\n### LineConfig Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| text | `string` | `''` | Text to display |\n| characters | `string` | `'a-z'` | Available characters |\n| padAmount | `number` | `0` | Animation padding |\n| alignment | `'left' \\| 'right'` | `'left'` | Text alignment |\n| color | `string` | `'black'` | Text color |\n| fontSize | `string` | `'2.5rem'` | Font size |\n| slotWidth | `string` | `'1.5ch'` | Character slot width |\n| length | `number` | `10` | Line length |\n| backgroundColor | `string` | `'hsl(0 0% 92%)'` | Slot background |\n\n## Demo Component\n\nThe library includes a demo component with a full UI for testing all features:\n\n```tsx\nimport { FlipBoardDemo } from '@adikris/react-slot';\n\nfunction App() {\n return ;\n}\n```\n\nThe demo provides controls for:\n- Adding/removing lines\n- Modifying text and characters\n- Adjusting animations and padding\n- Changing colors and themes\n- Configuring layout properties\n\n## Animation Details\n\nThe component uses GSAP for smooth flip animations with configurable properties:\n- Character-by-character flipping\n- Configurable flip speed\n- Customizable padding between flips\n- 3D perspective effects\n\n## Browser Support\n\nSupports all modern browsers with CSS transform and custom properties support.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}