{"_id":"@aargon-ui/accordion","name":"@aargon-ui/accordion","dist-tags":{"latest":"1.0.0-beta.1"},"versions":{"1.0.0-beta.1":{"name":"@aargon-ui/accordion","version":"1.0.0-beta.1","description":"Animated accordion 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","accordion","animated","ui","component"],"author":{"name":"Md Muhaiminul"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aargon007/aargon-ui.git","directory":"packages/accordion"},"homepage":"https://github.com/aargon007/aargon-ui/packages/accordion#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","@expo/vector-icons":"^15.0.2"},"devDependencies":{"@types/react":"~19.1.10","@types/react-native":"^0.72.8","typescript":"~5.9.2"},"_id":"@aargon-ui/accordion@1.0.0-beta.1","gitHead":"92091459196e85a243093de4c3c95c8ef84026c3","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-STs7WYmbIKP9Q+h0fYch2H0wszuSDH5hMNy3N8CqGPeRKiDVVINU9lTeiHL247R7tPCf5gM3H2BfKftHJthSPg==","shasum":"a917616c3baf9cee62a1fb6dcc3bda566174b190","tarball":"https://registry.npmjs.org/@aargon-ui/accordion/-/accordion-1.0.0-beta.1.tgz","fileCount":15,"unpackedSize":43974,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQChgW8Jhys/SwA7elJ7/ZPv1MIsSW1ffRy0t1eDltB0RQIgLrI5rjpEI6XRtQkrmqsuwmVH2BSGg9gQ3tH0jMsbqfk="}]},"_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/accordion_1.0.0-beta.1_1759205681758_0.554507770901093"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-30T04:14:41.663Z","1.0.0-beta.1":"2025-09-30T04:14:41.989Z","modified":"2025-09-30T04:14:42.276Z"},"maintainers":[{"name":"aargon007","email":"muhaiminul032@gmail.com"}],"description":"Animated accordion component for React Native","homepage":"https://github.com/aargon007/aargon-ui/packages/accordion#readme","keywords":["react-native","accordion","animated","ui","component"],"repository":{"type":"git","url":"git+https://github.com/aargon007/aargon-ui.git","directory":"packages/accordion"},"author":{"name":"Md Muhaiminul"},"bugs":{"url":"https://github.com/aargon007/aargon-ui/issues"},"license":"MIT","readme":"# Aargon Accordion\r\n\r\nA highly customizable, animated accordion component for React Native with smooth animations and modern design.\r\n\r\n[](https://www.npmjs.com/package/aargon-accordion)\r\n[](https://opensource.org/licenses/MIT)\r\n\r\n## Features\r\n\r\n- 🎨 **Multiple Variants** - Default, bordered, filled, 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** - Controlled and uncontrolled modes\r\n- 📱 **React Native** - Built specifically for React Native with Reanimated\r\n- 🎭 **Icon Support** - Customizable icons with multiple positions\r\n- 🌟 **TypeScript** - Full TypeScript support with comprehensive types\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install aargon-accordion\r\n# or\r\nyarn add aargon-accordion\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 lucide-react-native react-native-svg\r\n```\r\n\r\n## Quick Start\r\n\r\n```tsx\r\nimport React from 'react';\r\nimport { View, Text } from 'react-native';\r\nimport { AnimatedAccordion } from 'aargon-accordion';\r\n\r\nexport default function App() {\r\n return (\r\n \r\n This is the accordion content!\r\n \r\n );\r\n}\r\n```\r\n\r\n## Basic Usage\r\n\r\n### Simple Accordion\r\n\r\n```tsx\r\n\r\n Your content here\r\n\r\n```\r\n\r\n### Controlled Accordion\r\n\r\n```tsx\r\nconst [expanded, setExpanded] = useState(false);\r\n\r\n\r\n Controlled content\r\n;\r\n```\r\n\r\n### Initially Expanded\r\n\r\n```tsx\r\n\r\n This starts expanded\r\n\r\n```\r\n\r\n## Variants\r\n\r\n### Default Variant\r\n\r\n```tsx\r\n\r\n Default styling\r\n\r\n```\r\n\r\n### Bordered Variant\r\n\r\n```tsx\r\n\r\n With border styling\r\n\r\n```\r\n\r\n### Filled Variant\r\n\r\n```tsx\r\n\r\n With filled background\r\n\r\n```\r\n\r\n### Ghost Variant\r\n\r\n```tsx\r\n\r\n Minimal styling\r\n\r\n```\r\n\r\n## Sizes\r\n\r\n```tsx\r\nSmall content\r\nMedium content\r\nLarge content\r\n```\r\n\r\n## Animation Types\r\n\r\n### Spring Animation (Default)\r\n\r\n```tsx\r\n\r\n Smooth spring animation\r\n\r\n```\r\n\r\n### Timing Animation\r\n\r\n```tsx\r\n\r\n Custom duration timing\r\n\r\n```\r\n\r\n### Bounce Animation\r\n\r\n```tsx\r\n\r\n Bouncy animation\r\n\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 headerBackground: '#F0F9FF',\r\n headerBackgroundActive: '#E0F2FE',\r\n text: '#0369A1',\r\n textActive: '#0C4A6E',\r\n border: '#7DD3FC',\r\n },\r\n borderRadius: 12,\r\n};\r\n\r\n\r\n Custom styled accordion\r\n;\r\n```\r\n\r\n### With Shadow\r\n\r\n```tsx\r\n\r\n Accordion with shadow effect\r\n\r\n```\r\n\r\n## Icon Customization\r\n\r\n### Icon Position\r\n\r\n```tsx\r\n\r\n Icon on the left\r\n\r\n\r\n\r\n Icon on the right (default)\r\n\r\n```\r\n\r\n### Hide Icon\r\n\r\n```tsx\r\n\r\n No expand/collapse icon\r\n\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### Custom Header Content\r\n\r\n```tsx\r\n\r\n Custom Header\r\n New\r\n \r\n }>\r\n Custom header content\r\n\r\n```\r\n\r\n### Disabled State\r\n\r\n```tsx\r\n\r\n This accordion is disabled\r\n\r\n```\r\n\r\n### Nested Accordions\r\n\r\n```tsx\r\n\r\n \r\n Parent content\r\n \r\n Nested content\r\n \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| `children` | `React.ReactNode` | - | Content to display in the accordion body |\r\n| `title` | `string` | - | Title text for the accordion header |\r\n| `headerContent` | `React.ReactNode` | - | Custom header content |\r\n| `defaultExpanded` | `boolean` | `false` | Whether the accordion is expanded by default |\r\n| `expanded` | `boolean` | - | Controlled expanded state |\r\n| `onToggle` | `(expanded: boolean) => void` | - | Callback when accordion is toggled |\r\n| `duration` | `number` | `300` | Animation duration in milliseconds |\r\n| `animationType` | `\"timing\" \\| \"spring\" \\| \"bounce\"` | `\"spring\"` | Type of animation |\r\n| `variant` | `\"default\" \\| \"bordered\" \\| \"filled\" \\| \"ghost\"` | `\"default\"` | Visual variant |\r\n| `size` | `\"sm\" \\| \"md\" \\| \"lg\"` | `\"md\"` | Size of the accordion |\r\n| `disabled` | `boolean` | `false` | Whether the accordion is disabled |\r\n| `showIcon` | `boolean` | `true` | Whether to show the expand/collapse icon |\r\n| `iconPosition` | `\"left\" \\| \"right\"` | `\"right\"` | Position of the icon |\r\n| `theme` | `AccordionTheme` | - | 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 AccordionTheme {\r\n colors: {\r\n background: string;\r\n headerBackground: string;\r\n headerBackgroundActive: string;\r\n border: string;\r\n text: string;\r\n textActive: string;\r\n icon: string;\r\n iconActive: string;\r\n shadow: string;\r\n };\r\n borderRadius: number;\r\n fontFamily?: string;\r\n}\r\n\r\ntype AccordionVariant = 'default' | 'bordered' | 'filled' | 'ghost';\r\ntype AccordionSize = 'sm' | 'md' | 'lg';\r\ntype AnimationType = 'timing' | 'spring' | 'bounce';\r\n```\r\n\r\n## Accessibility\r\n\r\nThe accordion component includes full accessibility support:\r\n\r\n- **ARIA attributes** - Proper `aria-expanded` and `aria-controls` attributes\r\n- **Keyboard navigation** - Supports keyboard interaction\r\n- **Screen reader support** - Announces state changes to screen readers\r\n- **Focus management** - Proper focus handling for keyboard users\r\n\r\n## Requirements\r\n\r\n- React Native 0.81.4+\r\n- React 18.0.0+\r\n- react-native-reanimated 4.1.1+\r\n- lucide-react-native 0.460.0+\r\n- react-native-svg 15.12.1+\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-74554cea0d80b9bfcd132d85c507cca0"}