{"_id":"@aniruddha1806/progress-tracker","_rev":"2-4f32cfc3e6d0b1602c11f7d5c15054e2","name":"@aniruddha1806/progress-tracker","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aniruddha1806/progress-tracker","version":"1.0.0","keywords":["react","progress","tracker","stepper","steps"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/progress-tracker@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"6004e890f7ec5bb4c33e2c71ac15daec4a246b16","tarball":"https://registry.npmjs.org/@aniruddha1806/progress-tracker/-/progress-tracker-1.0.0.tgz","fileCount":7,"integrity":"sha512-b4bbVPMFQbnLhzU0ul+x5yYWKnRNb6oq5wfYDA4l8sfxRZHxWVlngT3L2x61b6BITdF/n7GCiKa1OrGJ7pps4Q==","signatures":[{"sig":"MEYCIQCNUXwzp977Q/N2WoUJxKtfAnkcKlHtRt/352bXjJrM3AIhANZIiVZEQ+AWtXJw1GykyrQm+g8y253gIQuqgJTdcMwc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":49632},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"lint":"eslint src --ext .ts,.tsx","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A customizable progress tracker component for React applications","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.5.0","rollup":"^3.20.0","typescript":"^4.9.5","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@rollup/plugin-commonjs":"^24.0.1","rollup-plugin-typescript2":"^0.34.1","@rollup/plugin-node-resolve":"^15.0.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/progress-tracker_1.0.0_1744042889789_0.06800639684169618","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/progress-tracker","version":"1.0.1","description":"A customizable progress tracker component for React applications","main":"dist/index.js","type":"module","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","test":"jest","lint":"eslint src --ext .ts,.tsx","prepublishOnly":"npm run build"},"keywords":["react","progress","tracker","stepper","steps"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^24.0.1","@rollup/plugin-node-resolve":"^15.0.1","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","rollup":"^3.20.0","rollup-plugin-typescript2":"^0.34.1","tslib":"^2.5.0","typescript":"^4.9.5"},"_id":"@aniruddha1806/progress-tracker@1.0.1","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-vrO9kHi4toNd6tyE8PuvyBJG1lUobB6AQUwyiCD3Ba5fTdyDVdaDCtvDcSCqf3uhGoQiXnJJWCsDQQ/IZJBB7w==","shasum":"7bb51422c7dab45a3c466dda56a6ea55a3c1eea9","tarball":"https://registry.npmjs.org/@aniruddha1806/progress-tracker/-/progress-tracker-1.0.1.tgz","fileCount":8,"unpackedSize":57446,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICEYcc57tOJDp+Fj5lsv/yrSwFkbvZsNF4cpP7foPZcLAiBBNJObMJPA2ym7veS3xVg12R19FWBSI1HXmX2NSX2Tow=="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/progress-tracker_1.0.1_1749138202484_0.07536266456974139"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-07T16:21:29.711Z","modified":"2025-06-05T15:43:22.848Z","1.0.0":"2025-04-07T16:21:29.970Z","1.0.1":"2025-06-05T15:43:22.665Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","progress","tracker","stepper","steps"],"description":"A customizable progress tracker component for React applications","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Progress Tracker\r\n\r\nA flexible, customizable progress tracker component for React applications with TypeScript support. Perfect for multi-step forms, onboarding flows, checkout processes, and any step-by-step user journey.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/progress-tracker\r\n\r\n```\r\n\r\n## Features\r\n\r\n- 🎨 Extensive customization options (colors, sizes, styles)\r\n- 📱 Responsive design with multiple size options\r\n- 🔧 Custom step rendering support\r\n- 🎭 Built-in icons and labels with sublabels\r\n- 📊 Visual state management (active, completed, inactive)\r\n- 🎨 CSS class and inline style support\r\n- 📝 TypeScript support with full type definitions\r\n- ♿ Accessibility-friendly structure\r\n- 🪶 Zero dependencies and lightweight\r\n\r\n## Quick Start\r\n\r\n```jsx\r\nimport ProgressTracker from '@aniruddha1806/progress-tracker';\r\n\r\nfunction App() {\r\n  const steps = [\r\n    { \r\n      label: 'Account', \r\n      sublabel: 'Create your account',\r\n      icon: '👤' \r\n    },\r\n    { \r\n      label: 'Profile', \r\n      sublabel: 'Complete your profile',\r\n      icon: '📝' \r\n    },\r\n    { \r\n      label: 'Verification', \r\n      sublabel: 'Verify your email',\r\n      icon: '✉️' \r\n    },\r\n    { \r\n      label: 'Complete', \r\n      sublabel: 'All done!',\r\n      icon: '✅' \r\n    }\r\n  ];\r\n\r\n  return (\r\n    <ProgressTracker\r\n      steps={steps}\r\n      currentStep={1} // 0-indexed (step 2 is active)\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n### ProgressTrackerProps\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `steps` | `Step[]` | `required` | Array of step objects |\r\n| `currentStep` | `number` | `required` | Current active step (0-indexed) |\r\n| `className` | `string` | `\"\"` | CSS class for container |\r\n| `stepClassName` | `string` | `\"\"` | CSS class for step elements |\r\n| `labelClassName` | `string` | `\"\"` | CSS class for step labels |\r\n| `sublabelClassName` | `string` | `\"\"` | CSS class for step sublabels |\r\n| `iconClassName` | `string` | `\"\"` | CSS class for step icons |\r\n| `connectorClassName` | `string` | `\"\"` | CSS class for connectors |\r\n| `activeConnectorClassName` | `string` | `\"\"` | CSS class for active connectors |\r\n| `inactiveConnectorClassName` | `string` | `\"\"` | CSS class for inactive connectors |\r\n| `activeColor` | `string` | `\"#0074D9\"` | Color for active/completed steps |\r\n| `inactiveColor` | `string` | `\"#E1E8ED\"` | Color for inactive steps |\r\n| `showLabels` | `boolean` | `true` | Show step labels |\r\n| `showConnectors` | `boolean` | `true` | Show connectors between steps |\r\n| `size` | `\"small\" \\| \"medium\" \\| \"large\"` | `\"medium\"` | Overall component size |\r\n| `renderCustomStep` | `function` | `undefined` | Custom step render function |\r\n\r\n### Step Interface\r\n\r\n```typescript\r\ninterface Step {\r\n  label: string;           // Step title\r\n  sublabel?: string;       // Optional subtitle\r\n  icon: React.ReactNode;   // Icon (emoji, SVG, component)\r\n}\r\n```\r\n\r\n## Examples\r\n\r\n### Basic Horizontal Progress\r\n\r\nSimple horizontal progress tracker:\r\n\r\n```jsx\r\nimport ProgressTracker from '@aniruddha1806/progress-tracker';\r\n\r\nfunction BasicExample() {\r\n  const steps = [\r\n    { label: 'Start', icon: '🚀' },\r\n    { label: 'Progress', icon: '⚡' },\r\n    { label: 'Complete', icon: '🎉' }\r\n  ];\r\n\r\n  return (\r\n    <ProgressTracker\r\n      steps={steps}\r\n      currentStep={1}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n\r\n### Custom Colors and Styling\r\n\r\nCustomize appearance with colors and CSS classes:\r\n\r\n```jsx\r\nimport ProgressTracker from '@aniruddha1806/progress-tracker';\r\nimport './custom-progress.css'; // Your custom CSS\r\n\r\nfunction CustomStyledExample() {\r\n  const steps = [\r\n    { label: 'Design', icon: '🎨' },\r\n    { label: 'Develop', icon: '💻' },\r\n    { label: 'Test', icon: '🧪' },\r\n    { label: 'Deploy', icon: '🚀' }\r\n  ];\r\n\r\n  return (\r\n    <ProgressTracker\r\n      steps={steps}\r\n      currentStep={2}\r\n      activeColor=\"#28a745\"\r\n      inactiveColor=\"#f8f9fa\"\r\n      size=\"large\"\r\n      connectorStyle=\"dashed\"\r\n      className=\"custom-progress\"\r\n      stepClassName=\"custom-step\"\r\n      labelClassName=\"custom-label\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\nCSS file (custom-progress.css):\r\n```css\r\n.custom-progress {\r\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n  border-radius: 12px;\r\n  padding: 24px;\r\n}\r\n\r\n.custom-step {\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n.custom-step:hover {\r\n  transform: scale(1.05);\r\n}\r\n\r\n.custom-label {\r\n  font-family: 'Inter', sans-serif;\r\n  font-weight: 600;\r\n  color: white;\r\n}\r\n```\r\n\r\n### With React Icons\r\n\r\nUse popular icon libraries:\r\n\r\n```jsx\r\nimport ProgressTracker from '@aniruddha1806/progress-tracker';\r\nimport { \r\n  FaUser, \r\n  FaCreditCard, \r\n  FaShippingFast, \r\n  FaCheckCircle \r\n} from 'react-icons/fa';\r\n\r\nfunction IconExample() {\r\n  const steps = [\r\n    { \r\n      label: 'Account', \r\n      sublabel: 'Sign up or login',\r\n      icon: <FaUser /> \r\n    },\r\n    { \r\n      label: 'Payment', \r\n      sublabel: 'Enter payment details',\r\n      icon: <FaCreditCard /> \r\n    },\r\n    { \r\n      label: 'Shipping', \r\n      sublabel: 'Choose delivery option',\r\n      icon: <FaShippingFast /> \r\n    },\r\n    { \r\n      label: 'Confirmation', \r\n      sublabel: 'Order complete',\r\n      icon: <FaCheckCircle /> \r\n    }\r\n  ];\r\n\r\n  return (\r\n    <ProgressTracker\r\n      steps={steps}\r\n      currentStep={1}\r\n      activeColor=\"#007bff\"\r\n      size=\"large\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n\r\n\r\n\r\n### Different Sizes\r\n\r\nShow all available sizes:\r\n\r\n```jsx\r\nimport ProgressTracker from '@aniruddha1806/progress-tracker';\r\n\r\nfunction SizesExample() {\r\n  const steps = [\r\n    { label: 'Start', icon: '🚀' },\r\n    { label: 'Middle', icon: '⚡' },\r\n    { label: 'End', icon: '🎉' }\r\n  ];\r\n\r\n  return (\r\n    <div style={{ padding: '20px' }}>\r\n      <h3>Small Size</h3>\r\n      <ProgressTracker\r\n        steps={steps}\r\n        currentStep={1}\r\n        size=\"small\"\r\n        activeColor=\"#dc3545\"\r\n      />\r\n      \r\n      <h3 style={{ marginTop: '40px' }}>Medium Size (Default)</h3>\r\n      <ProgressTracker\r\n        steps={steps}\r\n        currentStep={1}\r\n        size=\"medium\"\r\n        activeColor=\"#ffc107\"\r\n      />\r\n      \r\n      <h3 style={{ marginTop: '40px' }}>Large Size</h3>\r\n      <ProgressTracker\r\n        steps={steps}\r\n        currentStep={1}\r\n        size=\"large\"\r\n        activeColor=\"#28a745\"\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport ProgressTracker, { Step, ProgressTrackerProps } from '@aniruddha1806/progress-tracker';\r\nimport { ReactNode } from 'react';\r\n\r\ninterface CustomStep extends Step {\r\n  id: string;\r\n  duration?: number;\r\n  isOptional?: boolean;\r\n}\r\n\r\ninterface WizardProps {\r\n  steps: CustomStep[];\r\n  onStepChange: (stepIndex: number) => void;\r\n}\r\n\r\nconst CustomWizard: React.FC<WizardProps> = ({ steps, onStepChange }) => {\r\n  const [currentStep, setCurrentStep] = useState<number>(0);\r\n\r\n  const handleStepClick = (stepIndex: number): void => {\r\n    setCurrentStep(stepIndex);\r\n    onStepChange(stepIndex);\r\n  };\r\n\r\n  const renderCustomStep = (\r\n    step: Step, \r\n    index: number, \r\n    isCompleted: boolean, \r\n    isActive: boolean\r\n  ): ReactNode => {\r\n    const customStep = step as CustomStep;\r\n    \r\n    return (\r\n      <div\r\n        key={customStep.id}\r\n        onClick={() => handleStepClick(index)}\r\n        style={{\r\n          cursor: 'pointer',\r\n          opacity: customStep.isOptional && !isCompleted ? 0.6 : 1\r\n        }}\r\n      >\r\n        {/* Custom step rendering */}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  const progressProps: ProgressTrackerProps = {\r\n    steps,\r\n    currentStep,\r\n    renderCustomStep,\r\n    activeColor: '#6366f1',\r\n    size: 'large'\r\n  };\r\n\r\n  return <ProgressTracker {...progressProps} />;\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}