{"_id":"@asafarim/toast","_rev":"3-d2a0799f29c907842d20c47fef33d0c7","name":"@asafarim/toast","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@asafarim/toast","version":"1.0.0","_id":"@asafarim/toast@1.0.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"dist":{"shasum":"2d1c4609fc35eed083ad3751b9084983ee258f51","tarball":"https://registry.npmjs.org/@asafarim/toast/-/toast-1.0.0.tgz","fileCount":1963,"integrity":"sha512-dLeEFH3Du+U3vdE44EcUfWaDDUWYcEnN/hDmMwSWx9umbRZJ4Q4aduiO0NM92kLtkStDtT/bdlbdX9xebSeVLA==","signatures":[{"sig":"MEUCIQDR9CDkeSUtSz0eeg0xz9g3X5eKd0BAMR6y+LSrlykBIAIgVTnlURmFhwLuP2Ua8DqbwM8O/48xXyj6XZ7ysBkXi2o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12772089},"main":"dist/index.js","_from":"file:asafarim-toast-1.0.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"demo":"pnpm run build && cd demo && pnpm run dev","build":"tsup","deploy":"gh-pages -d demo/dist","predeploy":"pnpm run build && cd demo && pnpm run build"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\ef37687fc25d463dd1efdd6760e98200\\asafarim-toast-1.0.0.tgz","_integrity":"sha512-dLeEFH3Du+U3vdE44EcUfWaDDUWYcEnN/hDmMwSWx9umbRZJ4Q4aduiO0NM92kLtkStDtT/bdlbdX9xebSeVLA==","_npmVersion":"10.9.0","description":"React toast notification system for ASafariM frontends.","directories":{},"sideEffects":["./src/styles/toast.css"],"_nodeVersion":"22.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","eslint":"^9.0.0","rimraf":"^6.0.0","gh-pages":"^6.0.0","typescript":"^5.5.2","@types/node":"^22.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@typescript-eslint/parser":"^8.0.0","@typescript-eslint/eslint-plugin":"^8.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/toast_1.0.0_1755372510913_0.6036830096964216","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@asafarim/toast","version":"1.1.0","_id":"@asafarim/toast@1.1.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://alisafari-it.github.io/toast/","bugs":{"url":"https://github.com/AliSafari-IT/toast/issues"},"dist":{"shasum":"6a238fa1f92bd7e3f86eef8dcc336ac2d82b079d","tarball":"https://registry.npmjs.org/@asafarim/toast/-/toast-1.1.0.tgz","fileCount":1963,"integrity":"sha512-o9VYvW/hF2B2AKHMurPEEDE512ZqxXIldAuubwqsSJ5XR7hwN049t74uPgEpLcTWABxPv9BQpK2jc0Shoce1Qw==","signatures":[{"sig":"MEQCIDGlmWMN4hFyeTVJUbXP38U8GYS1NGIPziGf72t83F6yAiABFGwZ7OCdUb8WJHnThPF/BzY2FlIDGs/CU9+gvk2r0w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12774155},"main":"dist/index.js","_from":"file:asafarim-toast-1.1.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"demo":"pnpm run build && cd demo && pnpm run dev","build":"tsup","deploy":"gh-pages -d demo/dist","predeploy":"pnpm run build && cd demo && pnpm run build"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\7af6b6ddd22c2765f0825155545c59fb\\asafarim-toast-1.1.0.tgz","_integrity":"sha512-o9VYvW/hF2B2AKHMurPEEDE512ZqxXIldAuubwqsSJ5XR7hwN049t74uPgEpLcTWABxPv9BQpK2jc0Shoce1Qw==","repository":{"url":"git+https://github.com/AliSafari-IT/toast.git","type":"git"},"_npmVersion":"10.9.0","description":"React toast notification system for ASafariM frontends.","directories":{},"sideEffects":["./src/styles/toast.css"],"_nodeVersion":"22.12.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","eslint":"^9.0.0","rimraf":"^6.0.0","gh-pages":"^6.0.0","typescript":"^5.5.2","@types/node":"^22.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@typescript-eslint/parser":"^8.0.0","@typescript-eslint/eslint-plugin":"^8.0.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/toast_1.1.0_1755375397035_0.5220575353365691","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@asafarim/toast","version":"1.2.0","description":"React toast notification system for ASafariM frontends.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","private":false,"exports":{".":{"types":"./index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"sideEffects":["./src/styles/toast.css"],"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/node":"^22.0.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@typescript-eslint/eslint-plugin":"^8.0.0","@typescript-eslint/parser":"^8.0.0","eslint":"^9.0.0","rimraf":"^6.0.0","tsup":"^8.0.0","typescript":"^5.5.2","gh-pages":"^6.0.0"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/AliSafari-IT/toast.git"},"homepage":"https://alisafari-it.github.io/toast/","scripts":{"build":"tsup","deploy":"gh-pages -d demo/dist","predeploy":"pnpm run build && cd demo && pnpm run build","demo":"pnpm run build && cd demo && pnpm run dev"},"_id":"@asafarim/toast@1.2.0","bugs":{"url":"https://github.com/AliSafari-IT/toast/issues"},"_integrity":"sha512-K8mCtqxBOycCDpXtavwD5+C8TIn0mxw0a7uD+mYKCriCuCNVgL4VTojo17JfC4w30RNWvU4g1+BZIOkDXn2AOQ==","_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\5b61480ff504f6a61d938974039761e3\\asafarim-toast-1.2.0.tgz","_from":"file:asafarim-toast-1.2.0.tgz","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-K8mCtqxBOycCDpXtavwD5+C8TIn0mxw0a7uD+mYKCriCuCNVgL4VTojo17JfC4w30RNWvU4g1+BZIOkDXn2AOQ==","shasum":"7099ba55fa8a5400106696665e9b26a400a31c74","tarball":"https://registry.npmjs.org/@asafarim/toast/-/toast-1.2.0.tgz","fileCount":1964,"unpackedSize":12782639,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDK2ha2Tj/7oJpaJJMISrD3/hg9qEWLS8LgInblkKKXFAiEAjaCzt2m2K+4+o6LJ6GmaIKNfTrUvl3/2MBXPV2LviwQ="}]},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"directories":{},"maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/toast_1.2.0_1755380155241_0.6965212863792638"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-16T19:28:30.801Z","modified":"2025-08-16T21:35:55.787Z","1.0.0":"2025-08-16T19:28:31.242Z","1.1.0":"2025-08-16T20:16:37.456Z","1.2.0":"2025-08-16T21:35:55.557Z"},"bugs":{"url":"https://github.com/AliSafari-IT/toast/issues"},"homepage":"https://alisafari-it.github.io/toast/","repository":{"type":"git","url":"git+https://github.com/AliSafari-IT/toast.git"},"description":"React toast notification system for ASafariM frontends.","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"readme":"# @asafarim/toast\r\n\r\nA lightweight, theme-aware toast notification system for React applications with a simple programmatic API.\r\n\r\n## Links & Info\r\n\r\n[![npm version](https://img.shields.io/npm/v/@asafarim/toast.svg)](https://www.npmjs.com/package/@asafarim/toast)\r\n[![GitHub](https://img.shields.io/github/stars/AliSafari-IT/toast?style=social)](https://github.com/AliSafari-IT/toast)\r\n\r\n- **Version**: 1.2.0\r\n- **GitHub**: [github.com/AliSafari-IT/toast](https://github.com/AliSafari-IT/toast)\r\n- **npm**: [npmjs.com/package/@asafarim/toast](https://www.npmjs.com/package/@asafarim/toast)\r\n- **Demo**: [alisafari-it.github.io/toast](https://alisafari-it.github.io/toast/)\r\n\r\n## Features\r\n\r\n- Theme-aware UI (light/dark mode support)\r\n- Simple React API: `useToast().success/info/warning/error(message, options)`\r\n- React components: `<ToastProvider>`, `<Toaster />`\r\n- Queue & limits: max concurrent, FIFO\r\n- Auto-dismiss, pause on hover, closable\r\n- Accessible: roles, aria-live, focusable close, reduced-motion\r\n- Premium design: glassy, gradient, shadow, icons\r\n- Multiple positions: top/bottom, left/right/center\r\n- Deduping: prevent duplicate toast notifications\r\n- TypeScript support with full type definitions\r\n- ESM/CJS builds\r\n- Zero external dependencies\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @asafarim/toast\r\n# or\r\nyarn add @asafarim/toast\r\n# or\r\npnpm add @asafarim/toast\r\n```\r\n\r\n## Usage\r\n\r\n```tsx\r\n// App.tsx or root component\r\nimport { ToastProvider, Toaster } from '@asafarim/toast';\r\nimport '@asafarim/toast/styles.css';\r\n\r\nfunction App() {\r\n  return (\r\n    <ToastProvider>\r\n      {/* Your app content */}\r\n      <Toaster />\r\n    </ToastProvider>\r\n  );\r\n}\r\n```\r\n\r\n```tsx\r\n// Any component\r\nimport { useToast } from '@asafarim/toast';\r\n\r\nfunction MyComponent() {\r\n  const toast = useToast();\r\n  \r\n  const handleClick = () => {\r\n    toast.success('Operation successful!', {\r\n      description: 'Your changes have been saved.',\r\n      durationMs: 5000\r\n    });\r\n  };\r\n  \r\n  return <button onClick={handleClick}>Save Changes</button>;\r\n}\r\n```\r\n\r\n## API Reference\r\n\r\n### Components\r\n\r\n#### ToastProvider\r\n\r\n```tsx\r\n<ToastProvider maxVisible={6} position=\"top-right\">\r\n  {children}\r\n</ToastProvider>\r\n```\r\n\r\n**Props:**\r\n\r\n- `maxVisible`: Maximum number of toasts visible at once (default: 5)\r\n- `position`: Default position for all toasts (default: 'top-right')\r\n- `children`: React children\r\n\r\n#### Toaster\r\n\r\n```tsx\r\n<Toaster />\r\n```\r\n\r\nThe visual component that renders the toast notifications. Should be placed once in your app, typically at the root level.\r\n\r\n### useToast Hook\r\n\r\n```tsx\r\nconst toast = useToast();\r\n\r\n// Methods\r\ntoast.show(message, options);  // Show a toast with custom variant\r\ntoast.success(message, options); // Show a success toast\r\ntoast.info(message, options);    // Show an info toast\r\ntoast.warning(message, options); // Show a warning toast\r\ntoast.error(message, options);   // Show an error toast\r\ntoast.clear();                   // Remove all toasts\r\ntoast.remove(id);                // Remove a specific toast\r\n\r\n// Properties\r\ntoast.toasts;                    // Array of current toast objects\r\n```\r\n\r\n### Toast Options\r\n\r\n```ts\r\ninterface ToastOptions {\r\n  id?: string;              // Custom ID (auto-generated if not provided)\r\n  description?: string;     // Additional details\r\n  durationMs?: number;      // Duration in ms (default: 3000)\r\n  position?: ToastPosition; // Position on screen\r\n  canClose?: boolean;       // Show close button (default: true)\r\n  persist?: boolean;        // Prevent auto-dismiss (default: false)\r\n  icon?: React.ReactNode;   // Custom icon\r\n  dedupeKey?: string;       // Prevents duplicate toasts\r\n  variant?: ToastVariant;   // Toast style variant\r\n  ariaLive?: 'polite' | 'assertive'; // Accessibility setting\r\n}\r\n```\r\n\r\n### Toast Positions\r\n\r\n```ts\r\ntype ToastPosition = \r\n  | 'top-left'\r\n  | 'top-center'\r\n  | 'top-right'\r\n  | 'bottom-left'\r\n  | 'bottom-center'\r\n  | 'bottom-right';\r\n```\r\n\r\n### Toast Variants\r\n\r\n```ts\r\ntype ToastVariant = 'success' | 'info' | 'warning' | 'error' | 'neutral';\r\n```\r\n\r\n## Theme Support\r\n\r\nThe toast package automatically adapts to light and dark themes. To enable dark mode, add the `data-theme=\"dark\"` attribute to your HTML element:\r\n\r\n```tsx\r\n// Toggle dark mode\r\ndocument.documentElement.setAttribute('data-theme', 'dark');\r\n\r\n// Example with a theme toggle button\r\nconst toggleTheme = () => {\r\n  const newTheme = theme === \"light\" ? \"dark\" : \"light\";\r\n  setTheme(newTheme);\r\n  document.documentElement.setAttribute(\"data-theme\", newTheme);\r\n};\r\n```\r\n\r\n## Examples\r\n\r\n### Different Toast Variants\r\n\r\n```tsx\r\nimport { useToast } from '@asafarim/toast';\r\n\r\nfunction VariantsDemo() {\r\n  const toast = useToast();\r\n  \r\n  return (\r\n    <div className=\"variants-demo\">\r\n      <button onClick={() => toast.success('Success message')}>Success</button>\r\n      <button onClick={() => toast.info('Information message')}>Info</button>\r\n      <button onClick={() => toast.warning('Warning message')}>Warning</button>\r\n      <button onClick={() => toast.error('Error message')}>Error</button>\r\n      <button onClick={() => toast.show('Neutral message', { variant: 'neutral' })}>Neutral</button>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Custom Toast Options\r\n\r\n```tsx\r\nimport { useToast } from '@asafarim/toast';\r\n\r\nfunction OptionsDemo() {\r\n  const toast = useToast();\r\n  \r\n  const showCustomToast = () => {\r\n    toast.show('Custom toast message', {\r\n      description: 'This is a detailed description',\r\n      durationMs: 5000,\r\n      variant: 'info',\r\n      position: 'top-center',\r\n      persist: false,\r\n      canClose: true\r\n    });\r\n  };\r\n  \r\n  return <button onClick={showCustomToast}>Show Custom Toast</button>;\r\n}\r\n```\r\n\r\n### Different Positions\r\n\r\n```tsx\r\nimport { useToast, ToastPosition } from '@asafarim/toast';\r\n\r\nfunction PositionsDemo() {\r\n  const toast = useToast();\r\n  \r\n  const positions: ToastPosition[] = [\r\n    'top-left',\r\n    'top-center',\r\n    'top-right',\r\n    'bottom-left',\r\n    'bottom-center',\r\n    'bottom-right'\r\n  ];\r\n  \r\n  return (\r\n    <div className=\"positions-demo\">\r\n      {positions.map(position => (\r\n        <button\r\n          key={position}\r\n          onClick={() => toast.info(`Toast at ${position}`, { position })}\r\n        >\r\n          {position}\r\n        </button>\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}