# @atlashub/smartstack

SmartStack React components, navigation system and admin UI.

## Install

```bash
npm install @atlashub/smartstack
```

Peer dependencies required in the host app: `react` (^18 || ^19), `react-dom` (^18 || ^19), `react-router-dom` (^6 || ^7).

## Usage

### 1. Wrap your app with `SmartStackProvider`

```tsx
import { SmartStackProvider } from '@atlashub/smartstack';

export function App() {
  return (
    <SmartStackProvider config={{ apiUrl: '/api', appName: 'My App' }}>
      {/* your routes */}
    </SmartStackProvider>
  );
}
```

### 2. Import the design system CSS (Tailwind v4 required)

SmartStack ships a lean design token layer (~20 KB) — no Tailwind is bundled. The
host app provides its own Tailwind v4 and scans the SmartStack package so utility
classes used inside SmartStack components (`bg-primary-500`, `bg-app`, `.dark`
variants, etc.) are generated in the host's CSS:

```css
/* src/index.css */
@import "tailwindcss";
@source "../src/**/*.{ts,tsx}";
@source "../node_modules/@atlashub/smartstack/dist/**/*.js";
@import "@atlashub/smartstack/theme.css";
```

What `theme.css` provides:

- `@theme` tokens — `--color-primary-*` (indigo), `--color-accent-*` (violet), `--font-sans`
- `@custom-variant dark (&:where(.dark, .dark *))` — class-based dark mode
- `:root` and `.dark` variables — backgrounds, text, borders, radius, semantic status colors, shadows, item palette
- Component helpers — `.card`, `.btn`, `.btn-primary`, `.btn-secondary`, `.btn-sm`, `.btn-ghost`, `.input`, `.badge-*`, `.gradient-text`, `.glass`, `.hover-card`, `.focus-ring`
- Scrollbar styling, focus rings, keyframes (`gradient`, `tooltip-fade-in`)

### 3. Toggle dark mode by adding `.dark` on `<html>` or `<body>`

```ts
document.documentElement.classList.toggle('dark');
```

## Migration from v3.34.x → v3.35.0

The CSS export has been renamed and no longer bundles Tailwind.

```diff
- @import "@atlashub/smartstack/styles.css";
+ @import "tailwindcss";
+ @source "../src/**/*.{ts,tsx}";
+ @source "../node_modules/@atlashub/smartstack/dist/**/*.js";
+ @import "@atlashub/smartstack/theme.css";
```

See `CHANGELOG.md` for full details.

## Build

```bash
npm run build:lib        # produces dist/smartstack.{js,cjs} + dist/theme.css
npm pack                 # preview the published tarball
```

## Test

```bash
npm test                 # vitest run
npm run test:watch       # watch mode
```
