npm package: @rip-tear/moraxa-ui
Description: <div align="center">
Latest version: 0.1.17

<div align="center">

# Moraxa UI

🎮 Nowoczesna biblioteka komponentów React z futurystycznym designem inspirowanym motywami gaming i sci-fi.

[![npm version](https://img.shields.io/npm/v/@rip-tear/moraxa-ui.svg)](https://www.npmjs.com/package/@rip-tear/moraxa-ui)
[![npm downloads](https://img.shields.io/npm/dm/@rip-tear/moraxa-ui.svg)](https://www.npmjs.com/package/@rip-tear/moraxa-ui)

</div>

## ✨ Funkcje

- 🎨 **Trzy motywy kolorystyczne**: Tear (czerwony), BFG (zielony), Plasma (niebieski)
- 🎮 **Gaming design**: Inspirowany estetyką gier i interfejsów sci-fi
- 📱 **Responsive**: Automatyczne skalowanie na urządzeniach mobilnych
- ♿ **Dostępność**: Pełne wsparcie dla screen readerów i nawigacji klawiaturą
- 🎯 **TypeScript**: Pełne wsparcie typów
- 🔧 **Customizable**: Łatwe nadpisywanie CSS variables
- 📦 **Tree-shakable**: Importuj tylko to czego potrzebujesz

## 📦 Instalacja

```bash
# npm
npm install @rip-tear/moraxa-ui

# pnpm
pnpm add @rip-tear/moraxa-ui

# yarn
yarn add @rip-tear/moraxa-ui
```

## 🚀 Szybki start

```tsx
// main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import '@rip-tear/moraxa-ui/index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
```

```tsx
// App.tsx
import { Button, Theme, Block } from '@rip-tear/moraxa-ui';

export default function App() {
  return (
    <Theme>
      <Block>
        <h1>Witaj w Moraxa UI</h1>
        <div style={{ display: 'flex', gap: '1rem' }}>
          <Button>Domyślny</Button>
          <Button theme="bfg">BFG</Button>
          <Button theme="plasma" isLoading>Ładowanie</Button>
        </div>
      </Block>
    </Theme>
  );
}
```

## 🎨 Komponenty

### Button
Wszechstronny przycisk z animacjami i trzema motywami.

```tsx
<Button 
  theme="tear" 
  size={24}
  leftIcon={<FlameIcon />}
  isLoading={false}
  onClick={() => console.log('Clicked!')}
>
  Kliknij mnie
</Button>
```

### Input
Stylowy input z walidacją i różnymi wariantami.

```tsx
<Input 
  placeholder="Wprowadź tekst..."
  theme="plasma"
  error="To pole jest wymagane"
/>
```

### Select
Dropdown z customowym stylingiem.

```tsx
<Select 
  options={[
    { value: '1', label: 'Opcja 1' },
    { value: '2', label: 'Opcja 2' }
  ]}
  theme="bfg"
/>
```

### Table
Tabela z sortowaniem i paginacją.

```tsx
<Table 
  data={data}
  columns={columns}
  theme="tear"
  sortable
/>
```

### Modal
Responsywne okno modalne.

```tsx
<Modal 
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Tytuł"
>
  Zawartość modala
</Modal>
```

### Navbar & Sidebar
Komponenty nawigacyjne.

```tsx
<Navbar 
  brand="Moraxa"
  items={navItems}
  theme="plasma"
/>

<Sidebar 
  items={sidebarItems}
  isCollapsed={false}
/>
```

## 🎮 Motywy

### Tear (Domyślny)
Czerwony motyw inspirowany klasycznymi grami FPS.

### BFG
Zielony motyw przypominający interfejsy wojskowe.

### Plasma
Niebieski motyw w stylu sci-fi.

```tsx
// Używanie motywów
<Button theme="tear">Czerwony</Button>
<Button theme="bfg">Zielony</Button>
<Button theme="plasma">Niebieski</Button>
```

## 🎯 Ikony

Biblioteka zawiera zestaw ikon dopasowanych do designu:

```tsx
import { 
  FlameIcon, 
  UserIcon, 
  SettingsIcon,
  ArrowLeftIcon,
  DashboardIcon 
} from '@rip-tear/moraxa-ui';

<Button leftIcon={<FlameIcon />}>
  Z ikoną
</Button>
```

## 📱 Responsive Design

Wszystkie komponenty automatycznie skalują się na urządzeniach mobilnych:

```scss
// Automatyczne zmniejszanie czcionek na mobile
.fs-24 { 
  font-size: 24px; 
  @media (max-width: 768px) { 
    font-size: 20px; 
  } 
}
```

## 🎨 Customizacja

### CSS Variables

```css
:root {
  --color-red: #ff2e5f;
  --color-green: #00ff7f;
  --color-blue: #00bfff;
  --bg-primary: #0a0a0a;
  --text-primary: #ffffff;
}
```

### SASS Variables

```scss
$themes: (
  tear: #ff2e5f,
  bfg: #00ff7f,
  plasma: #00bfff
);
```

## ♿ Dostępność

- Pełne wsparcie dla screen readerów
- Nawigacja klawiaturą
- Wysokie kontrasty kolorów
- ARIA labels i role
- Focus management

## 📚 Storybook

Sprawdź wszystkie komponenty w akcji:

```bash
pnpm storybook
```

## 🔧 Development

```bash
# Klonowanie
git clone https://github.com/RIP-Tear/moraxa-ui.git

# Instalacja zależności
pnpm install

# Development
pnpm dev

# Build
pnpm build

# Testy
pnpm test
```

## 📄 Licencja

MIT © [RIP-Tear](https://github.com/RIP-Tear)

## 🤝 Wsparcie

- 🐛 [Zgłoś błąd](https://github.com/RIP-Tear/moraxa-ui/issues)
- 💡 [Zaproponuj funkcję](https://github.com/RIP-Tear/moraxa-ui/issues)
- 📖 [Dokumentacja](https://moraxa-ui.netlify.app)

---

<div align="center">
Made with ❤️ by the Moraxa team
</div>