open-index/open-npm huggingface dataset:
npm package: @hixbe/font-publisher
Description: Hixbe Font Publisher CLI Tool
Author: Hixbe
Latest version: 0.0.1

# Hixbe Font Publisher

This CLI is used to publish the Hixbe packages to NPM. It is not intended for use by end users.

Commonly used publishers cannot publish the sheer quantity of packages that Hixbe has, thus a custom solution is required. This package does not take feature requests unless it directly relates to Hixbe.

## Getting Started

```bash
# Install dependencies
npm install @hixbe/font-publisher

# Run the CLI and generate initial config
npx @hixbe/font-publisher init
```

# How It Works

1. Use folder hashes (recursive filehashes) to determine if a package has changed.
2. Bump packages and validate they are publishable by comparing versions on the NPM registry.
3. Use pacote and libnpmpublish to pack and publish the packages.
npm package: @hixme-ui/animate
Description: hixme-ui Animate component
Author: hixme.com
Latest version: 2.2.0

# Animate

```bash
npm i --save @hixme-ui/animate
```
[View it live](https://hixme.github.io/hixme-ui/animate)

## Usage

```javascript
import Animate from '@hixme-ui/animate'

<Animate bounce time='1s' />
```

## Props
Add any animation from [http://daneden.github.io/animate.css](Animate.css) as a boolean prop.

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| time            | string      | '1s'           |
| delay           | string      | '0s'           | 
| count           | string      | '1'            |
| trigger         | boolean     | false          |
| display         | string      | 'inherit'      |
| fillMode        | string      | 'none'         |
npm package: @hixme-ui/app-layout
Description: hixme-ui AppLayout component
Author: hixme.com
Latest version: 2.2.0

# App Layout

```bash
npm i --save @hixme-ui/app-layout
```
[View it live](https://hixme.github.io/hixme-ui/app-layout)

AppLayout is an all-in-one menu and sidebar.

## Usage

```javascript
import AppLayout from '@hixme-ui/app-layout'

const SidebarContent = () => (
  <div>
    {/* sidebar stuff */}
  </div>
)

const HeaderContent = () => (
  <div>
    {/* header stuff */}
  </div>
)

<AppLayout 
  HeaderComponent={HeaderContent} 
  SidebarComponent={SidebarContent}
>
  {children}
</AppLayout>
```

## Props

| Name                   | Type        | Default        |
| ---------------------- | ----------- | -------------- |
| sidebarWidth           | string      | '225px'        |
| children               | node        | N/A            |
| HeaderComponent        | function    | () => null     |
| SidebarComponent       | function    | () => null     |
| open                   | boolean     | false          |
| fixed                  | boolean     | false          |
| contentBackgroundColor | string      | '#E5ECF1'      |
npm package: @hixme-ui/benefit-price
Description: hixme-ui Benefit Price component
Author: hixme.com
Latest version: 2.2.0

# Benefit Price

## Installation

```bash
npm i --save @hixme-ui/benefit-price
```
[View it live](https://hixme.github.io/hixme-ui/benefit-price)

## Usage

```js
import BenefitPrice from '@hixme-ui/benefit-price'

<BenefitPrice payCycle={12} value={100} />
<BenefitPrice payCycle={52} value={46.93} />
<BenefitPrice value={-46.93} noLabel />
```
## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| value           | string      | N/A            |
| noLabel         | bool        | false          | 
| payCycle        | number      | 12             | 

## Valid payCycle values

| Pay Cycle | Label Value  |
| --------- | ------------ |
| 12        | monthly      |
| 24        | semi-monthly |
| 26        | bi-weekly    |
| 52        | weekly       |
npm package: @hixme-ui/bullet-list
Description: hixme-ui BulletList component
Author: hixme.com
Latest version: 2.2.0

# Bullet List

```bash
npm i --save @hixme-ui/bullet-list
```
[View it live](https://hixme.github.io/hixme-ui/bullet-list)

## Usage

```javascript
import BulletList from '@hixme-ui/bullet-list'

const myUnorderedList = [
  'One fish',
  'Two fish',
  'Red fish',
  'Blue fish',
]

<BulletList bulletArray={myUnorderedList} />
```

## BulletList Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| bulletArray     | array       | N/A            |
npm package: @hixme-ui/button
Description: hixme-ui Button component
Author: hixme.com
Latest version: 2.2.0

# Button

```bash
npm i --save @hixme-ui/button
```
[View it live](https://hixme.github.io/hixme-ui/button)

## Usage

```javascript
import { Button, OutlineButton } from '@hixme-ui/button'

<Button mini blue>I am small and blue</Button>

<OutlineButton jumbo green>Do it</OutlineButton>

```

## Button Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| mini            | boolean     | false          |
| small           | boolean     | false          |
| large           | boolean     | false          |
| jumbo           | boolean     | false          |
| primary         | boolean     | false          |
| secondary       | boolean     | false          |
| red             | boolean     | false          |
| blue            | boolean     | false          |
| gold            | boolean     | false          |
| disabled        | boolean     | false          |
| block           | boolean     | false          |
| split           | boolean     | false          |
| menu            | boolean     | false          |
| loading         | boolean     | false          |


## OutlineButton Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| mini            | boolean     | false          |
| small           | boolean     | false          |
| large           | boolean     | false          |
| jumbo           | boolean     | false          |
| primary         | boolean     | false          |
| success         | boolean     | false          |
| warning         | boolean     | false          |
| error           | boolean     | false          |
| muted           | boolean     | false          |
| white           | boolean     | false          |
| black           | boolean     | false          |
| red             | boolean     | false          |
| blue            | boolean     | false          |
| purple          | boolean     | false          |
| yellow          | boolean     | false          |
| green           | boolean     | false          |
| light           | boolean     | false          |
| lighter         | boolean     | false          |
| lightest        | boolean     | false          |
| disabled        | boolean     | false          |
| block           | boolean     | false          |
npm package: @hixme-ui/card
Description: hixme-ui Card component
Author: hixme.com
Latest version: 2.2.0

# Card

```bash
npm i --save @hixme-ui/card
```
[View it live](https://hixme.github.io/hixme-ui/card)

Card is an implementation of [Container](https://hixme.github.io/hixme-ui/container
that defaults to having a white background, rounded corners, and a drop shadow. It
supports all the properties available for
[Container](https://hixme.github.io/hixme-ui/container)


## Usage

```javascript
import Card from '@hixme-ui/card'

<Card padding='30px' shadow>
  <p>Default card component</p>
</Card>
```

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| background      | string      | white          |
| rounded         | string      | true           |
| shadow          | string      | true           |
npm package: @hixme-ui/card-drawer
Description: hixme-ui CardDrawer component
Author: hixme.com
Latest version: 2.2.0

# Card Drawer

```bash
npm i --save @hixme-ui/card-drawer
```
[View it live](https://hixme.github.io/hixme-ui/card-drawer)

CardDrawer is an accordion component implemented with [Card](https://hixme.github.io/hixme-ui/card) and [react-collapsible](https://github.com/glennflanagan/react-collapsible).

## Usage

```javascript
import CardDrawer from '@hixme-ui/card-drawer'

// Using react-collapsible
<CardDrawer collapsible cardHeader='Drawer title'>
  <p>Drawer content</p>
</CardDrawer>

// Always open, static CardDrawer
<CardDrawer open cardHeader='Drawer title'>
  <p>Drawer content</p>
</CardDrawer>

// You can also supply the content to the cardContent prop
<CardDrawer
  collapsible
  cardHeader='Drawer title'
  cardContent={
    <p>Drawer content</p>
  }
/>
```

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| cardContent     | node        | null           |
| cardHeader      | string      | null           |
| children        | node        | N/A            |
| collapsible     | boolean     | false          |
| disabled        | boolean     | false          | 
| hideArrow       | boolean     | false          |
npm package: @hixme-ui/checkbox
Description: hixme-ui Checkbox component
Author: hixme.com
Latest version: 2.2.0

# Checkbox

```bash
npm i --save @hixme-ui/checkbox
```
[View it live](https://hixme.github.io/hixme-ui/checkbox)

## Usage

```javascript
import Checkbox from '@hixme-ui/checkbox'

<Checkbox text='Checkbox Label' />
<Checkbox defaultChecked small text='Small checkbox with a label' />
<Checkbox defaultChecked jumbo text='Jumbo checkbox' />
<Checkbox disabled text='Disabled checkbox' />
```

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| defaultChecked  | boolean     | false          |
| disabled        | boolean     | false          |
| jumbo           | boolean     | false          |
| small           | boolean     | false          | 
| text            | string      | N/A            |
npm package: @hixme-ui/close-button
Description: hixme-ui CloseButton component
Author: hixme.com
Latest version: 2.2.0

# Close Button

```bash
npm i --save @hixme-ui/close-button
```
[View it live](https://hixme.github.io/hixme-ui/close-button)

## Usage

```javascript
import CloseButton from '@hixme-ui/close-button'

<CloseButton onClick={onClick} />
```

## Props

| Name            | Type        | Default        |
|-----------------|-------------|----------------|
| iconSize        | string      | '1.8'          |
| onClick         | string      | () => null     |
| label           | string      | 'CLOSE'        |
| noLabel         | string      | false          |
npm package: @hixme-ui/content-container
Description: hixme-ui ContentContainer component
Author: hixme.com
Latest version: 2.2.0

# Content Container

```bash
npm i --save @hixme-ui/content-container
```
[View it live](https://hixme.github.io/hixme-ui/content-container)

## Usage

```javascript
import ContentContainer from '@hixme-ui/content-container'

<ContentContainer>
  <h1>Something very wide</h1>
  <p>
    Lorem ipsum...
  </p>
</ContentContainer>
```

## Props

| Name            | Type        | Default        |
|-----------------|-------------|----------------|
| contentWidth    | string      | '900px'        |
| contentPadding  | string      | '20px'         |
| contentMargin   | string      | '0 auto'       |
| height          | string      | N/A            |
npm package: @hixme-ui/currency
Description: hixme-ui Currency component
Author: hixme.com
Latest version: 2.2.0

# Currency


```bash
npm i --save @hixme-ui/currency
```
[View it live](https://hixme.github.io/hixme-ui/currency)

## Currency Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| defaultSymbol   | string      | $              |
| hideCents       | bool        | false          |
| hideCommas      | bool        | false          |
| noSymbol        | bool        | false          |
| round           | bool        | false          |
| value           | number      | null           |


## Basic Usage

Currency can use a child value or a value prop for the number, and handles comma placement and rounding of decimals.

```javascript
import Input from '@hixme-ui/currency'

<Currency value='11.95' />
<Currency>11.95</Currency>
// both output $11.95

<Currency value='1234567.8991' />
// outputs $1,234,567.90
```

## hideCents
```javascript
<Currency hideCents value='123.8991' />
// outputs $123
```

## hideCommas
```javascript
<Currency hideCommas value='123456.00' />
// outputs $123456.00
```

## noSymbol
```javascript
<Currency noSymbol value='123456.00' />
// outputs 123,456.00
```

## round

The round prop will round the number to significant values. If the value is
under 100,000, it will round to the nearest dollar.  Values of 100,000 and
above will round to the nearest thousand

```javascript
<Currency round value='1236.99' />
// outputs 1,237

<Currency round value='123456.00' />
// outputs 123,000.00
```

## Format

Currency has a static format function if needed outside of a JSX context.

```javascript
Currency.format({
  value: 12.34
})
// outputs $12.34

Currency.format({
  value: 1200.34,
  hideCents: true,
})
// outputs $1,200


Currency.format({
  value: 1234.5678,
  hideCommas: true,
  defaultSymbol: '#',
})
// outputs $1234.57
```
npm package: @hixme-ui/dates
Description: hixme-ui Dates utils
Author: hixme.com
Latest version: 2.2.0

# FormatDate, FormatUtcDate
---
### Description
Displays datetime, or date, in a default format, or a provided format.

### Methods
* `static format([date] [datetime] [,format] [,inputFormat]) returns string`
* `static isValid(date, inputFormat) returns boolean`

### Properties
* `date - string, default null`
* `datetime - string, default null`
* `format - string, date default \'MM/DD/YYYY\', datetime default \'MM/DD/YYYY h:mm:ss a\'`
* `inputFormat - string, default null`
* `extends` [Text](/typography)

### Usage
```
import { FormatDate } from '@hixme-ui/dates'

const date = FormatDate.format({ date: '2016-10-10', format='DD-MM-YYYY'})
const isValid = FormatDate.isValid({ date: '20-2016-01', inputFormat='DD-YYYY-MM'})

<FormatDate large primary date='10-10-1999' inputFormat='MM-DD-YYYY' format='LLLL'/>
```
### Notes
* `isValid()` uses strict parsing
* Irregular date formats will cause moment.js warnings, use `inputFormat` to negate
npm package: @hixme-ui/email
Description: hixme-ui Email component
Author: hixme.com
Latest version: 2.2.0

# Email


```bash
npm i --save @hixme-ui/email
```
[View it live](https://hixme.github.io/hixme-ui/email)

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| address         | string      |                |


## Basic Usage

```javascript
import Email from '@hixme-ui/email'

<Email address='boaty@mcboatface.com' />
```
npm package: @hixme-ui/form-group
Description: hixme-ui form group container
Author: hixme.com
Latest version: 2.2.0

# Form Group

```bash
npm i --save @hixme-ui/form-group
```
[View it live](https://hixme.github.io/hixme-ui/form-group)

## Usage

```javascript
import FormGroup from '@hixme-ui/form-group'

<FormGroup>
  <Label>Name</Label>
  <Input name='name' />
  <Text error>Name is required</Text>
</FormGroup>
```

The FormGroup provides some shortcuts for label and error for form building. You may achieve the same result as our first example by providing the label and error strings to the appropriate props.  The error message should only be provided when the error message should be displayed.

```javascript
import FormGroup from '@hixme-ui/form-group'

<FormGroup label='Name' error='Name is required'>
  <Input name='name' />
</FormGroup>
```

The component will invoke the Label and Text components around the input field for you. Label appears as the first child. Any children provided will be displayed below [Label](https://github.com/hixme/hixme-ui/tree/master/packages/label). The error message will display as a [Text](https://github.com/hixme/hixme-ui/tree/master/packages/text) component as the last child.

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| label           | String      | null           |
| error           | String      | null           |
npm package: @hixme-ui/forms
Description: hixme-ui forms category for access to all HUI form components
Author: hixme.com
Latest version: 2.2.0

# Forms

```bash
npm i --save @hixme-ui/forms
```
Forms provides an easy import for all HUI form category of components.

[View it live](https://hixme.github.io/hixme-ui/forms)

## Usage

### Using children options
```javascript
import { Button, Label, FormGroup, Input }  from '@hixme-ui/forms'

<form>
  <FormGroup>
    <Label>First name</Label>
    <Input name='firstname' required />
  </FormGroup>

  <Button>Submit</Button>
</form>
```
npm package: @hixme-ui/icon
Description: hixme-ui Icon component
Author: hixme.com
Latest version: 2.2.0

# Icon

```bash
npm i --save @hixme-ui/icon
```
[View it live](https://hixme.github.io/hixme-ui/icon)

## Usage

```javascript
import Icon from '@hixme-ui/icon'

<Icon menu />
```

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| color           | string      | black          |
| size            | number      | 1              |
| fontSize        | number      | 14             |
npm package: @hixme-ui/input
Description: hixme-ui Input component
Author: hixme.com
Latest version: 2.2.0

# Input

Input is built with two layers. A style-component CSS base which is then
wrapped with in React JSX to allow props to drive different types of input
needs for basic input, textarea, and masked phone, date, ssn, and masked
implementations.


```bash
npm i --save @hixme-ui/input
```
[View it live](https://hixme.github.io/hixme-ui/input)

## Props

| Name            | Type        |
| --------------- | ----------- |
| currency        | bool        |
| date            | bool        |
| mask            | bool        |
| percentage      | bool        |
| phone           | bool        |
| ssn             | bool        |
| submitting      | bool        |
| textarea        | bool        |
| large           | bool        |
| mini            | bool        |


## Basic Usage

```javascript
import Input from '@hixme-ui/input'

<Input type='email' required />


// input with phone number formatting
<Input phone />

```

## InputBase

InputBase is a style-component build of the input tag and contains all the
necessary CSS for the theme

```javascript
import { InputBase } from '@hixme-ui/input'

<InputBase type='email' required />

```
npm package: @hixme-ui/label
Description: hixme-ui Label component
Author: hixme.com
Latest version: 2.2.0

# Label


```bash
npm i --save @hixme-ui/label
```

[View it live](https://hixme.github.io/hixme-ui/label)

## Basic Usage

Use it anywhere you would use a form label. Label works with all the same props as [Text](https://github.com/hixme/hixme-ui/tree/master/packages/text#props). Customize your form label as needed.

```javascript
import Label from '@hixme-ui/label'
import Input from '@hixme-ui/input'
import FormGroup from '@hixme-ui/form-group'

<form>
  <FormGroup>
    <Label>First name</Label>
    <Input name='firstname' />
  </FormGroup>
</form>
```

Use Label with [FormGroup](https://github.com/hixme/hixme-ui/tree/master/packages/form-group) to get the proper spacing with [Input](https://github.com/hixme/hixme-ui/tree/master/packages/input), [Select](https://github.com/hixme/hixme-ui/tree/master/packages/select), and other form components.
npm package: @hixme-ui/percentage
Description: hixme-ui Percentage component
Author: hixme.com
Latest version: 2.2.0

# Percentage


```bash
npm i --save @hixme-ui/percentage
```
[View it live](https://hixme.github.io/hixme-ui/percentage)

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| hideDecimals    | bool        | false          |
| value           | number      | null           |


## Basic Usage

Percentage can use a child value or a value prop for the number, and handles
decimal placement and rounding.

```javascript
import Input from '@hixme-ui/percentage'

<Percentage value='0.314' />
<Percentage>0.314</Percentage>
// both output 31.40%

```

## hideDecimals
```javascript
<Percentage hideDecimals value='0.891342' />
// outputs 89%
```

## Format

Percentage has a static format function if needed outside of a JSX context.

```javascript
Percentage.format({
  value: 0.1234
})
// outputs 12.34%

Percentage.format({
  value: 0.1234,
  hideDecimals: true,
})
// outputs 12%

```
npm package: @hixme-ui/phone
Description: hixme-ui phone component for linking and formatting phone numbers.
Author: hixme.com
Latest version: 2.2.0

# Phone

```bash
npm i --save @hixme-ui/phone
```
[View it live](https://hixme.github.io/hixme-ui/phone)

Phone extends the [@hixme/text](https://github.com/hixme/hixme-ui/tree/master/packages/text)
to provide phone formatting and linking


## Usage

```javascript
import Phone from '@hixme-ui/phone'

<Phone number='8881234567' />
// ouputs phone link as
// <a href="tel:8881234567">(888) 123 - 4567</a>

```

## Phone.format

Phone has a format function it uses to display the phone format, and is
accessible if needed outside of the JSX

```javascript
import Phone from '@hixme-ui/phone'

Phone.format('8881234567')
// outputs string (888) 123 - 4567
```
npm package: @hixme-ui/placeholder
Description: hixme-ui placeholder component for implied views that are pending api results.
Author: hixme.com
Latest version: 2.2.0

# Placeholder

```bash
npm i --save @hixme-ui/placeholder
```
[View it live](https://hixme.github.io/hixme-ui/placeholder)

Placeholder makes waiting a pleasure

## Usage

```javascript
import Placeholder from '@hixme-ui/placeholder'

<Placeholder
  margin='0 20px 0 0'
  padding='20px'
  height='10px'
  width='100%'
/>

```
npm package: @hixme-ui/price
Description: hixme-ui Price component
Author: hixme.com
Latest version: 2.2.0

# Price

## Installation

```bash
npm i --save @hixme-ui/price
```
[View it live](https://hixme.github.io/hixme-ui/price)

## Usage

```js
import Price from '@hixme-ui/price'

<Price value={46.93} />
<Price value={-46.93} />
<Price value={1803.93} includeCommas />
<Price primary value={46.93} label='Hixme UI' />
```

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| value           | string      | N/A            |
| label           | string      | N/A            | 
| includeCommas   | boolean     | false          | 

Additionally, the Price component will take any color boolean from the theme.
npm package: @hixme-ui/print
Description: hixme-ui Print component
Author: hixme.com
Latest version: 2.2.0

# Print

```bash
npm i --save @hixme-ui/print
```
[View it live](https://hixme.github.io/hixme-ui/print)

## Usage

```javascript
import Print from '@hixme-ui/print'

<Print />
```

## Props

| Name            | Type        | Default        |
|-----------------|-------------|----------------|
| label           | string      | 'Print'        |
| showIcon        | bool        | true           |
| showLabel       | bool        | true           |
npm package: @hixme-ui/radio-button
Description: hixme-ui Radio Button component
Author: hixme.com
Latest version: 2.2.0

# Radio Button

```bash
npm i --save @hixme-ui/radio-button
```
[View it live](https://hixme.github.io/hixme-ui/radio-button)

## Usage

```javascript
import RadioButton from '@hixme-ui/radio-button'

<RadioButton name='gender' text='Male' />
<RadioButton name='gender' text='Female' />
```

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| name (required) | string      | N/A            |
| text            | string      | N/A            |
npm package: @hixme-ui/select
Description: hixme-ui Select component
Author: hixme.com
Latest version: 2.2.0

# Select

```bash
npm i --save @hixme-ui/select
```
[View it live](https://hixme.github.io/hixme-ui/select)

## Usage

### Using children options
```javascript
import Select from '@hixme-ui/select'

<Select>
  <option value='hello'>Hello</option>
  <option value='goodbye'>Goodbye</option>
</Select>

// Outputs
<select>
  <option value='hello'>Hello</option>
  <option value='goodbye'>Goodbye</option>
</select>
```

### Using a list to build options
```
<Select list={[{
  id: 0,
  name: 'Zero'
}]} />
// Outputs
<select>
  <option value='0'>Zero</option>
</select>
```

## Props

| Name            | Type        | Default   |
| --------------- | ----------- | --------- |
| list            | array       | undefined |
| placeholder     | string      | null      |
| loading         | bool        | false     |
npm package: @hixme-ui/separator
Description: hixme-ui Separator component
Author: hixme.com
Latest version: 2.2.0

# Separator

```bash
npm i --save @hixme-ui/separator
```
[View it live](https://hixme.github.io/hixme-ui/separator)

## Usage

```javascript
import Separator from '@hixme-ui/separator'

<Separator margin='20px 0' size='1px' />
```

## Props

| Name            | Type        | Default            |
| --------------- | ----------- | ------------------ |
| size            | string      | '2px'              |
| margin          | string      | '15px 0'           |
| padding         | string      | '0'                |
| background      | string      | colorTheme.lighter |
npm package: @hixme-ui/sidebar
Description: hixme-ui Sidebar component
Author: hixme.com
Latest version: 2.2.0

# Sidebar

```bash
npm i --save @hixme-ui/sidebar
```
[View it live](https://hixme.github.io/hixme-ui/sidebar)

## Usage

```javascript
import Sidebar from '@hixme-ui/sidebar'

<Sidebar
  open={open}
  header='Header'
  onClose={toggleSidebar}
>
  Content
</Sidebar>
```

## Default Props

| Name          | Type      | Default  |
| ------------- | --------- | -------- |
| children      | node      | N/A      |
| header        | string    | N/A      |
| onClose       | function  | N/A      |
| open          | boolean   | false    |
| sidebarWidth  | string    | '300px'  |
| style         | object    | N/A      |
| topOffset     | number    | 58       |
npm package: @hixme-ui/social-security
Description: hixme-ui social security component for consistent formatting.
Author: hixme.com
Latest version: 2.2.0

# Social Security

```bash
npm i --save @hixme-ui/social-security
```
[View it live](https://hixme.github.io/hixme-ui/social-security)

Phone extends the [@hixme/text](https://github.com/hixme/hixme-ui/tree/master/packages/text)
to provide social security number formatting


## Usage

```javascript
import SocialSecurity from '@hixme-ui/social-security'

<SocialSecurity number='123456789' />
// ouputs social security format
// <span>***-**-6789</span>

```

## SocialSecurity.format(number, { showFull = false })

SocialSecurity has a format function it uses to display, and is
accessible if needed outside of the JSX

```javascript
import SocialSecurity from '@hixme-ui/social-security'

Phone.format('123456789')
// outputs string ***-**-6789


Phone.format('123456789', { showFull: true })
// outputs string 123-45-6789
```
npm package: @hixme-ui/spinner
Description: hixme-ui Spinner component
Author: hixme.com
Latest version: 2.2.0

# Spinner

```bash
npm i --save @hixme-ui/spinner
```
[View it live](https://hixme.github.io/hixme-ui/spinner)

## Usage
Wrap with things you want to spin!

```javascript
import Spinner from '@hixme-ui/spinner'

<Spinner animate>
  <Icon cog />
</Spinner>
```

## Props

| Name            | Type        | Default        |
|-----------------|-------------|----------------|
| animate         | boolean     | false          |
| duration        | string      | '1s'           |
| ease            | boolean     | false          |
| linear          | boolean     | true           |
npm package: @hixme-ui/step
Description: hixme-ui Step component
Author: hixme.com
Latest version: 2.2.0

# Step

```bash
npm i --save @hixme-ui/step
```
[View it live](https://hixme.github.io/hixme-ui/step)

Step is a simple component used to illustrate a flow or process with steps.

## Usage

```javascript
import Step from '@hixme-ui/step'

<Step>1</Step>
<Step completed>1</Step> // shows a check mark rather than the children supplied
```

## Props

| Name             | Type        | Default        |
| ---------------- | ----------- | -------------- |
| borderWidth      | string      | '3px'          |
| children         | node        | null           |
| completed        | bool        | false          |
| display          | string      | 'inline-block' |
| openCircle       | bool        | false          |
| size             | number      | 48             |
| uncompletedColor | string      | '#677786'      |
npm package: @hixme-ui/table
Description: hixme-ui Table component
Author: hixme.com
Latest version: 2.2.0

# Table

## Installation

```bash
npm i --save @hixme-ui/table
```
[View it live](https://hixme.github.io/hixme-ui/table)

## Usage

```jsx
import Table from '@hixme-ui/table'

<Table>
  <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
    <tr>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
  </tbody>
</Table>
```

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| alignBody       | string      | ''             |
| alignHeader     | string      | ''             |
| compact         | boolean     | false          |
| overflow        | boolean     | true           |
| striped         | boolean     | false          |
| vertStriped     | boolean     | false          |
npm package: @hixme-ui/tabs
Description: hixme-ui Tabs component
Author: hixme.com
Latest version: 2.2.0

# Tabs

## Installation

```bash
npm i --save @hixme-ui/tabs
```
[View it live](https://hixme.github.io/hixme-ui/tabs)

## Usage

```js
import Tabs from '@hixme-ui/tabs'

const tabsArray = [{
  name: 'Some tab name 1',
  content: <SomeComponent {...stuff} />
},{
  name: 'Some tab name 2',
  content: <SomeOtherComponent {...stuff} />
}]

<Tabs blue id='uniqueString' list={tabsArray} initWithIndex={1} />
```

## Props
```js
tabStyles={{ blue: true, width: '200px', marginBottom: '40px' }}
```

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| id              | string      | N/A            |
| list            | array       | N/A            |
| initWithIndex   | number      | 0              |
| tabStyles       | object      | N/A            |
npm package: @hixme-ui/theme
Description: hixme-ui theme
Author: hixme.com
Latest version: 2.2.0

# Theme

```bash
npm i --save @hixme-ui/theme
```

## Theme

HUI theme colors and defaults

```javascript
import theme from '@hixme-ui/theme'

const primary = theme.colors.primary
```


## ThemeProvider

HUI theme provider, which is just an implementation of styled-components
ThemeProvider with the HUI theme as the default

```javascript
import { ThemeProvider } from '@hixme-ui/theme'

const App = ({ children }) => (
  <ThemeProvider>
    {children}
  </ThemeProvider>
)
```

### withGlobal prop

The HUI was built with some global settings, including the [normalize CSS](https://necolas.github.io/normalize.css/). These global styles are not set by default and are enabled by adding the `withGlobal` property on the ThemeProvider.

```javascript

const App = ({ children }) => (
  <ThemeProvider withGlobal>
    {children}
  </ThemeProvider>
)
```
npm package: @hixme-ui/theme-props
Description: hixme-ui theme props getters
Author: hixme.com
Latest version: 2.2.0

# Theme Props

Utility for parsing theme properties by CSS attribute name and props passed in by the component

```bash
npm i --save @hixme-ui/theme-props
```

## Theme props getters for the HUI theme

These are named exports from the theme props package. The default function uses the the base `theme.colors` object as shown above.

This container example defaults to `none` for the background, but if `white` is sent a boolean prop, it will add the blue background color from the theme. 

```js
import styled from 'styled-components'
import { getBackgroundColor } from '@hixme-ui/theme-props'

const Container = styled.div`
  background: ${(props) => getBackgroundColor(props, 'none')
`
```

- getBackgroundColor() `theme.backgroundColors`
- getBorderColor() `theme.borderColors`
- getButtonBorderRadius() `theme.buttonBorderRadius`
- getButtonFontSize() `theme.fontSizes`
- getButtonGradientColor() `theme.buttonGradientColors`
- getButtonHeight() `theme.buttonHeights`
- getButtonMinWidth() `theme.buttonMinWidths`
- getButtonTextColor() `theme.buttonTextColors`
- getFontFamily() `theme.fontFamily`
- getFontSize() `theme.fontSizes`
- getFontWeight() `theme.fontWeights`
- getOutlineButtonColor() `theme.outlineButtonColors`
- getShadow() `theme.shadows`
- getTextColor() `theme.textColors`


## getThemePropsComposer(propsName, defaultValue)

Top level function by which all other theme prop utilities are built. The `propsName` should map to a object of values on the theme.

```js
import React from 'react'
import styled from 'styled-components'
import themeProps from '@hixme-ui/theme-props'

const theme = {
  colors: {
    white: '#ffffff',
    black: '#000000',
    red: '#ff0000',
    green: '#00ff00',
    blue: '#0000ff',
  }
}
 
const ColorText = styled.span`
  color: ${props => getTextColor(props, '#000000')};
`

const App = () => (
  <ThemeProvider theme={theme}>
    <ColorText green>Hello!</ColorText>
    <ColorText blue>Hope you have a great day!</ColorText>
  </ThemeProvider>
)

```
npm package: @hixme-ui/title
Description: hixme-ui title component. Like <Text />, but bigger.
Author: hixme.com
Latest version: 2.2.0

# Title

```bash
npm i --save @hixme-ui/title
```
[View it live](https://hixme.github.io/hixme-ui/title)

Title extends the @hixme/text component properties. Defaults to
font size of 34px. Margin and padding default to 0px.


## Usage

```javascript
import Title from '@hixme-ui/title'


<Title>Big loud text!</Title>

<Title jumbo>Jumbo title for attention</Title>

// use <Text> props as usual
<Title primary>Primary color title</Title>

```

## Props

| Name            | Type        | Value    |
|-----------------|-------------|----------|
| jumbo           | bool        | 38px     |
| small           | bool        | 28px     |
| smaller         | bool        | 20px     |
| smallest        | bool        | 18px     |
| margin          | string      | 0px      |
| padding         | string      | 0px      |
npm package: @hixme-ui/toggle
Description: hixme-ui Toggle component
Author: hixme.com
Latest version: 2.2.0

# Toggle

## Installation

```bash
npm i --save @hixme-ui/toggle
```
[View it live](https://hixme.github.io/hixme-ui/toggle)

## Usage

```jsx
import Toggle from '@hixme-ui/toggle'

<Toggle
  checked={this.state.checked}
  truthyText='Ya'
  falsyText='Nah'
  onChange={e => this.handleToggle(e)}
/>
```

## Props

| Name            | Type        | Default        |
| --------------- | ----------- | -------------- |
| truthyText      | string      | 'Yes'          |
| falsyText       | string      | 'No'           |
| checked         | boolean     | undefined      |
| noLabels        | boolean     | false          |
| withIcons       | boolean     | false          |
npm package: @hixme-ui/upload-box
Description: hixme-ui UploadBox component
Author: hixme.com
Latest version: 2.2.0

# Upload Box

```bash
npm i --save @hixme-ui/upload-box
```
[View it live](https://hixme.github.io/hixme-ui/upload-box)

## Usage

```javascript
import UploadBox from '@hixme-ui/upload-box'

<UploadBox
  compact
  onDrop={doSomething}
/>
```

## Default Props

| Name          | Type      | Default  |
| ------------- | --------- | -------- |
| compact       | boolean   | false    |
| value         | string    | ''       |
| onDrop        | function  | N/A      |
npm package: @hixme/modal
Description: Hixme Modal
Author: Calvin Cieslak
Latest version: 2.8.1

# Mr. Modal

Implementation of a global modal component with Redux and the [@hixme-ui/modal](https://github.com/hixme/hixme-ui/tree/master/packages/modal) package and -- by extension -- the react-modal package for use within the Hixme ecosystem. For more information on props for use with the `MrModal` component, see the [@hixme-ui/modal README](https://github.com/hixme/hixme-ui/tree/master/packages/modal)

## Usage 
```jsx
import { MrModal } from '@hixme/modal'

<MrModal 
  dialog 
  medium
  title='All your base are belong to us' 
  confirmLabel='Get down!' 
  cancelLabel='Eh, maybe not...'
>
  {/* Modal content here */}
</MrModal>
```

After creating your modals, you will need to pass them to your `<MrModalManager />` component, located at your project's root.

```jsx
import { MrModalManager } from '@hixme/modal'

// In project root
import TestModal from '/modal/path/here'

<MrModalManager 
  appElementId='app-element-node'
  modals={{
    TEST: TestModal,
  }}
/>
```

**Important:** In the `modals` object, the key is your modal string constant and the value is your modal component itself.

Additionally, you can supply the MrModalManager with your own appElement ID. This is the ID which needs to be assigned to the element wrapping the rest of your application.

--------------------

To open the modal, you'll need to dispatch the setModal action, passing in the string constant you've defined for your modal.

```js
dispatch(setModal(YOUR_MODAL))
```

You can also pass some data to your modal as a second argument in the dispatch.

```js
dispatch(setModal(YOUR_MODAL, { myData }))
```

`myData` can then be accesed on the component props.

```jsx
const MyModalComponent = ({
  data: { myData }
}) => (
  <MrModal>
    ...
  </MrModal>
)
```

## Redux Actions

| Name               | Description                                                    |
| ------------------ | -------------------------------------------------------------- |
| setModal           | Set current modal with modal constant name                     |
| setData            | Add argument to data object                                    |
| clearModal         | Clear entire current modal store (including data and viewList) |
| addViewToList      | Add modal constant name to view list                           |
| removeViewFromList | Remove modal constant name to view list                        |

## Redux Selectors

| Name               | Description                                  |
| ------------------ | -------------------------------------------- |
| getModal           | Returns the entire modal store               |
| getCurrentView     | Returns only the current modal constant      |
| getViewList        | Returns the current viewList key             |
| hasActiveModal     | Returns if there is a currently active modal |
| getModalData       | Returns the current data object              |