{"_id":"@botandrose/file-drop","_rev":"2-9343b88cc20415f0c12b2f7f1ff336a5","name":"@botandrose/file-drop","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@botandrose/file-drop","version":"0.1.0","keywords":["file-drop","drag-drop","file-upload","custom-element","vanilla-js","framework-agnostic","web-components"],"author":{"name":"Your Name"},"license":"MIT","_id":"@botandrose/file-drop@0.1.0","maintainers":[{"name":"mgeisel","email":"micah@botandrose.com"}],"homepage":"https://github.com/botandrose/file-drop#readme","bugs":{"url":"https://github.com/botandrose/file-drop/issues"},"dist":{"shasum":"70c3f989d3547cb07119507bbd8152ffce56c8ed","tarball":"https://registry.npmjs.org/@botandrose/file-drop/-/file-drop-0.1.0.tgz","fileCount":4,"integrity":"sha512-4+V9F90XYLpqZV24N92BCyGIvVUUzkR3yVawoTNucT8+8b4uE0zJ7SjWMa672jsj8IQdEMTA683tb3XBjg2GfQ==","signatures":[{"sig":"MEUCIAUehiy/NgEW6raxybuFN11ia7jZUFa0vTWuJXpcyCLMAiEA1HI5gTJU7DlpxL5uz7YKoh9n5rtjO2jRLa4/4s/CgT4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7540},"main":"src/file-drop.js","type":"module","module":"src/file-drop.js","gitHead":"1eeac453b01d07a72511dfbb4b4853fd529727d4","scripts":{"test":"web-test-runner","test:ci":"npm run test:all -- --fail-only","test:all":"web-test-runner --concurrency 1 --playwright --browsers chromium firefox webkit","test:watch":"web-test-runner --watch","test:chrome":"web-test-runner --playwright --browsers chromium","test:webkit":"web-test-runner --playwright --browsers webkit","test:firefox":"web-test-runner --concurrency 1 --playwright --browsers firefox","test:chromium":"web-test-runner --playwright --browsers chromium","test:coverage":"npm run test:chrome"},"_npmUser":{"name":"mgeisel","email":"micah@botandrose.com"},"repository":{"url":"git+https://github.com/botandrose/file-drop.git","type":"git"},"_npmVersion":"10.2.3","description":"A vanilla JS custom element for drag-and-drop file handling","directories":{},"_nodeVersion":"20.10.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@esm-bundle/chai":"^4.3.4","@web/test-runner":"^0.18.0","@web/test-runner-playwright":"^0.11.1"},"_npmOperationalInternal":{"tmp":"tmp/file-drop_0.1.0_1755963432420_0.024545301773916117","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@botandrose/file-drop","version":"0.1.1","type":"module","description":"A vanilla JS custom element for drag-and-drop file handling","main":"src/file-drop.js","module":"src/file-drop.js","scripts":{"test":"web-test-runner","test:watch":"web-test-runner --watch","test:chrome":"web-test-runner --playwright --browsers chromium","test:chromium":"web-test-runner --playwright --browsers chromium","test:firefox":"web-test-runner --concurrency 1 --playwright --browsers firefox","test:webkit":"web-test-runner --playwright --browsers webkit","test:all":"web-test-runner --concurrency 1 --playwright --browsers chromium firefox webkit","test:coverage":"npm run test:chrome","test:ci":"npm run test:all -- --fail-only"},"keywords":["file-drop","drag-drop","file-upload","custom-element","vanilla-js","framework-agnostic","web-components"],"author":{"name":"Your Name"},"license":"MIT","devDependencies":{"@esm-bundle/chai":"^4.3.4","@web/test-runner":"^0.18.0","@web/test-runner-playwright":"^0.11.1"},"repository":{"type":"git","url":"git+https://github.com/botandrose/file-drop.git"},"bugs":{"url":"https://github.com/botandrose/file-drop/issues"},"homepage":"https://github.com/botandrose/file-drop#readme","publishConfig":{"access":"public"},"_id":"@botandrose/file-drop@0.1.1","gitHead":"31a03beb37b5d8ea300c61c3a641ab55ad1182c9","_nodeVersion":"20.20.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-kQ2YSi6emMCPBl6DVCkdHTD70iBW4gP/MW9wdFdy9vvMOwI1/rmQgwJaLPdUPbUswS8pmD4cEyWmnaPFbC35xA==","shasum":"88bcedddae447d1033e680dcded4c3d8e6bbe6c8","tarball":"https://registry.npmjs.org/@botandrose/file-drop/-/file-drop-0.1.1.tgz","fileCount":4,"unpackedSize":7442,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDP6aKZBgVhH+0Z4O9dG5IfKFS6NlceaPX2x0RbZfRjngIgLcEVZ0ZXsK5p5O7Rlqn8sOsvPZdeTqQY2b/GDnJwAes="}]},"_npmUser":{"name":"mgeisel","email":"micah@botandrose.com"},"directories":{},"maintainers":[{"name":"mgeisel","email":"micah@botandrose.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/file-drop_0.1.1_1776523931484_0.004065558676080494"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-23T15:37:12.349Z","modified":"2026-04-18T14:52:11.773Z","0.1.0":"2025-08-23T15:37:12.662Z","0.1.1":"2026-04-18T14:52:11.632Z"},"bugs":{"url":"https://github.com/botandrose/file-drop/issues"},"author":{"name":"Your Name"},"license":"MIT","homepage":"https://github.com/botandrose/file-drop#readme","keywords":["file-drop","drag-drop","file-upload","custom-element","vanilla-js","framework-agnostic","web-components"],"repository":{"type":"git","url":"git+https://github.com/botandrose/file-drop.git"},"description":"A vanilla JS custom element for drag-and-drop file handling","maintainers":[{"name":"mgeisel","email":"micah@botandrose.com"}],"readme":"# file-drop\n\nA vanilla JS custom element for drag-and-drop file handling. Provides a drag-and-drop interface that assigns files to a target input element.\n\n## Features\n\n- 🎯 **Framework-agnostic** - Works with any JS framework or vanilla HTML\n- 📁 **Drag & Drop** - Native browser drag-and-drop support\n- 🎨 **Visual feedback** - Visual state changes during drag operations\n- 🔧 **Customizable** - Easily styled with CSS\n\n## Installation\n\n```bash\nnpm install @botandrose/file-drop\n```\nor\n```html\n<script module src=\"https://unpkg.com/@botandrose/file-drop@latest/src/file-drop.js\"></script>\n```\n\n## Usage\n\n### Basic HTML\n\n```html\n<file-drop for=\"file-input\">\n  Drop files here\n</file-drop>\n<input type=\"file\" id=\"file-input\" multiple>\n```\n\n### With JavaScript module\n\n```javascript\nimport '@botandrose/file-drop'\n\n// The custom element is automatically registered\n// Just use it in your HTML\n```\n\n### Manual registration\n\n```javascript\nimport { FileDrop } from '@botandrose/file-drop'\n\n// Register with a custom name if needed\ncustomElements.define('my-file-drop', FileDrop)\n```\n\n## Attributes\n\n- `for` - The ID of the target input[type=file] element\n\n## Styling\n\nThe element comes with default styles that can be overridden with CSS:\n\n```css\nfile-drop {\n  border: 2px dashed #ccc;\n  border-radius: 8px;\n  padding: 2rem;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\nfile-drop:hover {\n  border-color: #007bff;\n  background-color: #f8f9fa;\n}\n\nfile-drop.-dragover {\n  border-color: #28a745;\n  background-color: #d4edda;\n}\n```\n\n### Disable default styles\n\nAdd the `data-no-default-styles` attribute to disable the built-in styles:\n\n```html\n<file-drop for=\"file-input\" data-no-default-styles>\n  Drop files here\n</file-drop>\n```\n\n## Events\n\nThe component automatically triggers a `change` event on the target input when files are dropped, which integrates seamlessly with existing form handling code.\n\n## Browser Support\n\n- Chrome/Edge 54+\n- Firefox 63+\n- Safari 10.1+\n\n## License\n\nMIT\n","readmeFilename":"README.md"}