# 🚀 Fluent Grow

**Modern, lightweight, and accessible design system built with Web Components**

A universal component library that works seamlessly across all major JavaScript frameworks with zero configuration.

```bash
npm install fluent-grow
# or
yarn add fluent-grow
```

## ✨ What is Fluent Grow?

Fluent Grow is a **framework-agnostic design system** built on Web Components and modern CSS features. It provides a comprehensive set of UI components that work natively in any JavaScript framework or vanilla JS.

**Key Features:**
- 🎨 **40+ Production-Ready Components** - Buttons, Cards, Inputs, Modals, and more
- 🔧 **Zero Configuration** - Works out of the box in any framework
- 🎯 **Framework Agnostic** - React, Vue, Svelte, Angular, Solid, Qwik, and more
- 📦 **Lightweight** - <35KB gzipped with tree-shaking support
- ♿ **Accessible** - WCAG 2.1 AA compliant
- 🎨 **Themeable** - Built-in light/dark modes with custom theme support
- 🚀 **Modern CSS** - Container Queries, Anchor Positioning, View Transitions
- 💪 **TypeScript** - Full type definitions included

## 🎯 Quick Start

```tsx
import { FluentButton, FluentCard, useTheme } from 'fluent-grow';

function App() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <FluentCard variant="elevated">
      <h2>Welcome to Fluent Grow</h2>
      <FluentButton onClick={toggleTheme}>
        Current theme: {theme}
      </FluentButton>
    </FluentCard>
  );
}
```

**That's it!** The same code works in React, Vue, Svelte, Angular, Solid, and any other framework.

## 🌐 Framework Support

Fluent Grow automatically detects and adapts to your framework:

| Framework | Version | Status |
|-----------|---------|--------|
| React | 16.8+ / 17 / 18 / 19 | ✅ Full Support |
| Preact | 10+ | ✅ Full Support |
| Next.js | 12+ (Pages & App Router) | ✅ Full Support |
| Remix | 1.0+ | ✅ Full Support |
| Vue | 2.6+ / 3.0+ | ✅ Full Support |
| Nuxt | 2 / 3 | ✅ Full Support |
| Svelte | 3 / 4 | ✅ Full Support |
| SvelteKit | 1.0+ | ✅ Full Support |
| Angular | 12+ | ✅ Full Support |
| Solid.js | 1.0+ | ✅ Full Support |
| Qwik | 0.0.100+ | ✅ Full Support |
| Lit | 2.0+ | ✅ Full Support |
| Alpine.js | 3.0+ | ✅ Full Support |
| Vanilla JS/TS | - | ✅ Full Support |

## 📦 Components

### Form Components
```tsx
import {
  FluentButton,
  FluentInput,
  FluentSelect,
  FluentCheckbox,
  FluentRadio,
  FluentSwitch,
  FluentSlider,
  FluentTextarea,
  FluentDatepicker,
  FluentAutocomplete
} from 'fluent-grow';
```

### Display Components
```tsx
import {
  FluentCard,
  FluentBadge,
  FluentChip,
  FluentAvatar,
  FluentAvatarGroup,
  FluentText,
  FluentTitle,
  FluentTable
} from 'fluent-grow';
```

### Feedback Components
```tsx
import {
  FluentSpinner,
  FluentSkeleton,
  FluentProgress,
  FluentTooltip,
  FluentPopover,
  FluentModal,
  FluentToast,
  FluentNotification
} from 'fluent-grow';
```

### Navigation Components
```tsx
import {
  FluentTabs,
  FluentAccordion,
  FluentDropdown,
  FluentMenu,
  FluentBreadcrumb,
  FluentPagination,
  FluentStepper
} from 'fluent-grow';
```

## 🎨 Hooks & Composables

Fluent Grow provides reactive utilities that adapt to your framework's reactive system:

```tsx
import { useTheme, useModal, useToast, useBreakpoint } from 'fluent-grow';

// Works as React hooks, Vue composables, Svelte stores, or Solid signals
const { theme, toggleTheme, setTheme } = useTheme();
const { isOpen, open, close, toggle } = useModal();
const { showToast } = useToast();
const { breakpoint, isMobile, isTablet, isDesktop } = useBreakpoint();
```

## 🎨 Theming

```tsx
import { FluentProvider } from 'fluent-grow';

// Wrap your app with FluentProvider
<FluentProvider value={{ theme: 'dark', locale: 'en-US' }}>
  <App />
</FluentProvider>
```

**Built-in themes:**
- `light` - Light mode
- `dark` - Dark mode
- `auto` - System preference

**Custom themes:**
```tsx
import { setTheme } from 'fluent-grow';

setTheme({
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    success: '#28a745',
    // ... more colors
  },
  spacing: {
    sm: '8px',
    md: '16px',
    lg: '24px',
  }
});
```

## 🚀 Framework Examples

### React / Next.js
```tsx
import { FluentButton, FluentCard } from 'fluent-grow';

export default function Page() {
  return (
    <FluentCard>
      <FluentButton variant="primary">Click me</FluentButton>
    </FluentCard>
  );
}
```

### Vue 3 / Nuxt
```vue
<script setup>
import { FluentButton, FluentCard } from 'fluent-grow';
</script>

<template>
  <FluentCard>
    <FluentButton variant="primary">Click me</FluentButton>
  </FluentCard>
</template>
```

### Svelte / SvelteKit
```svelte
<script>
import { FluentButton, FluentCard } from 'fluent-grow';
</script>

<FluentCard>
  <FluentButton variant="primary">Click me</FluentButton>
</FluentCard>
```

### Angular
```typescript
import { Component } from '@angular/core';
import 'fluent-grow';

@Component({
  selector: 'app-root',
  template: `
    <fluent-card>
      <fluent-button variant="primary">Click me</fluent-button>
    </fluent-card>
  `
})
export class AppComponent {}
```

### Vanilla JS
```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import 'fluent-grow';
  </script>
</head>
<body>
  <fluent-card>
    <fluent-button variant="primary">Click me</fluent-button>
  </fluent-card>
</body>
</html>
```

## 🎯 Modern CSS Features

Fluent Grow leverages cutting-edge CSS features with automatic fallbacks:

- **Container Queries** - Responsive components based on container size
- **Anchor Positioning** - Advanced tooltip and popover positioning
- **View Transitions** - Smooth page transitions
- **Scroll-driven Animations** - Animations triggered by scroll
- **OKLCH Colors** - Perceptually uniform color space
- **CSS Nesting** - Cleaner, more maintainable styles
- **Subgrid** - Advanced grid layouts
- **CSS Houdini** - Paint worklets for custom rendering

## 📊 Performance

- **Bundle Size**: <35KB gzipped
- **Tree Shaking**: Import only what you use
- **Lazy Loading**: Components load on demand
- **Zero Runtime**: CSS-in-TS with zero runtime overhead
- **Web Components**: Native browser performance

## 🔧 Advanced Usage

### Custom Framework Detection
```typescript
import { registerFrameworkDetector } from 'fluent-grow';

registerFrameworkDetector({
  name: 'my-framework',
  priority: 100,
  detect: () => typeof window !== 'undefined' && window.MyFramework,
  getVersion: () => window.MyFramework.version
});
```

### Custom Adapters
```typescript
import { registerFrameworkAdapter } from 'fluent-grow';

registerFrameworkAdapter({
  name: 'my-adapter',
  family: 'my-framework',
  createComponent: (config) => {
    // Your component creation logic
  }
});
```

## 📖 Documentation

- [Getting Started](./docs/getting-started.md)
- [Component API](./docs/components.md)
- [Theming Guide](./docs/theming.md)
- [Framework Integration](./docs/framework-integration.md)
- [Migration Guide](./MIGRATION.md)

## 🤝 Contributing

We welcome contributions! See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.

## 📄 License

MIT License - see [LICENSE](./LICENSE)

## 🌟 Why Fluent Grow?

**Framework Agnostic**
- Write once, use everywhere
- No framework lock-in
- Easy migration between frameworks

**Developer Experience**
- Single import for all frameworks
- Full TypeScript support
- Comprehensive documentation
- Active community

**Production Ready**
- Battle-tested components
- Accessibility built-in
- Performance optimized
- Regular updates

**Modern & Future-Proof**
- Built on Web Standards
- Leverages latest CSS features
- Progressive enhancement
- Automatic fallbacks

---

**Made with ❤️ by Veelv**

⭐ Star us on [GitHub](https://github.com/veelv/fluent-grow)