open-index/open-npm huggingface dataset:
npm package: @guygrigsby/react-mtg-cards
Description: Create custom Magic: The Gathering Cards in React
Author: guygrigsby
Latest version: 1.1.46

# react-mtg-cards

> Create custom Magic: The Gathering Cards in React

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

## Install

```bash
npm install --save react-mtg-cards
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'react-mtg-cards'
import 'react-mtg-cards/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [guygrigsby](https://github.com/guygrigsby)
npm package: @guyka/gk-ui
Description: UI
Author: Guy Kabilio
Latest version: 1.0.9

# GK-UI

UI library for React

## Description

Simple UI libaray for all kinds of react projects / apps .

## Initialize

-   **Install dependencies**

```
$ npm i @guyka/gk-ui
```

-   **Import and usage**

```
import {Button} from '@guyka/gk-ui'

const MyPage = () =>{

return (
    <div>
      / .... /
          <Button
          onClick={...}
          text='Submit'
          type='button'
          color='white'
          fontWeight='600'
          width='150px'
          />
    </div>
  )
}

```

## License

MIT © [Guy Kabilio](https://github.com/guykabi)
npm package: @guyn-style/menu
Description: Guyn Style Menu Module
Author: Sil van Diepen
Latest version: 0.1.0-alpha.16

# Menu

## the mixin

```scss
.nav__trigger {
	span {
		@include menu();
	}
}
```

| Argument            | Default | Description                |
| ------------------- | ------- | -------------------------- |
| width               | 1.5rem  | Width of the burger itself |
| height              | rem(2)  | Height of one line         |
| gutter              | rem(5)  | Gutter between the lines   |
| color               | white   | Color of the lines         |
| round               | 0       | Roundness of the lines     |
| transition-duration | 0.3s    | Transition duration        |

::: tip
Make sure to give your parent element some styling
:::

The burger will be absolutely positioned in his parent, so if you the parent doesnt have a position, you have to go look for your burger.

```css
.nav__trigger {
	position: relative;
	width: 3rem;
	height: 3rem;
	background-color: #ff0099;
	...;
}
```

## Helper mixins

### menu-close

With the close mixin, you can easily make your burger in to an X. Add this mixin to your class somehwere based on another class. For instance if the parent gets a modifier active like `.nav__trigger--active`:

```scss
.nav__trigger {
	span {
		@include menu();
	}
	&--active {
		span {
			@include menu-close();
		}
	}
}
```

### menu-body

Target the "body" of the lines. With this mixin you can add extra styling to the lines.

```scss
.nav__trigger {
	span {
		@include menu();
		@include menu-body {
			background-image: linear-gradient(to bottom, blue, green);
		}
	}
}
```

### menu-body-first, menu-body-middle, menu-body-right

Target the first, middle or right "body" of the lines. With this mixin you can add extra styling to a specific line.

```scss
.nav__trigger {
	span {
		@include menu();
		@include menu-body-first {
			background-image: linear-gradient(to bottom, blue, green);
		}
	}
}
```

### menu-body-close

Target the body of the lines, when the lines are closed.

```scss
.nav__trigger {
	span {
		@include menu();
		@include menu-body-close {
			background-image: linear-gradient(to bottom, blue, green);
		}
	}
	&--active {
		span {
			@include menu-close();
		}
	}
}
```
npm package: @guyn-style/patterns
Description: Guyn Style Patters Module
Author: Sil van Diepen
Latest version: 0.1.0-alpha.9

# Patterns

Patterns can be handy for decorational use, thats why it doesn't come by default but you can enable them.

<div class="patterns">
	<div class="pattern-1 pattern-checkered"></div>
	<div class="pattern-2 pattern-cubes"></div>
	<div class="pattern-3 pattern-dots"></div>
	<div class="pattern-4 pattern-houndstooth"></div>
	<div class="pattern-4 pattern-lines"></div>
	<div class="pattern-4 pattern-zigzag"></div>
</div>

Define the colors and settings with css custom properties.

```css
/* Sizing */
--pattern-size: 0.75rem;
--pattern-spacing: 0.2rem;

/* Color */
--pattern-color-primary: #1eb3e0;
--pattern-color-secondary: #460537;
```

<style lang="scss">
.patterns{
	display: grid;   
	grid-template-columns: 50% 50%;
	--pattern-color-primary: #1eb3e0;
	--pattern-color-secondary: #460537;
}
.pattern-1{
	--pattern-size: .75rem;
	--pattern-spacing: .2rem;
}

div[class^="pattern-"] {
	width: 100%; height: 0; padding-bottom: 100%; 
}
</style>
npm package: @guyn-style/settings
Description: Guyn Style Settings Module
Author: Sil van Diepen
Latest version: 0.1.0-alpha.13

# Settings

Guyn comes with a some default settings. These settings are used all through the framework.

## Defaults

| \$variable            | Description                                                                                                                                   |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `$base-prefix`        | The prefix is used as a prefix for all classes which Guyn will output. By default the prefix is empty and thus won't display.                 |
| `$base-grid-prefix`   | The grid-prefix is used as a prefix only grid classes. This so you can use Guyn in combination with other frameworks without class conflicts. |
| `$base-border-radius` | The border radius is applied to multiple other components, but you can also just use it as a variable all through your project.               |
| `$base-space`         | Every projects has a default spacing, this can be set with this variable and is also used in multiple components.                             |
| `$base-font-size`     | The body font-size is the most important set value in het project. This because all `rem` values will be depending on this value.             |
| `$base-font-path`     | The font-path is used when including the fonts. This can be overriden in settings. As described in [typography](/doc/typography)              |
| `$base-image-path`    | A variable set to use in your project.                                                                                                        |
| `$base-cubic-bezier`  | The default cubic bezier, which you can use in the transition, animations etc. Edit this to give your project it's own feel.                  |
| `$base-box-shadow`    | A default box shadow which is being applied on multiple components. Can be used as a variable or just set to none.                            |

Redefining the `$base-...` variables can be don in the \_tools/pre.scss In that case they can be used everywhere.
npm package: @guyn/coat
Description: Let your HTML put on a coat
Author: Sil van Diepen
Latest version: 1.0.17

---
menu: footer
---

# Coat

Coat is a tiny css file, which you can include to make pages look nice.

Styling your markdown documentation has never been that easy. Just throw in the file and there you go.

### Installation

You can either add it in your `html > head` as

```html
<link
	rel="stylesheet"
	type="text/css"
	href="https://coat.guyn.nl/theme/coat.css"
/>
```

or import it directly in your stylesheet;

```css
@import "https://coat.guyn.nl/theme/coat.css";
```

### Extended version

The default version of every theme includes the basic styling for a markdown page directly in the body. If you want to use headers, footers, sidebar and footnote (like [https://dokkie.dev](dokkie) uses), you can add `-ext` to every theme like `https://coat.guyn.nl/theme/coat-ext.css`.
npm package: @guyn/ds
Description: Guyn Design System
Author: Sil van Diepen
Latest version: 0.0.4

# Guyn Design System

A pretty design system which can be used by anyone. 


## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run dev
```

### Compiles and minifies for production
```
npm run build:docs
```

### Compiles and minifies for packaging
```
npm run build:components
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @guyn/tools
Description: Tools for converting and typing colors
Author: Sil van Diepen
Latest version: 1.0.11

# Guyn Tools

### Convert, find, check and manipulate colors.

Guyn Tools is a collection of Javascript functions to deal with colors.

## Convert

#### rgbToHex

Convert rgb color to hex

```js
rgbToHex({ r: 0, g: 0, b: 0 }); // #000000
```

#### hexToRgb

Convert hex color to rgb

```js
hexToRgb('#000000'); // {r: 0, g: 0, b: 0})
```

#### rgbToHsl

Convert rgb color to hsl

```js
rgbToHsl({ r: 0, g: 0, b: 0 }); // {h: 0, s: 0, l: 100}
```

#### hexToHsl

Convert hex color to hsl

```js
hexToHsl('#000000'); // {h: 0, s: 0, l: 100}
```

## Checking

#### isHex

Is this string a hex color?

```js
isHex('#000000'); // true
isHex('#00000'); // false
isHex('#000'); // false
isHex('#ff00gg'); // false
```

#### isObjectString

Check if a string could be a valid object.

```js
isObjectString('something'); // false
isObjectString('"{"test":"test"}"'); // true
```

## Hex Strings

#### toHexChars

Convert a possible hex color code to a valid hex color code

```js
toHexChars(' #00aa 00'); // #00aa00
toHexChars('#fff'); // #ffffff;
toHexChars('#fffaabbaa'); // #fffaab;
```

#### toHexCharsGroup

Convert an array of possible hex color codes to valid color codes.

```js
toHexChars([' #00aa 00', '#fff']); // ['#00aa00', '#ffffff']
```

#### findHex

Find all Hex colors in a string

```js
findHex('#000#aaa#abcdef'); // ['#000000','#aaaaaa', '#abcdef']
```
npm package: @guyo13/hardware-wallets
Description: Hardware Wallet support for ethers.
Author: Guy Or
Latest version: 5.4.5

Hardware Wallets
================

Thid is still very experimental.

I only have 1 ledger nano, and testing is done locally (CirlceCI doesn't have
ledgers plugged in ;)).

API
===

```
import { LedgerSigner } from "@ethersproject/hardware-wallets";
const signer = new LedgerSigner(provider, type, path);
// By default:
//   - in node, type = "hid"
//   - path is the default Ethereum path (i.e.  `m/44'/60'/0'/0/0`)
```

License
=======

All ethers code is MIT License.

Each hardware wallet manufacturer may impose additional license
requirements so please check the related abstraction libraries
they provide.

All Firefly abstraction is also MIT Licensed.