# itech-fluentui

> Complete design system and UI component library built on Microsoft FluentUI v9
>
> **🌐 Public npm package with automated patch releases**

[![npm](https://img.shields.io/npm/v/itech-fluentui?logo=npm)](https://www.npmjs.com/package/itech-fluentui)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 🎨 Features

- **🎯 Design Tokens** - 2000+ design tokens extracted from Figma
- **🎨 Multi-Brand** - 4 brand variants with light/dark themes
- **🧩 85+ Components** - Production-ready FluentUI components
- **🎭 200+ Icons** - Organized FluentUI icons system
- **💎 Type-Safe** - 100% TypeScript with full IntelliSense
- **⚛️ React Hooks** - Easy theme and brand management
- **📱 Responsive** - Built-in breakpoints and responsive utilities
- **🎯 Figma-First** - Direct mapping from Figma design system

## 📦 Installation

Install directly from npm. `@latest` is implied, but you can pin to it explicitly if you rely on the automated patch releases:

```bash
npm install itech-fluentui
yarn add itech-fluentui
pnpm add itech-fluentui
```

> ℹ️ The package is public and unscoped, so consumers do **not** need a custom `.npmrc`. Internal automation (CI/CD) should still authenticate with an org token that has Publish rights.

## 🚀 Quick Start

### Basic Setup

```typescript
import { FluentProvider } from '@fluentui/react-components';
import { iTechLightTheme, iTechDarkTheme } from 'itech-fluentui';

function App() {
  const [mode, setMode] = useState<'light' | 'dark'>('light');
  const theme = mode === 'light' ? iTechLightTheme : iTechDarkTheme;

  return (
    <FluentProvider theme={theme}>
      <YourApp />
    </FluentProvider>
  );
}
```

### Using Design Tokens

```typescript
import { spacing, typography, getBrandColor } from 'itech-fluentui';

const styles = {
  padding: spacing.m,                      // 12
  fontSize: typography.fontSize[400],      // 16
  color: getBrandColor('vivid_blue', 80),  // "#1222fe"
};
```

### Using Helper Functions

```typescript
import { sp, fs, cr, getShadow } from 'itech-fluentui';

const styles = {
  padding: sp('m'),              // "12px"
  fontSize: fs(400),             // "16px"
  borderRadius: cr('medium'),    // "4px"
  boxShadow: getShadow('shadow8'),
};
```

### Using Components

```typescript
import { Button, Input, Card } from 'itech-fluentui/components';
import { AddIcon, EditIcon } from 'itech-fluentui/components/fluent-icons';

function MyForm() {
  return (
    <Card>
      <Input placeholder="Enter text" />
      <Button icon={<AddIcon />}>Add Item</Button>
      <Button icon={<EditIcon />} appearance="outline">Edit</Button>
    </Card>
  );
}
```

## 🎨 Design System

### Brand Variants

4 brand variants, each with light and dark themes:

- **brand_1** - Corporate Blue (#0f6cbd → #ebf3fc)
- **irepo** - Purple Brand (#5a07d7 → #e4cdfe)
- **blue** - Traditional Blue (#446ed4 → #edf3ff)
- **vivid_blue** - Vibrant Blue (#1222fe → #e4eeff)

```typescript
import { getTheme } from 'itech-fluentui';

// Switch brands dynamically
const theme = getTheme('irepo', 'dark');
```

### Typography Scale

```typescript
import { typography } from 'itech-fluentui';

typography.fontSize[100]   // 10px
typography.fontSize[200]   // 12px
typography.fontSize[300]   // 14px
typography.fontSize[400]   // 16px (base)
typography.fontSize[500]   // 20px
typography.fontSize[600]   // 24px
typography.fontSize[700]   // 28px
typography.fontSize[800]   // 32px
typography.fontSize[900]   // 40px
typography.fontSize[1000]  // 68px
```

### Spacing Scale

```typescript
import { spacing } from 'itech-fluentui';

spacing.xxs   // 2px
spacing.xs    // 4px
spacing.s     // 8px
spacing.m     // 12px
spacing.l     // 16px
spacing.xl    // 20px
spacing.xxl   // 24px
spacing.xxxl  // 32px
```

### Color System

```typescript
import { neutralColors, sharedColors, getBrandColor } from 'itech-fluentui';

// Brand colors
getBrandColor('vivid_blue', 80)  // "#1222fe"

// Neutral greys (50 shades)
neutralColors.grey[50]  // "#808080"

// Shared colors (40+ palettes)
sharedColors.blue.primary   // "#0078d4"
sharedColors.green.tint20   // "#359b35"
sharedColors.red.shade10    // "#bc2f32"
```

## 🎯 Components

44 production-ready FluentUI components:

### Layout
- Accordion, Card, Divider, Separator, Tabs, Table, Toolbar

### Forms
- Button, Checkbox, Combobox, Input, Label, MultiSelect, PasswordInput, PhoneInput, RadioGroup, SearchFilter, Select, Switch, Textarea, Field, Form

### Date & Time
- Calendar, DateRangePicker

### Navigation
- Breadcrumb, DropdownMenu, Link

### Overlays
- AlertDialog, Dialog, Drawer, Popover, Tooltip

### Feedback
- Avatar, Badge, BadgeWrapper, CounterBadge, PresenceBadge, ProgressBar, Skeleton, Spinner, Toast

### Media
- Image

### Advanced
- Command

## 🪝 React Hooks

```typescript
import { useDesign, useThemeMode, useITechTheme } from 'itech-fluentui';

function ThemeSwitcher() {
  const { brand, mode, setBrand, toggleMode } = useDesign();
  
  return (
    <div>
      <button onClick={toggleMode}>
        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
      </button>
      <select value={brand} onChange={(e) => setBrand(e.target.value)}>
        <option value="brand_1">Brand 1</option>
        <option value="irepo">iRepo</option>
        <option value="blue">Blue</option>
        <option value="vivid_blue">Vivid Blue</option>
      </select>
    </div>
  );
}
```

## 📚 Documentation

- [Complete Documentation](./docs/DOCUMENTATION.md) - Everything you need to know about itech-fluentui

## 🎨 Design Tokens

### Complete Token System

- **64 Brand Colors** (4 variants × 16 scales)
- **40+ Typography Tokens** (fonts, sizes, weights, line heights)
- **11 Spacing Scales** (2px to 32px)
- **2000+ Colors** (50 neutrals, 22 alphas, 40+ shared palettes)
- **25+ Layout Tokens** (radius, strokes, shadows, card padding)
- **8 Complete Themes** (light & dark for each brand)

## 🔧 Utilities

### CSS Variable Generation

```typescript
import { generateCSSVariables } from 'itech-fluentui';

const css = generateCSSVariables('vivid_blue');
// Generate CSS custom properties for any brand
```

### Responsive Helpers

```typescript
import { breakpoints, mq } from 'itech-fluentui';

const responsive = css`
  padding: 16px;
  
  ${mq.tablet} {
    padding: 24px;
  }
  
  ${mq.desktop} {
    padding: 32px;
  }
`;
```

## 📦 Package Exports

```typescript
// Main exports
import { ... } from 'itech-fluentui';

// Design tokens only
import { ... } from 'itech-fluentui/design-tokens';

// Components only
import { ... } from 'itech-fluentui/components';

// Icons
import { AddIcon, EditIcon } from 'itech-fluentui/components/fluent-icons';
```

## 🤝 Contributing

We welcome contributions! Please see our contributing guidelines.

## 📄 License

MIT © iTech Design Team

## 🔗 Links

- [npm Package](https://www.npmjs.com/package/itech-fluentui)
- [GitHub Repository](https://github.com/iTech-India/itech-fluentui)
- [Issue Tracker](https://github.com/iTech-India/itech-fluentui/issues)
- [Changelog](./CHANGELOG.md)

## 🙏 Acknowledgments

Built on top of:
- [Microsoft FluentUI v9](https://react.fluentui.dev/)
- [React](https://react.dev/)
- [TypeScript](https://www.typescriptlang.org/)

---

**Made with ❤️ by the iTech Design Team**