{"_id":"@aargon-ui/badge","name":"@aargon-ui/badge","dist-tags":{"latest":"1.0.0-beta.1"},"versions":{"1.0.0-beta.1":{"name":"@aargon-ui/badge","version":"1.0.0-beta.1","description":"Animated badge 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","publish":"npm publish --otp=$OTP --access public"},"keywords":["react-native","badge","animated","ui","component"],"author":{"name":"Md Muhaiminul"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aargon007/aargon-ui.git","directory":"packages/badge"},"homepage":"https://github.com/aargon007/aargon-ui/packages/badge#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/badge@1.0.0-beta.1","gitHead":"92091459196e85a243093de4c3c95c8ef84026c3","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-IMmPqthAuNRVmZhYZAzuPvIQdD60eGNEMqX9FMzNJLmyv25iaWiqeNQF964ZH5pQVu4fmOugUh5Yj36D3iECzg==","shasum":"e45968c7013cddd3a4051ad90604b9a6ca1bb5ac","tarball":"https://registry.npmjs.org/@aargon-ui/badge/-/badge-1.0.0-beta.1.tgz","fileCount":14,"unpackedSize":40254,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDYDNIH25gRmA3rTytvP7FGzZspCyp4a2X8vZDpkSUxjwIgJClZ6+UQqdAUjUa7QnVT/NkDfOYZqoNMTT3BGRr6Mik="}]},"_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/badge_1.0.0-beta.1_1759205688004_0.2674440848128339"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-30T04:14:47.898Z","1.0.0-beta.1":"2025-09-30T04:14:48.198Z","modified":"2025-09-30T04:14:48.507Z"},"maintainers":[{"name":"aargon007","email":"muhaiminul032@gmail.com"}],"description":"Animated badge component for React Native","homepage":"https://github.com/aargon007/aargon-ui/packages/badge#readme","keywords":["react-native","badge","animated","ui","component"],"repository":{"type":"git","url":"git+https://github.com/aargon007/aargon-ui.git","directory":"packages/badge"},"author":{"name":"Md Muhaiminul"},"bugs":{"url":"https://github.com/aargon007/aargon-ui/issues"},"license":"MIT","readme":"# Aargon Badge\r\n\r\nA highly customizable, animated badge component for React Native with smooth animations and modern design.\r\n\r\n[![npm version](https://badge.fury.io/js/@aargon-ui/badge.svg)](https://www.npmjs.com/package/@aargon-ui/badge)\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, solid, outline, and ghost 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/badge\r\n# or\r\nyarn add @aargon-ui/badge\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 from 'react';\r\nimport { View } from 'react-native';\r\nimport { AnimatedBadge } from '@aargon-ui/badge';\r\n\r\nexport default function App() {\r\n    return (\r\n        <View>\r\n            <AnimatedBadge>New</AnimatedBadge>\r\n        </View>\r\n    );\r\n}\r\n```\r\n\r\n## Basic Usage\r\n\r\n### Simple Badge\r\n\r\n```tsx\r\n<AnimatedBadge>New</AnimatedBadge>\r\n```\r\n\r\n### With Count\r\n\r\n```tsx\r\n<AnimatedBadge count={5}>Messages</AnimatedBadge>\r\n```\r\n\r\n### Custom Content\r\n\r\n```tsx\r\n<AnimatedBadge>\r\n    <Text>Custom</Text>\r\n</AnimatedBadge>\r\n```\r\n\r\n## Variants\r\n\r\n### Default Variant\r\n\r\n```tsx\r\n<AnimatedBadge variant=\"default\">Default</AnimatedBadge>\r\n```\r\n\r\n### Solid Variant\r\n\r\n```tsx\r\n<AnimatedBadge variant=\"solid\">Solid</AnimatedBadge>\r\n```\r\n\r\n### Outline Variant\r\n\r\n```tsx\r\n<AnimatedBadge variant=\"outline\">Outline</AnimatedBadge>\r\n```\r\n\r\n### Ghost Variant\r\n\r\n```tsx\r\n<AnimatedBadge variant=\"ghost\">Ghost</AnimatedBadge>\r\n```\r\n\r\n## Sizes\r\n\r\n```tsx\r\n<AnimatedBadge size=\"sm\">Small</AnimatedBadge>\r\n<AnimatedBadge size=\"md\">Medium</AnimatedBadge>\r\n<AnimatedBadge size=\"lg\">Large</AnimatedBadge>\r\n```\r\n\r\n## Animation Types\r\n\r\n### Spring Animation (Default)\r\n\r\n```tsx\r\n<AnimatedBadge animationType=\"spring\">Spring</AnimatedBadge>\r\n```\r\n\r\n### Timing Animation\r\n\r\n```tsx\r\n<AnimatedBadge animationType=\"timing\" duration={500}>\r\n    Timing\r\n</AnimatedBadge>\r\n```\r\n\r\n### Bounce Animation\r\n\r\n```tsx\r\n<AnimatedBadge animationType=\"bounce\">Bounce</AnimatedBadge>\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: '#F0F9FF',\r\n        text: '#0369A1',\r\n        border: '#7DD3FC',\r\n    },\r\n    borderRadius: 12,\r\n};\r\n\r\n<AnimatedBadge theme={customTheme}>Custom Theme</AnimatedBadge>;\r\n```\r\n\r\n### With Shadow\r\n\r\n```tsx\r\n<AnimatedBadge shadow={true}>With Shadow</AnimatedBadge>\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### Animated Count\r\n\r\n```tsx\r\nconst [count, setCount] = useState(0);\r\n\r\n<AnimatedBadge count={count} animated={true}>\r\n    Notifications\r\n</AnimatedBadge>;\r\n```\r\n\r\n### Custom Position\r\n\r\n```tsx\r\n<AnimatedBadge position=\"top-right\">Top Right</AnimatedBadge>\r\n<AnimatedBadge position=\"bottom-left\">Bottom Left</AnimatedBadge>\r\n```\r\n\r\n### Disabled State\r\n\r\n```tsx\r\n<AnimatedBadge disabled={true}>Disabled</AnimatedBadge>\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| `children`      | `React.ReactNode`                                              | -             | Content to display in the badge    |\r\n| `count`         | `number`                                                       | -             | Numeric count to display           |\r\n| `variant`       | `\"default\" \\| \"solid\" \\| \"outline\" \\| \"ghost\"`                 | `\"default\"`   | Visual variant                     |\r\n| `size`          | `\"sm\" \\| \"md\" \\| \"lg\"`                                         | `\"md\"`        | Size of the badge                  |\r\n| `animationType` | `\"timing\" \\| \"spring\" \\| \"bounce\"`                             | `\"spring\"`    | Type of animation                  |\r\n| `duration`      | `number`                                                       | `300`         | Animation duration in milliseconds |\r\n| `position`      | `\"top-right\" \\| \"top-left\" \\| \"bottom-right\" \\| \"bottom-left\"` | `\"top-right\"` | Position of the badge              |\r\n| `disabled`      | `boolean`                                                      | `false`       | Whether the badge is disabled      |\r\n| `animated`      | `boolean`                                                      | `false`       | Whether to animate count changes   |\r\n| `theme`         | `BadgeTheme`                                                   | -             | 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 BadgeTheme {\r\n    colors: {\r\n        background: string;\r\n        text: string;\r\n        border: string;\r\n        shadow: string;\r\n    };\r\n    borderRadius: number;\r\n    fontFamily?: string;\r\n}\r\n\r\ntype BadgeVariant = 'default' | 'solid' | 'outline' | 'ghost';\r\ntype BadgeSize = 'sm' | 'md' | 'lg';\r\ntype AnimationType = 'timing' | 'spring' | 'bounce';\r\ntype BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\r\n```\r\n\r\n## Accessibility\r\n\r\nThe badge component includes full accessibility support:\r\n\r\n- **ARIA attributes** - Proper `aria-label` and `role` attributes\r\n- **Screen reader support** - Announces count changes 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-fcb491e6557d066f65c3d2acc401c477"}