# arrow-react-bootstrap

React 18 components for T-Mobile's Arrow Design System (TDDS). 65 components with full accessibility, keyboard navigation, and dark mode support.

> Future scoped name on GitLab: `@tmobile/arrow-react`.

## Install

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

## Setup

Import styles once at your app root:

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

Wrap your app in the theme provider:

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

<ArrowThemeProvider>
  <App />
</ArrowThemeProvider>
```

## Usage

```tsx
import { Button, TextField, Accordion, Tabs, Modal } from 'arrow-react-bootstrap';

<Button variant="primary">Submit</Button>

<TextField id="email" name="email" label="Email address" />

<Accordion
  items={[
    { id: 'q1', heading: 'Question?', content: <p>Answer.</p> },
  ]}
/>
```

All components are data-driven — pass arrays of objects, not compound children.

## Exports

- **68 components** — buttons, forms, navigation, disclosure, data viz, feedback
- **5 hooks** — `useFloatingLabel`, `useRovingTabIndex`, `useMenuDropdown`, `useExpandCollapse`, `useArrowTheme`
- **1 provider** — `ArrowThemeProvider` (inverse + brand theming)
- **2 utilities** — `cx` (classnames), `dataAttr`/`dataAttrs`

## Key Props

Every component supports `inverse` for dark mode. Form inputs require `id` and `label`. Icons are passed as `ReactNode` (SVG elements).

## Figma Make Kit

This package is designed as the code-context pillar of a Figma Make Kit. The published tarball includes per-component documentation under `dist/guidelines/`:

- `dist/guidelines/components/{slug}.md` — one file per component (import line, design prose, prop table)
- `dist/guidelines/components/index.md` — discoverability index
- `dist/guidelines/overview.md` — system-level rules (imports, theme, styles)

Make's package auto-gen analyzes these when generating Kit guidelines. They can also be imported directly:

```ts
import buttonMd from 'arrow-react-bootstrap/guidelines/components/button';
```

## Documentation

- [`guidelines/`](../../guidelines/) — system-level rules (imports, theme, styles, patterns)
- `dist/guidelines/components/` — per-component docs, regenerated on every `npm run build`
