open-index/open-npm huggingface dataset:
npm package: @raid-toolkit/webclient
Description: Webclient for RaidToolkit API access
Latest version: 1.0.8

# RaidToolkit WebClient

This package provides access to the Raid Toolkit API from web contexts.

## Installation

### Yarn

```sh
yarn add @raid-toolkit/webclient
```

### NPM

```sh
npm install @raid-toolkit/webclient
```

## Usage

To access APIs from RTK, simply call `useRaidToolkitApi` with the API definition you wish to access, and then call whatever APIs you'd like.

```ts
import { useRaidToolkitApi, IAccountApi } from '@raid-toolkit/webclient';

async function loadAccount() {
    const accountApi = useRaidToolkitApi(IAccountApi);
    const accounts = await accountApi.getAccounts();
    for (const account of accounts) {
        const accountDump = await accountApi.getAccountDump(account.id);
        console.log({account, accountDump});
    }
}

```

## APIs

### AccountApi

| API | Description |
|-----|-------------|
| `getAccounts` | Fetch a list of all user accounts. |
| `getAccountDump(accountId)` | Get an account dump for a given `accountId`, in RaidExtractor format. |
| `getArtifacts(accountId)` | Get all artifacts for a given `accountId` |
| `getArtifactById(accountId, artifactId)` | Get an artifact by id |
| `getHeroes(accountId)` | Get all heroes for a given `accountId` |
| `getHeroById(accountId, heroId)` | Get a hero by id |
| `getArena(accountId)` | Get arena data for a given `accountId` |
| `getAllResources(accountId)` | Get all resources for a given `accountId` |
npm package: @raid-ui/align
Description: @raid-ui layout alignment components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/align

> Layout alignment components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/align?style=flat-square)](https://www.npmjs.com/package/@raid-ui/align)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/align?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/align)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Center
* [x] Spacer
* [x] Grid
npm package: @raid-ui/badge
Description: @raid-ui badge component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/badge

> Badge component for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/badge?style=flat-square)](https://www.npmjs.com/package/@raid-ui/badge)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/badge?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/badge)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Badge
npm package: @raid-ui/button
Description: @raid-ui button component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/button

> Button component


[![npm](https://img.shields.io/npm/v/@raid-ui/button?style=flat-square)](https://www.npmjs.com/package/@raid-ui/button)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/button?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/button)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Button
npm package: @raid-ui/buttongroup
Description: @raid-ui grouped button layout component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/buttongroup

> Layout component for a group of buttons


[![npm](https://img.shields.io/npm/v/@raid-ui/buttongroup?style=flat-square)](https://www.npmjs.com/package/@raid-ui/buttongroup)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/buttongroup?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/buttongroup)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] ButtonGroup
npm package: @raid-ui/card
Description: @raid-ui card components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/card

> Card components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/card?style=flat-square)](https://www.npmjs.com/package/@raid-ui/card)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/card?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/card)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Card
npm package: @raid-ui/checkbox
Description: @raid-ui checkbox component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/checkbox

> Checkbox component


[![npm](https://img.shields.io/npm/v/@raid-ui/checkbox?style=flat-square)](https://www.npmjs.com/package/@raid-ui/checkbox)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/checkbox?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/checkbox)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Checkbox
npm package: @raid-ui/container
Description: @raid-ui container components i.e. box, flex, view etc
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/container

> Layout container components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/container?style=flat-square)](https://www.npmjs.com/package/@raid-ui/container)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/container?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/container)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Box
* [x] Flex
* [x] View
* [x] Screen
npm package: @raid-ui/control
Description: @raid-ui control components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/control

> Utility components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/control?style=flat-square)](https://www.npmjs.com/package/@raid-ui/control)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/control?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/control)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Button
* [x] ButtonGroup
* [x] Checkbox
* [x] Input
* [x] Label
* [x] Range
* [x] Select
npm package: @raid-ui/core
Description: Core functionality for @raid-ui design system
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/core

> Core functions for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/core?style=flat-square)](https://www.npmjs.com/package/@raid-ui/core)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/core?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/core)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

**Mixins**

* [x] sx
* [x] __hover
* [x] __focus
* [x] __active
* [x] depth
* [x] fit
* [x] fill
* [x] center
* [x] circular
* [x] pixellate
* [x] focus
* [x] disabled
* [x] focusStyle

**Higher order functions**

* [x] withSx
* [x] withUnit
* [x] withMs

**Theme functions**

* [x] extend
* [x] context
* [x] variant
* [x] getTransition
* [x] map
* [x] apply

**Variants**

* [x] rounding

**Animations**

* [x] pulse
npm package: @raid-ui/divider
Description: @raid-ui divider component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/divider

> Horizontal and vertical rule


[![npm](https://img.shields.io/npm/v/@raid-ui/divider?style=flat-square)](https://www.npmjs.com/package/@raid-ui/divider)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/divider?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/divider)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Divider
npm package: @raid-ui/dropdown
Description: @raid-ui dropdown action menu component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/dropdown

> Dropdown action menu component


[![npm](https://img.shields.io/npm/v/@raid-ui/dropdown?style=flat-square)](https://www.npmjs.com/package/@raid-ui/dropdown)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/dropdown?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/dropdown)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Dropdown
npm package: @raid-ui/header
Description: @raid-ui header components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/header

> Header components


[![npm](https://img.shields.io/npm/v/@raid-ui/header?style=flat-square)](https://www.npmjs.com/package/@raid-ui/header)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/header?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/header)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Header
npm package: @raid-ui/hidden
Description: @raid-ui hidden components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/hidden

> Hidden components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/hidden?style=flat-square)](https://www.npmjs.com/package/@raid-ui/hidden)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/hidden?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/hidden)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] VisuallyHidden

`VisuallyHidden` is exported verbatim from [@reach/visuallyHidden](https://www.npmjs.com/package/@reach/visually-hidden).
npm package: @raid-ui/icons
Description: @raid-ui icon components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/icon

> Icon components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/icon?style=flat-square)](https://www.npmjs.com/package/@raid-ui/icon)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/icon?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/icon)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Icon
npm package: @raid-ui/image
Description: @raid-ui image components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/image

> Image components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/image?style=flat-square)](https://www.npmjs.com/package/@raid-ui/image)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/image?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/image)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Image
* [x] RawImage
npm package: @raid-ui/input
Description: @raid-ui input component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/input

> Input component


[![npm](https://img.shields.io/npm/v/@raid-ui/input?style=flat-square)](https://www.npmjs.com/package/@raid-ui/input)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/input?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/input)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Input
npm package: @raid-ui/label
Description: @raid-ui label component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/label

> Label component


[![npm](https://img.shields.io/npm/v/@raid-ui/label?style=flat-square)](https://www.npmjs.com/package/@raid-ui/label)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/label?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/label)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Label
npm package: @raid-ui/layout
Description: @raid-ui layout components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/layout

> Layout components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/layout?style=flat-square)](https://www.npmjs.com/package/@raid-ui/layout)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/layout?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/layout)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Center
* [x] Grid
* [x] Spacer
* [x] Card
* [x] Box
* [x] Flex
* [x] View
* [x] Spread
* [x] Screen
* [x] Aspect
* [x] Stack
* [x] VisuallyHidden
npm package: @raid-ui/markdown
Description: @raid-ui markdown components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/markdown

> Markdown components


[![npm](https://img.shields.io/npm/v/@raid-ui/markdown?style=flat-square)](https://www.npmjs.com/package/@raid-ui/markdown)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/markdown?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/markdown)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Markdown
npm package: @raid-ui/placeholder
Description: @raid-ui placeholder component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/placeholder

> Placeholder component from @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/placeholder?style=flat-square)](https://www.npmjs.com/package/@raid-ui/placeholder)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/placeholder?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/placeholder)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Placeholder
npm package: @raid-ui/range
Description: @raid-ui range component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/range

> Range component


[![npm](https://img.shields.io/npm/v/@raid-ui/range?style=flat-square)](https://www.npmjs.com/package/@raid-ui/range)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/range?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/range)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Range
npm package: @raid-ui/reset
Description: @raid-ui global style reset
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/reset

> Global styling reset for @raid-ui


Based upon [reset](https://hankchizljaw.com/wrote/a-modern-css-reset/) styling by Andy Bell

[![npm](https://img.shields.io/npm/v/@raid-ui/reset?style=flat-square)](https://www.npmjs.com/package/@raid-ui/reset)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/reset?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/reset)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Reset
npm package: @raid-ui/scrollable
Description: @raid-ui scrollable components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/scrollable

> Components that can react to scroll events


[![npm](https://img.shields.io/npm/v/@raid-ui/scrollable?style=flat-square)](https://www.npmjs.com/package/@raid-ui/scrollable)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/scrollable?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/scrollable)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Scrollable
npm package: @raid-ui/select
Description: @raid-ui select component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/select

> Select component


[![npm](https://img.shields.io/npm/v/@raid-ui/select?style=flat-square)](https://www.npmjs.com/package/@raid-ui/select)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/select?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/select)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Select
npm package: @raid-ui/stack
Description: @raid-ui stack component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/stack

> Stack components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/stack?style=flat-square)](https://www.npmjs.com/package/@raid-ui/stack)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/stack?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/stack)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Stack
npm package: @raid-ui/system
Description: Combined system props for @raid-ui components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/system

> Styled system functions for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/system?style=flat-square)](https://www.npmjs.com/package/@raid-ui/system)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/system?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/system)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] common
* [x] layout
* [x] depth
* [x] size
* [x] typography
* [x] withMedia

See the [styled system reference table](https://github.com/styled-system/styled-system/blob/master/docs/table.md) for underlying css values

## Reference Table

### Common

* display
* [space](https://github.com/styled-system/styled-system/blob/master/docs/table.md#space)
* [color](https://github.com/styled-system/styled-system/blob/master/docs/table.md#color)
* [background](https://github.com/styled-system/styled-system/blob/master/docs/table.md#background)

### Layout

* [layout](https://github.com/styled-system/styled-system/blob/master/docs/table.md#layout)
* box-sizing
* depth (z-index and box-shadow)

### Depth

* depth (z-index and box-shadow)

### Size

* width
* height
* min-width
* min-height
* max-width
* max-height

### Typography

* [typography](https://github.com/styled-system/styled-system/blob/master/docs/table.md#typography)
* white-space
* text-decoration
* text-transform
* vertical-align

### withMedia

Allows bracketed types to support media queries.
npm package: @raid-ui/text
Description: @raid-ui text component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/text

> Text component for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/text?style=flat-square)](https://www.npmjs.com/package/@raid-ui/text)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/text?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/text)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Text
npm package: @raid-ui/theme
Description: Base theme object for @raid-ui design system
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/theme

> Base theme object for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/theme?style=flat-square)](https://www.npmjs.com/package/@raid-ui/theme)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/theme?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/theme)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

## Getting Started

```js
import { ThemeProvider } from 'styled-components'
// import theme from '@raid-ui/theme/theme.json'
import { theme } from '@raid-ui/theme'


<ThemeProvider theme={theme}>...</ThemeProvider>
```

A serialised json is exposed via `@raid-ui/theme/theme.json` but note that currently some of the theme are functions, which can not be serialised. This will currently base some typographic styling, possibly some component variants too. Importing the object form directly will work.
npm package: @raid-ui/theme-outrun
Description: @raid-ui outrun-styled theme
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/theme

> Base theme object for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/theme?style=flat-square)](https://www.npmjs.com/package/@raid-ui/theme)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/theme?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/theme)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

## Getting Started

```js
import { ThemeProvider } from 'styled-components'
// import theme from '@raid-ui/theme/theme.json'
import { theme } from '@raid-ui/theme'


<ThemeProvider theme={theme}>...</ThemeProvider>
```

A serialised json is exposed via `@raid-ui/theme/theme.json` but note that currently some of the theme are functions, which can not be serialised. This will currently base some typographic styling, possibly some component variants too. Importing the object form directly will work.
npm package: @raid-ui/tooltip
Description: @raid-ui tooltip component
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/tooltip

> Tooltip component


[![npm](https://img.shields.io/npm/v/@raid-ui/tooltip?style=flat-square)](https://www.npmjs.com/package/@raid-ui/tooltip)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/tooltip?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/tooltip)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Tooltip
npm package: @raid-ui/type
Description: @raid-ui typographical components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/type

> Typographical components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/type?style=flat-square)](https://www.npmjs.com/package/@raid-ui/type)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/type?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/type)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Text
* [x] Badge
* [x] H1
* [x] H2
* [x] H3
* [x] H4
* [x] H5
* [x] H6
* [x] P
* [x] Pre
* [x] Code
* [x] Blockquote
* [x] List
* [x] ListItem
* [x] Link
npm package: @raid-ui/utility
Description: @raid-ui utility components
Author: Matt Styles
Latest version: 0.20.0


# @raid-ui/utility

> Utility components for @raid-ui


[![npm](https://img.shields.io/npm/v/@raid-ui/utility?style=flat-square)](https://www.npmjs.com/package/@raid-ui/utility)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid-ui/utility?style=flat-square)](https://bundlephobia.com/result?p=@raid-ui/utility)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

* [x] Divider
* [x] Image
* [x] RawImage
* [x] Placeholder
* [x] Reset
npm package: @raid/app-kit
Description: @raid-ui app kit components
Author: Matt Styles
Latest version: 0.20.0


# @raid/app-kit

> Conglomerate package for react-kit app-level components


[![npm](https://img.shields.io/npm/v/@raid/app-kit?style=flat-square)](https://www.npmjs.com/package/@raid/app-kit)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid/app-kit?style=flat-square)](https://bundlephobia.com/result?p=@raid/app-kit)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

See [the index file](./src/index.js) for exports.
npm package: @raid/basic-kit
Description: Some low=level React components
Author: Matt Styles
Latest version: 0.18.2
Deprecated: use @raid/kit instead


# @raid/basic-kit

> Base UI components to help set your component system on the _right_ path

[![npm](https://img.shields.io/npm/v/@raid/basic-kit?style=flat-square)](https://www.npmjs.com/package/@raid/basic-kit)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid/basic-kit?style=flat-square)](https://bundlephobia.com/result?p=@raid/basic-kit)
[![Dependencies](https://img.shields.io/david/mattstyles/react-kit?path=packages%2Fbasic-kit&style=flat-square)](https://david-dm.org/mattstyles/react-kit?path=packages%2Fbasic-kit)
[![Peer Dependencies](https://img.shields.io/david/peer/mattstyles/react-kit?path=packages%2Fbasic-kit&style=flat-square)](https://david-dm.org/mattstyles/react-kit?path=packages%2Fbasic-kit&type=peer)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

## Getting Started

Install with [yarn](https://yarnpkg.com) or [npm](https://npmjs.com)

```sh
yarn add @raid/basic-kit
```

```sh
npm i -S @raid/basic-kit
```

@TODO basic usage example

## Roadmap

Base UI components

- [ ] Layout
- [x] Typography
- [ ] Iconography
- [ ] Controls
- [ ] Alerts
- [ ] Tables
- [ ] Theming

Extensions

- [ ] Headless, styling from theme
- [ ] Themed kits, more granular tokenisation
- [ ] Dat.gui control kit
- [ ] App basics kit for stock components, headers, menus, navigation etc

## Exports

### Layout

- [x] Screen
- [x] View
- [x] Box
- [x] Flex
- [x] Center
- [x] Grid

- [x] Spread
- [x] Stack

- [x] Divider
- [x] Spacer
- [x] Hidden

- [x] Card
- [x] Image
- [x] Aspect

### Typography

- [x] Headings
- [x] Body
- [x] Blockquote
- [x] Code, Pre
- [x] List
- [x] Badge
- [ ] Heading
- [x] Text

### Controls

- [x] Button
- [x] Button Groups
- [x] Link/Anchor
- [x] Range Slider
- [ ] Progress (inputless controlled range)
- [x] Input
- [ ] Textarea
- [ ] Radio
- [x] Checkbox
- [ ] Toggle/Switch
- [x] Select (native dropdown)
- [ ] Number Input
- [ ] Form

### Iconography

- [x] Icon
- [ ] Common Icon Set

### Tables

- [ ] Definition List
- [ ] Table
- [ ] Table Controls

### Utility

- [ ] Spinner
- [x] Placeholder
- [ ] Loading dots

### Theming

- [x] Base Theme Structure
- [ ] Colour Structure
- [ ] Variant Structure
- [ ] Utilities / Mixins

## Contributing

Pull requests are always welcome, the project uses the [standard](http://standardjs.com) code style. Please run `yarn test` to ensure all tests are passing and add tests for any new features or updates.

For bugs and feature requests, [please create an issue](https://github.com/mattstyles/react-kit/issues).

See the root [readme](https://github.com/mattstyles/react-kit) for more information about how the repository is structured.

## License

MIT
npm package: @raid/kit
Description: @raid-ui base kit components
Author: Matt Styles
Latest version: 0.20.0


# @raid/kit

> Conglomerate package for react-kit low-level components


[![npm](https://img.shields.io/npm/v/@raid/kit?style=flat-square)](https://www.npmjs.com/package/@raid/kit)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid/kit?style=flat-square)](https://bundlephobia.com/result?p=@raid/kit)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Part of [React-kit](https://github.com/mattstyles/react-kit).

See [the index file](./src/index.js) for exports.
npm package: @raid/markdown-kit
Description: Uses @raid/basic-kit components to render markdown
Author: Matt Styles
Latest version: 0.18.2
Deprecated: use @raid-ui/markdown instead


# react-markdown-kit

> Uses `@raid/basic-kit` components to render markdown

[![npm](https://img.shields.io/npm/v/@raid/markdown-kit.svg?style=flat-square)](https://www.npmjs.com/package/react-markdown-kit)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@raid/markdown-kit?style=flat-square)](https://bundlephobia.com/result?p=@raid/markdown-kit)
[![Dependencies](https://img.shields.io/david/mattstyles/react-kit?path=packages%2Fmarkdown-kit&style=flat-square)](https://david-dm.org/mattstyles/react-kit?path=packages%2Fmarkdown-kit)
[![Peer Dependencies](https://img.shields.io/david/peer/mattstyles/react-kit?path=packages%2Fmarkdown-kit&style=flat-square)](https://david-dm.org/mattstyles/react-kit?path=packages%2Fmarkdown-kit&type=peer)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

## Getting Started

Install with [yarn](https://yarnpkg.com) or [npm](https://npmjs.com)

```sh
yarn add @raid/markdown-kit
```

```sh
npm i -S @raid/markdown-kit
```

The markdown component converts markdown into DOM via React components which tie in with the `@raid/basic-kit` components.

```js
import { Markdown } from '@raid/markdown-kit'
import { md } from './content.md'

render(
  <Markdown>{md}</Markdown,
  document.body
)
```

The `elements` property can be used to specify which components to use for which bits of Markdown. It uses [markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx) under the hood so [mdx](https://mdxjs.com/) is also supported.

## Contributing

Pull requests are always welcome, the project uses the [standard](http://standardjs.com) code style. Please run `npm test` to ensure all tests are passing and add tests for any new features or updates.

For bugs and feature requests, [please create an issue](https://github.com/mattstyles/react-kit/issues).

See the root [readme](https://github.com/mattstyles/react-kit) for more information about how the repository is structured.

## License

MIT
npm package: @raid/theme
Description: The basic theme and theme specification for raid ui kits
Author: Matt Styles
Latest version: 0.18.2
Deprecated: use @raid-ui/theme instead


# @raid/theme

> Base theme object for raid UI kits

[![npm](https://img.shields.io/npm/v/@raid/theme?style=flat-square)](https://www.npmjs.com/package/@raid/theme)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

## Getting Started

Install with [yarn](https://yarnpkg.com) or [npm](https://npmjs.com)

```sh
yarn add @raid/theme
```

```sh
npm i -S @raid/theme
```

@TODO basic usage example

## Contributing

Pull requests are always welcome, the project uses the [standard](http://standardjs.com) code style. Please run `yarn test` to ensure all tests are passing and add tests for any new features or updates.

For bugs and feature requests, [please create an issue](https://github.com/mattstyles/react-kit/issues).

See the root [readme](https://github.com/mattstyles/react-kit) for more information about how the repository is structured.

## License

MIT

_Note:_

JS allows keyed properties on an array. This is not valid JSON. However, using numeric keys on an object is. So scales that were previously an array will now be an object with numeric keys, which should work fine with most systems (like styled-system) that are expecting arrays.

_Note:_

Uses rem everywhere for type and spacing. Global style clamps the html at 62.5% so that rem scale is off of a base10 which makes life much easier for anyone working with the library.
However, there is some potential interoperability issues with some other systems that also use rems but might not expect the manipulation of sizes. To fix this we use rem everywhere, this means the base scale is up to you, however, if you _don't_ put 62.5% on the html/body then things from this lib might appear too large (1.6x too large). The answer is to use different base scales, which means we need a way to generate it.
Actually we won't muck with the default font sizing, its a pain to work with but for better interoperability we should default to 100%, not 62.5%.
npm package: @raid/ui-core
Description: Core for @raid ui kits
Author: Matt Styles
Latest version: 0.18.2
Deprecated: use @raid-ui/core instead


# @raid/ui-core

> Core functionality for raid UI kits

[![npm](https://img.shields.io/npm/v/@raid/ui-core?style=flat-square)](https://www.npmjs.com/package/@raid/ui-core)
[![Dependencies](https://img.shields.io/david/mattstyles/react-kit?path=packages%2Fui-core&style=flat-square)](https://david-dm.org/mattstyles/react-kit?path=packages%2Fui-core)
[![Peer Dependencies](https://img.shields.io/david/peer/mattstyles/react-kit?path=packages%2Fui-core&style=flat-square)](https://david-dm.org/mattstyles/react-kit?path=packages%2Fui-core&type=peer)
[![License](https://img.shields.io/github/license/mattstyles/react-kit.svg?style=flat-square)](https://github.com/mattstyles/react-kit/blob/master/license.md)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

## Getting Started

Install with [yarn](https://yarnpkg.com) or [npm](https://npmjs.com)

```sh
yarn add @raid/ui-core
```

```sh
npm i -S @raid/ui-core
```

@TODO basic usage example

## Contributing

Pull requests are always welcome, the project uses the [standard](http://standardjs.com) code style. Please run `yarn test` to ensure all tests are passing and add tests for any new features or updates.

For bugs and feature requests, [please create an issue](https://github.com/mattstyles/react-kit/issues).

See the root [readme](https://github.com/mattstyles/react-kit) for more information about how the repository is structured.

## License

MIT