open-index/open-npm huggingface dataset:
npm package: @mangosoft/ionic-capacitor-lotame
Description: Ionic/Capacitor Bridge Plugin for easy usage of Lotame native iOS and Android SDK
Author: MangoSoft Team
Latest version: 0.1.3

# @mangosoft/ionic-capacitor-lotame

Ionic/Capacitor Bridge Plugin for easy usage of Lotame native iOS and Android SDK

## Install

```bash
npm install @mangosoft/ionic-capacitor-lotame
npx cap sync
```

## Example

```typescript
import { MangoSoftLotame } from '@mangosoft/ionic-capacitor-lotame';

// Lotame is a singleton that must be initialized with either a single client id.
const lotameInit = await MangoSoftLotame.initialize({ clientId: <CLIENT_ID> });
console.log('Lotame initialize response: ', JSON.stringify(lotameInit));
```

Where

**CLIENT_ID** Unique Lotame Client ID.

### Send Behaviors

Behavior Data is collected through this call:

```typescript
const resultBehavior = await MangoSoftLotame.addBehavior({
    data: { value: "value", forType: "type" }
});
```
Response have this format:

* [Interfaces](#interfaces)

## API

<docgen-index>

* [`initialize(...)`](#initialize)
* [`addBehavior(...)`](#addbehavior)
* [Interfaces](#interfaces)

</docgen-index>

<docgen-api>
<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->

### initialize(...)

```typescript
initialize(options: { clientId: string; }) => Promise<IGenericResponse>
```

| Param         | Type                               |
| ------------- | ---------------------------------- |
| **`options`** | <code>{ clientId: string; }</code> |

**Returns:** <code>Promise&lt;<a href="#igenericresponse">IGenericResponse</a>&gt;</code>

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


### addBehavior(...)

```typescript
addBehavior(options: { data: any; }) => Promise<IGenericResponse>
```

| Param         | Type                        |
| ------------- | --------------------------- |
| **`options`** | <code>{ data: any; }</code> |

**Returns:** <code>Promise&lt;<a href="#igenericresponse">IGenericResponse</a>&gt;</code>

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


### Interfaces


#### IGenericResponse

| Prop          | Type                |
| ------------- | ------------------- |
| **`message`** | <code>string</code> |
| **`data`**    | <code>any</code>    |

</docgen-api>
npm package: @mangosteen/digest-stream
Description: Compute hash or HMAC using a transform stream.
Author: Paya
Latest version: 2.0.0

# digest-stream

Compute hash or HMAC using a transform stream.

# Installation

With [npm](https://www.npmjs.com/) do:

    $ npm install @mangosteen/digest-stream

# Usage

```js
import { DigestStream } from '@mangosteen/digest-stream';
import crypto from 'crypto';
import fs from 'fs';
import { promisify } from 'util';

const pipeline = promisify(stream.pipeline);

(async () => {
    const digestStream = new DigestStream({
        digest: crypto.createHash('sha256'),
    });

    await pipeline([
        fs.createReadStream('./shakespeare.txt'),
        digestStream,
        // ...
    ]);

    const sha256: string = digestStream.digest().toString('hex');
    console.log(sha256);
})();
```
npm package: @mangosteen/edgar-broken-txt
Description: Provides a list of accession numbers of broken/missing .txt EDGAR files.
Author: Paya
Latest version: 1.0.0

# edgar-broken-txt

Get a list of [EDGAR](https://www.sec.gov/edgar/searchedgar/companysearch.html) accession numbers referencing broken/missing .txt files.

# Installation

With [npm](https://www.npmjs.com/) do:

    $ npm install @mangosteen/edgar-broken-txt

# Usage

```ts
import { isEdgarTxtFileMissing } from '@mangosteen/edgar-broken-txt';

// true, check yourself: https://www.sec.gov/Archives/edgar/data/804747/0000898733-94-000138-index.html
console.log(
    isEdgarTxtFileMissing('0000898733-94-000138')
);
```
npm package: @mangosteen/edgar-url
Description: Get SEC EDGAR URLs for filings and entities.
Author: Paya
Latest version: 1.0.2

# edgar-url

Get [SEC](https://www.sec.gov/) [EDGAR](https://www.sec.gov/edgar/searchedgar/companysearch.html) URLs for filings, entities, pages, and data.

# Installation

With [npm](https://www.npmjs.com/) do:

    $ npm install @mangosteen/edgar-url

# Usage

```js
import { getFilingUrl } from '@mangosteen/edgar-url';

// https://www.sec.gov/Archives/edgar/data/0000320193/0000320193-20-000096.txt
console.log(
    getFilingUrl(320193, '0000320193-20-000096')
);
```
npm package: @mangosteen/got-to-temp
Description: Download HTTP streams to temp files.
Author: Paya
Latest version: 1.0.2

# got-to-temp

First, use [Got](https://www.npmjs.com/package/got) to create retryable read stream.

`@mangosteen/got-to-temp` then helps you to:
- Automatically retry on failures
- Stream `Got` response data to a temp file that is automatically created for you
- Optionally, use [transform streams](https://nodejs.org/api/stream.html#stream_implementing_a_transform_stream) to modify the stream data on-the-fly

If there are any failures during download, the temp file is automatically cleaned up.

If there are any errors during download and `Got` ran out of retries, the error is propagated via rejected promise.

# Installation

With [npm](https://www.npmjs.com/) do:

    $ npm install @mangosteen/got-to-temp

# Usage

```ts
import { downloadToTempFile } from '@mangosteen/got-to-temp';
import { DigestStream } from '@mangosteen/digest-stream';
import got from 'got';
import crypto from 'crypto';

(async () => {
    // Setup Got with retry
    const gotClient = got.extend({
        retry: {
            limit: 5,
        },
    });

    // If Got runs out of retries, this promise will reject with Got error
    const downloadResult = await downloadToTempFile(
        // Factory method to create download stream
        () => gotClient.stream.get('https://nodejs.org/dist/v14.17.5/node-v14.17.5.tar.gz'),
        // Optional factory method to create transform streams
        () => [
            // We use digest as an example here to show how to compute SHA-256 while
            // the file is being downloaded. You may use any other transform streams,
            // or simply avoid passing this factory method altogether.
            new DigestStream({
                digest: crypto.createHash('sha256'),
            }),
        ] as const,
    );

    // Path to a file in a temp directory containing the downloaded data
    console.log(downloadResult.filePath);

    // Access the transform stream instances used during download
    console.log(
        downloadResult.transforms[0].digest().toString('hex'),
    );
})();
```
npm package: @mangotangoxx/n8n-nodes-zoho-books
Description: Zoho Books node for n8n
Author: Alex Arce
Latest version: 0.1.12

# n8n Zoho Books Node

This is a custom n8n node for interacting with the Zoho Books API. It allows you to automate various tasks within Zoho Books, such as managing contacts, invoices, and customer payments.

## Features

*   **OAuth2 Authentication:** Securely connect to Zoho Books using OAuth2 for persistent authentication.
*   **Contacts Management:** Create, retrieve (by ID, by email, or all), update, and delete contacts.
*   **Invoice Management:** Create, retrieve (by ID or all), update, and delete invoices.
*   **Customer Payments:** Manage customer payments (create, retrieve by ID or all).
*   **Dynamic Query Parameters:** Utilize additional JSON parameters for advanced filtering, pagination, and sorting in "Get All" operations.

## Installation

You can install this node directly from npm:

```bash
npm install @mangotangoxx/n8n-nodes-zoho-books
```

After installation, remember to rebuild your n8n instance and restart it for the node to appear.

## Usage

Once installed and activated in n8n, you can find the "Zoho Books" node under the "Zoho" category (or by searching).

To use it:

1.  **Configure Credentials:** Set up your Zoho Books OAuth2 credential in n8n, ensuring you re-authenticate if you update the node.
2.  **Select Resource and Operation:** Choose the Zoho Books resource (e.g., Contacts, Invoices) and the desired operation (e.g., Create, Get All, Update).
3.  **Provide Data:** Fill in the required parameters for your chosen operation.

## Development

This node is built using the `n8n-nodes-starter` boilerplate. The source code is available on GitHub:

[https://github.com/iamalexarce/n8n-zoho-books-node](https://github.com/iamalexarce/n8n-zoho-books-node)

## Support

For issues or feature requests, please open an issue on the [GitHub repository](https://github.com/iamalexarce/n8n-zoho-books-node/issues).
npm package: @mangotreedev/cookie-monster
Description: Simply, easily, hilariously handle your cookies.
Author: Sy Rashid
Latest version: 3.0.1

<div align="center">
  <h1>Simply, easily, hilariously handle your cookies.</h1>

  <p>Don't at me just yet, this is very much a work in progress</p>

  <img src="https://media.giphy.com/media/bAlYQOugzX9sY/giphy.gif" alt="Cookie Monster GIF" width="100%">
</div>
npm package: @mangoui/accordion
Description: ```javascript <Accordion.Root>   <Accordion.Item>     <Accordion.Header>       <div>Panel Title1</div>       <Accordion.ArrowIcon />     </Accordion.Header>     <Accordion.Content>Content1</Accordion.Content>   </Accordion.Item>
Latest version: 0.0.1

## Accordion

```javascript
<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <div>Panel Title1</div>
      <Accordion.ArrowIcon />
    </Accordion.Header>
    <Accordion.Content>Content1</Accordion.Content>
  </Accordion.Item>

  <Accordion.Item>
    <Accordion.Header>
      <div>Panel Title2</div>
      <Accordion.ArrowIcon />
    </Accordion.Header>
    <Accordion.Content>Content2</Accordion.Content>
  </Accordion.Item>

  <Accordion.Item>
    <Accordion.Header>
      <div>Panel Title3</div>
      <Accordion.ArrowIcon />
    </Accordion.Header>
    <Accordion.Content>Content3</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>
```
npm package: @mangoui/alert
Description: ```javascript <Alert.Root>   <Alert.StatusIcon />   <Alert.Content>This is an info alert</Alert.Content> </Alert.Root> ```
Latest version: 0.0.1

## Alert

### 기본

```javascript
<Alert.Root>
  <Alert.StatusIcon />
  <Alert.Content>This is an info alert</Alert.Content>
</Alert.Root>
```

### 타이틀

```javascript
<Alert.Root>
  <Alert.StatusIcon />
  <Alert.Content>
    <div>information</div>
    <div>This is an info alert</div>
  </Alert.Content>
</Alert.Root>
```

### 아이콘

```javascript
<Alert.Root>
  <CheckIcon />
  <Alert.Content>This is an custom icon alert</Alert.Content>
</Alert.Root>

<Alert.Root>
  <Alert.StatusIcon
    info={<CheckIcon />}
    success={<SuccessIcon />}
    warning={<WarningIcon />}
    error={<ErrorIcon />}
  />
  <Alert.Content>
    This is an custom icon alert by AlertStatusIcon
  </Alert.Content>
</Alert.Root>
```
npm package: @mangoui/avatar
Description: ```javascript <Avatar.Root>   <UserIcon /> </Avatar.Root> ```
Latest version: 0.0.1

## Avatar

### 기본

```javascript
<Avatar.Root>
  <UserIcon />
</Avatar.Root>
```

### 이미지

```javascript
<Avatar.Root>
  <Avatar.Img src="/images/avatar.png" />
</Avatar.Root>
```

### 그룹핑

```javascript
<Avatar.Group>
  <Avatar.GroupContent>
    <Avatar.Root>
      <UserIcon />
    </Avatar.Root>
    <Avatar.Root>
      <UserIcon />
    </Avatar.Root>
    <Avatar.Root>
      <UserIcon />
    </Avatar.Root>
  </Avatar.GroupContent>
  <Avatar.Extra />
</Avatar.Group>
```
npm package: @mangoui/badge
Description: ```javascript <Badge.Root>   <Badge.Content>{2}</Badge.Content>   <UserIcon /> </Badge.Root> ```
Latest version: 0.0.1

## Badge

### 기본

```javascript
<Badge.Root>
  <Badge.Content>{2}</Badge.Content>
  <UserIcon />
</Badge.Root>
```

### Max

```javascript
<Badge.Root max={99}>
  <Badge.Content>{100}</Badge.Content>
  <UserIcon />
</Badge.Root>
```

### Size

```javascript
<Badge.Root>
  <Badge.Content
    style={{
      minWidth: 20,
      height: 20,
      fontSize: 'calc(20px - 3px)',
      borderRadius: 'calc(20px / 2)',
      lineHeight: '20px',
    }}
  >
    large
  </Badge.Content>
  <UserIcon />
</Badge.Root>
```

### Color

```javascript
<Badge.Root>
  <Badge.Content style={{ backgroundColor: '#ffff00', color: 'black' }}>#ffff00</Badge.Content>
  <UserIcon />
</Badge.Root>
```

### Placement

```javascript
<Badge.Root placement="top-left">
  <Badge.Content>top-left</Badge.Content>
  <UserIcon />
</Badge.Root>
```

### BadgeOnly

```javascript
<Badge.Root>
  <Badge.Content />
</Badge.Root>
```
npm package: @mangoui/breadcrumb
Description: ```javascript <Breadcrumb.Root>   <Breadcrumb.Item>     <Breadcrumb.Link href="/">Home</Breadcrumb.Link>   </Breadcrumb.Item>   <Breadcrumb.Separator />
Latest version: 0.0.1

## Breadcrumb

### 기본

```javascript
<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page">Page</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>Current</Breadcrumb.Item>
</Breadcrumb.Root>
```

### CustomSeparator

```javascript
<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator>{'>'}</Breadcrumb.Separator>

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page">Page</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator>{'>'}</Breadcrumb.Separator>

  <Breadcrumb.Item>Current</Breadcrumb.Item>
</Breadcrumb.Root>
```

### Icon

```javascript
<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">
      <UserIcon />
      Home
    </Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page">
      <UserIcon />
      Page
    </Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <UserIcon />
    Current
  </Breadcrumb.Item>
</Breadcrumb.Root>
```

### Collapsed

```javascript
<Breadcrumb.Root maxItems={5} collapse={<Breadcrumb.Collapse />}>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page1">Page1</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page2">Page2</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page3">Page3</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page4">Page4</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>Current</Breadcrumb.Item>
</Breadcrumb.Root>
```
npm package: @mangoui/checkbox
Description: ```javascript <Checkbox.Root>   <Checkbox.Indicator>     <Checkbox.Icon />   </Checkbox.Indicator>   <Checkbox.Label>체크박스</Checkbox.Label> </Checkbox.Root> ```
Latest version: 0.0.1

## Checkbox

### 기본

```javascript
<Checkbox.Root>
  <Checkbox.Indicator>
    <Checkbox.Icon />
  </Checkbox.Indicator>
  <Checkbox.Label>체크박스</Checkbox.Label>
</Checkbox.Root>
```

### Custom

```javascript
<Checkbox.Root>
  <Checkbox.Indicator>
    {(checked: boolean) => {
      if (checked) return <CheckedUserIcon />;
      return <UncheckedUserIcon />;
    }}
  </Checkbox.Indicator>
  <Checkbox.Label>체크박스</Checkbox.Label>
</Checkbox.Root>

<Checkbox.Root>
  <Checkbox.Indicator>
    <Checkbox.Icon
      checkedIcon={<CheckedUserIcon />}
      uncheckedIcon={<UncheckedUserIcon />}
    />
  </Checkbox.Indicator>
  <Checkbox.Label>체크박스</Checkbox.Label>
</Checkbox.Root>
```

### CheckboxGroup

```javascript
<Checkbox.Group>
  <Checkbox.Root value={0}>
    <Checkbox.Indicator>
      <Checkbox.Icon />
    </Checkbox.Indicator>
    <Checkbox.Label>체크박스1</Checkbox.Label>
  </Checkbox.Root>
  <Checkbox.Root value={1}>
    <Checkbox.Indicator>
      <Checkbox.Icon />
    </Checkbox.Indicator>
    <Checkbox.Label>체크박스2</Checkbox.Label>
  </Checkbox.Root>
  <Checkbox.Root value={2}>
    <Checkbox.Indicator>
      <Checkbox.Icon />
    </Checkbox.Indicator>
    <Checkbox.Label>체크박스3</Checkbox.Label>
  </Checkbox.Root>
</Checkbox.Group>
```
npm package: @mangoui/circular-progress
Description: ```javascript <CircularProgress.Root value={30}>   <CircularProgress.Indicator />   <CircularProgress.Label>30%</CircularProgress.Label> </CircularProgress.Root> ```
Latest version: 0.0.1

## CircularProgress

### 기본

```javascript
<CircularProgress.Root value={30}>
  <CircularProgress.Indicator />
  <CircularProgress.Label>30%</CircularProgress.Label>
</CircularProgress.Root>
```

### Indeterminate

```javascript
<CircularProgress.Root indeterminate>
  <CircularProgress.Indicator />
</CircularProgress.Root>
```

### Custom

```javascript
<CircularProgress.Root value={50} style={{ fontSize: 100, width: 100, height: 100 }}>
  <CircularProgress.Indicator barStyle={{ stroke: '#1976d2' }} />
  <CircularProgress.Label>50%</CircularProgress.Label>
</CircularProgress.Root>
```
npm package: @mangoui/dialog
Description: ```javascript <Dialog.Root>   <Dialog.Trigger asChild>     <button type="button">Open Dialog</button>   </Dialog.Trigger>   <Dialog.Portal>     <Dialog.Backdrop />     <Dialog.Content>       <Dialog.Close asChild>         <button type="button">X</button> 
Latest version: 0.0.1

## Dialog

### 기본

```javascript
<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Content>
      <Dialog.Close asChild>
        <button type="button">X</button>
      </Dialog.Close>
      <div>Dialog Content</div>
      <div>
        <Dialog.Close asChild>
          <button type="button">닫기</button>
        </Dialog.Close>
      </div>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```

### Backdrop

```javascript
<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop backdrop />
    <Dialog.Content>
      <Dialog.Close asChild>
        <button type="button">X</button>
      </Dialog.Close>
      <div>Dialog Content</div>
      <div>
        <Dialog.Close asChild>
          <button type="button">닫기</button>
        </Dialog.Close>
      </div>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```

### DestroyOnClose

```javascript
<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Content destroyOnClose={false}>
      <Dialog.Close asChild>
        <button type="button">X</button>
      </Dialog.Close>
      <div>Dialog Content</div>
      <div>
        <Dialog.Close asChild>
          <button type="button">닫기</button>
        </Dialog.Close>
      </div>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```

### ForceMount

```javascript
<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Content forceMount>
      <Dialog.Close asChild>
        <button type="button">X</button>
      </Dialog.Close>
      <div>Dialog Content</div>
      <div>
        <Dialog.Close asChild>
          <button type="button">닫기</button>
        </Dialog.Close>
      </div>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```
npm package: @mangoui/drawer
Description: ```javascript <Drawer.Root>   <Drawer.Trigger asChild>     <button type="button">Open</button>   </Drawer.Trigger>   <Drawer.Portal>     <Drawer.Backdrop />     <Drawer.Content>       <Drawer.Header>Title</Drawer.Header>       <Drawer.Close asChild>      
Latest version: 0.0.1

## Drawer

### 기본

```javascript
<Drawer.Root>
  <Drawer.Trigger asChild>
    <button type="button">Open</button>
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Content>
      <Drawer.Header>Title</Drawer.Header>
      <Drawer.Close asChild>
        <button type="button">Close</button>
      </Drawer.Close>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

### Placement

```javascript
<Drawer.Root placement="left">
  <Drawer.Trigger asChild>
    <button type="button">Open</button>
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Content>
      <Drawer.Header>Title</Drawer.Header>
      <Drawer.Close asChild>
        <button type="button">Close</button>
      </Drawer.Close>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

### Custom

```javascript
<Drawer.Root>
  <Drawer.Trigger asChild>
    <button type="button">Open</button>
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Content style={{ width: '60%' }}>
      <Drawer.Header>Title</Drawer.Header>
      <Drawer.Close asChild>
        <button type="button">Close</button>
      </Drawer.Close>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

### destroyOnClose

```javascript
<Drawer.Root>
  <Drawer.Trigger asChild>
    <button type="button">Open</button>
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Content destroyOnClose={false}>
      <Drawer.Header>Title</Drawer.Header>
      <Drawer.Close asChild>
        <button type="button">Close</button>
      </Drawer.Close>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```
npm package: @mangoui/dropdown
Description: ```javascript <Dropdown.Root>   <Dropdown.Trigger asChild>     <button type="button">Dropdown</button>   </Dropdown.Trigger>   <Dropdown.Portal>     <Dropdown.Content>       <Dropdown.Item>DropdownItem - 1</Dropdown.Item>       <Dropdown.Item>DropdownItem
Latest version: 0.0.1

## Dropdown

### 기본

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content>
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```

### DestroyOnClose

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content destroyOnClose={false}>
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```

### ForceMount

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content forceMount>
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```

### Position

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content
      triggerPosition={{ vertical: 'bottom', horizontal: 'right' }}
      contentPosition={{ vertical: 'top', horizontal: 'left' }}
    >
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```

### Custom

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content>
      <div>
        <div>제목1</div>
        <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
        <Dropdown.Item disabled>DropdownItem - 2</Dropdown.Item>
        <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
      </div>
      <div role="separator" />
      <div>
        <div>제목2</div>
        <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
        <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
        <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
      </div>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```
npm package: @mangoui/number-input
Description: ```javascript <NumberInput.Root>   <NumberInput.Field />   <NumberInput.ButtonGroup>     <NumberInput.Plus />     <NumberInput.Minus />   </NumberInput.ButtonGroup> </NumberInput.Root>
Latest version: 0.0.1

## NumberInput

### 기본

```javascript
<NumberInput.Root>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>

<NumberInput.Root>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus asChild>
      <button type="button">+</button>
    </NumberInput.Plus>
    <NumberInput.Minus asChild>
      <button type="button">-</button>
    </NumberInput.Minus>
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```

### Disabled

```javascript
<NumberInput.Root disabled>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```

### ReadOnly

```javascript
<NumberInput.Root readOnly>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```

### Min/Max

```javascript
<NumberInput.Root min={0} max={100} step={5}>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```

### Custom(Invalid)

```javascript
<NumberInput.Root style={{ border: '1px solid', borderColor: 'var(--es-error)' }}>
  <NumberInput.Field style={{ border: 'none', outline: 'none', boxShadow: 'none' }} />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```
npm package: @mangoui/popover
Description: ```javascript <Popover.Root>   <Popover.Trigger asChild>     <button type="button">Open Popover</button>   </Popover.Trigger>   <Popover.Portal>     <Popover.Content>       <div>This is a Popover Content</div>     </Popover.Content>   </Popover.Portal> </
Latest version: 0.0.1

## Popover

### 기본

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content>
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

### CloseOnBlur

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content closeOnBlur={false}>
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

### DestroyOnClose

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content destroyOnClose={false}>
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

### ForceMount

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content forceMount>
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

### Position

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content
      triggerPosition={{ vertical: 'bottom', horizontal: 'right' }}
      contentPosition={{ vertical: 'top', horizontal: 'left' }}
    >
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```
npm package: @mangoui/progress
Description: ```javascript <Progress.Root value={30}>   <Progress.Indicator /> </Progress.Root> ```
Latest version: 0.0.1

## Progress

### 기본

```javascript
<Progress.Root value={30}>
  <Progress.Indicator />
</Progress.Root>
```

### Indeterminate

```javascript
<Progress.Root indeterminate>
  <Progress.Indicator />
</Progress.Root>
```

### Custom

```javascript
<Progress.Root>
  <Progress.Indicator style={{ backgroundColor: '#ff4d4f' }} />
</Progress.Root>
```
npm package: @mangoui/radio-group
Description: ```javascript <Radio.Group>   <Radio.Root value="1">     <Radio.Indicator>       <Radio.Icon />     </Radio.Indicator>     <Radio.Label>라디오1</Radio.Label>   </Radio.Root>
Latest version: 0.0.1

## RadioGroup

### 기본

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```

### Custom Checked(함수)

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```

### Custom Checked(props)

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```
npm package: @mangoui/react
Description: ```sh $ pnpm build // 정상 빌드 확인 $ pnpm changeset // 배포할 패키지 선택하고 버전 선택 // spacebar 로 선택 // major 선택되지 않은 패키지는 minor 버전으로 업데이트
Author: AHN HYUNGRO
Latest version: 0.0.1

# @mangoui/react

## 배포(루트에서 작업)

```sh
$ pnpm build // 정상 빌드 확인
$ pnpm changeset
// 배포할 패키지 선택하고 버전 선택
// spacebar 로 선택
// major 선택되지 않은 패키지는 minor 버전으로 업데이트

$ pnpm run version
$ pnpm build
$ pnpm release
```
npm package: @mangoui/slider
Description: ```javascript <Slider.Root>   <Slider.Track>     <Slider.Range />   </Slider.Track>   <Slider.Thumb /> </Slider.Root> ```
Latest version: 0.0.1

## Slider

### 기본

```javascript
<Slider.Root>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>
```

### ThumbLabel

```javascript
<Slider.Root>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb>
    <Slider.ThumbLabel />
  </Slider.Thumb>
</Slider.Root>

<Slider.Root>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb>
    <Slider.ThumbLabel auto />
  </Slider.Thumb>
</Slider.Root>
```

### Min/Max

```javascript
<Slider.Root min={10} max={120} step={10}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>
```

### Orientation

```javascript
<Slider.Root orientation="vertical">
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>
```

### Range

```javascript
<Slider.Root defaultValue={[10, 30]}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
  <Slider.Thumb />
</Slider.Root>
```
npm package: @mangoui/switch
Description: ```javascript <Switch.Root>   <Switch.Track>     <Switch.Thumb />   </Switch.Track> </Switch.Root> ```
Latest version: 0.0.1

## Switch

### 기본

```javascript
<Switch.Root>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>
```

### Label

```javascript
<Switch.Root>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
  <Switch.Label>Label</Switch.Label>
</Switch.Root>
```

### Disabled

```javascript
<Switch.Root disabled>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>
```

### ReadOnly

```javascript
<Switch.Root readOnly>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>
```
npm package: @mangoui/tabs
Description: ```javascript <Tabs.Root>   <Tabs.List>     <Tabs.Tab>Tab1</Tabs.Tab>     <Tabs.Tab>Tab2</Tabs.Tab>     <Tabs.Tab>       <UserIcon />       Tab3     </Tabs.Tab>   </Tabs.List>   <Tabs.Content>     <p>TabContent1</p>   </Tabs.Content>   <Tabs.Content>     
Latest version: 0.0.1

## Tabs

### 기본

```javascript
<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab>Tab1</Tabs.Tab>
    <Tabs.Tab>Tab2</Tabs.Tab>
    <Tabs.Tab>
      <UserIcon />
      Tab3
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Content>
    <p>TabContent1</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent2</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent3</p>
  </Tabs.Content>
</Tabs.Root>
```

### Orientation

```javascript
<Tabs.Root orientation="vertical">
  <Tabs.List>
    <Tabs.Tab>Tab1</Tabs.Tab>
    <Tabs.Tab>Tab2</Tabs.Tab>
    <Tabs.Tab>
      <UserIcon />
      Tab3
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Content>
    <p>TabContent1</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent2</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent3</p>
  </Tabs.Content>
</Tabs.Root>
```

### RenderMode

- selecting: 선택한 tab만 랜더링 (default)
- selected: 선택되었던 tab 랜더링
- force: 모두 랜더링

```javascript
<Tabs.Root renderMode="selecting">
  <Tabs.List>
    <Tabs.Tab>Tab1</Tabs.Tab>
    <Tabs.Tab>Tab2</Tabs.Tab>
    <Tabs.Tab>
      <UserIcon />
      Tab3
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Content>
    <p>TabContent1</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent2</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent3</p>
  </Tabs.Content>
</Tabs.Root>
```
npm package: @mangoui/toast
Description: ```javascript const [open, setOpen] = React.useState(false);
Latest version: 0.0.1

## Toast

### 기본

```javascript
const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>
```

### Placement

```javascript
const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport placement="bottom-right" />
</Toast.Root>
```

### Duration

```javascript
const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root duration={1000} open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>
```

### Close

```javascript
const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
    <Toast.Close asChild>
      <button type="button">Undo</button>
    </Toast.Close>
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>
```
npm package: @mangoui/tooltip
Description: ```javascript <Tooltip.Root>   <Tooltip.Trigger asChild>     <button type="button">Tooltip</button>   </Tooltip.Trigger>   <Tooltip.Portal>     <Tooltip.Content>tooltip message</Tooltip.Content>   </Tooltip.Portal> </Tooltip.Root> ```
Latest version: 0.0.1

## Tooltip

### 기본

```javascript
<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <button type="button">Tooltip</button>
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content>tooltip message</Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>
```

### Arrow

```javascript
<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <button type="button">Tooltip</button>
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content>
      tooltip message
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>
```

### Position

```javascript
<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <button type="button">Tooltip</button>
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content side="bottom" align="end">
      tooltip message
    </Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>
```
npm package: @mangoweb/eslint-config-ts
Description: ESLint configuration using Prettier designed for TS.
Author: manGoweb
Latest version: 0.0.1

# `@mangoweb/eslint-config-ts`

ESLint configuration using Prettier designed for TS.

## Installation

1) Install the config:
    `$ npm install @mangoweb/eslint-config-ts --save-dev`
2) And its peer dependencies:
    `$ npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier --save-dev`
3) If you want to use the manGoweb prettier config, also run
    `$ npm install @mangoweb/prettier-config --save-dev`

⚠️ You might want to also fix the package version so that any potential future backwards incompatibilities don't break your build.
This package is generally intended for live development with the occasional BC break.
Should that affect your application because you failed to fix the version, that's on you.

## Usage

1) Create a `.prettierrc.js` file in your project root:
    ```javascript
    module.exports = {
        ...require("@mangoweb/prettier-config"), // Or something else
        // Add any project-specific overrides
        // E.g. semi: false
    }
    ```
2) Create a `.eslintrc.js` in your project root:
    ```javascript
    module.exports = {
        extends:  [
            '@mangoweb/eslint-config-ts',
        ]
    }
    ```
3) Configure your ide to use these files. It will likely find them automatically though.

Optionally, also add these to your `package.json`:
```json
{
    "scripts": {
        "eslint:lint": "eslint \"src/**/*.{ts,tsx}\" ",
        "eslint:fix": "eslint --fix \"src/**/*.{ts,tsx}\" "
    }
}
```

That's it!
npm package: @mangoweb/hiding-header
Description: Hides and reveals header on scroll.
Author: manGoweb
Latest version: 0.0.7

# Hiding Header

The manGoweb HidingHeader component. Hides and reveals header on scroll.

## Installation

```bash
npm install @mangoweb/hiding-header @mangoweb/scripts-base
```

This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.

## How to use

### In your template:

```html
…
<body>
	<div class="hidingHeader" id="hidingHeader">
		<div class="hidingHeader-in">
			<!-- Your header -->
		</div>
	</div>
	<script>
		window.initComponents = (window.initComponents || []).push({
			name: 'HidingHeader',
			place: '#hidingHeader',
		})
	</script>
	…
</body>
…
```

### Styles:

```css
.hidingHeader {
	position: relative;
	--hidingHeader-height: auto;
	--hidingHeader-bounds-height: auto;
	z-index: 10;
	height: var(--hidingHeader-bounds-height);
	margin-bottom: calc(var(--hidingHeader-height) - var(--hidingHeader-bounds-height));
	pointer-events: none;
}

.hidingHeader-in {
	position: relative;
	position: sticky;
	top: 0;
	pointer-events: auto;
}
```
npm package: @mangoweb/in-view
Description: Watches elements entering and leaving viewport.
Author: manGoweb
Latest version: 0.0.9

# InView

The manGoweb InView component. Watches elements entering and leaving viewport.

## Installation

```bash
npm install @mangoweb/in-view @mangoweb/scripts-base
```

This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.

## Usage

In your template:
```html
<script>
	window.initComponents = (window.initComponents || []).push({
		name: 'InView',
		place: '#targetWrapper', // Element you want to watch or a wrapper
		data: { // Optional
			targets: '.target', // Watched children
			threshold: 0, // Area of a target required to be inside viewport

			isAboveViewClass: 'isAboveView', // Class added to a target element when seen above viewport
			isInViewClass: 'isInView', // Target seen in viewport
			isBelowViewClass: 'isBelowView', // Target seen below viewport
			isSeenClass: 'isSeen', // Target seen in viewport at least once
		}
	})
</script>
```

## IE support / older Safari ([caniuse](https://caniuse.com/#feat=intersectionobserver))

Use `IntersectionObserver` polyfill, e.g., `<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>`
npm package: @mangoweb/parallax
Description: Watches elements vertical position in viewport.
Author: manGoweb
Latest version: 0.1.4

# Parallax

The manGoweb Parallax component. Watches elements vertical position in viewport.

Demo: [codesandbox.io/s/mangowebparallax-demo-hz24v](https://codesandbox.io/s/mangowebparallax-demo-hz24v?file=/index.html)

## Installation

```bash
npm install @mangoweb/parallax @mangoweb/scripts-base
```

This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.

## Usage

In your template:

```html
<script>
	window.initComponents = (window.initComponents || []).push({
		name: 'Parallax',
		place: '#targetElement',
		props: {
			// Optional
			offsetPropertyName: 'offset', // distance between element y center and window y center
			heightPropertyName: 'height', // element height
			windowHeightPropertyName: 'windowHeight',
		},
	})
</script>
```

In your styles

```css
#targetElement {
	transform: translateY(calc(var(--offset, 0) * 20vh)); // Translates by 0 pixels when javascript is disabled
}
```
npm package: @mangoweb/prettier-config
Description: The manGoweb Prettier config
Author: manGoweb
Latest version: 0.0.1

# `@mangoweb/prettier-config`

The manGoweb Prettier config.

## Installation

`$ npm install prettier @mangoweb/prettier-config --save-dev`

⚠️ You might want to also fix the package version so that any potential future backwards incompatibilities don't break your build.
This package is generally intended for live development with the occasional BC break.
Should that affect your application because you failed to fix the version, that's on you.

## Usage

Create a `.prettierrc.js` file in your project root:
```javascript
module.exports = {
    ...require("@mangoweb/prettier-config"),
    // Add any project-specific overrides
    // E.g. semi: false
}
```
npm package: @mangoweb/shapes
Description: Injects svg with symbols.
Author: manGoweb
Latest version: 0.0.6

# Shapes

The manGoweb Shapes component.

## Installation

```bash
npm install @mangoweb/shapes @mangoweb/scripts-base
```

This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.

## Usage

In your template:

```html
<script>
	window.initComponents = (window.initComponents || []).push({
		name: 'Shapes',
		props: {
			url: '/shapes.svg',
		},
	})
</script>
```

## IE support ([caniuse](https://caniuse.com/#feat=fetch))

Use `fetch` polyfill, e.g., `<script src="https://polyfill.io/v3/polyfill.min.js?features=fetch"></script>`
npm package: @mangoweb/shapes-fallback
Description: Injects svg with symbols if needed.
Author: manGoweb
Latest version: 0.0.6

# ShapesFallback

The manGoweb ShapesFallback component.

## Installation

```bash
npm install @mangoweb/shapes-fallback @mangoweb/scripts-base
```

This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.

## Usage

In your template:

```html
<script>
	window.initComponents = (window.initComponents || []).push({
		name: 'ShapesFallback',
	})
</script>
```

or in your js:

```js
import { applyShapesFallbackIfNeeded } from '@mangoweb/shapes-fallback'

const rawHTML = 'something something <svg…> something'
const output = document.querySelector('#output')

output.innerHTML = rawHTML
applyShapesFallbackIfNeeded(output)
```
npm package: @mangoweb/share
Description: Share url.
Author: manGoweb
Latest version: 0.0.3

# Share

The manGoweb Share component.

## Installation

```bash
npm install @mangoweb/share @mangoweb/scripts-base
```

This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.

## Usage

In your template:

```html
<button id="share-button" type="button">Share</button>

<script>
	window.initComponents = (window.initComponents || []).push({
		name: 'Share',
		place: '#share-button',
		props: {
			// optional
			title: 'Example web',
			url: 'https://example.com',
			fallbackClipboardNote: 'Url copied to clipboard.',
		},
	})
</script>
```
npm package: @mangoweb/snappyimg
Description: Snappyimg URL builder. For more information about the service, go to https://www.snappyimg.com/.
Author: Filip Chalupa
Latest version: 0.2.4
Deprecated: Name changed. Upgrade to https://www.npmjs.com/package/snappyimg.

<img src="https://github.com/snappyimg/snappyimg-php/raw/master/logo.png" width="400">

This is a JavaScript implementation of Snappyimg URL builder. For more information about the service, go to [https://www.snappyimg.com/](https://www.snappyimg.com/).

## Installation

This library is available as [npm package](https://www.npmjs.com/package/@mangoweb/snappyimg):

```console
npm install @mangoweb/snappyimg
```

## Usage

```javascript
import Snappyimg from '@mangoweb/snappyimg'

const snappyimg = new Snappyimg('appToken', 'appSecret', Snappyimg.Stage.Demo)
console.log(snappyimg.buildUrl('https://placekitten.com/2000/1500'))
```

### Additional options

```javascript
import Snappyimg from '@mangoweb/snappyimg'

const snappyimg = new Snappyimg(
	'appToken',
	'appSecret',
	Snappyimg.Stage.Demo // Demo | Serve
)
const options = {
	resize: Snappyimg.Resize.Fill, // Fill | Fit | Crop
	width: 1920, // number
	height: 1080, // number
	gravity: Snappyimg.Gravity.Smart, // Smart | Center | North | South | East | West
	enlarge: true, // boolean
	format: Snappyimg.Format.Jpg, // Jpg | Png | Webp
}
console.log(snappyimg.buildUrl('https://placekitten.com/2000/1500', options))
```

### Warning

Don't use this library on frontend if you care to keep your `appSecret` private.
npm package: @mangoweb/toggler
Description: Toggles class based on data attributes
Author: manGoweb
Latest version: 0.0.6

# Toggler

The manGoweb Toggler component. Toggles class on target element.

## Installation

`$ npm install @mangoweb/toggler @mangoweb/scripts-base`

This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.

## Usage

In your template:
```html
<script>
	window.initComponents = (window.initComponents || []).push({
		name: 'Toggler',
		place: 'body'
	})
</script>
```

Use by adding following attributes to HTML element with 'toggler' class:
* data-target - target selector
* data-class-name - class to toggle
* data-remove-others - remove toggle class from elements matching this selector
* data-prevent-default - prevent default event behaviour