open-index/open-npm huggingface dataset:
npm package: @foundation_alpha/svcli
Description: A command-line tool for string validation (IMEI, BTC, Email, Alphanumeric, etc.)
Author: Foundation Alpha
Latest version: 0.1.0

# svcli
A command-line tool for quick string validation (i.e. IMEI, BTC, Email, Alphanumeric, etc.)

## How-to Install
npm install -g svcli

## How-to Use

#### Basics
```svcli -t <type> "My string"```

Where <type> is one of the following: Email, URL, MACAddress, IP, IPRange, FQDN, Boolean, IBAN, BIC, Alpha, AlphaLocales, Alphanumeric, AlphanumericLocales, Numeric, PassportNumber, Port, Lowercase, Uppercase, Ascii, FullWidth, HalfWidth, VariableWidth, Multibyte, SemVer, SurrogatePair, Int, IMEI, Float, FloatLocales, Decimal, Hexadecimal, Octal, DivisibleBy, HexColor, RgbColor, HSL, ISRC, MD5, Hash, JWT, JSON, Empty, Length, Locale, ByteLength, UUID, MongoId, After, Before, In, CreditCard, IdentityCard, EAN, ISIN, ISBN, ISSN, MobilePhone, MobilePhoneLocales, PostalCode, PostalCodeLocales, EthereumAddress, Currency, BtcAddress, ISO8601, RFC3339, ISO31661Alpha2, ISO31661Alpha3, ISO4217, Base32, Base58, Base64, DataURI, MagnetURI, MimeType, LatLong, itelist, acklist, Whitelisted, Slug, StrongPassword, TaxID, Date, LicensePlate, VAT

#### From a file
svcli -t <type> -f myfile.txt
Every line in the file will be validated to see if it consists of a string that meets the requested type

#### From stdin
cat myfile.txt | svcli -t <type>
Every line read in from stdin will be validated to see if it consists of a string that meets the requested type

#### Example
1. ``` svcli -t Alphanumeric "Alpha1234"```  
Alpha1234	TRUE

2. ```svcli -t Alphanumeric "Alpha1234--+"```  
Alpha1234--+	FALSE
npm package: @foundationcomponentrepo/calendar-date-picker
Description: Base Calendar Date Picker component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/calendar-date-picker

> Base Calendar Date Picker component for foundation

## Props

### `availableSlots: object`

The `availableSlots` prop is used to pass the information regarding the dates available for selection

The object structure is as follows:

```
availableSlots = {
    [year: number]: {
      [month: number]: Array<number>;
    };
};
```

### `startDate?: string`

The `startDate` prop is to set a lower limit for calendar navigation. The string can be of any format that can be accepted by the `Date` constructor.

### `endDate?: string`

The `endDate` prop is to set a upper limit for calendar navigation. The string can be of any format that can be accepted by the `Date` constructor.

### `onClick: (e: any) => void`

The `onClick` can be used to pass a function to retrieve the date string of the date on which the user clicks.

### `onChange: (month: number, year: number) => void`

The `onChange` can be used to pass a function to retrieve the month and year of the current calendar being displayed. This function gets triggered everytime the user goes to the next or previous month.

## Install

```bash
npm install --save @foundationcomponentrepo/calendar-date-picker
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/container
Description: Base container component for foundation
Author: unplatforms
Latest version: 0.6.0

# @foundationcomponentrepo/container

> Base container component for foundation

[![NPM](https://img.shields.io/npm/v/@foundationcomponentrepo/container.svg)](https://www.npmjs.com/package/@foundationcomponentrepo/container) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundationcomponentrepo/container
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/date-time-picker
Description: Base date-time-picker component for foundation
Author: UnPlatforms
Latest version: 1.0.29

# @foundationcomponentrepo/data-time-picker

> Base data-time-picker component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/data-time-picker
```

## License

Copyright 2023 UnPlatforms, Inc.
npm package: @foundationcomponentrepo/eventlistingscard
Description: Base eventlistingscard component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/eventlistingscard

> Base Event Listings card component for foundation

## Props

### `title: string;`

The `title` prop corresponds to the Title of the Event

### `slots: Array<string>;`

The `slots` prop corresponds to the list of schedule slots of the Event

### `category: string;`

The `category` prop corresponds to the category (Ex: One-on-One) of the Event

### `copyLink: string;`

The `copyLink` prop corresponds to the link of the Event, which can be copied to clickboard on the click of "Copy Link"

### `disabled: boolean;`

The `disabled` prop corresponds to whether the Event is disabled or not

### `onClickEdit?: (e: any) => void;`

The `onClickEdit` prop can be used to the trigger the functionality of Edit Event option

### `onClickReplicate?: (e: any) => void;`

The `onClickRepilcate` prop can be used to the trigger the functionality of Replicate Event option

### `onClickDelete?: (e: any) => void;`

The `onClickDelete` prop can be used to the trigger the functionality of Delete Event option

### `onClickSwitch?: (e: any) => void;`

The `onClickSwitch` prop can be used to the trigger the functionality when the Event switch is toggled

## Install

```bash
npm install --save @foundationcomponentrepo/dummy
```

## Props

### eventData: dataFormat

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/footer
Description: Base footer component for foundation
Author: unplatforms
Latest version: 0.6.0

# @foundationcomponentrepo/footer

> Base footer component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/footer
```

## Props

### data:{}

````bash
dataFormat {
  LogoLink: string;
  AboutUsLink: string;
  ContactUsLink: string;
  PublisherLink: string;
}
```

The `data` prop is to pass the data required for the Footer component.


## License

MIT © [unplatforms](https://github.com/unplatforms)
````
npm package: @foundationcomponentrepo/graphs
Description: Base graphs component for foundation
Author: Unplatforms
Latest version: 0.6.0

# @foundationcomponentrepo/graphs

> Base graphs component for foundation

## Prop Types

```
interface graphData {
  label: string;
  percentage: number;
  color: string;
}

interface doubleBarData {
  label: string;
  percentages: number[];
  color: string;
  gap: number;
}

interface areaChartData {
  labels: string[];
  datasets: [
    {
      fillColor: string;
      strokeColor: string;
      pointColor: string;
      pointStrokeColor: string;
      data: number[];
    }
  ];
}

export type propsTypes = {
  data: graphData[];
  width: number;
  height: number;
  animationIn: number;
};

export type singleBar = {
  data: graphData[];
  width: number;
  height: number;
  gap: number;
  animationIn: number;
};

export type doubleBar = {
  data: doubleBarData[];
  width: number;
  gapBetweenColumns: number;
  gapBetweenBars: number;
  animationIn: number;
};

export type AreaChart = {
  width: number;
  height: number;
  data: areaChartData;
};
```

## Descriptions of Common Props

### `width: number`

`width`, prop of type number, decides width of the graph in all graphs.

### `height: number`

`height`, prop of type number, decides height of the graph in all graphs.

### `animationIn: number`

`animationIn`, prop of type number, decides how much time in seconds animation should complete in all graphs.

### `gap: number`

`gap`, prop of type number, decides gap between each bar in the single and rounded bar graph.

### `gapBetweenBars: number`

`gapBetweenBars`, prop of type number, decides gap between bars, only in double bar graph.

### `gapBetweenColumns: number`

`gapBetweenColumns`, prop of type number, decides gap between columns in double bar graph only.

## Install

```bash
npm install --save @foundationcomponentrepo/graphs
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/loaders
Description: Base loaders component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/loaders

> Base loaders component for foundation

## Props

### size : string
The `size` prop control the size of loader. size values can be xsmall, small, medium, large.

## Install

```bash
npm install --save @foundationcomponentrepo/loaders
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/modal
Description: Base Modal component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/Modal

> Base Modal component for foundation

[![NPM](https://img.shields.io/npm/v/@foundationcomponentrepo/modal.svg)](https://www.npmjs.com/package/@foundationcomponentrepo/Modal) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Props

### `isOpen: boolean`

The `isOpen` prop determines whether the modal is open/visible or not.

### `children?: JSX.Element`

The `children` prop can be used if a custom JSX element/React component is to be displayed in the modal

### `handleClose?: () => void`

The `handleClose` prop is to handle the action performed when the modal is to be closed. The `close` button on the top right corner is displayed only if this prop is passed.

### `handleNavBack?: () => void`

The `handleNavBack` prop facilitates in performing navigation actions. The `back` button on the top left corner is displayed only if this prop is passed.

### `template?: ConfirmTemplateInterface | AlertTemplateInterface | AlertInputTemplateInterface`:

The `template` prop has to be used if one of the three existing modal designs/templates is needed

> The existing modal designs/templates are
>
> `confirm-template`\
> `alert-template`\
> `alert-with-input-template`\

```
interface ConfirmTemplateInterface {
  type: string;     // 'confirm-template'
  title: string;
  label: string;
  onCancel?: () => void;
  onSave?: () => void;
};

interface AlertTemplateInterface = {
  type: string;     // 'alert-template'
  title: string;
  label: string;
  onClickNo?: () => void;
  onClickYes?: () => void;
};

interface AlertInputTemplateInterface = {
  type: string;     // 'alert-input-template'
  title: string;
  dropLabel: string;
  dropOptions: Array<{
    id: number;
    data: string;
    active: boolean;
  }>;
  textLabel: string;
  onClickNo?: () => void;
  onClickYes?: (formData: { textarea: string; option: string }) => void;
};
```

## Install

```bash
npm install --save @foundationcomponentrepo/modal
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/multi-select-field
Description: Base select-field component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/multi-select-field

> Base multi-select-field component for foundation

This is the Multi Select Dropdown component with search field; for foundation

## Props

### `options: Array<option>` (Required)

The `options` prop is to pass an array of `option` objects, each of which represent an option in the Multi Select dropdown. The interface of `option` is provided below.

```
interface option {
  id: string;
  data: string;
  active: boolean;
}
```

### `label?: string`

The `label` prop is to pass a string, which is displayed as the placeholder of the input search field within the dropdown.

### `dropdownHeight?: number`

The `dropdownHeight` prop is to pass a number, which decides the max number of options to be displayed in the dropdown list at once. If the number of total `options` exceeds `dropdownHeight`, then a scroll bar appears in the dropdown list.

### `onClick?: (e: any) => void`

The `onClick` prop is to pass a function, which can be used to capture the options selected, outside the component. This enables transfer of data from the component to the application level.

The component data, (i.e., the Selected options in this case) can be accessed as follows:
```
e.target.id       ->  Option ID
e.target.value    ->  Option Data
e.target.checked  ->  Option Active State (true if selected, else false)
```

## Install

```bash
npm install --save @foundationcomponentrepo/multi-select-field
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/numtag
Description: Base numtag component for foundation
Author: unplatforms
Latest version: 0.6.0

# @foundationcomponentrepo/Numtag

> Base Numtag component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/Numtag
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/selection-control
Description: Base selection-control component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/selection-control

> Base selection-control component for foundation

## Props

### `type : string`

The `type` prop passed to selection-control is to switch between the `checkbox` and `radio` input types.

### `id: string`

The `id` prop is to pass the `id` attribute to the `<input>` tag of the `selection-control`

### `name: string`

The `name` prop is to pass the `name` attribute to the `<input>` tag of the `selection-control`

### `value?: string`

The `value` prop is to pass the `value` attribute to the `<input>` tag of the `selection-control`

### `isSelected : boolean`

The `isSelected` prop passed is to indicate whether it is checked or unchecked.

### `required?: string`

The `required` prop is to pass the `required` attribute to the `<input>` tag of the `selection-control`

### `disabled : boolean`

The `disabled` prop is to pass the `disabled` attribute to the `<input>` tag of the `selection-control`

### `onClick: (e: any) => void`

The `onClick` prop is to pass a function which can be used to capture the checked status of the `selection-control`

## Install

```bash
npm install --save @foundationcomponentrepo/selection-control
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/switches
Description: Base switches component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/switches

> Base switches component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/switches
```

## Props

### type : string

The `type` prop is to pass the type of the switch. It is either selected or success.

### select : bool

The `select` prop is to pass the initial state of the switch.

### disabled : bool

The `disabled` prop is pass the disabled state ( true or false ) of the switch.

### onClick : func

This `onClick` prop is an optional prop used to retrive the select state of the switch.

Example:

```
const sampleFunction = (e: any) => {
    console.log(e.target.checked)   // Prints the select state of the switch
}

<Switches type="selected" onClick={sampleFunction}>
```

You can add your own function and pass it through this prop.

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/tabs
Description: Base Tabs component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/tabs

> Base Tabs component for foundation

## Props

### `TabsData: array`
The `TabsData` prop is to pass the Data in the form of a array, this data will be having the data of How many tabs and what does each tab contain in them.

### `onClick : func`
This `onClick` prop is used to go to that tab displaying the content in it you could add your own function and pass it in the props. it's not a manditory prop that you need to pass everytime. 

## Install

```bash
npm install --save @foundationcomponentrepo/tabs
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/tag
Description: Base tag component for foundation
Author: UnPlatforms
Latest version: 0.6.0

# @foundationcomponentrepo/tag

> Base tag component for foundation

## Props

### `label: string`
The `label` prop is to pass the content, that is to be displayed in the tag

### `selectable : boolean`
The `selectable` prop determines whether the tag shows a fixed label, or acts like a toggle

### `selected : boolean`
The `selected` prop controls the toggle action, i.e., whether the tag is selected or not

### `onClick: (e: any) => void`
The `onClick` prop is to pass a function which is to be triggered on the click of the tag 

## Install

```
npm install --save @foundationcomponentrepo/tag
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/tagremovable
Description: Base tagremovable component for foundation
Author: unplatforms
Latest version: 0.6.0

# @foundationcomponentrepo/tagremovable

> Base tagremovable component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/tagremovable
```

## Props

### OnClick : func

The `onClick` prop is to pass a function which is to be triggered on the click of the tag-removable.

### Text : string

The `text` prop is to pass the content, that is to be displayed in the tag-removable.

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/text-area
Description: Base text-area component for foundation
Author: UnPlatforms
Latest version: 0.5.0

# @foundationcomponentrepo/text-area

> Base text-area component for foundation

[![NPM](https://img.shields.io/npm/v/@foundationcomponentrepo/text-area.svg)](https://www.npmjs.com/package/@foundationcomponentrepo/text-area) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Props

### `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';`

The `size` prop can be used to set the size/height of the text-area component

```
for 'xs' size:
  height: 128px; (2 lines)

for 'sm' size:
  height: 152px; (4 lines)

for 'md' size:
  height: 176px; (6 lines)

for 'lg' size:
  height: 224px; (8 lines)

for 'xl' size:
  height: 272px; (10 lines)
```

### `placeholder: string;`

The `placeholder` prop can be used to set the placeholder of the text-area component

### `id: string;`

The `id` prop can be used to set the id of the text-area component

### `name: string;`

The `name` prop can be used to set the name of the text-area component

### `value: string;`

The `value` prop can be used to set the value of the text-area component. Can be used alongside the `onChange` function

### `disabled: boolean;`

The `disabled` prop can be used to set the disabled status of the text-area component

### `phase: 'default' | 'success' | 'invalid' | 'error';`

The `phase` prop can be used to set the phase of the text-area component

```
for 'default' phase:
  border-color: default;
  text-color: default;

for 'success' phase:
  border-color: default;
  text-color: green;

for 'invalid' phase:
  border-color: red;
  text-color: red;

for 'error' phase:
  border-color: red;
  text-color: default;
```

### `onChange: (e: any) => void;`

The `onChange` prop can be used to pass a function that is supposed to handle the change in the text, that is being entered into the text-area

## Install

```bash
npm install --save @foundationcomponentrepo/text-area
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/text-field
Description: Base text-field component for foundation
Author: UnPlatforms
Latest version: 0.5.0

# @foundationcomponentrepo/text-field

> Base text-field component for foundation

## Props

### `type: 'text' | 'password' | 'number' | 'email';`

The `type` prop corresponds to the type of the input/text-field

### `phase?: string`

The `phase` prop represents the different states of text-field
The phases of a text-field are:

```
default         -   Default text-field
success         -   text-field for correct/successful input
invalid         -   text-field for invalid input.
error           -   text-field for invalid input. However, the invalid status is not visible when focused.
```

### `id?: string`

The `id` prop is to set the `id` attribute to the input/text-field

### `name?: string`

The `name` prop is to set the `name` attribute to the input/text-field

### `value?: string`

The `value` prop is to set the `value` attribute to the input/text-field

### `placeholder?: string`

The `placeholder` prop is to set the `placeholder` attribute to the input/text-field

### `required?: boolean`

The `required` prop is to set the `required` attribute to the input/text-field

### `disabled?: boolean`

The `disabled` prop is to set the `disabled` attribute to the input/text-field

### `onChange?: (e: any) => void`

The `onChange` prop is to perform any action on the change of the content in text-field

## Install

```bash
npm install --save @foundationcomponentrepo/text-field
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/todo-add-section
Description: Base todo-add-section component for foundation
Author: UnPlatforms
Latest version: 1.0.29

# @foundationcomponentrepo/todo-add-section

> Base todo-add-section component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/todo-add-section
```

## License

Copyright 2023 UnPlatforms, Inc.
npm package: @foundationcomponentrepo/todo-due-date
Description: Base todo-due-date component for foundation
Author: UnPlatforms
Latest version: 1.0.29

# @foundationcomponentrepo/todo-due-date

> Base todo-due-date component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/todo-due-date
```

## License

Copyright 2023 UnPlatforms, Inc.
npm package: @foundationcomponentrepo/todo-project
Description: Base todo-project component for foundation
Author: UnPlatforms
Latest version: 1.0.29

# @foundationcomponentrepo/todo-project

> Base todo-project component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/todo-project
```

## License

Copyright 2023 UnPlatforms, Inc.
npm package: @foundationcomponentrepo/todo-task
Description: Base todo-task component for foundation
Author: UnPlatforms
Latest version: 1.0.29

# @foundationcomponentrepo/todo-task

> Base todo-task component for foundation

## Install

```bash
npm install --save @foundationcomponentrepo/todo-task
```

## License

Copyright 2023 UnPlatforms, Inc.
npm package: @foundationcomponentrepo/typography
Description: Base typography component for foundation
Author: unplatforms
Latest version: 0.5.0

# @foundationcomponentrepo/typography

> Base typography component for foundation

[![NPM](https://img.shields.io/npm/v/@foundationcomponentrepo/typography.svg)](https://www.npmjs.com/package/@foundationcomponentrepo/typography) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundationcomponentrepo/typography
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundationcomponentrepo/utils
Description: Base theme component for foundation
Author: unplatforms
Latest version: 0.5.0

# @foundationcomponentrepo/utils

> Base utils component for foundation

[![NPM](https://img.shields.io/npm/v/@foundationcomponentrepo/utils.svg)](https://www.npmjs.com/package/@foundationcomponentrepo/utils) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundationcomponentrepo/utils
```

## License

MIT © [unplatforms](https://github.com/unplatforms)
npm package: @foundations-dev/container
Description: Base container component for foundation
Author: lijoejohn
Latest version: 1.0.24

# @foundations-dev/container

> Base container component for foundation

[![NPM](https://img.shields.io/npm/v/@foundations-dev/container.svg)](https://www.npmjs.com/package/@foundations-dev/container) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundations-dev/container
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundations-dev/icon
Description: Base icon component for foundation
Author: lijoejohn
Latest version: 1.0.24

# @foundations-dev/icon

> Base icon component for foundation

[![NPM](https://img.shields.io/npm/v/@foundations-dev/icon.svg)](https://www.npmjs.com/package/@foundations-dev/icon) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundations-dev/icon
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundations-dev/input
Description: Base input component for foundation
Author: lijoejohn
Latest version: 1.0.24

# @foundations-dev/input

> Base input component for foundation

[![NPM](https://img.shields.io/npm/v/@foundations-dev/input.svg)](https://www.npmjs.com/package/@foundations-dev/input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundations-dev/input
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundations-dev/login-form
Description: Base login-form component for foundation
Author: lijoejohn
Latest version: 1.0.24

# @foundations-dev/login-form

> Base login-form component for foundation

[![NPM](https://img.shields.io/npm/v/@foundations-dev/login-form.svg)](https://www.npmjs.com/package/@foundations-dev/login-form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundations-dev/login-form
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundations-dev/overlay
Description: Base overlay component for foundation
Author: lijoejohn
Latest version: 1.0.24

# @foundations-dev/overlay

> Base overlay component for foundation

[![NPM](https://img.shields.io/npm/v/@foundations-dev/overlay.svg)](https://www.npmjs.com/package/@foundations-dev/overlay) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundations-dev/overlay
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundations-dev/theme
Description: Base theme component for foundation
Author: lijoejohn
Latest version: 1.0.24

# @foundations-dev/theme

> Base theme component for foundation

[![NPM](https://img.shields.io/npm/v/@foundations-dev/theme.svg)](https://www.npmjs.com/package/@foundations-dev/theme) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundations-dev/theme
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundations.dev/shipwright
Description: Shipwright is an abstraction-first CSS philosophy and framework to help you implement your design system effectively.
Author: Earl Man
Latest version: 1.4.0

<p align="center"><img src="img/logo.png" /></p>

<h1 align="center"> Shipwright </h1>

<p align="center"> An abstraction-first CSS philosophy and framework <br> to help you implement your design system effectively. </p>

---
### Features
* **Loosely Opinionated** - Shipwright gives you a way to do things and the freedom to change it
* **Supports your Abstractions** - Our philosophy is sort of an "abstraction for abstractions"-meaning it sets up some high-level guidelines to keep your abstractions contained, yet accessible
* **Just SASS Files** - No need to worry about unseen bloat being added to your project. No need to worry about unclear build processes, either. If you've worked with SASS, you know how everything works.
* **Modular** - Shipwright strives to keep each module useful in isolation. When it needs stuff from other files, it makes that clear.

### Installation

1. Copy the files in `src` to wherever you're keeping your SASS files.
2. To see an example, install [Parcel](https://parceljs.org/) and compile `src/index.html`
```bash
parcel src/index.html
```

### Modules
<p align="center"><img src="img/modules-diagram.png" /></p>

---

## Acknowledgements
* [README Template](https://github.com/vladocar/boilerplate-readme-template/blob/master/README-Markdown.md)

Licensed under the [MIT license](https://github.com/earlman/np-design-system/blob/System-Redesign/LICENSE).