# @inkwash/react

Typed React components for **Inkwash** — a hand-painted design system. Thin, accessible wrappers over the `.wc-*` CSS with a MUI-like prop API, a `ThemeProvider`, and an `sx` shim so MUI codebases have a migration path.

## Install

```bash
npm i @inkwash/react
```

Load the stylesheet once (the components only ship behavior + class names):

```js
import 'inkwash/css/watercolor.css';
```

## Usage

```tsx
import { ThemeProvider, Button, Alert, Icon } from '@inkwash/react';

export default function App() {
  return (
    <ThemeProvider theme="forest">
      <Button variant="secondary" size="lg" sketch startIcon={<Icon name="download" />} sx={{ mt: 2 }}>
        Download
      </Button>
      <Alert level="tip" title="Nice">It builds.</Alert>
    </ThemeProvider>
  );
}
```

## Theming

`<ThemeProvider theme="walk | rain | fire | forest">` wraps children in a `.wc` container carrying the theme class, so all tokens retint. Read/switch it with `useTheme()`:

```tsx
const { theme, setTheme } = useTheme();
<button onClick={() => setTheme('rain')}>Rain</button>
```

## The `sx` prop

A lightweight shim for the common MUI shorthands (8px spacing unit, like MUI) plus any raw CSS property:

```tsx
<Card sx={{ p: 3, mt: 2, display: 'flex', gap: 12 }} />
// → padding:24px; margin-top:16px; display:flex; gap:12
```

Supported shorthands: `m mt mr mb ml mx my p pt pr pb pl px py`. Everything else passes through as CSS.

## Components

Buttons (`Button`, `IconButton`, `Fab`) · Surfaces (`Card` + parts, `Surface`, `Divider`) · Layout (`Stack`, `Container`, `Grid`) · Forms (`Field`, `Label`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `Hint`, `ErrorText`) · Data & feedback (`Badge`, `Chip`, `Tag`, `Alert`, `Progress`, `Spinner`, `Skeleton`, `Avatar`, `Presence`) · Interactive (`Tooltip`, `Rating`, `Tabs`, `Modal`, `Grow`) · `Icon` (felt-pen sprite; set the sprite path app-wide with `<IconProvider sprite="/icons/sprite.svg">`).

All components forward refs where meaningful, spread native attributes, and are fully typed.

## Build

```bash
npm run build      # tsup → ESM (index.js) + CJS (index.cjs); tsc → index.d.ts
npm run typecheck
npm test           # Vitest + Testing Library (jsdom)
npm run ci         # typecheck + test + build (used by GitHub Actions)
```

MIT.
