open-index/open-npm huggingface dataset:
npm package: @mindviz/ui
Description: Shared component library for the MindViz app suite
Latest version: 0.3.0

# @mindviz/ui

Shared component library for the MindViz app suite. Built with React, TypeScript, and Tailwind CSS v4.

## Install (local)

In any app in this monorepo, add to `package.json`:

```json
"dependencies": {
  "@mindviz/ui": "file:../mindviz-ui"
}
```

Then `npm install`.

## Setup

### 1. Import design tokens

In your app's `globals.css` (or equivalent), import the tokens before your Tailwind directives:

```css
@import "@mindviz/ui/tokens.css";
@import "tailwindcss";
```

### 2. Configure Tailwind to scan library components

In your app's CSS (Tailwind v4) or `tailwind.config.js` (v3), add the library source to the content paths so Tailwind can detect the class names used in the components:

**Tailwind v4** (`globals.css`):
```css
@source "../../mindviz-ui/src/**/*.tsx";
```

**Tailwind v3** (`tailwind.config.js`):
```js
content: [
  // ...existing paths
  '../../mindviz-ui/src/**/*.{ts,tsx}',
],
```

### 3. (Optional) Map semantic tokens in Tailwind

The components use CSS variables (`var(--accent)`, `var(--surface)`, etc.) directly, so they work without further Tailwind config. If you want to use the token names as Tailwind utilities (e.g. `bg-accent`), extend your theme:

```css
/* Tailwind v4 — globals.css */
@theme inline {
  --color-background:    var(--background);
  --color-foreground:    var(--foreground);
  --color-surface:       var(--surface);
  --color-border:        var(--border);
  --color-accent:        var(--accent);
  --color-muted:         var(--muted);
  --color-danger:        var(--danger);
  --color-warning:       var(--warning);
  --color-success:       var(--success);
}
```

## Components

| Component | Description |
|-----------|-------------|
| `Button` | Variants: `primary` `secondary` `outline` `ghost` `danger`. Sizes: `sm` `md` `lg` `touch` |
| `Input` | Labelled text input with error state |
| `Textarea` | Labelled textarea with error state |
| `Select` | Labelled select with error state |
| `Checkbox` | Inline checkbox with label |
| `Card` | Surface card with configurable padding |
| `Badge` | Pill badge. Variants: `default` `accent` `success` `warning` `danger` `muted` |
| `Modal` | Accessible dialog with backdrop, escape-to-close, and body scroll lock |
| `ThemeToggle` | Light / Dark / System theme switcher dropdown |
| `Tabs` | Pill-style tab bar |
| `Spinner` | Loading spinner |

All components accept a `className` prop for overrides.

## Utilities

```ts
import { cn } from '@mindviz/ui';
// cn(...) → clsx + tailwind-merge helper
```

## Development

```bash
npm run dev    # watch mode
npm run build  # production build
```