lumpsum-sip-calculator/README.md

A reusable Lumpsum and SIP calculator component with customizable theming

# Lumpsum + SIP Calculator

A React component for calculating the future value of combined lumpsum and SIP investments with customizable theming.

## Installation

```bash
npm install @springmoney/lumpsum-sip-calculator
```

## Usage

```tsx
import { LumpsumSIPCalculator } from '@springmoney/lumpsum-sip-calculator';

// Basic usage
function App() {
  return <LumpsumSIPCalculator />;
}

// With custom theme
function App() {
  const customTheme = {
    primary: "#1a73e8",
    secondary: "#4285f4",
    accent: "#e8f0fe",
    background: "#ffffff",
    textPrimary: "#202124",
    textSecondary: "#5f6368"
  };

  return <LumpsumSIPCalculator theme={customTheme} />;
}
```

## Theme Customization

The calculator accepts a theme prop that allows you to customize its appearance. The theme object can include the following properties:

```typescript
interface CalculatorTheme {
  primary: string;    // Primary color for buttons and headings
  secondary: string;  // Secondary color for hover states
  accent: string;     // Background color for results section
  background: string; // Main background color
  textPrimary: string;   // Primary text color
  textSecondary: string; // Secondary text color
}
```

## Features

- Calculate future value of combined lumpsum and SIP investments
- Customizable compounding frequency for lumpsum investment
- Input validation with error messages
- Responsive design
- Customizable theming
- TypeScript support

## Props

| Prop  | Type | Required | Description |
|-------|------|----------|-------------|
| theme | Partial<CalculatorTheme> | No | Custom theme object to override default styling |

## License

MIT