open-index/open-npm huggingface dataset:
npm package: @hawiah/firebase
Description: Firebase Firestore driver for Hawiah - cloud-based NoSQL database with real-time capabilities
Latest version: 0.1.1

# @hawiah/firebase [![NPM version](https://img.shields.io/npm/v/@hawiah/firebase.svg?style=flat-square&color=informational)](https://npmjs.com/package/@hawiah/firebase)

Firebase Firestore driver for Hawiah - cloud-based NoSQL database with real-time capabilities.

## Installation

```bash
npm install @hawiah/firebase
```

## Features

- Cloud-based Firebase Firestore integration
- Real-time database capabilities
- Schema-less NoSQL storage
- Unified IDriver interface
- Automatic timestamps (_createdAt, _updatedAt)
- Full CRUD operations support

## License

MIT
npm package: @hawiah/local
Description: Local file storage drivers for JSON and YAML with atomic writes using writerx - lightweight and fast data persistence
Latest version: 0.3.8

# @hawiah/local [![NPM version](https://img.shields.io/npm/v/@hawiah/local.svg?style=flat-square&color=informational)](https://npmjs.com/package/@hawiah/local)

Local file storage drivers for JSON and YAML with atomic writes using writerx.

## Installation

```bash
npm install @hawiah/local
```

## Features

- Lightweight and fast local storage
- Atomic writes with writerx
- Support for JSON and YAML formats
- Unified IDriver interface
- Auto-save or manual persistence

## License

MIT
npm package: @hawiah/mongo
Description: MongoDB driver for Hawiah - lightweight and fast MongoDB integration with unified IDriver interface
Latest version: 0.1.2

# @hawiah/mongo [![NPM version](https://img.shields.io/npm/v/@hawiah/mongo.svg?style=flat-square&color=informational)](https://npmjs.com/package/@hawiah/mongo)

MongoDB driver for Hawiah - lightweight and fast MongoDB integration.

## Installation

```bash
npm install @hawiah/mongo
```

## Features

- Unified IDriver interface
- Full MongoDB support
- TypeScript support
- Automatic timestamps (_createdAt, _updatedAt)
- Index management
- Aggregation pipeline support

## License

MIT
npm package: @hawiah/mysql
Description: MySQL database driver with schema-less JSON storage - lightweight and fast data persistence using mysql2
Latest version: 0.2.1

# @hawiah/mysql [![NPM version](https://img.shields.io/npm/v/@hawiah/mysql.svg?style=flat-square&color=informational)](https://npmjs.com/package/@hawiah/mysql)

MySQL database driver with schema-less JSON storage using mysql2.

## Installation

```bash
npm install @hawiah/mysql
```

## Features

- MySQL database support with mysql2
- Schema-less JSON storage
- Connection pooling
- Transaction support
- Unified IDriver interface
- Automatic table creation
- Query optimization tools

## License

MIT
npm package: @hawiah/postgres
Description: PostgreSQL driver with schema-less JSONB storage - lightweight and fast data persistence for Node.js
Latest version: 0.2.1

# @hawiah/postgres [![NPM version](https://img.shields.io/npm/v/@hawiah/postgres.svg?style=flat-square&color=informational)](https://npmjs.com/package/@hawiah/postgres)

PostgreSQL driver with schema-less JSONB storage for Node.js applications.

## Installation

```bash
npm install @hawiah/postgres
```

## Features

- Schema-less data storage using PostgreSQL JSONB
- Connection pooling with node-postgres (pg)
- Support for cloud providers (Neon, Supabase, etc.)
- Transaction support
- Unified IDriver interface
- Automatic table creation and indexing
- Raw SQL query execution support

## License

MIT
npm package: @hawiah/sqlite
Description: SQLite driver for Hawiah - lightweight and fast data persistence with better-sqlite3
Latest version: 0.3.5

# @hawiah/sqlite [![NPM version](https://img.shields.io/npm/v/@hawiah/sqlite.svg?style=flat-square&color=informational)](https://npmjs.com/package/@hawiah/sqlite)

SQLite driver for Hawiah - lightweight and fast data persistence with better-sqlite3.

Now supports **Hybrid Storage**: Use it as a pure key-value NoSQL store OR define a Schema for high-performance SQL columns mixed with flexible JSON storage.

## Installation

```bash
npm install @hawiah/sqlite
```

## Usage

### 1. Default Mode (NoSQL / Schema-less)
By default, the driver behaves like a NoSQL document store. All data is stored in a single JSON blob column. This offers maximum flexibility.

```typescript
import { SQLiteDriver } from '@hawiah/sqlite';

const driver = new SQLiteDriver('./mydb.sqlite', 'users');
await driver.connect();

// Store arbitrary data
await driver.set({ name: 'Ali', age: 25, role: 'admin' });
```

### 2. Hybrid Mode (Schema / Real SQL)
**New in v0.2.x**: You can provide a schema using `setSchema(schema)`. The driver will create **Real SQL Columns** for the schema fields (improving query performance and storage efficiency) while keeping a specialized `_extras` JSON column for any extra dynamic fields.

This gives you the "Best of Both Worlds":
- **Structure & Speed** for known fields (SQL).
- **Flexibility** for unknown/runtime fields (NoSQL).

```typescript
import { SQLiteDriver } from '@hawiah/sqlite';

const driver = new SQLiteDriver('./mydb.sqlite', 'products');

// Define Schema (Optional)
// Hawiah types are mapped to SQLite types (e.g., STRING -> TEXT, NUMBER -> REAL)
driver.setSchema({
    title: { type: 'STRING' },
    price: { type: 'NUMBER' },
    inStock: { type: 'BOOLEAN' }
});

await driver.connect();

// Inserting data:
// 'title', 'price', 'inStock' go into real SQL columns.
// 'tags', 'meta' go into the '_extras' JSON column automatically.
await driver.set({ 
    title: 'Gaming Mouse', 
    price: 150, 
    inStock: true,
    tags: ['wireless', 'rgb'], // stored in _extras
    meta: { supplier: 'X' }    // stored in _extras
});

// Reading data:
// The driver automatically merges SQL columns and _extras back into a single object.
const product = await driver.getOne({ title: 'Gaming Mouse' });
console.log(product.tags); // ['wireless', 'rgb']
```

## Features

- **Fast & Reliable**: Built on `better-sqlite3` (synchronous API for max speed).
- **Hybrid Storage**: Choose between Schema-less (JSON blob) or Hybrid (SQL + JSON).
- **Adaptive**: Automatically maps Schema types to SQLite (TEXT, INTEGER, REAL, BLOB).
- **Transactions**: Full support for `beginTransaction`, `commit`, `rollback`.
- **Automatic Indexing**: Default indexes on `_createdAt` and `_updatedAt`.
- **Developer Friendly**: Simple `IDriver` interface from Hawiah Core.

## License

MIT
npm package: @hawjs/egg-swagger-doc
Description: swagger for egg
Author: yanshijie
Latest version: 2.4.3

# egg-swagger-doc

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][codecov-image]][codecov-url]
[![David deps][david-image]][david-url]
[![Known Vulnerabilities][snyk-image]][snyk-url]
[![npm download][download-image]][download-url]

[npm-image]: https://img.shields.io/npm/v/egg-swagger-doc.svg?style=flat-square
[npm-url]: https://npmjs.org/package/egg-swagger-doc
[travis-image]: https://img.shields.io/travis/eggjs/egg-swagger-doc.svg?style=flat-square
[travis-url]: https://travis-ci.org/eggjs/egg-swagger-doc
[codecov-image]: https://img.shields.io/codecov/c/github/eggjs/egg-swagger-doc.svg?style=flat-square
[codecov-url]: https://codecov.io/github/eggjs/egg-swagger-doc?branch=master
[david-image]: https://img.shields.io/david/eggjs/egg-swagger-doc.svg?style=flat-square
[david-url]: https://david-dm.org/eggjs/egg-swagger-doc
[snyk-image]: https://snyk.io/test/npm/egg-swagger-doc/badge.svg?style=flat-square
[snyk-url]: https://snyk.io/test/npm/egg-swagger-doc
[download-image]: https://img.shields.io/npm/dm/egg-swagger-doc.svg?style=flat-square
[download-url]: https://npmjs.org/package/egg-swagger-doc

这是一个关于swagger的测试版本

## 依赖说明

### 依赖的 egg 版本

egg-swagger-doc 版本 | egg 1.x
--- | ---
1.x | 😁
0.x | ❌

### 依赖的插件
<!--

如果有依赖其它插件，请在这里特别说明。如

- security
- multipart

-->

## 开启插件

```js
// config/plugin.js
exports.swaggerdoc = {
  enable: true,
  package: 'egg-swagger-doc',
};
```

## 使用场景

- Why and What: 描述为什么会有这个插件，它主要在完成一件什么事情。
尽可能描述详细。
- How: 描述这个插件是怎样使用的，具体的示例代码，甚至提供一个完整的示例，并给出链接。

## 详细配置

请到 [config/config.default.js](config/config.default.js) 查看详细配置项说明。

## 单元测试

<!-- 描述如何在单元测试中使用此插件，例如 schedule 如何触发。无则省略。-->

## 提问交流

请到 [egg issues](https://github.com/eggjs/egg/issues) 异步交流。

## License

[MIT](LICENSE)
npm package: @hawjs/eslint-config-cli
Description: eslint config
Author: hawjs
Latest version: 1.0.1

# `@hawjs/eslint-config-cli`

> @hawjs/cli-core required

## Usage

New file `.eslintrc.js` into project root path.

```javascript
module.exports = {
  // ...

  extends: ['@hawjs/eslint-config-cli'],

  // ...
};
```
npm package: @hawk-protocol/eslint-config-hawk
Description: Eslint config for Hawk
Author: RabbitDoge
Latest version: 1.0.0

# eslint-config-hawk

**This repository is not used anymore. See the [Hawk toolkit](https://github.com/hawk-protocol/hawk-toolkit) instead**

Hawk Eslint config with:

- Airbnb config
- Typescript
- Prettier

## Usage

```
npx install-peerdeps --dev eslint-config-hawk
```

Add `"extends": "eslint-config-hawk"` to your eslint config file.
npm package: @hawk-protocol/hawk-uikit
Description: Set of UI components for hawk projects
Latest version: 1.1.3

# 🥞 Hawk UIkit

**This repository is not used anymore. See the [https://github.com/hawkswap/hawk-toolkit](Hawk toolkit) instead**

[![Version](https://img.shields.io/npm/v/@hawkswap-libs/uikit)](https://www.npmjs.com/package/@hawkswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@hawkswap-libs/uikit)](https://www.npmjs.com/package/@hawkswap-libs/uikit)

Hawk UIkit is a set of React components and hooks used to build pages on Hawk's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @hawkswap-libs/uikit`

## Setup

### Theme

Before using Hawk UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@hawkswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@hawkswap-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://hawkswap.github.io/hawk-uikit/)
npm package: @hawk-protocol/sdk
Description: 🛠 An SDK for building applications on top of hawkswap.
Latest version: 1.2.2

# Hawkswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/hawkswap/hawkswap-sdk/workflows/CI/badge.svg)](https://github.com/hawkswap/hawkswap-sdk)
[![npm version](https://img.shields.io/npm/v/@hawkswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@hawkswap-lib/sdk/v/latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/hawkswap/hawkswap-sdk.git
```

Move into the hawkswap-sdk working directory

```sh
cd hawkswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @hawk-ui/border-picker
Description: hawk-ui: Border Picker Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/border-picker --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/border-picker/dist/index.min.css
```


## Usage


#### Border Picker:
[Demo](https://hawk.oncrypt.co/#!/BorderPicker/1)
```js static
import BorderPicker from '@hawk-ui/border-picker';
```
```js
initialState = {
  selectedBorder: 'solid',
};

<BorderPicker
  type={state.selectedBorder}
  onSelect={(event) => {
    setState({
      selectedBorder: event,
    });
  }}
/>
```
npm package: @hawk-ui/bottom-drawer
Description: hawk-ui: Basic Bottom Drawer Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/bottom-drawer --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/bottom-drawer/dist/index.min.css
```


## Usage


#### With Close Button and background dark
[Demo](https://hawk.oncrypt.co/#!/BottomDrawer/1)
```js static
import BottomDrawer from '@hawk-ui/bottom-drawer';
```
```js
initialState = {
  isLeftOpen: false,
};

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <BottomDrawer
      isOpen={state.isLeftOpen}
      hideCloseIcon
      type="dark"
      title="Modal Title"
      position="left"
      onKeyDown={(event) => {
        setState({ isLeftOpen: false });
      }}
      onClose={() => {
        setState({ isLeftOpen: false });
      }}
    >
      <span>Bottom Drawer Body</span>
    </BottomDrawer>

    <button
      type="button"
      className="hawk-button"
      onClick={() => {
        setState({ isLeftOpen: !state.isLeftOpen });
      }}
    >
      Click here
    </button>
  </div>
</div>
```


#### Without Close Button and background light
[Demo](https://hawk.oncrypt.co/#!/BottomDrawer/3)
```js static
import BottomDrawer from '@hawk-ui/bottom-drawer';
```
```js
initialState = {
  isLeftOpen: false,
  isRightOpen: false,
};

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <BottomDrawer
      isOpen={state.isLeftOpen}
      type="light"
      title="Modal Title"
      position="left"
      onKeyDown={(event) => {
        setState({ isLeftOpen: false });
      }}
      onClose={() => {
        setState({ isLeftOpen: false });
      }}
    >
      <span>Bottom Drawer Body</span>
    </BottomDrawer>
    <button
      type="button"
      className="hawk-button"
      onClick={() => {
        setState({ isLeftOpen: !state.isLeftOpen });
      }}
    >
      Click here
    </button>
  </div>
</div>
```
npm package: @hawk-ui/breadcrumb
Description: hawk-ui: Basic Breadcrumb Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/breadcrumb --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/breadcrumb/dist/index.min.css
```


## Usage


#### Breadcrumb:
[Demo](https://hawk.oncrypt.co/#!/Breadcrumb/1)
```js static
import Breadcrumb from '@hawk-ui/breadcrumb';
```
```js
initialState = {
  navbar: [
    { key: 1, label: 'home', link: '#', active: false },
  ],
};
<Breadcrumb
  panes={state.navbar}
/>
```


#### Breadcrumb:
[Demo](https://hawk.oncrypt.co/#!/Breadcrumb/2)
```js static
import Breadcrumb from '@hawk-ui/breadcrumb';
```
```js
initialState = {
  navbar: [
    { key: 1, label: 'home', link: '#', active: true },
    { key: 1, label: 'library', link: '#', active: false },
  ],
};
<Breadcrumb
  panes={state.navbar}
/>
```


#### Breadcrumb:
[Demo](https://hawk.oncrypt.co/#!/Breadcrumb/3)
```js static
import Breadcrumb from '@hawk-ui/breadcrumb';
```
```js
initialState = {
  navbar: [
    { key: 1, label: 'home', link: '#', active: true },
    { key: 1, label: 'library', link: '#', active: true },
    { key: 1, label: 'data', link: '#', active: false },
  ],
};
<Breadcrumb
  panes={state.navbar}
/>
```
npm package: @hawk-ui/button
Description: hawk-ui: Basic Button Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/button --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/button/dist/index.min.css
```


## Usage


#### Simple Button:
[Demo](https://hawk.oncrypt.co/#!/Button/1)
```js static
import Button from '@hawk-ui/button';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Button
    type="button"
    variant="text"
    htmlAttributes={{
      id: 'button',
    }}
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Text Button</span>
  </Button>

  <Button
    type="button"
    variant="outlined"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Outlined Button</span>
  </Button>

  <Button
    type="button"
    variant="contained"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Contained Button</span>
  </Button>
</div>
```


#### Disabled Button:
[Demo](https://hawk.oncrypt.co/#!/Button/3)
```js static
import Button from '@hawk-ui/button';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Button
    type="button"
    variant="text"
    isDisabled
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Text Button</span>
  </Button>

  <Button
    type="button"
    variant="outlined"
    isDisabled
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Outlined Button</span>
  </Button>

  <Button
    type="button"
    variant="contained"
    isDisabled
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Contained Button</span>
  </Button>
</div>
```


#### Icon Button:
[Demo](https://hawk.oncrypt.co/#!/Button/5)
```js static
import Button from '@hawk-ui/button';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Button
    type="button"
    variant="text"
    icon="fa fa-star"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Text Button</span>
  </Button>
  <Button
    type="button"
    variant="outlined"
    icon="fa fa-star"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Outlined Button</span>
  </Button>
  <Button
    type="button"
    variant="contained"
    icon="fa fa-star"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Contained Button</span>
  </Button>
</div>
```
npm package: @hawk-ui/button-group
Description: hawk-ui: Button Group Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/button-group --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/button-group/dist/index.min.css
```


## Usage

#### Text Button:
[Demo](https://hawk.oncrypt.co/#!/ButtonGroup/1)
```js static
import ButtonGroup from '@hawk-ui/button-group';
```
```js
initialState = {
  grouped: [
    { key: 1, title: 'First' },
    { key: 2, title: 'Second' },
    { key: 3, title: 'Third' },
  ],
  value: 1,
};

<ButtonGroup
  variant="text"
  panes={state.grouped}
  value={state.value}
  onClick={(event) => {
    setState({
      value: event.key,
    });
  }}
/>
```


#### Outlined Button:
[Demo](https://hawk.oncrypt.co/#!/ButtonGroup/3)
```js static
import ButtonGroup from '@hawk-ui/button-group';
```
```js
initialState = {
  grouped: [
    { key: 1, title: 'First' },
    { key: 2, title: 'Second' },
    { key: 3, title: 'Third' },
  ],
  value: 1,
};

<ButtonGroup
  variant="outlined"
  panes={state.grouped}
  value={state.value}
  onClick={(event) => {
    setState({
      value: event.key,
    });
  }}
/>
```

#### Contained Button:
[Demo](https://hawk.oncrypt.co/#!/ButtonGroup/5)
```js static
import ButtonGroup from '@hawk-ui/button-group';
```
```js
initialState = {
  grouped: [
    { key: 1, title: 'First' },
    { key: 2, title: 'Second' },
    { key: 3, title: 'Third' },
  ],
  value: 1,
};

<ButtonGroup
  panes={state.grouped}
  value={state.value}
  onClick={(event) => {
    setState({
      value: event.key,
    });
  }}
/>
```
npm package: @hawk-ui/card
Description: hawk-ui: Basic Card Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/card --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/card/dist/index.min.css
```


## Usage


#### Box Card
[Demo](https://hawk.oncrypt.co/#!/Card/1)
```js static
import Card from '@hawk-ui/card';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <div>Without Hoverable</div>
    <br />
    <Card />
  </div>

  <div>
    <div>With Hoverable</div>
    <br />
    <Card
      isHoverable
    />
  </div>

  <div>
    <div>With Clickable</div>
    <br />
    <Card
      isClickable
      onClick={() => { alert('Card Clicked'); }}
    />
  </div>

  <div>
    <div>With Disabled</div>
    <br />
    <Card
      isDisabled
      onClick={() => { alert('Card Clicked'); }}
    />
  </div>
</div>
```


#### Circle Card
[Demo](https://hawk.oncrypt.co/#!/Card/3)
```js static
import Card from '@hawk-ui/card';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <div>Without Hoverable</div>
    <br />
    <Card
      layout="circle"
    />
  </div>

  <div>
    <div>With Hoverable</div>
    <br />
    <Card
      layout="circle"
      isHoverable
    />
  </div>
  
  <div>
    <div>With Clickable</div>
    <br />
    <Card
      layout="circle"
      isClickable
      onClick={() => { alert('Card Clicked'); }}
    />
  </div>
</div>
```
npm package: @hawk-ui/checkbox
Description: hawk-ui: Basic Checkbox Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/checkbox --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/checkbox/dist/index.min.css
```


## Usage


#### Without Required
[Demo](https://hawk.oncrypt.co/#!/Checkbox/1)
```js static
import Checkbox from '@hawk-ui/checkbox';
```
```js
initialState = {
  fruits: [
    { key: 1, label: 'apple', value: 'apple' },
    { key: 1, label: 'mango', value: 'mango' },
    { key: 1, label: 'banana', value: 'banana' },
    { key: 1, label: 'orange', value: 'orange' },
    { key: 1, label: 'pineapple', value: 'pineapple' },
  ],
  selectedItem: [],
};

<Checkbox
  options={state.fruits}
  selectedItem={state.selectedItem}
  onChange={(event) => {
    if (state.selectedItem.indexOf(event.target.value) !== -1) {
      let fruits = state.selectedItem.filter(function(item) {
        return item !== event.target.value;
      });
      setState({
        selectedItem: fruits,
      });
    } else {
      setState({
        selectedItem: [...state.selectedItem, event.target.value],
      });
    }
  }}
/>
```


#### With Required
[Demo](https://hawk.oncrypt.co/#!/Checkbox/3)
```js static
import Checkbox from '@hawk-ui/checkbox';
```
```js
initialState = {
  fruits: [
    { key: 1, label: 'apple', value: 'apple' },
    { key: 1, label: 'mango', value: 'mango' },
    { key: 1, label: 'banana', value: 'banana' },
    { key: 1, label: 'orange', value: 'orange' },
    { key: 1, label: 'pineapple', value: 'pineapple' },
  ],
  selectedItem: [],
};

<Checkbox
  label="Select Fruit"
  options={state.fruits}
  selectedItem={state.selectedItem}
  onChange={(event) => {
    if (state.selectedItem.indexOf(event.target.value) !== -1) {
      let fruits = state.selectedItem.filter(function(item) {
        return item !== event.target.value;
      });
      setState({
        selectedItem: fruits,
      });
    } else {
      setState({
        selectedItem: [...state.selectedItem, event.target.value],
      });
    }
  }}
  isRequired
  isError
  errorMessage="This field is a compulsory field."
/>
```


#### Without object
[Demo](https://hawk.oncrypt.co/#!/Checkbox/5)
```js static
import Checkbox from '@hawk-ui/checkbox';
```
```js
initialState = {
  isChecked: false,
};

<Checkbox
  label="Select Checkbox"
  title="Title"
  value="title"
  isChecked={state.isChecked}
  onChange={(event) => {
    setState({
      isChecked: !state.isChecked,
    });
  }}
  htmlAttributes={{
    disabled: true,
  }}
/>
```
npm package: @hawk-ui/collapse
Description: hawk-ui: Basic Collapse Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/collapse --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/collapse/dist/index.min.css
```


## Usage


#### Collapse
[Demo](https://hawk.oncrypt.co/#!/Collapse/1)
```js static
import Collapse from '@hawk-ui/collapse';
```
```js
const headers = [
  <h4>How do I find my Windows Product key?</h4>,
  <h4>I’ve downloaded an ISO file, now what?</h4>,
  <h4>What’s the difference between 32-bit and 64-bit versions of Windows?</h4>,
]
const panes = [
  <p>The product key is located inside the product packaging, on the receipt or confirmation page for a digital purchase or in a confirmation e-mail that shows you purchased Windows. If you purchased a digital copy from Microsoft Store, you can locate your product key in your Account under Digital Content.</p>,
  <p>You can use the ISO file to create bootable media for installation or recovery. You can also install Windows on your current device by opening the ISO file, selecting the Setup and following the instructions.</p>,
  <p>The terms 32-bit and 64-bit refer to the way a computer’s processor (also called a CPU) handles information. The 64-bit version of Windows handles large amounts of random access memory (RAM) more effectively than a 32-bit system. Not all devices can run the 64-bit versions of Windows.</p>,
];

<Collapse
  headers={headers}
  panes={panes}
/>
```
npm package: @hawk-ui/color-picker
Description: hawk-ui: Basic Color Picker Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/color-picker --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/color-picker/dist/index.min.css
```


## Usage


#### With Hex Code
[Demo](https://hawk.oncrypt.co/#!/ColorPicker/1)
```js static
import ColorPicker from '@hawk-ui/color-picker';
```
```js
<ColorPicker
  defaultColor="#f18ca6"
  onSave={(event) => { console.log('onSave', event); }}
/>
```


### With Background
[Demo](https://hawk.oncrypt.co/#!/ColorPicker/3)
```js static
import ColorPicker from '@hawk-ui/color-picker';
```
```js
<ColorPicker
  defaultColor="f18ca6"
  showHexCode={false}
  onSave={(event) => { console.log('onSave', event); }}
/>
```


### With Text
[Demo](https://hawk.oncrypt.co/#!/ColorPicker/5)
```js static
import ColorPicker from '@hawk-ui/color-picker';
```
```js
<ColorPicker
  defaultColor="f18ca6"
  showHexCode={false}
  isText
  title="A"
  onSave={(event) => { console.log('onSave', event); }}
/>
```


### With Icon
[Demo](https://hawk.oncrypt.co/#!/ColorPicker/7)
```js static
import ColorPicker from '@hawk-ui/color-picker';
```
```js
<ColorPicker
  defaultColor="f18ca6"
  showHexCode={false}
  isIcon
  title="fas fa-paint-roller"
  onSave={(event) => { console.log('onSave', event); }}
/>
```
npm package: @hawk-ui/countdown-timer
Description: hawk-ui: Countdown Timer Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/countdown-timer --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/countdown-timer/dist/index.min.css
```


## Usage


#### Password Strength
[Demo](https://hawk.oncrypt.co/#!/CountdownTimer/1)
```js static
import CountdownTimer from '@hawk-ui/countdown-timer';
```
```js
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <div>Without Circular</div>
    <div style={{ marginTop: '20px' }}>
      <CountdownTimer
        countdown={20}
        id="countdown-number-1"
      />
    </div>
  </div>
  <div>
    <div>With Circular</div>
    <div style={{ marginTop: '20px' }}>
      <CountdownTimer
        variant="circular"
        countdown={20}
        id="countdown-number-2"
      />
    </div>
  </div>
</div>
```
npm package: @hawk-ui/date-picker
Description: hawk-ui: Basic Date Picker Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/date-picker --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/date-picker/dist/index.min.css
```


## Usage


#### Single Date Selector
[Demo](https://hawk.oncrypt.co/#!/DatePicker/1)
```js static
import DatePicker from '@hawk-ui/date-picker';
```
```js
const moment = require('moment');
initialState = {
  selectedDate: moment('2020-07-24T06:30:00.000Z'),
};

<DatePicker
  onChange={(value) => {
    setState({
      selectedDate: value,
    });
  }}
  renderInput={() => (
    !state.selectedDate ? <span>Start Date</span> : state.selectedDate
  )}
  value={{
    startMoment: state.selectedDate,
  }}
/>
```


#### With Placeholder
[Demo](https://hawk.oncrypt.co/#!/DatePicker/2)
```js static
import DatePicker from '@hawk-ui/date-picker';
```
```js
const moment = require('moment');
initialState = {
  selectedDate: null,
};

<DatePicker
  onChange={(value) => {
    setState({
      selectedDate: value,
    });
  }}
  renderInput={() =>
    !state.selectedDate
      ? 'Select Date'
      : moment(state.selectedDate).format('DD MMM YYYY')
  }
  value={{
    startMoment: state.selectedDate,
  }}
/>
```


#### Range Date Selector
[Demo](https://hawk.oncrypt.co/#!/DatePicker/3)
```js static
import DatePicker from '@hawk-ui/date-picker';
```
```js
const moment = require('moment');
initialState = {
  startDate: null,
  endDate: null,
};

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div style={{ width: '100%', marginRight: '10px' }}>
    <DatePicker
      onChange={(value) => {
        const updatedEndDate =
          !state.endDate || moment(state.endDate).isBefore(moment(value), 'days')
            ? value
            : null;

        setState({
          startDate: value,
          ...(updatedEndDate ? { endDate: updatedEndDate } : {}),
        });
      }}
      isDayBlocked={(day) => (day.isBefore(moment(), 'days'))}
      renderInput={() =>
        !state.startDate
          ? 'Start Date'
          : moment(state.startDate).format('DD MMM YYYY')
      }
      value={{
        startMoment: state.startDate,
      }}
    />
  </div>

  <div style={{ width: '100%', marginLeft: '10px' }}>
    <DatePicker
      onChange={(value) => {
        setState({
          endDate: value,
        });
      }}
      isDayBlocked={(day) =>
        day.isBefore(state.startDate ? moment(state.startDate) : moment(), 'day')
      }
      renderInput={() =>
        !state.endDate
          ? 'End Date'
          : moment(state.endDate).format('DD MMM YYYY')
      }
      value={{
        startMoment: state.endDate,
      }}
    />
  </div>
</div>
```
npm package: @hawk-ui/divider
Description: hawk-ui: Basic Divider Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/divider --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/divider/dist/index.min.css
```


## Usage


#### Vertical divider:
[Demo](https://hawk.oncrypt.co/#!/Divider/1)
```js static
import Divider from '@hawk-ui/divider';
```
```js
<Divider>OR</Divider>
```


#### Horizontal divider:
[Demo](https://hawk.oncrypt.co/#!/Divider/2)
```js static
import Divider from '@hawk-ui/divider';
```
```js
<Divider
  variant="horizontal"
>
  OR
</Divider>
```
npm package: @hawk-ui/dropdown
Description: hawk-ui: Basic Dropdown Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/dropdown --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/dropdown/dist/index.min.css
```


## Usage


#### Dropdown Button Click
[Demo](https://hawk.oncrypt.co/#!/Dropdown/1)
```js static
import Dropdown from '@hawk-ui/dropdown';
```
```js
const suggestions = [
  {title: 'Action', value: 'action', isActive: true},
  {title: 'Another action', value: 'another action', isActive: false},
  {title: 'Something else here', value: 'something else here', isActive: true},
];

<Dropdown
  title="Dropdown"
  isIcon
  isMultiClickable
  suggestions={suggestions}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
/>
```


#### Dropdown With Children
[Demo](https://hawk.oncrypt.co/#!/Dropdown/1)
```js static
import Dropdown from '@hawk-ui/dropdown';
```
```js
initialState = {
  shouldDropdownShow: false,
};
const suggestions = [
  {title: 'Action', value: 'action', isActive: true},
  {title: 'Another action', value: 'another action', isActive: false},
  {title: 'Something else here', value: 'something else here', isActive: true},
];

<Dropdown
  title="Dropdown"
  isIcon
  suggestions={suggestions}
  shouldDropdownShow={state.shouldDropdownShow}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
  children={(
    <React.Fragment>
      <span
        onClick={() => {
          setState({
            shouldDropdownShow: false,
          });
        }}
      >
        Children Action
      </span>
    </React.Fragment>
  )}
/>
```


#### Dropdown Link
[Demo](https://hawk.oncrypt.co/#!/Dropdown/3)
```js static
import Dropdown from '@hawk-ui/dropdown';
```
```js
const suggestions = [
  {title: 'Action', value: 'action', link: '/#', isActive: true},
  {title: 'Another action', value: 'another action', link: '/#', isActive: false},
  {title: 'Something else here', value: 'something else here', link: '/#', isActive: true},
];

<Dropdown
  title="Dropdown"
  isIcon
  suggestions={suggestions}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
/>
```


#### Dropdown Button Hover
[Demo](https://hawk.oncrypt.co/#!/Dropdown/3)
```js static
import Dropdown from '@hawk-ui/dropdown';
```
```js
const suggestions = [
  {title: 'Action', value: 'action'},
  {title: 'Another action', value: 'another action'},
  {title: 'Something else here', value: 'something else here'},
];

<Dropdown
  title="Dropdown"
  isIcon
  isHoverable
  suggestions={suggestions}
  renderSuggestion={(suggestion) => suggestion.title}
  selectValue={(meta, item) => { console.log(meta, item); }}
/>
```
npm package: @hawk-ui/file-upload
Description: hawk-ui: File Upload Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/file-upload --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/file-upload/dist/index.min.css
```


## Usage


#### File Upload With Button:
[Demo](https://hawk.oncrypt.co/#!/FileUpload/1)
```js static
import FileUpload from '@hawk-ui/file-upload';
```
```js
<FileUpload
  btnTitle="Browse"
  accept="images/*"
  isMultiple
  onUpload={(file) => {
    console.log('file', file);
  }}
/>
```


#### File Upload With Icon
[Demo](https://hawk.oncrypt.co/#!/FileUpload/3)
```js static
import FileUpload from '@hawk-ui/file-upload';
```
```js
<FileUpload
  btnIcon="fas fa-upload"
  onUpload={(file) => {
    console.log('file', file);
  }}
/>
```


#### File Upload With Describable
[Demo](https://hawk.oncrypt.co/#!/FileUpload/5)
```js static
import FileUpload from '@hawk-ui/file-upload';
```
```js
<FileUpload
  btnTitle="Browse"
  label="File Upload"
  description="Supported file types: (*.png, *.jpg, *.jpeg). View format instructions."
  placeholder="Please select a file to Upload"
  variant="input"
  onUpload={(file) => {
    console.log('file', file);
  }}
/>
```


#### On Drag and Drop
[Demo](https://hawk.oncrypt.co/#!/FileUpload/7)
```js static
import FileUpload from '@hawk-ui/file-upload';
```
```js
initialState = {
  fileNames: [],
};

<FileUpload
  content={(
    <>
      <div style={{ fontSize: '16px', fontWeight: '500', color: '#425a70' }}>Drag and Drop Image Here</div>
      <div style={{ fontSize: '12px', color: '#66788a', marginTop: '6px' }}>Supported file types: (*.png, *.jpg, *.jpeg). View format instructions.</div>
    </>
  )}
  title=""
  description=""
  variant="draggable"
  isLoading={false}
  onUpload={(files) => {
    console.log('files', files);
  }}
/>
```
npm package: @hawk-ui/image
Description: hawk-ui: Basic Image Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/image --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/image/dist/index.min.css
```


## Usage


#### Image
[Demo](https://hawk.oncrypt.co/#!/Image/1)
```js static
import Image from '@hawk-ui/image';
```
```js
<div style={{ width: '200px' }}>
  <Image
    src={null}
    fallbackSrc="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
    alt="google image"
    role="show image"
    title="google"
  />
</div>
```
npm package: @hawk-ui/increment-decrement
Description: hawk-ui: Increment Decrement Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/increment-decrement --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/increment-decrement/dist/index.min.css
```


## Usage


#### Increment Decrement:
[Demo](https://hawk.oncrypt.co/#!/IncrementDecrement/1)
```js static
import IncrementDecrement from '@hawk-ui/increment-decrement';
```
```js
<IncrementDecrement
  min={0}
  max={10}
  onClick={(e) => {
    console.log('value', e);
  }}
/>
```
npm package: @hawk-ui/input
Description: hawk-ui: Basic Input Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/input --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/input/dist/index.min.css
```


## Usage


#### Without Label and Without Required:
[Demo](https://hawk.oncrypt.co/#!/Input/1)
```js static
import Input from '@hawk-ui/input';
```
```js
initialState = {
  value: '',
};

<Input
  type="text"
  value={state.value}
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Username"
  description="This is user input"
/>
```


#### With Copy
[Demo](https://hawk.oncrypt.co/#!/Input/3)
```js static
import Input from '@hawk-ui/input';
```
```js
initialState = {
  value: '',
};

<Input
  type="text"
  value={state.value}
  id="copy"
  isCopyable
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Username"
/>
```


#### With Password Visible
[Demo](https://hawk.oncrypt.co/#!/Input/5)
```js static
import Input from '@hawk-ui/input';
```
```js
initialState = {
  value: '',
};

<Input
  type="password"
  value={state.value}
  isPasswordVisible
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Username"
/>
```


#### With Label and With Required
[Demo](https://hawk.oncrypt.co/#!/Input/7)
```js static
import Input from '@hawk-ui/input';
```
```js
initialState = {
  value: '',
};

<Input
  type="text"
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Username"
  label="Username"
  isRequired
  isError
  errorMessage="This field is a compulsory field."
/>
```


#### Textarea With Label
[Demo](https://hawk.oncrypt.co/#!/Input/9)
```js static
import Input from '@hawk-ui/input';
```
```js
initialState = {
  value: '',
};

<Input
  type="text"
  isTextarea
  htmlAttributes={{
    rows: '3',
    cols: '30',
  }}
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  onEnter={(value) => {
    alert(value);
  }}
  placeholder="Enter Address"
  label="Address"
/>
```
npm package: @hawk-ui/input-group
Description: hawk-ui: Input Group Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/input-group --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/input-group/dist/index.min.css
```


## Usage


#### Addon Left Placement
[Demo](https://hawk.oncrypt.co/#!/InputGroup/1)
```js static
import InputGroup from '@hawk-ui/input-group';
```
```js
initialState = {
  value: 'Hello World',
};

<InputGroup
  addon="Text"
  addonPlacement="left"
  type="text"
  value={state.value}
  placeholder="Please enter value"
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
  label="Username"
  description="This is a input group field"
/>
```


#### Addon Right Placement
[Demo](https://hawk.oncrypt.co/#!/InputGroup/3)
```js static
import InputGroup from '@hawk-ui/input-group';
```
```js
<InputGroup
  addon="0.00"
  addonPlacement="right"
/>
```


#### Disabled
[Demo](https://hawk.oncrypt.co/#!/InputGroup/5)
```js
initialState = {
  value: 'Hello World',
};

<InputGroup
  addon="Text"
  addonPlacement="left"
  type="text"
  value={state.value}
  isDisabled
  placeholder="Please enter value"
  onChange={(event) => {
    setState({
      value: event.target.value,
    });
  }}
/>
```


#### Addon Medium Placement
[Demo](https://hawk.oncrypt.co/#!/InputGroup/7)
```js static
import InputGroup from '@hawk-ui/input-group';
```
```js
<InputGroup
  addon="Text"
  addonSize="medium"
/>
```


#### Addon Large Placement
[Demo](https://hawk.oncrypt.co/#!/InputGroup/9)
```js static
import InputGroup from '@hawk-ui/input-group';
```
```js
<InputGroup
  addon="Text"
  addonSize="large"
/>
```


#### Addon Icon
[Demo](https://hawk.oncrypt.co/#!/InputGroup/11)
```js static
import InputGroup from '@hawk-ui/input-group';
```
```js
<InputGroup
  addon="fa fa-at"
  isAddonIcon
/>
```


#### Addon Element
[Demo](https://hawk.oncrypt.co/#!/InputGroup/13)
```js static
import InputGroup from '@hawk-ui/input-group';
```
```js
initialState = {
  fruits: [
    { key: 1, label: '', value: '1' },
  ],
};

<InputGroup
  addon={
    <Checkbox
      options={state.fruits}
    />
  }
/>
```
npm package: @hawk-ui/json-pretty
Description: hawk-ui: JSON Pretty Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/json-pretty --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/json-pretty/dist/index.min.css
```


## Usage


#### Theme: Light
[Demo](https://hawk.oncrypt.co/#!/JsonPretty/1)
```js static
import JsonPretty from '@hawk-ui/json-pretty';
```
```js
<JsonPretty
  data={[{ name: 'Earth', order: 3, stats: { life: true, mass: 5.9736 * Math.pow(10, 24) } }, { name: 'Saturn', order: 6, stats: { life: null, mass: 568.46 * Math.pow(10, 24) } }]}
/>
```


#### Theme: Dark
[Demo](https://hawk.oncrypt.co/#!/JsonPretty/3)
```js static
import JsonPretty from '@hawk-ui/json-pretty';
```
```js
<JsonPretty
  data={[{ name: 'Earth', order: 3, stats: { life: true, mass: 5.9736 * Math.pow(10, 24) } }, { name: 'Saturn', order: 6, stats: { life: null, mass: 568.46 * Math.pow(10, 24) } }]}
  theme="dark"
/>
```
npm package: @hawk-ui/label
Description: hawk-ui: Basic Label Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/label --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/label/dist/index.min.css
```


## Usage


#### Without Required
[Demo](https://hawk.oncrypt.co/#!/Label/1)
```js static
import Label from '@hawk-ui/label';
```
```js
<Label
  title="Label"
/>
```


#### With Required
[Demo](https://hawk.oncrypt.co/#!/Label/3)
```js static
import Label from '@hawk-ui/label';
```
```js
<Label
  title="Label"
  isRequired
/>
```


#### With Left icon
[Demo](https://hawk.oncrypt.co/#!/Label/5)
```js static
import Label from '@hawk-ui/label';
```
```js
<Label
  icon="fa fa-copy"
  title="Label"
/>
```


#### With Right icon
[Demo](https://hawk.oncrypt.co/#!/Label/7)
```js static
import Label from '@hawk-ui/label';
```
```js
<Label
  icon="fa fa-copy"
  iconPlacement="right"
  title="Label"
  isRequired
/>
```
npm package: @hawk-ui/loader
Description: hawk-ui: Basic Loader Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/loader --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/loader/dist/index.min.css
```


## Usage


#### Jelly Loader
[Demo](https://hawk.oncrypt.co/#!/Loader/1)
```js static
import Loader from '@hawk-ui/loader';
```
```js
<Loader
  variant="jelly"
/>
```


#### Spinner Loader
[Demo](https://hawk.oncrypt.co/#!/Loader/3)
```js static
import Loader from '@hawk-ui/loader';
```
```js
<Loader />
```


#### Wheel Loader
[Demo](https://hawk.oncrypt.co/#!/Loader/3)
```js static
import Loader from '@hawk-ui/loader';
```
```js
<Loader
  variant="wheel"
/>
```
npm package: @hawk-ui/magnifier
Description: hawk-ui: Basic Magnifier Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/magnifier --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/magnifier/dist/index.min.css
```


## Usage


#### Magnifier
[Demo](https://hawk.oncrypt.co/#!/Magnifier/1)
```js static
import Magnifier from '@hawk-ui/magnifier';
```
```js
<Magnifier>
  <div style={{ height: '200px', width: '200px' }}>
    <img
      src="https://www.w3schools.com/howto/img_girl.jpg"
      style={{
        height: '100%',
        width: '100%',
        objectFit: 'cover',
      }}
      id="imageMagnify"
    />
  </div>
</Magnifier>
```
npm package: @hawk-ui/modal
Description: hawk-ui: Basic Modal Component
Author: Saurabh Gaur
Latest version: 4.5.3

## Installation


#### To install a component run
`$ npm install @hawk-ui/modal --save`


#### Please import CSS styles via
```scss noeditor
@import '/path__to__node_modules/@hawk-ui/modal/dist/index.min.css
```


## Usage


#### With Close Button and background dark
[Demo](https://hawk.oncrypt.co/#!/Modal/1)
```js static
import Modal from '@hawk-ui/modal';
```
```js
initialState = {
  isOpen: false,
};

<div>
  <Modal
    isOpen={state.isOpen}
    bgScroll={false}
    hideCloseIcon
    type="dark"
    title="Modal Title"
    position="center"
    onKeyDown={(event) => {
      setState({ isOpen: false });
    }}
    onClose={() => {
      setState({ isOpen: false });
    }}
  >
    <div>
      <div style={{ marginTop: '20px' }}>Modal Box</div>
    </div>
  </Modal>

  <button
    type="button"
    className="hawk-button"
    onClick={() => {
      setState({ isOpen: !state.isOpen });
    }}
  >
    Modal With Close Option
  </button>
</div>
```


#### Without Close Button and background light
[Demo](https://hawk.oncrypt.co/#!/Modal/3)
```js static
import Modal from '@hawk-ui/modal';
```
```js
initialState = {
  isOpen: false,
};

<div>
  <Modal
    isOpen={state.isOpen}
    type="light"
    position="center"
    onKeyDown={(event) => {
      setState({ isOpen: false });
    }}
    onClose={() => {
      setState({ isOpen: false });
    }}
  >
    <div>
      <div style={{ fontSize: '24px', fontWeight: '500', color: '#555555' }}>Title</div>
      <div style={{ marginTop: '20px' }}>Modal Box</div>
    </div>
  </Modal>

  <button
    type="button"
    className="hawk-button"
    onClick={() => {
      setState({ isOpen: !state.isOpen });
    }}
  >
    Modal Without Close Option
  </button>
</div>
```