@nebulaai/lumina-ui/README.md

Enterprise-grade glass morphism UI components with neural-inspired design system

# 🌟 Lumina UI

*Enterprise-grade glass morphism UI components for React*

[![NPM Version](https://img.shields.io/npm/v/@sp3ctrum/lumina-ui)](https://www.npmjs.com/package/@sp3ctrum/lumina-ui)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)

## 🚀 Quick Start

```bash
npm install @sp3ctrum/lumina-ui
```

```tsx
import { Button, GlassCard } from '@sp3ctrum/lumina-ui'
import '@sp3ctrum/lumina-ui/styles'

function App() {
  return (
    <GlassCard className="p-6">
      <h1>Hello Lumina!</h1>
      <Button variant="glass">Click me</Button>
    </GlassCard>
  )
}
```

## 📦 What's Included

### Glass Components
- `GlassCard` - Beautiful glass-effect containers
- `FloatingActionButton` - Floating buttons with depth
- `GlassEffect` - Apply glass morphism to any element

### Interactive Elements
- `Button` - Buttons with glass variants
- `NeonButton` - Glowing neon-style buttons
- `AnimatedCounter` - Smooth number animations

### Advanced Components
- `SmartAnalytics` - Data visualization with AI insights
- `VirtualizedList` - High-performance lists
- `ParticleField` - Interactive particle effects

## 🎨 Basic Usage

### Glass Card
```tsx
<GlassCard blur="md" opacity={0.1}>
  <p>Your content here</p>
</GlassCard>
```

### Buttons
```tsx
<Button variant="glass" size="lg">
  Glass Button
</Button>

<NeonButton color="blue" glow={true}>
  Neon Button
</NeonButton>
```

### Analytics
```tsx
<SmartAnalytics 
  data={yourData}
  theme="glass"
  showInsights={true}
/>
```

## ⚡ Performance

- **12.3kB** gzipped bundle size
- **Tree-shakeable** - import only what you need
- **Optimized** for React 18+
- **Accessible** WCAG 2.1 compliant

## 🔧 TypeScript Support

Full TypeScript support with IntelliSense:

```tsx
interface MyComponentProps {
  data: AnalyticsData[]
}

const MyComponent: React.FC<MyComponentProps> = ({ data }) => {
  return (
    <SmartAnalytics 
      data={data}
      theme="neural"
      insights="auto"
    />
  )
}
```

## 🎯 Features

- ✨ **Glass Morphism** - Premium frosted glass effects
- 🚀 **High Performance** - Optimized for production
- 📱 **Responsive** - Mobile-first design
- ♿ **Accessible** - WCAG 2.1 AA compliant
- 🎨 **Customizable** - Easy theming system
- 🔧 **TypeScript** - Full type safety

## 📚 Documentation

For detailed documentation and examples, visit our [documentation site](https://docs.temporal.ai/lumina).

## 🤝 Support

- 💬 [GitHub Issues](https://github.com/temporal-ai/lumina-ui/issues)
- 📧 [Email Support](mailto:team@temporal.ai)

## 📄 License

MIT © [Temporal AI Technologies Inc](https://temporal.ai)

---

Built with ❤️ by Temporal AI Technologies