{"_id":"@anyboxjs/anybox","_rev":"2-28e82134de30bd1dd41fd10f853d30d8","name":"@anyboxjs/anybox","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@anyboxjs/anybox","version":"1.0.0","keywords":["lightbox","alertbox","tooltip","notification","toast","modal","popup","dialog","animation","zero-dependency"],"author":{"name":"Ender Yazici"},"license":"MIT","_id":"@anyboxjs/anybox@1.0.0","maintainers":[{"name":"end-y","email":"enderyazici@yandex.com"}],"homepage":"https://github.com/end-y/AnyBox-JS#readme","bugs":{"url":"https://github.com/end-y/AnyBox-JS/issues"},"dist":{"shasum":"d2ce390395176c8028b23789514ef27e7169a7b1","tarball":"https://registry.npmjs.org/@anyboxjs/anybox/-/anybox-1.0.0.tgz","fileCount":16,"integrity":"sha512-bn88XiCOfU60/zk3eqocGZDOCTxj4NetR/hDb6UF9etXEqmRMFJxES6MrKjs1WVF1mKtAJfjrUdfMWStYL0uSw==","signatures":[{"sig":"MEQCICyfncvGu1DTf+kLdSse1TooW6ABJI1xgn8irCwFYGL7AiAn7uXQTghPb4YTkpMW21nQF40tE/aph74sXXmvTrkU6Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":231920},"main":"dist/anybox.min.js","unpkg":"dist/anybox.min.js","module":"js/anybox/init.js","gitHead":"a7c5bc6842cb112e19bf9d366f11f489060aa68f","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --mode production","start":"webpack --mode development","prepublishOnly":"npm run build"},"_npmUser":{"name":"end-y","email":"enderyazici@yandex.com"},"jsdelivr":"dist/anybox.min.js","repository":{"url":"git+https://github.com/end-y/AnyBox-JS.git","type":"git"},"_npmVersion":"11.6.4","description":"A lightweight, zero-dependency JavaScript library for creating elegant lightboxes, alert dialogs, tooltips, and toast notifications with smooth animations.","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"ts-node":"^10.7.0","webpack":"^5.72.0","ts-loader":"^9.2.9","raw-loader":"^4.0.2","typescript":"^4.6.3","@babel/core":"^7.19.3","webpack-cli":"^4.9.2","babel-loader":"^8.2.5","@babel/preset-env":"^7.18.2","webpack-dev-server":"^4.8.1","terser-webpack-plugin":"^5.3.3","@types/webpack-dev-server":"^4.7.2"},"_npmOperationalInternal":{"tmp":"tmp/anybox_1.0.0_1772738868965_0.2539738779267373","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@anyboxjs/anybox","version":"1.1.0","description":"A lightweight, zero-dependency JavaScript library for creating elegant lightboxes, alert dialogs, tooltips, and toast notifications with smooth animations.","main":"dist/anybox.min.js","module":"dist/anybox.mjs","unpkg":"dist/anybox.min.js","jsdelivr":"dist/anybox.min.js","exports":{".":{"import":"./dist/anybox.min.mjs","require":"./dist/anybox.min.js","default":"./dist/anybox.min.js"}},"scripts":{"start":"webpack --mode development","build":"webpack --mode production","prepublishOnly":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/end-y/AnyBox-JS.git"},"keywords":["lightbox","alertbox","tooltip","notification","toast","modal","popup","dialog","animation","zero-dependency"],"author":{"name":"Ender Yazici"},"license":"MIT","bugs":{"url":"https://github.com/end-y/AnyBox-JS/issues"},"devDependencies":{"@babel/core":"^7.19.3","@babel/preset-env":"^7.18.2","@types/webpack-dev-server":"^4.7.2","babel-loader":"^8.2.5","raw-loader":"^4.0.2","terser-webpack-plugin":"^5.3.3","ts-loader":"^9.2.9","ts-node":"^10.7.0","typescript":"^4.6.3","webpack":"^5.72.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.8.1"},"homepage":"https://github.com/end-y/AnyBox-JS#readme","dependencies":{"@anyboxjs/anybox":"^1.0.0"},"gitHead":"a7c5bc6842cb112e19bf9d366f11f489060aa68f","_id":"@anyboxjs/anybox@1.1.0","_nodeVersion":"22.18.0","_npmVersion":"11.6.4","dist":{"integrity":"sha512-SmTq6dlJVkUz1CcRoUZmt4E6NBewDa3m8gViKZ8dRmL2GQg0QWvYZose0TuvgyewdJ/qFL2IJoCEWvry7egcMg==","shasum":"d977f49fa4c8002ac6f2dbe4351a515c88ae314e","tarball":"https://registry.npmjs.org/@anyboxjs/anybox/-/anybox-1.1.0.tgz","fileCount":18,"unpackedSize":341856,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFSk8ws1w6RWsC8KVuo58QA9j8fKvWDA64BLicoepAZZAiAvX96iVCEiy1U4U/H1BryPW60yu+n5uanUE+TksF35Eg=="}]},"_npmUser":{"name":"end-y","email":"enderyazici@yandex.com"},"directories":{},"maintainers":[{"name":"end-y","email":"enderyazici@yandex.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/anybox_1.1.0_1772739986651_0.0321905487918861"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-05T19:27:48.890Z","modified":"2026-03-05T19:46:26.919Z","1.0.0":"2026-03-05T19:27:49.132Z","1.1.0":"2026-03-05T19:46:26.793Z"},"bugs":{"url":"https://github.com/end-y/AnyBox-JS/issues"},"author":{"name":"Ender Yazici"},"license":"MIT","homepage":"https://github.com/end-y/AnyBox-JS#readme","keywords":["lightbox","alertbox","tooltip","notification","toast","modal","popup","dialog","animation","zero-dependency"],"repository":{"type":"git","url":"git+https://github.com/end-y/AnyBox-JS.git"},"description":"A lightweight, zero-dependency JavaScript library for creating elegant lightboxes, alert dialogs, tooltips, and toast notifications with smooth animations.","maintainers":[{"name":"end-y","email":"enderyazici@yandex.com"}],"readme":"# AnyBox.js\n\nA lightweight, zero-dependency JavaScript library for creating elegant lightboxes, alert dialogs, tooltips, and toast notifications with smooth animations.\n\n## Features\n\n- **Zero dependencies** - Pure vanilla JavaScript, no frameworks needed\n- **10 open animations** - center, left, right, top, bottom, opacity, flip, rotate, bounce, elastic\n- **7 image transitions** - fade, slide, zoomIn, zoomOut, flipX, flipY\n- **Dark & Light themes** - Built-in theme support for alertbox\n- **Smart tooltips** - Auto-positioned with overflow detection and flip behavior\n- **Toast notifications** - Stackable, 6 positions, progress bar, pause-on-hover\n- **Keyboard navigation** - Arrow keys for gallery, Escape to close\n- **Touch support** - Swipe gestures for mobile devices\n- **Multi-instance safe** - Multiple modals on the same page without conflicts\n- **Web Animations API** - Hardware-accelerated, compositor-thread animations\n\n## Installation\n\n```html\n<script src=\"anybox.min.js\"></script>\n```\n\n## Lightbox\n\nAdd the `any-box_lightbox` class to your images:\n\n```html\n<img class=\"any-box_lightbox\" src=\"image1.jpg\">\n<img class=\"any-box_lightbox\" src=\"image2.jpg\">\n<img class=\"any-box_lightbox\" src=\"image3.jpg\">\n```\n\nInitialize the lightbox:\n\n```js\nlet lightbox = new Anybox(\"lightbox\", {\n    bgColor: \"0,0,0\",\n    opacity: \"0.85\",\n    top: 50,\n    animation: {\n        type: \"bounce\",\n        duration: 700\n    },\n    imageTransition: \"slide\",\n    imageTransitionDuration: 350,\n    slider: {\n        buttonColor: \"#fff\",\n        information: true\n    },\n    closeButton: {\n        size: 22,\n        fill: \"#fff\",\n        location: \"right\"\n    }\n})\n```\n\n### Lightbox Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `bgColor` | `string` | `\"0,0,0\"` | Background color as RGB values |\n| `opacity` | `string` | `\"0.5\"` | Background overlay opacity (0-1) |\n| `top` | `number` | `50` | Vertical position as percentage |\n| `animation` | `boolean\\|object` | `false` | Open animation. `true` for default, or `{type, duration}` |\n| `animation.type` | `string` | `\"opacity\"` | One of: `center`, `left`, `right`, `top`, `bottom`, `opacity`, `flip`, `rotate`, `bounce`, `elastic` |\n| `animation.duration` | `number` | `1000` | Animation duration in milliseconds |\n| `imageTransition` | `string` | `\"fade\"` | Image navigation transition: `fade`, `slide`, `zoomIn`, `zoomOut`, `flipX`, `flipY` |\n| `imageTransitionDuration` | `number` | `350` | Transition duration in milliseconds |\n| `slider` | `object\\|false` | `false` | Slider navigation controls |\n| `slider.buttonColor` | `string` | `\"#111\"` | Slider button color |\n| `slider.information` | `boolean` | `false` | Show \"1 / 3\" image counter |\n| `closeButton` | `object\\|false` | `false` | Close button configuration |\n| `closeButton.fill` | `string` | `\"white\"` | Close button color |\n| `closeButton.size` | `number` | `28` | Close button size in pixels |\n| `closeButton.location` | `string` | `\"right\"` | `\"right\"` or `\"left\"` |\n\n## Alertbox\n\n```js\nlet alertBox = new Anybox(\"alertbox\", {\n    bgColor: \"0,0,0\",\n    opacity: \"0.3\",\n    top: 40,\n    theme: \"dark\",\n    headline: {\n        text: \"Success!\",\n        level: 3\n    },\n    message: {\n        text: \"Your action was completed.\",\n        textAlign: \"center\"\n    },\n    svgStatus: \"success\",\n    animation: true,\n    buttons: [\n        {\n            buttonName: \"OK\",\n            function: function() {\n                alertBox.defaultClickFunction()\n            }\n        },\n        {\n            buttonName: \"Cancel\"\n        }\n    ],\n    closeButton: {\n        size: 20,\n        location: \"right\"\n    }\n})\n```\n\n### Showing the Alertbox\n\n```js\n// Show with status and animation\nalertBox.show(\"success\", true)\n\n// Show with custom animation type\nalertBox.show(\"fail\", { type: \"bounce\", duration: 700 })\nalertBox.show(\"warning\", { type: \"elastic\", duration: 800 })\n```\n\n### Alertbox Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `bgColor` | `string` | `\"0,0,0\"` | Background color as RGB values |\n| `opacity` | `string` | `\"0.5\"` | Background overlay opacity (0-1) |\n| `top` | `string\\|number` | `\"50%\"` | Vertical position |\n| `theme` | `string` | `\"light\"` | `\"light\"` or `\"dark\"` |\n| `headline` | `string\\|object` | `false` | Headline text or `{text, level, color, fontFamily}` |\n| `message` | `string\\|object` | `false` | Message text or `{text, color, fontFamily, textAlign}` |\n| `svgStatus` | `string` | `false` | Animated SVG icon: `\"success\"`, `\"fail\"`, `\"warning\"` |\n| `animation` | `boolean` | `false` | Enable open animation |\n| `buttons` | `boolean\\|array` | `false` | `true` for default OK button, or array of `{buttonName, function}` |\n| `closeButton` | `object\\|false` | `false` | Close button configuration |\n\n## Tooltip\n\nAdd `data-anybox-tooltip` attributes to your elements:\n\n```html\n<button data-anybox-tooltip=\"Save your changes\">Save</button>\n<span data-anybox-tooltip=\"Click to copy\">Copy Link</span>\n```\n\nInitialize the tooltip:\n\n```js\nlet tooltip = new Anybox(\"tooltip\", {\n    placement: \"top\",\n    bgColor: \"rgba(15,15,20,0.92)\",\n    textColor: \"#fff\",\n    fontSize: 13,\n    maxWidth: 260,\n    offset: 8,\n    arrow: true,\n    delay: 0,\n    hideDelay: 0\n})\n```\n\nThe tooltip automatically detects viewport overflow and flips its position to stay visible.\n\n### Tooltip Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `selector` | `string` | `\"[data-anybox-tooltip]\"` | CSS selector to attach tooltips |\n| `placement` | `string` | `\"top\"` | Preferred position: `\"top\"`, `\"bottom\"`, `\"left\"`, `\"right\"` |\n| `bgColor` | `string` | `\"rgba(15,15,20,0.92)\"` | Background color |\n| `textColor` | `string` | `\"#fff\"` | Text color |\n| `fontSize` | `number` | `13` | Font size in pixels |\n| `padding` | `string` | `\"6px 12px\"` | CSS padding |\n| `borderRadius` | `number` | `6` | Border radius in pixels |\n| `maxWidth` | `number` | `260` | Maximum width in pixels |\n| `offset` | `number` | `8` | Distance from target element in pixels |\n| `arrow` | `boolean` | `true` | Show arrow pointing to target |\n| `delay` | `number` | `0` | Delay before showing (ms) |\n| `hideDelay` | `number` | `0` | Delay before hiding (ms) |\n\n## Notification\n\nCreate a notification instance and call `show()` to display toast notifications:\n\n```js\nlet notification = new Anybox(\"notification\", {\n    position: \"top-right\",\n    duration: 4000,\n    animationType: \"slide\",\n    animationDuration: 300,\n    showProgress: true,\n    pauseOnHover: true,\n    closeOnClick: true\n})\n\n// Show notifications\nnotification.show(\"success\", {\n    title: \"Saved!\",\n    message: \"Your changes have been saved.\"\n})\n\nnotification.show(\"danger\", {\n    title: \"Error\",\n    message: \"Something went wrong.\"\n})\n\nnotification.show(\"warning\", {\n    title: \"Warning\",\n    message: \"This action cannot be undone.\"\n})\n```\n\nNotifications are stackable — multiple notifications can appear at once and auto-dismiss with a progress bar.\n\n### Notification Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `position` | `string` | `\"top-right\"` | Position: `\"top-right\"`, `\"top-left\"`, `\"top-center\"`, `\"bottom-center\"`, `\"bottom-left\"`, `\"bottom-right\"` |\n| `duration` | `number` | `4000` | Auto-dismiss time in ms. `0` to disable |\n| `animationType` | `string` | `\"slide\"` | Enter/exit animation: `\"slide\"`, `\"fade\"`, `\"bounce\"` |\n| `animationDuration` | `number` | `300` | Animation duration in ms |\n| `maxWidth` | `number` | `380` | Maximum card width in pixels |\n| `showProgress` | `boolean` | `true` | Show progress bar countdown |\n| `closeOnClick` | `boolean` | `true` | Click notification to dismiss |\n| `pauseOnHover` | `boolean` | `true` | Pause auto-dismiss timer on hover |\n| `gap` | `number` | `10` | Space between stacked notifications |\n| `offset` | `number` | `20` | Distance from viewport edge |\n\n### show(status, options)\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `status` | `string` | `\"success\"`, `\"danger\"`, or `\"warning\"` |\n| `options.title` | `string` | Notification title (defaults to status label) |\n| `options.message` | `string` | Notification body text |\n| `options.duration` | `number` | Override instance duration for this notification |\n| `options.animationType` | `string` | Override animation type for this notification |\n\n## Methods\n\n### `show(status, animation)`\n\nShow the alertbox with a status and animation.\n\n- `status` - `\"success\"`, `\"fail\"`, or `\"warning\"`\n- `animation` - `true` for center animation, or `{type: \"bounce\", duration: 700}`\n\n### `defaultClickFunction()`\n\nClose the alertbox with a fade-out animation.\n\n### `destroy()`\n\nRemove the modal from the DOM and clean up event listeners. Works on all types (lightbox, alertbox, tooltip, notification).\n\n## Animation Types\n\n### Open Animations\nUsed when the modal first appears.\n\n| Type | Description |\n|------|-------------|\n| `center` | Scale up from center |\n| `bounce` | Scale with bounce effect |\n| `elastic` | Elastic stretch effect |\n| `flip` | 3D flip on Y axis |\n| `rotate` | Rotate and scale in |\n| `opacity` | Simple fade in |\n| `top` | Slide down from top |\n| `bottom` | Slide up from bottom |\n| `left` | Slide in from left |\n| `right` | Slide in from right |\n\n### Image Transitions\nUsed when navigating between images in the lightbox. Only the image is animated, controls stay static.\n\n| Type | Description |\n|------|-------------|\n| `fade` | Crossfade between images |\n| `slide` | Direction-aware slide (auto left/right) |\n| `slideLeft` | Slide from right to left |\n| `slideRight` | Slide from left to right |\n| `zoomIn` | Zoom in from smaller |\n| `zoomOut` | Zoom in from larger |\n| `flipX` | 3D flip on X axis |\n| `flipY` | 3D flip on Y axis |\n\n## Browser Support\n\nWorks in all modern browsers that support the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n\n## License\n\nMIT - [Ender Yazici](https://github.com/end-y)\n","readmeFilename":"README.md"}