npm package: @padmavathy_venkatesan/my-lib
Description: Professional Angular UI Component Library with Interactive Theme Setup
Latest version: 0.9.9

# My-Lib Angular Component Library

Professional Angular UI Component Library with built-in theming system.

## 🚀 Quick Start (3 Steps)

### 1. Install
```bash
npm install @padmavathy_venkatesan/my-lib
```

### 2. Add Styles to your `angular.json`
```json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@padmavathy_venkatesan/my-lib/styles/component-library.scss",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}
```

### 3. Import and Use Components
```typescript
import { InputComponent } from '@padmavathy_venkatesan/my-lib';

@Component({
  selector: 'app-example',
  template: `<crc-ui-kit-input label="Name" placeholder="Enter your name"></crc-ui-kit-input>`,
  imports: [InputComponent]
})
export class ExampleComponent {}
```

## 🎨 Advanced Theme Setup

For advanced theming, run the interactive setup wizard:
```bash
npx my-lib-setup
```

This wizard helps you:
- Choose from multiple themes (Light, Dark, Ocean, Sunset, etc.)
- Configure component usage patterns
- Generate custom theme files
- Set up advanced project structure

### Import Components

```typescript
import { InputComponent, ButtonComponent, CardComponent } from '@padmavathy_venkatesan/my-lib';

@Component({
  imports: [InputComponent, ButtonComponent, CardComponent]
})
export class AppComponent {
  // Your component logic
}
```

### Available Themes

- **Light Theme** - Clean, modern light theme
- **Dark Theme** - Elegant dark theme
- **Ocean Theme** - Calm teal and ocean blues
- **Sunset Theme** - Warm orange and purple gradients
- **Blue Theme** - Professional blue tones
- **Red Theme** - Bold red accents
- **CRC Group Theme** - Corporate branding theme

## 📚 Components

### Form Components
- `<crc-ui-kit-input>` - Enhanced input with validation
- `<crc-ui-kit-textarea>` - Multi-line text input
- `<crc-ui-kit-checkbox>` - Styled checkboxes
- `<crc-ui-kit-radio>` - Radio button groups
- `<crc-ui-kit-switch>` - Toggle switches

### Layout Components
- `<crc-ui-kit-card>` - Flexible card container
- `<crc-ui-kit-modal>` - Modal dialogs
- `<crc-ui-kit-sidebar>` - Navigation sidebar
- `<crc-ui-kit-navbar>` - Navigation bar

### UI Components
- `<crc-ui-kit-button>` - Styled buttons
- `<crc-ui-kit-badge>` - Status badges
- `<crc-ui-kit-avatar>` - User avatars
- `<crc-ui-kit-spinner>` - Loading spinners

## 🎨 Theming

### Dynamic Theme Switching

```typescript
import { ThemeSwitcherComponent } from '@padmavathy_venkatesan/my-lib';

@Component({
  template: `<crc-ui-kit-theme-switcher></crc-ui-kit-theme-switcher>`,
  imports: [ThemeSwitcherComponent]
})
export class AppComponent {}
```

### Custom Theme Creation

Create your own theme by extending the base theme:

```scss
@import '@padmavathy_venkatesan/my-lib/styles/themes/_base';

$custom-theme-colors: (
  'primary-500': #your-color,
  'primary-600': #your-darker-color,
  // ... other color definitions
);

@include generate-theme-classes($custom-theme-colors, 'custom');
```

## 📖 Documentation

For detailed component documentation and examples, visit our [documentation site](#).

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md).

## 📄 License

MIT License - see [LICENSE](LICENSE) file for details.