npm package: @lumora-app/supernova-ui
Description: Lumora's icon library and UI components
Author: Lumora
Latest version: 0.4.0

# 🌟 Supernova UI

**Supernova UI** is a modern React component library built with TypeScript, Vite, Tailwind CSS, and documented using Storybook. Designed to be reusable, scalable, and fast, it serves as the visual foundation for Lumora products.

---

## ✨ Technologies Used

- [React](https://reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Vite](https://vitejs.dev/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Storybook](https://storybook.js.org/)

---

## 📦 Installation

```bash
npm install @lumora-app/supernova-ui
```

---

## 🚀 Usage

### Import all icons

```tsx
import { ArrowDown, ChevronRight, Home } from "@lumora-app/supernova-ui";

function App() {
  return (
    <div>
      <ArrowDown className="w-6 h-6 text-blue-500" />
      <ChevronRight className="w-6 h-6" />
      <Home className="w-6 h-6" />
    </div>
  );
}
```

### Import from specific categories (better tree-shaking)

```tsx
// Import arrow icons only
import { ArrowDown, ChevronRight } from "@lumora-app/supernova-ui/icons/arrows";

// Import chart icons only
import {
  BarChartCenter,
  LineChartLeft,
} from "@lumora-app/supernova-ui/icons/charts";

// Import generic icons only
import { Home, Settings, Heart } from "@lumora-app/supernova-ui/icons/generic";
```

### Icon Props

All icons accept standard SVG props:

```tsx
<ArrowDown
  className="w-8 h-8" // Tailwind classes
  width={32} // Custom width
  height={32} // Custom height
  fill="currentColor" // Fill color (default: currentColor)
  stroke="none" // Stroke color
  onClick={() => {}} // Event handlers
/>
```

---

## 📁 Icon Categories

| Category | Import Path                              | Description                                  |
| -------- | ---------------------------------------- | -------------------------------------------- |
| Arrows   | `@lumora-app/supernova-ui/icons/arrows`  | Navigation arrows, chevrons, expand/collapse |
| Charts   | `@lumora-app/supernova-ui/icons/charts`  | Bar charts, line charts, analytics           |
| Generic  | `@lumora-app/supernova-ui/icons/generic` | Common UI icons (home, settings, etc.)       |

---

## 📱 React Native Usage

This library also supports React Native via `react-native-svg`. Import from the `/native` path:

### Prerequisites

Make sure you have `react-native-svg` installed in your React Native project:

```bash
npm install react-native-svg
```

### Import native icons

```tsx
import { ArrowDown, Home, Settings } from "@lumora-app/supernova-ui/native";

function App() {
  return (
    <View>
      <ArrowDown size={24} color="#000" />
      <Home size={24} color="blue" />
      <Settings size={32} color="#333" />
    </View>
  );
}
```

### Import from specific categories

```tsx
// Import arrow icons only
import {
  ArrowDown,
  ChevronRight,
} from "@lumora-app/supernova-ui/native/arrows";

// Import chart icons only
import {
  BarChartCenter,
  LineChartLeft,
} from "@lumora-app/supernova-ui/native/charts";

// Import generic icons only
import { Home, Settings, Heart } from "@lumora-app/supernova-ui/native/generic";
```

### Native Icon Props

| Prop    | Type     | Default          | Description       |
| ------- | -------- | ---------------- | ----------------- |
| `size`  | `number` | `24`             | Icon size (w & h) |
| `color` | `string` | `"currentColor"` | Icon fill color   |
| `style` | `object` | -                | Additional styles |

---

## 🛠️ Development

```bash
# Clone the repository
git clone https://github.com/lumora-app/supernova-ui.git
cd supernova-ui
npm install

# Start development server
npm run dev

# Run Storybook
npm run storybook

# Build the library (output in dist/)
npm run build:lib

# Build static Storybook
npm run build-storybook
```

---

## 📄 Scripts

| Script                    | Description                           |
| ------------------------- | ------------------------------------- |
| `npm run dev`             | Start Vite development server         |
| `npm run storybook`       | Start Storybook on port 6006          |
| `npm run build:lib`       | Build the library for npm publishing  |
| `npm run build-storybook` | Build static Storybook                |
| `npm run svg-to-react`    | Convert SVG files to React components |

---

## 📝 License

MIT