open-index/open-npm huggingface dataset:
npm package: @niccrow/optimusctx
Description: Deprecated local-first runtime for persistent repository context for coding agents.
Latest version: 1.4.0

# @niccrow/optimusctx

## Status

This package is deprecated.

Benchmark results did not show enough improvement over baseline workflows to justify continuing the product, so `1.4.0` is the final planned release for `@niccrow/optimusctx`.

Install the archived final release from npm:

```bash
npm install -g @niccrow/optimusctx@1.4.0
```

Or try it first without keeping a global install:

```bash
npx @niccrow/optimusctx version
```

## What You Get

This package installs the real `optimusctx` CLI for your platform. During install, it downloads the matching release archive from GitHub Releases, verifies it, and makes the `optimusctx` command available to use.

OptimusCtx itself is a local-first runtime for coding agents. It keeps repository context on disk, helps agents navigate code with exact repository structure instead of repeated broad scans, and exposes that state through one MCP runtime entrypoint.

## First Checks

After install, run:

```bash
optimusctx version
optimusctx status
optimusctx doctor
```

Those commands confirm that:

- the installed binary is available on your PATH
- the runtime reports its version correctly
- the runtime can report basic readiness
- the local environment is healthy enough to start

## Typical Next Step

Inside a repository you want to use with OptimusCtx:

```bash
cd /path/to/your-repo
optimusctx init
optimusctx status
```

In an interactive terminal, `optimusctx init` can also offer supported-client onboarding during that same command. It asks where the client should be configured, then lets you configure it now or review the exact change first.

## Troubleshooting

- If install fails, retry once to rule out a temporary network issue.
- If `optimusctx` is not found after install, open a new shell or check that your npm global bin directory is on your PATH.
- If you want the raw binary instead of the npm install path, use the final release archives at `https://github.com/NicoMoralesDev/optimusctx/releases/tag/v1.4.0`.

## Docs

- Final release: `https://github.com/NicoMoralesDev/optimusctx/blob/main/docs/final-release.md`
- Quickstart: `https://github.com/NicoMoralesDev/optimusctx/blob/main/docs/quickstart.md`
- Install and verify: `https://github.com/NicoMoralesDev/optimusctx/blob/main/docs/install-and-verify.md`
- Releases: `https://github.com/NicoMoralesDev/optimusctx/releases`
npm package: @nice-avatar-svg/preact
Description: Library to generate SVG avatar for Preact
Author: Alexandre Rousseau
Latest version: 0.0.3

# Nice Avatar SVG for [Preact](https://preactjs.com/)

This is a fork of [react-nice-avatar][react-nice-avatar] which provide and handy way to generate beautiful SVG avatar.

![preview](../preview.png)

This package is about using it with [Preact](https://preactjs.com/).

## Usage

Install the lib

```sh
npm install @nice-avatar-svg/preact
```

```jsx
import NiceAvatar from "@nice-avatar-svg/preact";

import { Suspense } from "preact";

export default function App() {
  return (
    <Suspens fallback={"Loading..."}>
      <NiceAvatar
        bgColor="#6BD9E9"
        hairColor="#9287FF"
        shirtColor="#F4D150"
        skinColor="#F9C9B6"
        earSize="big"
        hairStyle="dannyPhantom"
        noseStyle="curve"
        glassesStyle="round"
        eyesStyle="smiling"
        facialHairStyle="beard"
        mouthStyle="laughing"
        shirtStyle="collared"
        earRing="loop"
        eyebrowsStyle="up"
      />
    </Suspens>
  );
}
```

[react-nice-avatar]: https://github.com/dapi-labs/react-nice-avatar
npm package: @nice-avatar-svg/react
Description: Library to generate SVG avatar for React
Author: Alexandre Rousseau
Latest version: 0.0.5

# Nice Avatar SVG for [React](https://github.com/facebook/react/)

This is a fork of [react-nice-avatar][react-nice-avatar] which provide and handy way to generate beautiful SVG avatar.

![preview](../preview.png)

This package is about using it with [React](https://github.com/facebook/react/)

## Usage

Install the lib

```sh
npm install @nice-avatar-svg/react
```

```jsx
import NiceAvatar from "@nice-avatar-svg/react";

import { Suspense } from "react";

export default function App() {
  return (
    <Suspens fallback={"Loading..."}>
      <NiceAvatar
        bgColor="#6BD9E9"
        hairColor="#9287FF"
        shirtColor="#F4D150"
        skinColor="#F9C9B6"
        earSize="big"
        hairStyle="dannyPhantom"
        noseStyle="curve"
        glassesStyle="round"
        eyesStyle="smiling"
        facialHairStyle="beard"
        mouthStyle="laughing"
        shirtStyle="collared"
        earRing="loop"
        eyebrowsStyle="up"
      />
    </Suspens>
  );
}
```
npm package: @nice-avatar-svg/solid
Description: Library to generate SVG avatar for Solid.js
Author: Alexandre Rousseau
Latest version: 0.0.4

# Nice Avatar SVG for [Solid.js](https://github.com/solidjs/solid)

This is a fork of [react-nice-avatar][react-nice-avatar] which provide and handy way to generate beautiful SVG avatar.

![preview](../preview.png)

This package is about using it with [Solid.js](https://github.com/solidjs/solid)

## Usage

Install the lib

```sh
npm install @nice-avatar-svg/solid
```

```jsx
import NiceAvatar, { COLOR } from "@nice-avatar-svg/solid";

export default function App() {
  return (
    <NiceAvatar
      bgColor="#6BD9E9"
      hairColor="#9287FF"
      shirtColor="#F4D150"
      skinColor="#F9C9B6"
      earSize="big"
      hairStyle="dannyPhantom"
      noseStyle="curve"
      glassesStyle="round"
      eyesStyle="smiling"
      facialHairStyle="beard"
      mouthStyle="laughing"
      shirtStyle="collared"
      earRing="loop"
      eyebrowsStyle="up"
    />
  );
}
```

[react-nice-avatar]: https://github.com/dapi-labs/react-nice-avatar
npm package: @nice-boys/components
Description: Nice Boys component library
Author: Max Stoiber
Latest version: 0.2.1

# `@nice-boys/components`

Our React component library to quickly plug together products. Used in conjunction with our [product-boilerplate](https://github.com/nice-boys/product-boilerplate).

## Documentation

**[Visit the Storybook for examples of all components](https://components.nice-boys.now.sh)**

This component library is based on:

- [styled-components](https://styled-components.com)
- [styled-system](https://github.com/jxnblk/styled-system)
- [rebass](https://rebassjs.org)

Recommended usage is with [rebass](https://rebassjs.org), this library does not re-export those core primitives (Flex, Box, etc).

---

## Contributing

### Local development

We use Storybook to develop the component library locally. To start Storybook locally, run:

```
yarn run dev
```

Any `.stories.js` file will be picked up by Storybook. See their doc on [how to write stories](https://storybook.js.org/docs/basics/writing-stories/) to learn more.

### Using your local version in an app

There are three steps to use your local version of `@nice-boys/components` in an app for development:

1. **Link `@nice-boys/components` globally**: Run `yarn link` in the `@nice-boys/components` directory to link the package globally (you only have to do that once on your machine)
2. **Tell your app to use your local version of `@nice-boys/components`**: Run `yarn link @nice-boys/components` in your app directory that depends on the package (you only have to do this once per app)
3. **Rebuild the components on any change**: Run `yarn run build:watch` in the components dir to make sure the library rebuilds every time you change/add/remove a component

That's it!

| @nice-boys/components | yourapp                         |
| --------------------- | ------------------------------- |
| yarn link             | yarn link @nice-boys/components |
| yarn run build:watch  | yarn run dev                    |

If you want to use the remote version in your app again, simply run `yarn unlink @nice-boys/components` in the app directory.

## License

Licensed under the MIT license. Copyright © 2019 Max Stoiber
npm package: @nice-digital/browserslist-config
Description: Shared Browserslist config for use in NICE Digital Services
Author: NICE Digital Services
Latest version: 3.0.0

# NICE Digital Browserslist

> Shared Browserslist config for use in NICE Digital Services

[![npm](https://img.shields.io/npm/v/@nice-digital/browserslist-config.svg)](https://www.npmjs.com/package/@nice-digital/browserslist-config)
[![GitHub release](https://img.shields.io/github/release/nice-digital/browserslist-config.svg)](https://github.com/nice-digital/browserslist-config)
[![License](https://img.shields.io/github/license/nice-digital/browserslist-config.svg)](https://github.com/nice-digital/browserslist-config/blob/master/LICENSE)
[![Dependencies](https://img.shields.io/david/nice-digital/browserslist-config.svg)](https://david-dm.org/nice-digital/browserslist-config)

## Installation

With npm:

```sh
npm install @nice-digital/browserslist-config --save-dev
```

Or with Yarn:

```sh
yarn add @nice-digital/browserslist-config -D
```

## Usage

Add this to your *package.json* file:

```json
"browserslist": [
    "extends @nice-digital/browserslist-config"
]
```

Or use a _.browserslistrc_ [as per the docs](https://github.com/browserslist/browserslist#config-file).

## V3 Breaking changes

Version 3 drops support for IE altogether. Use v2 if you still want to support IE11, for whatever reason.
npm package: @nice-digital/eslint-config
Description: Shared ESLint config for use in NICE Digital Services
Author: NICE Digital Services
Latest version: 1.0.3

# eslint-config

> Shared ESLint config for use in NICE Digital Services

## Usage

```
npm i @nice-digital/eslint-config --save-dev
```

Then in your project's *.eslintrc*:

```json
{
    "extends": "@nice-digital/eslint-config"
}
```

Or to use ES6:

```json
{
    "extends": "@nice-digital/eslint-config/es6"
}
```

Or to use [FlowType annotations](https://flow.org/en/):

```sh
npm i babel-eslint eslint-plugin-flowtype --save-dev
```

```json
{
    "extends": "@nice-digital/eslint-config/es6-flow"
}
```
npm package: @nice-digital/file-diff-generator
Description: Generates colourised differences between any kinds of files from two different sources and indicates if they were added, deleted or changed.
Author: NICE Digital Services
Latest version: 1.0.4

File Diff Generator
==================
![Icon](icon.png)

---

## Installing

```bash
npm install file-diff-generator
```

## What is it?

`file-diff-generator` generates colourised differences between any kinds of files from two different sources and indicates if they were added, deleted or changed.

The added, deleted or changed files are collated into the output folder with the adddition of a file called `filesList.html` which contains hyperlinks to the relevant files in the output directory. This is useful if the output needs to be rendered by a web server. 

### Changed file
![Changed](changed.png)

### Added file
![Added](added.png)

### Deleted File
![Deleted](deleted.png)

### Options
```
Usage:

file-diff-generator --new= NEW SOURCE --old= OLD SOURCE --output= DESTINATION [OPTIONS]

--outputFormat Whether to display the differences line-by-line or side-by-side (default: line-by-line)

--regexReplacement An array of regular expressions in JSON to replace text in source files (default: none)

--merge Whether to merge all the output files into a single file called allResults.html (default: false)
```

### Usage Examples

```bash
file-diff-generator --new=/root/new --old=/root/old --output=/root/output --outputFormat=side-by-side
```

```bash
file-diff-generator --new=/root/new --old=/root/old --output=/root/output merge=true
```

```bash
file-diff-generator --new=/root/new --old=/root/old --output=/root/output --regexReplacement='[{ regex: /build.1278/, replacement: \"\" }]'
```

<div>Icon made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
npm package: @nice-digital/nds-a-z-list
Description: A to Z list component for the NICE Design System
Author: Chris Barker
Latest version: 4.1.0

# `@nice-digital/nds-a-z-list`

> A-Z list component for the NICE Design System

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-a-z-list --save
```

## Usage

### React

Import the `AZList` and `AZListItem` components from the package and use within JSX:

```jsx
import React from "react";
import { AZList, AZListItem } from "@nice-digital/nds-a-z-list";

const allLetters = "abcdefghijklmnopqrstuvwxyz".split("");

<AZList alphabet={mockAlphabet}>
	{allLetters.map(letter => (
		<AZListItem key={letter} title={letter.toUpperCase()}>
			<p className="test-class">{letter}: lorem ipsum dolor sit amet</p>
		</AZListItem>
	))}
</AZList>

```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props (AZList)

##### alphabet

- Type `React.ReactNode`

A component to render at the top of the list, allowing the user to jump to each
letter within the index. Technically it can be any functional component, but
we'd recommend the NDS Alphabet component.

##### children

- Type: `React.ReactNode`

As the AZList component renders an `ol` element, it must have at least one `<li>`
child. Each should be an instance of `AZListItem`.

#### Props (AZListItem)

##### id

- Type: `string`

If specified, this id will be applied to the list item's h2 element. If not,
then the id will be auto-generated by removing spaces from the title and rendering
it in lower case. We'd recommend supplying one (in most cases this will be the
corresponding letter of the alphabet).

##### title

- Type: `string` (required)

The title of each item within the list

##### children (required)

- Type: `React.ReactNode`

This can be any content at all and will be displayed below the title.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-a-z-list/scss/a-z-list';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:


```html
<ol class="a-z-list">
  <li class="a-z-list__item">
    <h2 class="a-z-list__item-heading" id="a">A</h2>
    <p class="test-class">a: lorem ipsum dolor sit amet</p>
  </li>
  <li class="a-z-list__item">
    <h2 class="a-z-list__item-heading" id="b">B</h2>
    <p class="test-class">b: lorem ipsum dolor sit amet</p>
  </li>
  <li class="a-z-list__item">
    <h2 class="a-z-list__item-heading" id="c">C</h2>
    <p class="test-class">c: lorem ipsum dolor sit amet</p>
  </li>
  ...
  <li class="a-z-list__item">
    <h2 class="a-z-list__item-heading" id="x">X</h2>
    <p class="test-class">x: lorem ipsum dolor sit amet</p>
  </li>
  <li class="a-z-list__item">
    <h2 class="a-z-list__item-heading" id="y">Y</h2>
    <p class="test-class">y: lorem ipsum dolor sit amet</p>
  </li>
  <li class="a-z-list__item">
    <h2 class="a-z-list__item-heading" id="z">Z</h2>
    <p class="test-class">z: lorem ipsum dolor sit amet</p>
  </li>
</ol>
```
npm package: @nice-digital/nds-action-banner
Description: Action banner component for the NICE Design System
Author: Ian Routledge
Latest version: 4.4.0

# `@nice-digital/nds-action-banner`

> Action banner component for the NICE Design System

- [Installation](#installation)
- [Usage](#usage)
	- [React](#react)
		- [Props](#props)
			- [children](#children)
			- [title](#title)
			- [variant](#variant)
			- [cta](#cta)
			- [onClosing](#onclosing)
				- [className](#classname)
	- [SCSS](#scss)
	- [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-action-banner --save
```

## Usage

### React

Import the `ActionBanner` components from the package and use within JSX:

```jsx
import React from "react";
import { ActionBanner } from "@nice-digital/nds-action-banner";

<ActionBanner title="A title">
	Some <a href="/test">body</a>
</ActionBanner>

<ActionBanner title="A title" variant="subtle">
	A subtle action banner
</ActionBanner>

import { Button } from "@nice-digital/nds-button";
<ActionBanner title="A title" cta={<Button>some text</Button>}>
	Some <a href="/test">body</a>
</ActionBanner>

<ActionBanner title="A title" onClosing={() => { console.log("Closing"); }}>
	Some <a href="/test">body</a>
</ActionBanner>
```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### children

- Type: `ReactNode`

The body text of the action banner

##### title

- Type: `string`

The title of the action banner

##### variant

- Type: `"default"` | `"subtle"`
- Default: `"default"`

The type of action banner.

##### cta

- Type: `React.ReactNode`
- Default: `null`

The main, call to action button.

##### onClosing

- Type: `function`
- Default: `null`

The callback function to be called when this action banner is closed. Leave blank to default to a non-closable banner.

###### className

- Type: `string`

Any additional className will be merged on to the container.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-action-banner/scss/action-banner';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<section className="action-banner action-banner--subtle action-banner--closeable">
	<div className="action-banner__container">
		<div className="action-banner__inner">
			<div className="action-banner__text">
				<h2 className="action-banner__title">
					Title here
				</h2>
				<p className="action-banner__intro">
					Body here
				</p>
			</div>
			<div className="action-banner__actions">
				<a href="/test" class="btn">Some CTA</a>
			</div>
			<button type="button" className="action-banner__close">
					<span className="icon icon--remove" ara-hidden="true"></span>
					<span className="visually-hidden">Close and then put the title here</span>
				</button>
		</div>
	</div>
</section>
```
npm package: @nice-digital/nds-alert
Description: Alert component for the NICE Design System
Author: Warren Keith
Latest version: 4.1.0

# `@nice-digital/nds-alert`

> Alert component for the NICE Design System

- [`@nice-digital/nds-alert`](#nice-digitalalert) - [Installation](#installation) - [Usage](#usage) - [React](#react) - [Props](#props) - [SCSS](#scss) - [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-alert --save
```

## Usage

### React

Import the `Alert` component from the package and use within JSX:

```jsx
import React from "react";
import { Alert } from "@nice-digital/nds-alert";

<Alert type="caution">
	<h3>Important Notice</h3> // type defaults to 'info' if not supplied
	<p>Please read the below for more information.</p>
</Alert>;
```

#### Props

##### children

- Type: `ReactNode` (required)

The body content of the alert. Can receive any markup.

```jsx
<Alert>
	<p>Here is some addition content.</p>
</Alert>
```

##### type

- Type: `string`

The styling to apply to the alert box. Defaults to `info` if not supplied. Can be one of `info`, `success`, `caution` and `error`

```jsx
<Alert type="success">
	<p>Thank you for your submission.</p>
</Alert>
```

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-alert/scss/alert';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<div class="alert alert--info">
	<h3>Alert title</h3>
	<p>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet inventore
		maxime repellendus dolorem incidunt tempora a aspernatur sapiente quas
		quidem quia dolores, molestiae, accusamus, libero dicta! Explicabo
		recusandae, exercitationem iure ad asperiores tenetur quaerat, animi in quae
		numquam velit nostrum!
	</p>
</div>
```
npm package: @nice-digital/nds-column-list
Description: Column List component for the NICE Design System
Author: Chris Barker
Latest version: 4.1.0

# `@nice-digital/nds-column-list`

> Column List component for the NICE Design System

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-column-list --save
```

## Usage

### React

Import the `ColumnList` component from the package and use within JSX:

```jsx
import React from "react";
import { ColumnList } from "@nice-digital/nds-column-list";

<ColumnList>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ColumnList>

```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### plain

- Type: `boolean` (default: false)

Whether to render a plain list (as opposed to a boxed one)

```js
<ColumnList plain>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ColumnList>
```

##### columns

- Type: `number` (default: 3)

The maximum number of columns to render. The only permitted values are 2 or 3.

```js
<ColumnList columns={2}>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ColumnList>
```

##### children

- Type: `React.ReactNode`

As the ColumnList component renders an `ol` element, it must have at least one `<li>`
child.

```js
<ColumnList>
	<li>Item one</li>
	<li>Item two</li>
	<li>Item three</li>
</ColumnList>
```

###### className

- Type: `string`

Any additional className will be merged on to the containing `<ol>` element.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-column-list/scss/column-list';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:


#### Standard variant (3 columns, boxed layout)
```html
<ol class="column-list column-list--boxed">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ol>
```

#### Alternative variant (2 columns, plain layout)
```html
<ol class="column-list column-list--plain column-list--two-columns">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ol>
```
npm package: @nice-digital/nds-container
Description: Container component for the NICE Design System
Author: Warren Keith
Latest version: 4.1.0

# `@nice-digital/nds-container`

> Container component for the NICE Design System

- [`@nice-digital/nds-container`](#nice-digitalnds-container)
	- [Installation](#installation)
	- [Usage](#usage)
		- [React](#react)
			- [Props](#props)
				- [Container](#container)
					- [children](#children)
					- [className](#classname)
					- [elementType](#elementtype)
					- [fullWidth](#fullwidth)
		- [SCSS](#scss)
		- [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-container --save
```

## Usage

### React

Import the `Container` component from the package and use within JSX:

```jsx
import React from "react";
import { Container } from "@nice-digital/nds-container";

<Container>
	...
</Container>
```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### Container

###### children

- Type: `React.Node` | `React.Node[]` (required)

The content to render inside the container.

###### className

- Type: `string`
- Default: `""`

Additional classes to render on the container element. Useful for margin classes e.g. `mt--d`.

###### elementType

- Type: `React.ElementType`
- Default: `div`

A custom tag type for the container. Useful if the container covers the whole of the page's unique content, i.e. `elementType="main"`.

###### fullWidth

- Type: `boolean`
- Default: `false`

An option to override the default `max-width` of the container (`$container-max-width`), and set it to 98% of the parent (or viewport's) width.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-container/scss/container';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML, for example:

```html
<div class="container">
	...
</div>

<div class="container container--full">
	<p>Full width content here</p>
</div>
```
npm package: @nice-digital/nds-forms
Description: DEPRECATED! Use @nice-digital/nds-input and @nice-digital/nds-textarea
Author: Warren Keith
Latest version: 3.0.3

# `@nice-digital/nds-forms`

This package is now deprecated, and simply imports and directly exports [@nice-digital/nds-input](https://www.npmjs.com/package/@nice-digital/nds-input) and [@nice-digital/nds-textarea](https://www.npmjs.com/package/@nice-digital/nds-textarea). It is recommended that you reference these packages directly.
npm package: @nice-digital/nds-full-bleed
Description: Full bleed (edge-to-edge) component for the NICE Design System
Author: Warren Keith
Latest version: 4.1.0

# `@nice-digital/nds-full-bleed`

> Full bleed (edge-to-edge viewport) element for the NICE Design System

- [`@nice-digital/nds-full-bleed`](#nice-digitalfullbleed)
- [Installation](#installation)
- [Usage](#usage)
- [React](#react)
- [Props](#props)
- [SCSS](#scss)
- [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-full-bleed
```

## Usage

### React

Import the `FullBleed` component from the package and use with JSX:

```jsx
import { FullBleed } from "@nice-digital/nds-full-bleed";
<FullBleed>
	<p>Content here</p>
</FullBleed>
```

The component doesn't have any internal spacing or structure, and any supplied markup will align to the left of the viewport by default. Include structural markup if you need to, for example:

```jsx
import { FullBleed } from "@nice-digital/nds-full-bleed";
import { Grid, GridItem } from "@nice-digital/nds-grid";
<FullBleed>
	<div className="container">
		<Grid>
			<GridItem cols={12}>
				<p>This content is aligned to the grid</p>
			</GridItem>
		</Grid>
	</div>
</FullBleed>
```

### Props

#### children

- Type: `React.ReactNode`

The children will make up the contents of the full bleed component.

#### className

- Type: `string`
- Default: `"default"`

Any additional classes you would like to apply to the container.

#### backgroundImage

- Type: `string`
- Default: `undefined`

The url or path for the image to be loaded into the background of the full bleed. The image will be set to `background-size: cover` and will be positioned in both vertical and horizontal center.

#### padding

- Type: `"small"` | `"medium"` | `"large"`
- Default: `"small"`

The amount of padding added to the top and bottom of the full bleed area.

#### light

- Type: `boolean`
- Default: `false`

If set to `true`, the `light` setting will change the colour of the text content to white text and without a background image, display solid primary background.

By default the text content is NICE black and the background is NICE white.

##### Other props

Any additional props will be spread across the component container.

```jsx
<FullBleed data-track="track-this">
	<p>Content here</p>
</FullBleed>
```

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-full-bleed/scss/full-bleed';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<div
  class="full-bleed full-bleed--padding-small full-bleed--light"
  style='background-image: url("path/to/my/image.jpg");'
>
	<p>Here is my content</p>
</div>

```
npm package: @nice-digital/nds-input
Description: Input component for the NICE Design System
Author: Warren Keith
Latest version: 4.1.0

# `@nice-digital/nds-input`

> Form input component for the NICE Design System

- [Installation](#installation)
- [Usage](#usage)
	- [React](#react)
		- [Props](#props)
			- [defaultValue](#defaultvalue)
			- [error](#error)
			- [errorMessage](#errormessage)
			- [hint](#hint)
			- [inputRef](#inputref)
			- [label](#label)
			- [name](#name)
			- [type](#type)
			- [className](#classname)
			- [Anything else](#anything-else)
	- [SCSS](#scss)
	- [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-input --save
```

## Usage

### React

Import the `Input` components from the package and use within JSX:

```jsx
import React from "react";
import { Input } from "@nice-digital/nds-input";

<Input label="First name" name="firstname" />

<Input
    label="Surname"
    name="surname"
    error={true}
    errorMessage="This field is required"
/>

<Input
    label="Age on 1st September"
    name="age"
    hint="Please enter in full years"
/>

import { register } from "react-hook-form";
<Input label="With ref" name="ref" inputRef={register} />

```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### defaultValue

- Type: `string`

Pass a value for the input to be initially populated with.

##### error

- Type: `boolean`
- Default: `false`

Whether the component is in its error state. Adds classes to apply styling.

##### errorMessage

- Type: `string`

Error message to display inline.

##### hint

- Type: `string`

Display extra help text above the input field.

##### inputRef

- Type: `React.Ref`
- Default: `null`

Allow parent access to the ref property of the `input` element.

##### label

- Type: `React.ReactNode` | `null` (required)

The content of the `label` element. If `null` is passed, the `label` element will not be rendered. **Only use this if you are supplying your own `label` in the markup!**

##### name

- Type: `string` (required)

Input element `name` property.

##### type

- Type: `string`
- Default: "text"

##### className

- Type: `string`
- Default: `""`

A className that will be merged with the component's container className.

##### Anything else

Any other props passed to `<Input />` will be cascaded to the input element.x

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-input/scss/input';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<div class="input input--error">
    <label class="input__label">
        First name
    </label>
    <p class="form__hint">
        Please enter your name
    </p>
    <p class="form__error">
        This field is required
    </p>
    <input  name="firstname" 
            class="input__input" 
            type="text"
    >
</div>
```
npm package: @nice-digital/nds-maintain-ratio
Description: Maintain ratio component for the NICE Design System
Author: Ian Routledge
Latest version: 4.1.0

# `@nice-digital/nds-maintain-ratio`

> Component to maintain the ratio of a contained element

- [`@nice-digital/nds-maintain-ratio`](#nice-digitalnds-maintain-ratio) - [Installation](#installation) - [Usage](#usage) - [React](#react) - [Props](#props) - [SCSS](#scss) - [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-maintain-ratio --save
```

## Usage

### React

Import the `MaintainRatio` component from the package and use within JSX:

```jsx
import React from "react";
import { MaintainRatio } from "@nice-digital/nds-maintain-ratio";

<MaintainRatio ratio="16:9">
	<img src="image.jpg" />
</MaintainRatio>;
```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### ratio

- Type: `string`

The ratio to maintain. Defaults to `16:9` if not supplied. Can be one of `16:9`, `21:9`, `4:3`, `square` and `1:1`.

```js
<MaintainRatio ratio="4:3">
	<img src="image.jpg" />
</MaintainRatio>
```

##### className

- Type: `string`

Any additional class to apply to the container.

```js
<MaintainRatio className="mt--d">
	<img src="image.jpg" />
</MaintainRatio>
```

##### stretchFirstChild

- Type: `boolean`

Apply CSS to the first child of the component to make it fill the container.

```js
<MaintainRatio stretchFirstChild={true}>
	<img src="image.jpg" />
</MaintainRatio>
```

##### children

- Type: `React.ReactNode`

The content to maintain the ratio of. Expects, but isn't limited to, a single element. In most cases would be the `video` or `img` to maintain the aspect of.

```js
<MaintainRatio>
	<video src="my-video.mp4" contols />
</MaintainRatio>
```

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-maintain-ratio/scss/maintain-ratio';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<div class="maintain-ratio maintain-ratio--16-9 maintain-ratio--stretch">
	<img src="image.jpg" />
</div>
```
npm package: @nice-digital/nds-panel
Description: Panel component for the NICE Design System
Author: Ian Routledge
Latest version: 4.1.0

# `@nice-digital/nds-panel`

> Panel component for the NICE Design System

- [`@nice-digital/nds-panel`](#nice-digitalnds-panel) - [Installation](#installation) - [Usage](#usage) - [React](#react) - [Props](#props) - [children](#children) - [variant](#variant) - [className](#classname) - [SCSS](#scss) - [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-panel --save
```

## Usage

### React

Import the `Panel` components from the package and use within JSX:

```jsx
import React from "react";
import { Panel } from "@nice-digital/nds-panel";

<Panel>
	<h2>A default panel</h2>
	<p>For signposting supporting or additional information</p>
</Panel>

<Panel variant="impact">
	<h2>Impact panel</h2>
	<p>Any body copy</p>
</Panel>

<Panel variant="primary">
	<h2>A primary panel</h2>
	<p>For grouping and separating content and for visual interest.</p>
</Panel>
```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### children

- Type: `ReactNode`

The body of the panel

##### variant

- Type: `"impact"` | `"primary"` | `"inverse"` | `"impact-alt"`
- Default: `""`

The type of panel.

##### className

- Type: `string`
- Default: `""`

Additional CSS classes to apply to the panel, e.g. `mt--0` to remove the top margin.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-panel/scss/panel';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<div class="panel">
	Default panel
</div>
<div class="panel panel--impact">
	Impact panel
</div>
<div class="panel panel--primary">
	Primary panel
</div>
```
npm package: @nice-digital/nds-phase-banner
Description: Phase banner component for the NICE Design System
Author: Ian Routledge
Latest version: 4.1.0

# `@nice-digital/nds-phase-banner`

> Phase banner component for the NICE Design System

- [`@nice-digital/nds-phase-banner`](#nice-digitalphasebanner) - [Installation](#installation) - [Usage](#usage) - [React](#react) - [Props](#props) - [SCSS](#scss) - [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-phase-banner --save
```

## Usage

### React

Import the `PhaseBanner` component from the package and use within JSX:

```jsx
import React from "react";
import { PhaseBaner } from "@nice-digital/nds-phase-banner";

<PhaseBanner alpha>
	This is a new service - your <a href='#'>feedback</a> will help us to improve it.
</PhaseBanner>;
```

#### Props

##### children

- Type: `ReactNode` (required)

The body content of the phase banner. The phase banner itself is a paragraph so only text content should be supplied.

```jsx
<PhaseBanner alpha>
	This is a new service - your <a href='#'>feedback</a> will help us to improve it.
</PhaseBanner>
```

##### alpha

- Type: `boolean` (one of 'alpha' or 'beta' is required)

Mark the phase of the banner display as "alpha".

```jsx
<PhaseBanner alpha>
	This is a new service - your <a href='#'>feedback</a> will help us to improve it.
</PhaseBanner>;
```

##### beta

- Type: `boolean` (one of 'alpha' or 'beta' is required)

Mark the phase of the banner display as "beta".

```jsx
<PhaseBanner beta>
	This is a new service - your <a href='#'>feedback</a> will help us to improve it.
</PhaseBanner>;
```

##### className

- Type: `string`

Any additional className will be merged on to the container.

##### Other props

Any additional props will be spread across the container.

```jsx
<PhaseBanner alpha data-track="track-this">...</PhaseBanner>
```


### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-phase-banner/scss/phase-banner';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<p class="phase-banner">
  <span class="phase-banner__tag">
    <span class="tag tag--alpha tag--impact">Alpha</span>
  </span>
  <span class="phase-banner__label">
    This is a new service - your feedback will help us to improve it.
  </span>
</p>
```
npm package: @nice-digital/nds-table
Description: Table component for the NICE Design System
Author: Warren Keith
Latest version: 4.1.0

# `@nice-digital/nds-table`

> Basic table styling for the NICE design system

- [`@nice-digital/nds-table`](#nice-digitaltable) - [Installation](#installation) - [Usage](#usage) - [React](#react) - [Props](#props) - [SCSS](#scss) - [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-table --save
```

## Usage

### React

Import the `Table` component from the package and use within JSX:

```jsx
import React from "react";
import { Table } from "@nice-digital/nds-table";

<Table>
  <tr>
     <td>Data!</td>
  </tr>
</Table>
```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### children

- Type: `React.node` (required)

The component will only return the surrounding table tag. The rest of the table must be supplied as children.

```jsx
<Table>
  <tr>
     <td>Data!</td>
  </tr>
</Table>
```

##### className

- Type: `string`

Any additional classes you would like cascading to the `table` tag.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-table/scss/table';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<table class="table">
  <tbody>
    <tr>
      <td>Data!</td>
    </tr>
  </tbody>
</table>
```
npm package: @nice-digital/nds-tabs
Description: Tabs component for the NICE Design System
Author: Ian Routledge
Latest version: 4.1.0

# `@nice-digital/nds-tabs`

> Tabs component for the NICE Design System, based on the <a target="_blank" rel="noopener" href="https://www.w3.org/TR/wai-aria-practices/#tabpanel">W3C WAI-ARIA Authoring Practices 1.1</a>.

- [`@nice-digital/nds-tabs`](#nice-digitalnds-tabs) - [Installation](#installation) - [Usage](#usage) - [React](#react) - [Props](#props) - [SCSS](#scss) - [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-tabs --save
```

## Usage

### React

Import the `Tabs` and `Tab` components from the package and use within JSX:

```jsx
import React from "react";
import { Tabs, Tab } from "@nice-digital/nds-tabs";

<Tabs>
	<Tab title="Tab one">
		<p>Tab one content here</p>
	</Tab>
	<Tab title="Tab two">
		<p>Tab one content here</p>
	</Tab>
</Tabs>;
```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### `Tabs` Props

##### children

- Type: `React.node`

The `Tabs` component will only accept children of type `Tab`. Any other supplied children will be discarded.

```jsx
<Tabs>
	<Tab></Tab>
	<Tab></Tab>
</Tabs>
```

##### onTabChange

- Type: `function`
- Returns: string

A callback function that will be called when a tab is changed. Passes back a slugified version of the active tab's title.

##### className

- Type: `string`

Any additional className value that should be merged with the container.

##### other props

The `Tabs` component will spread any props across the tab panel's containing `div` element.

#### `Tab` Props

##### children

- Type: `React.node`

Children supplied to the `Tab` component will be displayed as the content of the tab panel.

##### title

- Type: `string` (required)

The title of the tab button.

```jsx
<Tabs>
	<Tab title="My first tab">
		<h1>First Tab</h1>
		<p>...</p>
	</Tab>
	<Tab title="My second tab">
		<h2>First Tab</h2>
		<p>...</p>
	</Tab>
</Tabs>
```

##### id

- Type: `string`

Use a custom ID attribute for tab button. If no ID is supplied, the title will be slugified to generate an ID.

```jsx
<Tabs>
	<Tab title="My first tab" id="tab1">
		<h1>First Tab</h1>
		<p>...</p>
	</Tab>
	<Tab title="My second tab" id="tab2">
		<h2>First Tab</h2>
		<p>...</p>
	</Tab>
</Tabs>
```

##### other props

Any other props will be cascaded to the tab panel, not the button.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-tabs/scss/tabs';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML as below. Tab controls and panels, along with their respective ARIA roles and states will be applied by the plugin.

```html
<div data-tabs>
	<div>
		<h3>Tab 1 Title</h3>
		<p>Tab 1 panel</p>
	</div>
	<div>
		<h3>Tab 2 Title</h3>
		<p>Tab 2 panel</p>
	</div>
	<div>
		<h3>Tab 3 Title</h3>
		<p>Tab 3 panel</p>
	</div>
</div>
```

### JavaScript

> TODO: JavaScript jQuery plugin
npm package: @nice-digital/nds-textarea
Description: Textarea component for the NICE Design System
Author: Warren Keith
Latest version: 4.1.0

# `@nice-digital/nds-textarea`

> Form textarea component for the NICE Design System

- [Installation](#installation)
- [Usage](#usage)
	- [React](#react)
		- [Props](#props)
			- [defaultValue](#defaultvalue)
			- [error](#error)
			- [errorMessage](#errormessage)
			- [hint](#hint)
			- [textareaRef](#textarearef)
			- [label](#label)
			- [name](#name)
			- [Anything else](#anything-else)
	- [SCSS](#scss)
	- [HTML](#html)

## Installation

Install Node, and then:

```sh
npm i @nice-digital/nds-textarea --save
```

## Usage

### React

Import the `Textarea` components from the package and use within JSX:

```jsx
import React from "react";
import { Textarea } from "@nice-digital/nds-textarea";

<Textarea label="Your address" name="address" />

<Textarea
    label="Your address"
    name="address"
    error={true}
    errorMessage="There is a problem with this field"
/>

<Textarea
    label="Your address"
    name="address"
    hint="Enter your full address including post code"
/>

import { register } from "react-hook-form";
<Textarea label="With ref" name="ref" textareaRef={register} />

```

> Note: The React component automatically imports the SCSS, so there's no need to import the SCSS directly yourself.

#### Props

##### defaultValue

- Type: string

String that the textarea will be prepopulated with.

##### error

- Type: `boolean`
- Default: `false`

Whether the component is in its error state. Adds classes to apply styling.

##### errorMessage

- Type: `string`

Error message to display inline.

##### hint

- Type: `string`

Display extra help text above the textarea field.

##### textareaRef

- Type: `React.Ref`
- Default: `null`

Allow parent access to the ref property of the `textarea` element.

##### label

- Type: `React.ReactNode` (required)

The content of the `label` element.

##### name

- Type: `string` (required)

Textarea element `name` property.

##### Anything else

Any other props passed to `<Textarea />` will be cascaded to the `<textarea />` element.

### SCSS

If you're not using [React](#react), then import the SCSS directly into your application by:

```scss
@forward '@nice-digital/nds-textarea/scss/textarea';
```

### HTML

If you're not using [React](#react), then include the [SCSS as above](#scss) and use the HTML:

```html
<div class="textarea textarea--error">
    <label 
        class="textarea__label" 
        for="textarea">
            Your address
    </label>
    <p class="textarea__hint">
        Enter your full address including post code
    </p>
    <p class="textarea__error">
        This field is required
    </p>
    <textarea class="textarea__textarea" id="textarea" name="textarea">Default value</textarea>
</div>
```