{"_id":"@aargon-ui/progress","name":"@aargon-ui/progress","dist-tags":{"latest":"1.0.0-beta.1"},"versions":{"1.0.0-beta.1":{"name":"@aargon-ui/progress","version":"1.0.0-beta.1","description":"Animated progress 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"},"keywords":["react-native","progress","animated","ui","component"],"author":{"name":"Md Muhaiminul"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/aargon007/aargon-ui.git","directory":"packages/progress"},"homepage":"https://github.com/aargon007/aargon-ui/packages/progress#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/progress@1.0.0-beta.1","gitHead":"92091459196e85a243093de4c3c95c8ef84026c3","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-32hcFu9sqTr0khh4nTxDi+N1hDobJvMqJRF52gWNNxTUJq41ABucF/ec3vdJ/cM1/hzw+GKput5ra8iv7sZBgg==","shasum":"c08d4ede1c7583d8a496b346aeb26f1d33822bb7","tarball":"https://registry.npmjs.org/@aargon-ui/progress/-/progress-1.0.0-beta.1.tgz","fileCount":14,"unpackedSize":48127,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFDdO+Fm7YINAE9YPxTE4DpL+3JC6kpscHEKzLUbqPvJAiAfxsBDyfsQqfh2KpceC9mKnQM4mL7rTiwmjtY5wpBa+Q=="}]},"_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/progress_1.0.0-beta.1_1759206473661_0.9520855034846967"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-30T04:27:53.564Z","1.0.0-beta.1":"2025-09-30T04:27:53.828Z","modified":"2025-09-30T04:27:54.143Z"},"maintainers":[{"name":"aargon007","email":"muhaiminul032@gmail.com"}],"description":"Animated progress component for React Native","homepage":"https://github.com/aargon007/aargon-ui/packages/progress#readme","keywords":["react-native","progress","animated","ui","component"],"repository":{"type":"git","url":"git+https://github.com/aargon007/aargon-ui.git","directory":"packages/progress"},"author":{"name":"Md Muhaiminul"},"bugs":{"url":"https://github.com/aargon007/aargon-ui/issues"},"license":"MIT","readme":"# Aargon Progress\r\n\r\nA highly customizable, animated progress component for React Native with smooth animations and modern design.\r\n\r\n[![npm version](https://badge.fury.io/js/@aargon-ui/progress.svg)](https://www.npmjs.com/package/@aargon-ui/progress)\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** - Linear, circular, and step progress 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/progress\r\n# or\r\nyarn add @aargon-ui/progress\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, useEffect } from 'react';\r\nimport { View } from 'react-native';\r\nimport { AnimatedProgress } from '@aargon-ui/progress';\r\n\r\nexport default function App() {\r\n    const [progress, setProgress] = useState(0);\r\n\r\n    useEffect(() => {\r\n        const timer = setInterval(() => {\r\n            setProgress(prev => (prev >= 100 ? 0 : prev + 10));\r\n        }, 1000);\r\n\r\n        return () => clearInterval(timer);\r\n    }, []);\r\n\r\n    return (\r\n        <View>\r\n            <AnimatedProgress progress={progress} variant=\"linear\" />\r\n        </View>\r\n    );\r\n}\r\n```\r\n\r\n## Basic Usage\r\n\r\n### Linear Progress\r\n\r\n```tsx\r\n<AnimatedProgress progress={50} variant=\"linear\" />\r\n```\r\n\r\n### Circular Progress\r\n\r\n```tsx\r\n<AnimatedProgress progress={75} variant=\"circular\" />\r\n```\r\n\r\n### Step Progress\r\n\r\n```tsx\r\n<AnimatedProgress progress={3} totalSteps={5} variant=\"step\" />\r\n```\r\n\r\n## Variants\r\n\r\n### Linear Variant\r\n\r\n```tsx\r\n<AnimatedProgress variant=\"linear\" progress={50} />\r\n```\r\n\r\n### Circular Variant\r\n\r\n```tsx\r\n<AnimatedProgress variant=\"circular\" progress={75} />\r\n```\r\n\r\n### Step Variant\r\n\r\n```tsx\r\n<AnimatedProgress variant=\"step\" progress={2} totalSteps={4} />\r\n```\r\n\r\n## Sizes\r\n\r\n```tsx\r\n<AnimatedProgress size=\"sm\" progress={50} />\r\n<AnimatedProgress size=\"md\" progress={50} />\r\n<AnimatedProgress size=\"lg\" progress={50} />\r\n```\r\n\r\n## Animation Types\r\n\r\n### Spring Animation (Default)\r\n\r\n```tsx\r\n<AnimatedProgress animationType=\"spring\" progress={50} />\r\n```\r\n\r\n### Timing Animation\r\n\r\n```tsx\r\n<AnimatedProgress animationType=\"timing\" duration={500} progress={50} />\r\n```\r\n\r\n### Bounce Animation\r\n\r\n```tsx\r\n<AnimatedProgress animationType=\"bounce\" progress={50} />\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: '#E5E7EB',\r\n        progress: '#3B82F6',\r\n        text: '#374151',\r\n    },\r\n    borderRadius: 4,\r\n};\r\n\r\n<AnimatedProgress theme={customTheme} progress={50} />;\r\n```\r\n\r\n### With Shadow\r\n\r\n```tsx\r\n<AnimatedProgress shadow={true} progress={50} />\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### With Label\r\n\r\n```tsx\r\n<AnimatedProgress progress={50} label=\"Loading...\" showPercentage={true} />\r\n```\r\n\r\n### Indeterminate Progress\r\n\r\n```tsx\r\n<AnimatedProgress indeterminate={true} variant=\"linear\" />\r\n```\r\n\r\n### Custom Colors\r\n\r\n```tsx\r\n<AnimatedProgress progress={50} progressColor=\"#10B981\" backgroundColor=\"#D1FAE5\" />\r\n```\r\n\r\n### Disabled State\r\n\r\n```tsx\r\n<AnimatedProgress disabled={true} progress={50} />\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| `progress`        | `number`                           | `0`        | Progress value (0-100)                   |\r\n| `variant`         | `\"linear\" \\| \"circular\" \\| \"step\"` | `\"linear\"` | Visual variant                           |\r\n| `size`            | `\"sm\" \\| \"md\" \\| \"lg\"`             | `\"md\"`     | Size of the progress                     |\r\n| `animationType`   | `\"timing\" \\| \"spring\" \\| \"bounce\"` | `\"spring\"` | Type of animation                        |\r\n| `duration`        | `number`                           | `300`      | Animation duration in milliseconds       |\r\n| `totalSteps`      | `number`                           | -          | Total number of steps (for step variant) |\r\n| `label`           | `string`                           | -          | Label text                               |\r\n| `showPercentage`  | `boolean`                          | `false`    | Whether to show percentage               |\r\n| `indeterminate`   | `boolean`                          | `false`    | Whether the progress is indeterminate    |\r\n| `progressColor`   | `string`                           | -          | Custom progress color                    |\r\n| `backgroundColor` | `string`                           | -          | Custom background color                  |\r\n| `disabled`        | `boolean`                          | `false`    | Whether the progress is disabled         |\r\n| `theme`           | `ProgressTheme`                    | -          | 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 ProgressTheme {\r\n    colors: {\r\n        background: string;\r\n        progress: string;\r\n        text: string;\r\n        shadow: string;\r\n    };\r\n    borderRadius: number;\r\n    fontFamily?: string;\r\n}\r\n\r\ntype ProgressVariant = 'linear' | 'circular' | 'step';\r\ntype ProgressSize = 'sm' | 'md' | 'lg';\r\ntype AnimationType = 'timing' | 'spring' | 'bounce';\r\n```\r\n\r\n## Accessibility\r\n\r\nThe progress component includes full accessibility support:\r\n\r\n- **ARIA attributes** - Proper `role=\"progressbar\"` and `aria-valuenow` attributes\r\n- **Screen reader support** - Announces progress 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-5bed9665d46fdee98a0e29aa4433d3d4"}