# Spektr UI

A modern, accessible React component library built with Tailwind CSS v4. Spektr UI provides a comprehensive set of components with built-in theming support, TypeScript types, and full accessibility features.

## Installation

```bash
npm install @novasamatech/spektr-ui
```

> **Note:** Spektr UI requires `react`, `react-dom`, and `react-compiler-runtime` as peer dependencies. These are auto-installed by npm 7+.

## Quick Start

### 1. Import Styles

Import the CSS file in your application entry point:

```tsx
import '@novasamatech/spektr-ui/styles.css';
```

### 2. Wrap Your App with ThemeProvider

```tsx
import { ThemeProvider, defaultTheme } from '@novasamatech/spektr-ui';

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      {/* Your app */}
    </ThemeProvider>
  );
}
```

### 3. Use Components

```tsx
import { Button, Card } from '@novasamatech/spektr-ui';

function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Hello Spektr UI</Card.Title>
      </Card.Header>
      <Card.Content>
        <Button>Click me</Button>
      </Card.Content>
    </Card>
  );
}
```

## Using Tailwind Preset

If you want to use Spektr UI's design tokens in your own Tailwind classes, use the preset:

```ts
// tailwind.config.ts
import type { Config } from 'tailwindcss';
import spektrPreset from '@novasamatech/spektr-ui/tailwind.preset';

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  presets: [spektrPreset],
} satisfies Config;
```

Then import styles in your CSS:

```css
@import "tailwindcss";
@config "./tailwind.config.ts";
```

And in your entry point:

```tsx
import '@novasamatech/spektr-ui/styles.css'; // Theme CSS variables
import './index.css'; // Your Tailwind build
```

Now you can use Spektr UI tokens in your own classes:

```tsx
<div className="bg-primary text-primary-foreground">
  Uses spektr-ui colors
</div>
```

## Theming

Spektr UI provides built-in themes:

```tsx
import { ThemeProvider, defaultTheme, amberTheme, techTheme } from '@novasamatech/spektr-ui';

// Default theme
<ThemeProvider theme={defaultTheme}>

// Amber accent theme
<ThemeProvider theme={amberTheme}>

// Dark tech theme
<ThemeProvider theme={techTheme}>
```

### Theme Hook

Use the `useTheme` hook to access and control theme state:

```tsx
import { useTheme } from '@novasamatech/spektr-ui';

function ThemeControls() {
  const { mode, setMode, theme, setTheme } = useTheme();

  return (
    <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
      Toggle Mode
    </button>
  );
}
```

## Storybook

View all components and their variations in Storybook:

```bash
npm run storybook
```

Visit `http://localhost:6006` to explore the component library.

## Development

```bash
# Install dependencies
npm install

# Run development build
npm run dev

# Build for production
npm run build

# Run Storybook
npm run storybook
```

## License

Apache-2.0

## Repository

[https://github.com/novasamatech/spektr-ui](https://github.com/novasamatech/spektr-ui)