{"_id":"@aargon-ui/snackbar","name":"@aargon-ui/snackbar","dist-tags":{"latest":"1.0.0-beta.1"},"versions":{"1.0.0-beta.1":{"name":"@aargon-ui/snackbar","version":"1.0.0-beta.1","description":"Animated snackbar component for React Native","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"build":"tsc","build:watch":"tsc --watch","dev":"tsc --watch","type-check":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","clean":"rm -rf lib","release":"npm publish --otp=$OTP --access public"},"keywords":["react-native","snackbar","animated","ui","component"],"author":{"name":"Md Muhaiminul"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aargon007/aargon-ui.git","directory":"packages/snackbar"},"homepage":"https://github.com/aargon007/aargon-ui/packages/snackbar#readme","bugs":{"url":"https://github.com/aargon007/aargon-ui/issues"},"peerDependencies":{"react":">=19.0.0","react-native":">=0.81.0","react-native-reanimated":">=3.0.0"},"devDependencies":{"@types/react":"~19.1.10","@types/react-native":"^0.72.8","typescript":"~5.9.2"},"_id":"@aargon-ui/snackbar@1.0.0-beta.1","gitHead":"92091459196e85a243093de4c3c95c8ef84026c3","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-NBd1S899Y0kzJqyPI1hHEWewmO6ikCmcm48jErOYfC0bfr+BfFCTuKLtHOr2R1KaPbNu6coOoJX6BPrm0CW69g==","shasum":"c6d7b3a57f8150e6e98d90dddc114c3faa6eabd4","tarball":"https://registry.npmjs.org/@aargon-ui/snackbar/-/snackbar-1.0.0-beta.1.tgz","fileCount":22,"unpackedSize":68905,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCpFxM82w4LapCCZhI2DCN4dS6hbjZvfIbmnm3vWrkFtQIgShkiqjCmgomL3/Jb4J1+uPYio5y956qStaN4oZfdbHM="}]},"_npmUser":{"name":"aargon007","email":"muhaiminul032@gmail.com"},"directories":{},"maintainers":[{"name":"aargon007","email":"muhaiminul032@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/snackbar_1.0.0-beta.1_1759206966856_0.28920390196907775"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-30T04:36:06.779Z","1.0.0-beta.1":"2025-09-30T04:36:07.039Z","modified":"2025-09-30T04:36:07.314Z"},"maintainers":[{"name":"aargon007","email":"muhaiminul032@gmail.com"}],"description":"Animated snackbar component for React Native","homepage":"https://github.com/aargon007/aargon-ui/packages/snackbar#readme","keywords":["react-native","snackbar","animated","ui","component"],"repository":{"type":"git","url":"git+https://github.com/aargon007/aargon-ui.git","directory":"packages/snackbar"},"author":{"name":"Md Muhaiminul"},"bugs":{"url":"https://github.com/aargon007/aargon-ui/issues"},"license":"MIT","readme":"# Aargon Snackbar\r\n\r\nA highly customizable, animated snackbar component for React Native with smooth animations and modern design.\r\n\r\n[![npm version](https://badge.fury.io/js/@aargon-ui/snackbar.svg)](https://www.npmjs.com/package/@aargon-ui/snackbar)\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r\n\r\n## Features\r\n\r\n- 🎨 **Multiple Variants** - Default, success, warning, and error styles\r\n- 📏 **Size Options** - Small, medium, and large sizes\r\n- ⚡ **Smooth Animations** - Spring, timing, and bounce animations\r\n- 🎯 **Accessibility** - Full accessibility support with proper ARIA attributes\r\n- 🎨 **Customizable Themes** - Complete theming system with colors and styling\r\n- 🔧 **Flexible API** - Easy to use with comprehensive props\r\n- 📱 **React Native** - Built specifically for React Native with Reanimated\r\n- 🌟 **TypeScript** - Full TypeScript support with comprehensive types\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aargon-ui/snackbar\r\n# or\r\nyarn add @aargon-ui/snackbar\r\n```\r\n\r\n### Peer Dependencies\r\n\r\nMake sure you have the required peer dependencies installed:\r\n\r\n```bash\r\nnpm install react react-native react-native-reanimated\r\n```\r\n\r\n## Quick Start\r\n\r\n```tsx\r\nimport React, { useState } from 'react';\r\nimport { View, Button } from 'react-native';\r\nimport { AnimatedSnackbar } from '@aargon-ui/snackbar';\r\n\r\nexport default function App() {\r\n    const [visible, setVisible] = useState(false);\r\n\r\n    return (\r\n        <View>\r\n            <Button title=\"Show Snackbar\" onPress={() => setVisible(true)} />\r\n            <AnimatedSnackbar visible={visible} onDismiss={() => setVisible(false)} message=\"This is a snackbar message\" />\r\n        </View>\r\n    );\r\n}\r\n```\r\n\r\n## Basic Usage\r\n\r\n### Simple Snackbar\r\n\r\n```tsx\r\nconst [visible, setVisible] = useState(false);\r\n\r\n<AnimatedSnackbar visible={visible} onDismiss={() => setVisible(false)} message=\"This is a snackbar message\" />;\r\n```\r\n\r\n### With Action\r\n\r\n```tsx\r\n<AnimatedSnackbar\r\n    visible={visible}\r\n    onDismiss={() => setVisible(false)}\r\n    message=\"Item deleted\"\r\n    action={{\r\n        label: 'Undo',\r\n        onPress: () => console.log('Undo pressed'),\r\n    }}\r\n/>\r\n```\r\n\r\n### Auto Dismiss\r\n\r\n```tsx\r\n<AnimatedSnackbar visible={visible} onDismiss={() => setVisible(false)} message=\"Auto dismiss in 3 seconds\" duration={3000} />\r\n```\r\n\r\n## Variants\r\n\r\n### Default Variant\r\n\r\n```tsx\r\n<AnimatedSnackbar variant=\"default\" message=\"Default message\" />\r\n```\r\n\r\n### Success Variant\r\n\r\n```tsx\r\n<AnimatedSnackbar variant=\"success\" message=\"Success message\" />\r\n```\r\n\r\n### Warning Variant\r\n\r\n```tsx\r\n<AnimatedSnackbar variant=\"warning\" message=\"Warning message\" />\r\n```\r\n\r\n### Error Variant\r\n\r\n```tsx\r\n<AnimatedSnackbar variant=\"error\" message=\"Error message\" />\r\n```\r\n\r\n## Sizes\r\n\r\n```tsx\r\n<AnimatedSnackbar size=\"sm\" message=\"Small snackbar\" />\r\n<AnimatedSnackbar size=\"md\" message=\"Medium snackbar\" />\r\n<AnimatedSnackbar size=\"lg\" message=\"Large snackbar\" />\r\n```\r\n\r\n## Animation Types\r\n\r\n### Spring Animation (Default)\r\n\r\n```tsx\r\n<AnimatedSnackbar animationType=\"spring\" message=\"Spring animation\" />\r\n```\r\n\r\n### Timing Animation\r\n\r\n```tsx\r\n<AnimatedSnackbar animationType=\"timing\" duration={500} message=\"Timing animation\" />\r\n```\r\n\r\n### Bounce Animation\r\n\r\n```tsx\r\n<AnimatedSnackbar animationType=\"bounce\" message=\"Bounce animation\" />\r\n```\r\n\r\n## Custom Styling\r\n\r\n### Custom Theme\r\n\r\n```tsx\r\nconst customTheme = {\r\n    colors: {\r\n        background: '#3B82F6',\r\n        text: '#FFFFFF',\r\n        action: '#93C5FD',\r\n    },\r\n    borderRadius: 8,\r\n};\r\n\r\n<AnimatedSnackbar theme={customTheme} message=\"Custom theme\" />;\r\n```\r\n\r\n### With Shadow\r\n\r\n```tsx\r\n<AnimatedSnackbar shadow={true} message=\"With shadow\" />\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### Custom Position\r\n\r\n```tsx\r\n<AnimatedSnackbar visible={visible} onDismiss={() => setVisible(false)} message=\"Top positioned\" position=\"top\" />\r\n```\r\n\r\n### Custom Duration\r\n\r\n```tsx\r\n<AnimatedSnackbar visible={visible} onDismiss={() => setVisible(false)} message=\"Custom duration\" duration={5000} />\r\n```\r\n\r\n### Disabled State\r\n\r\n```tsx\r\n<AnimatedSnackbar disabled={true} message=\"Disabled\" />\r\n```\r\n\r\n### Custom Action\r\n\r\n```tsx\r\n<AnimatedSnackbar\r\n    visible={visible}\r\n    onDismiss={() => setVisible(false)}\r\n    message=\"Custom action\"\r\n    action={{\r\n        label: 'Custom',\r\n        onPress: () => console.log('Custom action'),\r\n        style: { color: '#FF6B6B' },\r\n    }}\r\n/>\r\n```\r\n\r\n## API Reference\r\n\r\n### Props\r\n\r\n| Prop            | Type                                             | Default     | Description                                |\r\n| --------------- | ------------------------------------------------ | ----------- | ------------------------------------------ |\r\n| `visible`       | `boolean`                                        | `false`     | Whether the snackbar is visible            |\r\n| `onDismiss`     | `() => void`                                     | -           | Function called when snackbar is dismissed |\r\n| `message`       | `string`                                         | -           | Snackbar message text                      |\r\n| `action`        | `SnackbarAction`                                 | -           | Action button configuration                |\r\n| `variant`       | `\"default\" \\| \"success\" \\| \"warning\" \\| \"error\"` | `\"default\"` | Visual variant                             |\r\n| `size`          | `\"sm\" \\| \"md\" \\| \"lg\"`                           | `\"md\"`      | Size of the snackbar                       |\r\n| `animationType` | `\"timing\" \\| \"spring\" \\| \"bounce\"`               | `\"spring\"`  | Type of animation                          |\r\n| `duration`      | `number`                                         | `4000`      | Auto dismiss duration in milliseconds      |\r\n| `position`      | `\"top\" \\| \"bottom\"`                              | `\"bottom\"`  | Position of the snackbar                   |\r\n| `disabled`      | `boolean`                                        | `false`     | Whether the snackbar is disabled           |\r\n| `theme`         | `SnackbarTheme`                                  | -           | Custom theme object                        |\r\n| `shadow`        | `boolean`                                        | `false`     | Whether to show shadow effect              |\r\n\r\n### Types\r\n\r\n```tsx\r\ninterface SnackbarAction {\r\n    label: string;\r\n    onPress: () => void;\r\n    style?: TextStyle;\r\n}\r\n\r\ninterface SnackbarTheme {\r\n    colors: {\r\n        background: string;\r\n        text: string;\r\n        action: string;\r\n        shadow: string;\r\n    };\r\n    borderRadius: number;\r\n    fontFamily?: string;\r\n}\r\n\r\ntype SnackbarVariant = 'default' | 'success' | 'warning' | 'error';\r\ntype SnackbarSize = 'sm' | 'md' | 'lg';\r\ntype AnimationType = 'timing' | 'spring' | 'bounce';\r\ntype SnackbarPosition = 'top' | 'bottom';\r\n```\r\n\r\n## Accessibility\r\n\r\nThe snackbar component includes full accessibility support:\r\n\r\n- **ARIA attributes** - Proper `role=\"alert\"` and `aria-live` attributes\r\n- **Screen reader support** - Announces messages to screen readers\r\n- **High contrast support** - Works well with system accessibility settings\r\n\r\n## Requirements\r\n\r\n- React Native 0.81.0+\r\n- React 19.0.0+\r\n- react-native-reanimated 3.0.0+\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n## License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n## Support\r\n\r\nIf you have any questions or need help, please:\r\n\r\n1. Check the [documentation](https://github.com/aargon007/aargon-ui#readme)\r\n2. Search [existing issues](https://github.com/aargon007/aargon-ui/issues)\r\n3. Create a [new issue](https://github.com/aargon007/aargon-ui/issues/new)\r\n\r\n## Changelog\r\n\r\nSee [CHANGELOG.md](CHANGELOG.md) for a list of changes and version history.\r\n\r\n---\r\n\r\nMade with ❤️ by [Aargon](https://github.com/aargon007)\r\n","readmeFilename":"README.md","_rev":"1-6e1704b82bea687e73f7c735d800a2a2"}