# @lunit/oui

> React UI component library for Lunit Scope applications. Built on MUI v9.
> When building UI in an app that uses this package, do not use MUI directly —
> use the OUI components and design tokens below.

## Setup

Wrap your app root with the OUI theme:

```tsx
import { ThemeProvider, CssBaseline } from '@mui/material';
import { theme } from '@lunit/oui';

<ThemeProvider theme={theme}>
  <CssBaseline />
  <App />
</ThemeProvider>
```

## Import rules

- Components: `import { Button, Dialog, TextField } from '@lunit/oui'`
- Icons: `import { ArrowDoubleDown } from '@lunit/oui/icons'`
- Tokens/theme: `import { theme, palette, spacing, typography } from '@lunit/oui'`

## Core rules (must follow)

- ❌ Do not import equivalent components (Button/TextField/Dialog, etc.) directly from `@mui/material`.
  ✅ Use the `@lunit/oui` component for the same functionality.
- ❌ Do not hardcode magic values like `#fff` or `16px` in `sx`/styles.
  ✅ Use tokens: color `theme.palette.lunitTeal[40]`, spacing `theme.spacing(n)` (base 4px), typography `<Typography variant="body_b1">`.
- For variant/size/color, use only the union values each component allows (e.g. Button `variant: contained|ghost|outlined`).

## Common components

- Button: `variant` contained|ghost|outlined, `color` primary|secondary|error, `size` small|medium|large, `label`, `icon`, `loading`
- TextField, Checkbox, Radio, Toggle, Dropdown, DatePicker — input/form
- Card(`size` small|large), List, Divider, DataTable, EllipsisTypography — display/layout
- Alert, Dialog, Tooltip, Progress, LoadingIndicator, Chip — feedback/overlay
- Menu, Pagination, Stepper, TabbedPanel — navigation

## Examples

```tsx
import { Button } from '@lunit/oui';
import { Close } from '@lunit/oui/icons';

<Button variant="contained" color="primary" size="medium" label="Save" onClick={save} />
<Button variant="contained" loading label="Processing" />
<Button icon={<Close />} onClick={close} />
```

## See also

- Full component catalog: docs/COMPONENTS.md
- Design tokens (color/spacing/typography): docs/TOKENS.md
- Interactive docs: Storybook (`npm run storybook`)