# Setup

## Install

```bash
npm install arrow-react-bootstrap
```

Peer dependencies — install in the host app:

| Package | Version |
|---------|---------|
| `react` | ^18.0.0 |
| `react-dom` | ^18.0.0 |

The library ships ESM only and is `esm.sh` compatible.

## Import styles once

Import Arrow's compiled CSS exactly once at the application root (e.g., `main.tsx`, `App.tsx`, `_app.tsx`). Never import styles inside components.

```tsx
import 'arrow-react-bootstrap/styles';
```

This loads the T-Mobile theme, all component styles, the utility classes (`tdds:*`), and font declarations (TeleNeo).

## Wrap the app in `ArrowThemeProvider`

```tsx
import { ArrowThemeProvider } from 'arrow-react-bootstrap';

export function App() {
  return (
    <ArrowThemeProvider brand="tmobile">
      <YourRoutes />
    </ArrowThemeProvider>
  );
}
```

Provider props: `inverse?: boolean` (defaults `false`), `brand?: 'tmobile' | 'metro' | 'assurance'` (defaults `'tmobile'`).

## Bundler notes

- **Vite, Next.js, esbuild, Webpack 5** all work out of the box. No transformer config needed.
- **No workspace dependencies** in the published package — safe for `esm.sh`.
- **No runtime dynamic imports.** All exports are statically resolvable.

## Exported hooks

All hooks are named exports of the package root.

| Hook | Purpose |
|------|---------|
| `useArrowTheme` | Read current theme context: `{ inverse, brand }` |
| `useFloatingLabel` | Floating-label state for form inputs (see `foundations/input_styling.md`) |
| `useRovingTabIndex` | Arrow-key navigation for tab-like widgets |
| `useMenuDropdown` | Combobox/menu open/close, focus, keyboard |
| `useExpandCollapse` | Generic expand/collapse state and ARIA wiring |

## Exported utilities

| Utility | Purpose |
|---------|---------|
| `cx(...args)` | Conditional class-name builder (clsx-compatible) |
| `dataAttr(name, condition)` | Returns `{ 'data-name': 'true' }` when truthy, else `{}` |
| `dataAttrs(attrs)` | Build many `data-*` attributes from an object |

```tsx
import { cx, dataAttrs, useArrowTheme } from 'arrow-react-bootstrap';
```
