open-index/open-npm huggingface dataset:
npm package: @niarada/remedy
Description: **remedy** is a *Hypermedia Server* hosted on the [bun](https://bun.sh) runtime with [htmx](https://htmx.org) as a first-class integration.
Latest version: 0.4.7

**remedy** is a *Hypermedia Server* hosted on the [bun](https://bun.sh) runtime with [htmx](https://htmx.org) as a first-class integration.


### Status: alpha

### [Documentation](https://remedy.niarada.io)

## Getting started

```sh
mkdir my-project && cd my-project
bunx @niarada/remedy
```

Now, start dropping files in the `public` directory.

## Partials

Partials are indicated with the extension `.part`.  Partials consist of both script and html.  You may start the file with some script, but as soon as a newline followed by a **tag** is encountered, html will be assumed from then on.

Example:

```
const a = 1;
const b: string = "b";

<div>{a}</div>
<div>{b}</div>
```

Partials will be resolved into tagnames based on their path.

Examples:
- `public/todo.part` → `<todo />`
- `public/todo/list.part` → `<todo-list />`

These tags may be referenced in other partials.

`index.part` files are **layouts**.

Tag attributes are passed in as attributes normally are, and are available in the script.  If you include an interface, the types will be properly coerced.

Example:

```
interface Attributes {
    page: number;
}

// Available in the script section on the Attributes object.
console.log(Attributes.page);

<div>{typeof page}</div>

<!-- Output:
    <div>number</div>
-->
```

Attributes can also be passed in if the partial/tag is loaded via GET:

`GET /todo?id=1`

More documentation is in the works.
npm package: @nib-components/date-input-mask
Description: A date input mask. Limits data entry to DD/DD/DDDD where D is a digit (0-9).
Latest version: 1.0.0

# date-input-mask

A date input mask. Limits data entry to DD/DD/DDDD where D is a digit (0-9).

## Installation 

Browserify:

    npm install --save @nib-components/date-input-mask
    
## Usage

HTML:

    <input/>

JavaScript:

    var mask  = require('@nib-components/date-input-mask');
    var el    = document.querySelector('input');
    
    mask(el);
    
## Change Log

### `1.0.0`

- Drop support for component
npm package: @nib-components/prototype
Description: A single script and style bundle for prototyping. Includes react, react-dom and *almost* all our components.
Latest version: 1.1.0

# @nib-components/prototype

A single script and style bundle for rapid prototyping. Includes `react`, `react-dom` and *almost* all our components.

> Caution: **NEVER** use it in a real application!

> Using it in production will add a lot of unnecessary bloat to your app and result in sub-optimal page-load times.

## Usage

### CodePen

[Create a new CodePen](https://codepen.io/pen?template=OZLLwb&editors=0010) from our template CodePen.

### Roll-your-own

```html
<html class="flexbox">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>nib Prototype</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800|Roboto:300,400,700"/>
  </head>
  <body>
    <div id="app"/>
    <script src="https://unpkg.com/@nib-components/prototype/dist/prototype.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <Padding all={6}>
          <Heading size={1}>Hello World!</Heading>
          <Margin top={3}>
            <PrimaryButton>Click me!</Button>
          </Margin>
        </Padding>,
        document.getElementById('app')
      );
    </script>
  </body>
</html>
```

> Packages that have a single default export will be accessible on the `window` using their display name e.g. `@nib-components/heading` will be accessible via `window.Heading` (or just `Heading`)

> Packages that do not have a single default export will be accessible on the `window` using their package name and will require a little extra effort to use with react e.g. `@nib-components/table` will be accessible via `window.table` (or just `table` and usable like:
```js
const {Table, Row, Cell} = table;
<Table>...</Table>
```

## Updating

When changes have been made to any of the components in the DLS, or a new component has been added to the DLS, this repo will require updating. To update this repo:

1. Install the latest versions of all the DLS components

  > `npm-check -u` is a helpful utility for updating package versions

  > Make sure you save the updated versions in `package.json`

2. Edit the version in `package.json` and increase the minor version
  > Bumping the minor version also means resetting the patch version e.g. `0.2.3` to `0.3.0`
3. Commit and push your changes
4. Run `npm publish`
5. Update the [template CodePen](https://codepen.io/laurie/pen/OZLLwb?editors=0010) to use the most recently published version of this package from `unpkg.com`
  - `Settings > JavaScript` and update the version number in the URL

  > Use the exact version number so existing CodePens will continue working regardless of recent breaking changes.
  
## Change log

### 1.1.0
  
  - `update` - bump all components to use monorepo components.

### 1.0.0
  
  - `update` - remove css dependency and bump all components to use styled-components versions.
npm package: @nib-styles/alerts
Description: Alerts for nib pages.
Latest version: 3.0.0

# @nib-styles/alerts

Alerts for nib pages.

## Installation

    npm install --save @nib-styles/alerts

## Usage

There are four types of alerts:
- Error
- Success
- Warning
- Info

Alerts have a title and may also have a message:

alert with a title:

    <div class="alert alert--error">
      <div class="alert__title">We're sorry, due to too many invalid login attempts your account is locked</div>
    </div>

alert with a title and a message:

    <div class="alert alert--error">
      <div class="alert__title">We're sorry, due to too many invalid login attempts your account is locked</div>
      <div class="alert__message">You will be able to try again in 00:30 minutes.</div>
    </div>

## Changelog

3.0.0 - updated breaking version of @nib-styles/v2-icons
npm package: @nib-styles/article-cards
Description: Fixed width news article cards for nib pages. Used for the homepage and /nib-news
Latest version: 0.1.3

# @nib-styles/article-cards

Fixed width news article cards for nib pages. Used for the homepage and /nib-news

## Installation

    npm install --save @nib-styles/article-cards

## Usage

Card grid can be limited to 3 columns or unlimited and fill the space.

    <div class="article-cards article-cards--limited-to-three-columns">
        
        <a class="article-card"></a>
        <a class="article-card"></a>
        <a class="article-card"></a>
        
     </div>

There are three categories of `article-card`:
- Media
- Health Cover
- Healthy Life

      <a class="article-card article-card--media"></a>
      <a class="article-card article-card--health-cover"></a>
      <a class="article-card article-card--health-life"></a>
       

An article-card is comprised of a date, title, blurb and link:


    <div class="article-cards article-cards--limited-to-three-columns">
        <a class="article-card article-card--media" href="#">
            <p class="article-card__date">02 June 2016</p>
            <h1 class="article-card__title">Netus blandit habitant cursus</h1>
            <p class="article-card__blurb">
                Diam adipiscing orci ullamcorper feugiat dapibus a lacus sagittis a nulla feugiat a phasellus netus blandit habitant cursus scelerisque quisque taciti enim.
            </p>
            <div class="article-card__link">Read full article</div>
        </a>
    </div>

Articles can omit any of these elements (e.g. blurb). A group of articles should contain the same elements to maintain equal heights.
npm package: @nib-styles/colors
Description: A handful of pure colour variables for the most used colours at nib. See the [nib-pattern-library](https://nib-pattern-library.firebaseapp.com/pages/colours.html) for colours.
Latest version: 1.1.1

# @nib-styles/colors

A handful of pure colour variables for the most used colours at nib. See the [nib-pattern-library](https://nib-pattern-library.firebaseapp.com/pages/colours.html) for colours.

All colours are prefixed with `color-` to prevent potential name conflicts, and for easier editor auto completion.

## Installation

    npm i --save @nib-styles/colors

## Usage

    @import "@nib-styles/colors";
    
    .box {
      background-color: $color-sneezy;
      color: $color-prince-charles;
    }

### NB:

This repo is not for defining application-specific variables (i.e. `$border-color: $color-bashful;`)


## Changelog

- 1.0.0 Breaking change, fresh start with our current colours
npm package: @nib-styles/control
Description: nib styling for a form control. See [nib-health-funds](https://github.com/nib-health-funds/control) for JS.
Latest version: 1.2.1

# Control

nib styling for a form control. See [nib-health-funds](https://github.com/nib-health-funds/control) for JS.

## Markup

For example:

    <div class="control">
        <label class="control__label" for="first-name-input">First name</label>

        <div class="control__input">
            <input type="text" class="control-input-text" id="first-name-input" autofocus/>
            <i class="control-feedback-icon no-select"></i>
        </div>

        <div class="control-feedback-message no-select">
            <p class="control-feedback-message__text"></p>
        </div>
    </div>
npm package: @nib-styles/footer-small
Description: Styles for small nib footer
Latest version: 0.1.0

# @nib-styles/footer-small

Styles for small nib footer

## Installation

    npm install --save @nib-styles/footer-small
    
## Usage

`index.scss`
```scss
@import "@nib-styles/footer-small";
```
> Note: Requires use of `sass-composer` to bundle dependencies.
npm package: @nib-styles/grow-layout
Description: Simple flexbox layout to push footer to bottom by adding three classes
Latest version: 3.0.0

# @nib-styles/grow-layout

Simple `flexbox` sticky footer by adding three classes

## Installation

    npm install --save @nib-styles/grow-layout

## Usage

Add `grow-layout` class to the direct parent element wrapping both the div you wish to expand and the footer.

Unfortunately due to this [flexbox issue in IE](https://github.com/philipwalton/flexbugs/blob/master/README.md#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items), we need a second wrapping element for this to work.

Wrap your page with two divs with classes of `grow-layout` and `grow-layout__wrapper`. It is important that these divs are direct parents of the div you wish to expand and the header and footer elements.

Add `grow-layout__content` class to the element you wish to expand to take up the remaining space on the page and push the footer to the bottom.

    <div class="grow-layout">
        <div class="grow-layout__wrapper">
            <header></header>
            <div class="grow-layout__content"> This div will grow vertically to fill the screen</div>
            <footer></footer>
        </div>
     </div>
npm package: @nib-styles/react-form
Description: Styles for `React` based forms at `nib`.
Latest version: 1.0.1

# @nib-styles/react-form

Styles for `React` based forms at `nib`.

> WARNING: This component is deprecated. Use `@nib-components/form` instead.

## Installation

    npm install --save @nib-styles/react-form

## Change log

### 1.0.0-.1

- break: bump version of `v2-icons`

### 0.9.0

- moved `radio` implementation to `@nib-components/radio`

### 0.8.1

- fix: added `margin: 0` to `divider` to override browser specified margins on `<hr/>`s

### 0.8.0

- break: renamed `form__divider` to `divider` and removed the margin so it can be used independently of the form

### 0.6.1

- fix: fixed disable hover state on `radio` inputs - bg color no longer changes and the cursor is left as the default

### 0.6.0

- break: bumped version of `@nib-styles/v2-buttons` from `^2.1.1` to `^3.0.1` => it should only be breaking if you depend on it for more than the submit button (a primary button)

### 0.5.0

- add: disabled state for control labels
npm package: @nib-styles/sass-breakpoints
Description: SASS mixins for named breakpoints.
Latest version: 1.0.2

# @nib-styles/sass-breakpoints

SASS mixins for named breakpoints.

## Installation

    npm install --save @nib-styles/sass-breakpoints

## Usage

    sass-composer example/example.scss -o compiled.css

SCSS: `example/example.scss`

    @import "@nib-styles/sass-breakpoints";
    
    @include breakpoint('sm') {           //from `sm` (>=0px)
      body { background-color: red; }
    }
    
    @include breakpoint('lg') {           //from `lg` (>=800px)
      body { background-color: green; }
    }

CSS: `compiled.css`
    
    @media (min-width: 30em) {
      body {
        background-color: red; } }
    
    @media (min-width: 50em) {
      body {
        background-color: green; } }

See [sass-breakpoints](https://www.npmjs.com/package/sass-breakpoints) for a full list of the available mixins.

## Breakpoints

<table width="25%">
  <tr>
    <th width="25%">Name</th>
    <th>Resolution</th>
  </tr>
  <tr>
    <td>xs</td>
    <td>&gt;=0px</td>
  </tr>
  <tr>
    <td>sm</td>
    <td>&gt;=480px</td>
  </tr>
  <tr>
    <td>md</td>
    <td>&gt;=640px</td>
  </tr>
  <tr>
    <td>lg</td>
    <td>&gt;=800px</td>
  </tr>
  <tr>
    <td>xl</td>
    <td>&gt;=960px</td>
  </tr>
</table>
npm package: @nib-styles/sass-grid
Description: A responsive grid built on flexbox.
Latest version: 1.0.1

# @nib-styles/sass-grid

A responsive grid built on flexbox.

Uses `flexbox` in newer browsers and gracefully degrades in older browsers (<=IE9), supporting *most* of the same functionality using an `inline-block` grid.

## Installation

NPM:

    npm install --save @nib-styles/sass-grid

Component:

    component install nib-styles/sass-grid


## Usage

### Using the compiled classes

SCSS:

    @import "@nib-styles/sass-grid/compiled"

HTML:

    <html class="flexbox"><!-- You'll probably use Modernizr and won't need to manually put this class here --!>
    ...
      <div class="content">

        <div class="grid" g-xs="halign:justify-center">
            <div class="grid__unit" g-md="cols:3">Does stuff</div>
            <div class="grid__unit" g-md="cols:3">Does more stuff</div>
            <div class="grid__unit" g-md="cols:3">Does even more stuff</div>
            <div class="grid__unit" g-md="cols:3">It just does all the stuff!</div>
        </div>

      </div>

    ...
    </html>

See [sass-grid](https://www.npmjs.com/package/sass-grid) for a full list of the available classes.

### Using the mixins

SCSS:

    @import "@nib-styles/sass-grid"
    @import "@nib-styles/sass-breakpoints";

    .feature-panel-wrapper {
      @include content();
    }

    .feature-panel {
      @include grid();
      @include grid--halign-justify-center()
    }

    .feature-panel__feature {
      @include grid__unit();
      @include breakpoint('md') {
        @include grid__unit--cols(3);
      }
    }

HTML:

    <html class="flexbox"><!-- You'll probably use Modernizr and won't need to manually put this class here --!>
    ...

      <div class="feature-panel-wrapper">

        <div class="feature-panel">
            <div class="feature-panel__feature">Does stuff</div>
            <div class="feature-panel__feature">Does more stuff</div>
            <div class="feature-panel__feature">Does even more stuff</div>
            <div class="feature-panel__feature">It just does all the stuff!</div>
        </div>

      </div>

    ...
    </html>

See [sass-grid](https://www.npmjs.com/package/sass-grid) for a full list of the available mixins.

### .content

The `content` class is the default nib content container. It has a max width of 60rem/960px (*we are looking to increase this to ~1200px for future projects*). It is available as a class and a mixin. See previous two code sections for examples of usage.

**Note:** needs to be a child of `.sticky__content`, not on the same element

## Breakpoints

See [@nib-styles/sass-breakpoints](https://github.com/nib-styles/sass-breakpoints).

## Changelog

### 1.0.1

- fix: enforce container width to be 100% so `.content` works within a `flexbox` parent

### 1.0.0

- Bump to major version to avoid npm < 1.0.0 version weirdness

### 0.4.0

- Bump version of `sass-grid` to add wrapping utilities.
npm package: @nib-styles/sass-spacing
Description: SASS mixins for margins and paddings. Plus a compiled set of responsive margin and padding classes for non-sass projects.
Latest version: 0.2.2

# @nib-styles/sass-spacing

SASS mixins for margins and paddings. Plus a compiled set of responsive margin and padding classes for non-sass projects. 

## Installation

NPM:

    npm install --save @nib-styles/sass-spacing

Component:

    component install nib-styles/sass-spacing

## Usage

### Using the compiled classes

SCSS:

    @import "@nib-styles/sass-spacing/compiled";

HTML:

    <div g-md="p3 mb3">
      20px padding and 20px margin-bottom for >=md breakpoint
    </div>
    
    <div g-xs="p2" g-sm="p4" g-lg="p0">
      10px padding <sm, 40px padding <lg, 0px padding above
    </div>
    
    <div g-xs="px5 mb3" g-sm="p4">
      60px padding left/right and 20px margin bottom <sm, 20px padding above
    </div>

## Breakpoints

See [@nib-styles/sass-breakpoints](https://github.com/nib-styles/sass-breakpoints).
 
## Default Pixel Sizes

 - 0 - 0
 - 1 - 5px
 - 2 - 10px
 - 3 - 20px
 - 4 - 40px
 - 5 - 60px
 - 6 - 80px
 
## Margin Options

 - m - margin
 - mx - margin-left & margin-right
 - my - margin-top & margin-bottom
 - mt - margin-top
 - mb - margin-bottom
 - ml - margin-left
 - mr - margin-right

## Padding Options
 
 - p - padding
 - px - padding-left & padding-right
 - py - padding-top & padding-bottom
 - pt - padding-top
 - pb - padding-bottom
 - pl - padding-left
 - pr - padding-right
npm package: @nib-styles/sticky-footer
Description: Simple flexbox sticky footer by adding two classes
Latest version: 0.1.2
Deprecated: Use @nib-styles/grow-layout instead.

# @nib-styles/sticky-footer

Simple `flexbox` sticky footer by adding two classes

## Installation

    npm install --save @nib-styles/sticky-footer
    
## Usage

Add `sticky` class to the direct parent element wrapping both the div you wish to expand and the footer.

Add `sticky__content` class to the element you wish to expand to take up the remaining space on the page and push the footer to the bottom.

    <div class=sticky">
        <header></header>
        <div class="sticky__content"></div>
        <footer></footer>
     </div>
npm package: @nib-styles/v2-alerts
Description: Alerts v2 =========
Latest version: 1.1.2

Alerts v2
=========

Alerts for nib pages.

    <div class="v2-alert v2-alert--error">
        <div class="v2-alert__title">Message Title</div>
        Message content
    </div>

This component contains the following modifiers:

    v2-alert--error       // Error message
    v2-alert--success     // Success message
    v2-alert--warning     // Alert message
    v2-alert--info        // Information message


Always use both the base and modifier classes:

    v2-alert v2-alert--error

## Dependencies

nibdings icon font from [nib-styles/v2-icons](https://github.com/nib-styles/v2-icons)
npm package: @nib-styles/v2-buttons
Description: nib styled buttons.
Latest version: 4.0.0

# @nib-styles/v2-buttons

nib styled buttons.

## Installation

    npm install --save @nib-styles/v2-buttons

**Note:** Requires `Opens Sans` and `Roboto` fonts from Google Fonts:

```html
<link rel='stylesheet' href='//fonts.googleapis.com/css?family=Open+Sans:700|Roboto:700' />
```

## Usage

### Using mixins

```scss
@import "@nib-styles/v2-buttons";

.feature {
  &__call-to-action{
    @include button('primary', $icon: 'person', $size: 'large')
  }
}
```

```html
<button class="feature__call-to-action">
    Add a dependant
</button>
```

### Using compiled classes

```scss
@import "@nib-styles/v2-buttons/compiled";
```

```html
<button class="v2-button v2-button--primary v2-button--large v2-button--icon-on-right">
    Add a dependant <i class="v2-icon v2-icon--person v2-icon--smallest v2-icon--offset-descenders"></i>
</button>
```

See the pattern library or [example/example.html](example/example.html) a complete list of classes.

## Mixins

```scss
@include button($type, $color, $icon: false, $size: null);
```

- `$type` Required. May be `primary`, `secondary` or `tertiary`.

- `$color` Required. Dependent on `$type`.
  - Primary: `null`. (Default yellow)
  - Secondary: `green`, `dark-grey`, or `light-grey`.
  - Tertiary: `green`, `grey` or `white`.

- `$icon` Optional. If `false` no icon is displayed. If `true` the `chevron-circle-inverse` icon is displayed. May be the name of a `v2-icon` e.g. `person`, `gear`, `dollar-circle`.

- `$size` Optional. May be `medium` or `large`.

## Changelog

### 4.0.0

- break: bump version of `v2-icons`

### 3.0.0

- addition: Mixins!
- removed: supplementary buttons
- removed: large button style