open-index/open-npm huggingface dataset:
npm package: @mukea/native-is-elevated
Description: Native module for checking if the process is being run with elevated privileges
Author: mukea
Latest version: 0.9.4

# @mukea/native-is-elevated

[![NPM](https://nodei.co/npm/@mukea/native-is-elevated.png?compact=true)](https://www.npmjs.com/package/@mukea/native-is-elevated)

Checks if the process is running with elevated privileges (i.e., as root on Unix systems or Administrator on Windows).

Basically just a [native version](https://nodejs.org/api/addons.html) of [is-elevated](https://github.com/sindresorhus/is-elevated) that doesn't spawn a new process on Windows.


## Install

```sh
npm install --save @mukea/native-is-elevated
```

Windows note: the addon no longer hard-requires the optional MSVC Spectre libraries during normal builds. If a maintainer wants Spectre mitigation enabled explicitly, they can opt in during a custom `node-gyp` build.


## Usage

```js
const isElevated = require('@mukea/native-is-elevated')();  // boolean value
```
npm package: @mukeshdas/lquikit
Description: Set of UI components for pancake projects
Latest version: 1.2.3

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-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://pancakeswap.github.io/pancake-uikit/)
npm package: @mukeshdas/sdk
Description: 🛠 An SDK for building applications on top of Pancakeswap.
Latest version: 1.0.0

# Pancakeswap SDK

Forked from the [Uniswap SDK](https://github.com/Uniswap/uniswap-v2-sdk/commit/a88048e9c4198a5bdaea00883ca00c8c8e582605).

You can refer to the Uniswap SDK documentation [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## 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/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-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: @mukeshdas/sdkv1
Description: 🛠 An SDK for building applications on top of pancakeswap.
Latest version: 1.1.1

# Pancakeswap 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/pancakeswap/pancakeswap-sdk/workflows/CI/badge.svg)](https://github.com/pancakeswap/pancakeswap-sdk)
[![npm version](https://img.shields.io/npm/v/@pancakeswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@pancakeswap-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/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-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: @mukeshdas/sdkv2
Description: 🛠 An SDK for building applications on top of Pancakeswap.
Latest version: 2.3.2

# Pancakeswap SDK

Forked from the [Uniswap SDK](https://github.com/Uniswap/uniswap-v2-sdk/commit/a88048e9c4198a5bdaea00883ca00c8c8e582605).

You can refer to the Uniswap SDK documentation [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## 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/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-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: @mukeshdas/storykit
Description: Set of UI components
Latest version: 0.1.0

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-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://pancakeswap.github.io/pancake-uikit/)
npm package: @mukeshdas/uikit
Description: Set of UI components for projects
Latest version: 1.0.2

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-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://pancakeswap.github.io/pancake-uikit/)
npm package: @mukhindev/create-bem
Description: Utility for creating BEM class names. CSS Modules support
Author: Sergey Mukhin
Latest version: 1.0.3

# Create BEM

Utility for creating [BEM](https://bem.info/) class names. CSS Modules support.

## BEM

<u>B</u>lock, <u>E</u>lement, <u>M</u>odifier

Elements is a child of Block.
Modifiers refer of to Block or Element.

`block-name`  
`__element-name`  
`_modifier-name` or `_modifier-key` `_modifier-value`  
`mix-name`

```html
<label class="input">
  <span class="input__label"></span>
  <input class="input__field input__field_disabled input__field_size_large" />
</label>
```

## CSS

```ts
import { createBem } from "@mukhindev/create-bem";

// BEM-block (function)
const bem = createBem("input");
```

bem(`element`, `modifier(s)`, `mix(es)`) return class names in BEM-style:

```ts
bem(); // input
bem("label"); // input__label
bem("label", "active"); // input__label input__label_active
bem("label", ["active", "large"]); // input__label input__label_active input__label_large
bem("label", { color: "red", large: false, active: true }); // input__label input__label_color_red input__label_active
bem("", { color: "red", large: false, active: true }); // input input_color_red input_active
bem("", "", "main-page"); // input main-page
bem("label", { color: "red" }, "main-page"); // input__label input__label_color_red main-page
```

## CSS Modules

The second argument to `createBem` is the object created by the CSS module:

```ts
import { createBem } from "@mukhindev/create-bem";
import classes from "./style.module.css";

const bem = createBem("input", classes);

bem("label", "active"); // _input__label_{hash} _input__label_active_{hash}
```

If the css selector is undefined or empty, CSS modules ignore class generation. Utility `createBem` also ignores this selector:

```ts
bem("message", "", "mix"); // "mix"
```

If you find problems, check how your CSS selectors are hashed.
Hashed names should be converted like this:

```
input -> _input_{hash}
input__label -> _input__label_{hash}
```

## Options

Often the modifier is separated by `--`. The third argument to `createBem` is options:

```ts
const bem = createBem("input", undefined, { modifierKeyDivider: "--" });
```

Default options:

```ts
                             ↓
elementDivider: "__" // input__field_size_large
                                        ↓                          ↓
modifierKeyDivider: "_" //  input__field_size_large or input__field_active
                                              ↓
modifierValueDivider: "_" // input__field_size_large
```
npm package: @mukhindev/mui-async-autocomplete
Description: Extended MUI Autocomplete
Author: Sergey Mukhin
Latest version: 1.7.0

# @mukhindev/mui-async-autocomplete

Extended MUI Autocomplete

## Inner props

Variant for integration to others controllers (no label and border).

Add style overrides for MuiTextField to MUI theme.

```JavaScript
const components = {
  MuiTextField: {
    styleOverrides: {
      root: {
        // Inner styles
        "&.variant_inner": {
          // Прячем label
          ".MuiInputLabel-root": {
            visibility: "hidden",
          },
          // Hide border
          fieldset: {
            border: "none",
          },
        },
      },
    },
  },
}
```
npm package: @mukhindev/mui-dialog
Description: Extended MUI Dialog
Author: Sergey Mukhin
Latest version: 3.1.0

# @mukhindev/mui-dialog

Extended MUI Dialog

## v3

Версия 3.0.0+ не имеет обратной совместимости из-за пересмотра подхода. 
Прошлые версии были созданы как попытка впихнуть всё и это себя показало плохо в реальных задачах.
Новая версия решает главную задачу, позволять управлять формой из контекста.
Такое поведение нужно, что при закрытом диалоге не выполнялось всё что реализовано внутри него.
Всё необходимое реализуется как вложенный компонент, а внедрение и обращение происходит благодаря контексту.

Задачи v3:

- [x] Диалог не должен отвечать за состояния загрузки, валидации и блокировок, диалог может использоваться даже не для формы вовсе.
- [x] Возможность переопределять заголовок изнутри диалога. Например, название чего-либо приходит после получения с сервера, а сразу неизвестно.
- [x] Отказаться от onCancel, так как в Dialog от MUI есть параметр reason передаваемый при закрытии. Добавить 2 новых причины `closeEvent` и `cancelEvent`.
- [x] Параметр noValidate, прокидываемый на обёртку <form>, если она активна
- [x] Решить проблему "Blocked aria-hidden on an element because its descendant retained focus", появившеюся в новых браузерах.
npm package: @mukhindev/react-flex
Description: Flexbox with frequently used props
Author: Sergey Mukhin
Latest version: 1.0.1

# @mukhindev/react-flex

Flexbox with frequently used props + Space

## Install

⚠️ Dependencies: Your project need work with CSS modules.

```
npm install @mukhindev/react-flex
```

## CSS Modules

Package components use the CSS modules without pre-processing, so you can process them to suit your build. Vite and Next.js support CSS modules.

## Example

```
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ [Add]  [Remove]  ←┄┄┄┄ Space ┄┄┄┄→  Total: 42 ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

```

```JavaScript
import { Flex, Space } from "@mukhindev/react-flex"

export default function MyComponent() {
  return (
    <div>
      <Flex className="toolbar" direction="row" gap={16}>
        <Button>Add</Button>
        <Button>Remove</Button>
        <Space />
        <div>Total: 42</div>
      </Flex>
    </div>
  )
}
```
npm package: @mukhindev/react-grid
Description: Grid for React with a headless UI and simple parameters
Author: Sergey Mukhin
Latest version: 1.2.0

# @mukhindev/react-grid

Grid for React with a headless UI and simple parameters  

Demo: https://github.com/mukhindev/react-grid-demo

## Install

⚠️ Dependencies: Need support for CSS modules in your configuration. 

```
npm install @mukhindev/react-grid
```

## CSS Modules

Package components use the CSS modules without pre-processing, so you can process them to suit your build. Vite and Next.js support CSS modules.

## Grid and Cell

```
┏━━━━━━━┳━━━┓
┃   A   ┃ B ┃
┣━━━━━━━┻━━━┫
┃     C     ┃
┗━━━━━━━━━━━┛
```

```JavaScript
import { Grid, Cell } from "@mukhindev/react-grid";

function MyComponent() {
  return (
    <Grid columns={3} rows={2} gap="1rem">
      <Cell columns={2}>A</Cell>
      <Cell>B</Cell>
      <Cell columns={3}>C</Cell>
    </Grid>
  );
}
```

## Styles with className 

```JavaScript
function MyComponent() {
  return (
    <Grid className="grid" columns={3}>
      <Cell>A</Cell>
      <Cell>B</Cell>
    </Grid>
  );
}
```

## Styles with Material UI (MUI)

https://mui.com/material-ui

```TypeScript
import Grid from "../ui/Grid";
import Cell from "../ui/Cell";

function MyComponent() {
  return (
    <Grid columns={3}>
      <Cell sx={{ backgroundColor: "tomato" }}>A</MuiCell>
      <Cell columns={2} sx={{ p: 1.5 }}>B</MuiCell>
    </Grid>
  );
}
```

```TypeScript
// ui/Grid.tsx
import { Grid, GridProps } from "@mukhindev/react-grid";
import { Box, BoxProps } from "@mui/material";

export default function MuiGrid(props: GridProps & BoxProps) {
  return <Box component={Grid} {...props} />;
}
```

```TypeScript
// ui/Cell.tsx
import { Cell, CellProps } from "@mukhindev/react-grid";
import { Box, BoxProps } from "@mui/material";

export default function MuiCell(props: CellProps & BoxProps) {
  return <Box component={Cell} {...props} />;
}
```
npm package: @mukhindev/react-spacing
Description: Add margin and padding without creating a DOM-wrapper
Author: Sergey Mukhin
Latest version: 1.0.1

# @mukhindev/react-spacing

Add margin and padding without creating a DOM-wrapper

## Install

⚠️ Dependencies: Your project need work with CSS modules.

```
npm install @mukhindev/react-spacing
```

## CSS Modules

Package components use the CSS modules without pre-processing, so you can process them to suit your build. Vite and Next.js support CSS modules.

## Example

```JavaScript
import Spacing from "@mukhindev/react-spacing";

export default function App() {
    return (
        <main>
            <Spacing m={0} mb={16}>
                <h1>Hello World!</h1>
            </Spacing>
            <Spacing p={[8, 12]}>
                <button>Greet</button>
            </Spacing>
        </main>
    )
}
```

DOM:

```html
<main>
    <h1 class="" style="">Hello World!</h1>
    <button class="" style="">Greet</button>
</main>
```

## Element requirements

The wrapped element must support `className` and `style` props.

## Props

| Prop | Spacing         | Value                  | Priority |
|------|-----------------|------------------------|----------|
| `m`  | margin          | string, number, array  | 1        |
| `mt` | margin-top      | string, number         | 2        |
| `mr` | margin-right    | string, number         | 2        |
| `mb` | margin-bottom   | string, number         | 2        |
| `ml` | margin-left     | string, number         | 2        |
| `p`  | padding         | string, number, array  | 1        |
| `pt` | padding-top     | string, number         | 2        |
| `pr` | padding-right   | string, number         | 2        |
| `pb` | padding-bottom  | string, number         | 2        |
| `pl` | padding-left    | string, number         | 2        |

## Values

`string` — no transform  
`number` — as px  
`array` — see Array values table


## Array values

Array values works with `m` and `p`

| Values             | Meaning                              |
|--------------------|--------------------------------------|
| `[42]`             | [`all`]                              |
| `[42, 42]`         | [`top and bottom`, `right and left`] |
| `[42, 42, 42]`     | [`top`, `right and left`, `bottom`]  |
| `[42, 42, 42, 42]` | [`top`, `right`, `bottom`, `left`]   |
npm package: @mukhindev/react-svg-use-symbol
Description: Easy use of SVG symbols in react
Author: Sergey Mukhin
Latest version: 1.1.0

# @mukhindev/react-svg-use-symbol

Easy use of SVG symbols in React

## Install

```
npm install @mukhindev/react-svg-use-symbol
```

## One-component example

```JavaScript
import { createSVGSymbols } from "@mukhindev/react-svg-use-symbol";

const { Symbols, SVG } = createSVGSymbols({
  "two-circles": (
    <svg viewBox="0 0 24 24">
      <circle cx={8} cy={8} r={8} fill="tomato"></circle>
      <circle cx={16} cy={16} r={8} fill="seagreen"></circle>
    </svg>
  ),
  box: (
    <svg viewBox="0 0 24 24">
      <rect x={4} y={4} width={16} height={16} fill="currentColor"></rect>
    </svg>
  ),
});

export default function MyComponent() {
  return (
    <div>
      <SVG use="two-circles" height={24} width={24} />
      <SVG use="box" height={24} width={24} color="palevioletred" />
      <SVG use="box" height={24} width={24} color="royalblue" />
      <Symbols />
    </div>
  );
}
```

## Icons example

The previous example is intended as a quick demonstration, but is of little use.
`<use>` and `<symbol>` are useful when there are a lot of reused graphics. For example icons.

```
src
 ┣━ app
 ┃   ┗━ App.tsx
 ┣━ entities
 ┃   ┗━ MyComponent.tsx
 ┗━ ui
     ┗━ Icon
         ┣━ icons
         ┃   ┣━ boxIcon.tsx
         ┃   ┗━ twoCirclesIcon.tsx
         ┗━ index.ts
```

```JavaScript
// Icon/icons/boxIcon.tsx
export default (
  <svg viewBox="0 0 24 24">
    <rect x={4} y={4} width={16} height={16} fill="currentColor"></rect>
  </svg>
);
```

```JavaScript
// Icon/icons/twoCirclesIcon.tsx
export default (
  <svg viewBox="0 0 24 24">
    <circle cx={9} cy={9} r={6} fill="tomato"></circle>
    <circle cx={15} cy={15} r={6} fill="seagreen"></circle>
  </svg>
);
```

```JavaScript
// Icon/index.ts
import { createSVGSymbols } from "@mukhindev/react-svg-use-symbol";
import boxIcon from "./icons/boxIcon";
import twoCirclesIcon from "./icons/twoCirclesIcon";

export const { Symbols: IconSymbols, SVG: Icon } = createSVGSymbols({
  "two-circles": twoCirclesIcon,
  box: boxIcon,
});
```

```JavaScript
// App.ts
import { IconSymbols } from "src/ui/Icon";

export default function App(props) {
  const { children } = props;

  return (
    <main>
      {children}
      <IconSymbols />
    </main>
  );
}
```

```JavaScript
// MyComponent.ts
import { Icon } from "src/ui/Icon";

export default function MyComponent() {
  return (
    <div>
      <Icon use="two-circles" height={24} width={24} />
      <Icon use="box" height={24} width={24} color="palevioletred" />
      <Icon use="box" height={24} width={24} color="royalblue" />
    </div>
  );
}
```
npm package: @mukhindev/react-teleport
Description: EN: Teleport for React-nodes   RU: Телепорт для React-нод
Author: Sergey Mukhin
Latest version: 1.0.0

# @mukhindev/react-teleport

EN: Teleport for React-nodes  
RU: Телепорт для React-нод

## Установка

```
npm install @mukhindev/react-teleport
```

## Использование

```TSX
import { createTeleport } from "@mukhindev/react-teleport";

const Teleport = createTeleport();

function Demo() {
  return (
    <Teleport.Provider>
      Сюда переместится телепортируемое: <Teleport.To />
      <Child />
    </Teleport.Provider>
  );
}

function Child() {
  return (
    <div>
      Следующий элемент переместится в компонент Demo:
      <Teleport.From>
        <p>Меня телепортирует из Child в Demo</p>
      </Teleport.From>
    </div>
  );
}
```

## Teleport.To: children-функция

Что если мы хотим обёртку вокруг места куда совершается перемещения?

```TSX
<div className="wrapper">
  <Teleport.To />
</div>
```

Проблема решения выше, то что если ничего через телепорт не поступит,
останется пустая обёртка `.wrapper`.  
Если нужно реализовать обёртку, которая будет появляться только если
телепортация произошла, используйте children-функцию которая принимает
передаваемую ноду:

```TSX
<Teleport.To>
  {(node) => (
    {/* Обёртка .wrapper будет только если в телепорт что-то поступило */}
    <div className="wrapper">
      {node}
    </div>
  )}
</Teleport.To>
```
npm package: @mukhindev/text-transformer
Description: Step by step, transform the text as you wish
Author: Sergey Mukhin
Latest version: 0.1.0

# Text Transformer

Step by step, transform the text as you wish.

## Build-in transformers:

- markdownTableTransformer
- markdownParagraphTransformer
- markdownCodeTransformer

```js
import {
  markdownTableTransformer,
  markdownParagraphTransformer,
  markdownCodeTransformer,
} from "./transformers/index.js";
```