# 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 @kalininilya/spektr-ui
# or
pnpm add @kalininilya/spektr-ui
# or
yarn add @kalininilya/spektr-ui
```

## Peer Dependencies

Spektr UI requires React 16.8+ and React DOM 16.8+:

```bash
npm install react react-dom
```

## Quick Start

### 1. Import Styles

Import the CSS file in your application entry point:

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

### 2. Wrap Your App with ThemeProvider

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

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

### 3. Use Components

```tsx
import { Button, Card, CardHeader, CardTitle, CardContent } from '@kalininilya/spektr-ui';

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello Spektr UI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}
```

## Theming

Spektr UI uses Tailwind CSS v4's `@theme` system, which maps CSS custom properties directly to utility classes. This allows you to customize the appearance of all components dynamically.

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

<ThemeProvider theme={defaultTheme} defaultMode="light">
  {/* Your app */}
</ThemeProvider>
```

Available themes: `defaultTheme`, `amberTheme`, `techTheme`


### Theme Hook

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

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

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

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

## Storybook

View all components and their variations in Storybook:

```bash
pnpm storybook
```

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

## Development

```bash
# Install dependencies
pnpm install

# Run development build
pnpm dev

# Build for production
pnpm build

# Run type checking
pnpm type-check

# Run linter
pnpm lint

# Fix linting issues
pnpm lint:fix

# Format code
pnpm fmt:fix

# Run Storybook
pnpm storybook

# Build Storybook
pnpm build-storybook
```

## License

Apache-2.0

## Repository

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