open-index/open-npm huggingface dataset:
npm package: @flxaco/button
Description: Button component provides postcss, jsx, and a Storybook example.
Author: Nick Fletcher
Latest version: 0.0.16

# @flxaco/button

Button styles and sizes.

### Installation

```
npm install @flxaco/button --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@flxaco/button';`
- Native CSS: `@import url('dist/button.css');`
- Link tag: `<link href="dist/button.css" rel="stylesheet" type="text/css">`

### Developer notes

To use with default values:

```css
@import "@flxaco/button";
```

To override variables in a project:

```css
@import "@flxaco/constants";

@import "path/to/local/project/vars.css";

@import "@flxaco/button/src/_button.css";

.button {
  /* Overrides */
}
```
npm package: @flxaco/buttons
Description: buttons component
Author: Nick Fletcher
Latest version: 0.0.3

# @flxaco/buttons

Multiple button styles and sizes.

![buttons  component](https://previousnext.github.io/mixtape/screenshots/buttons.png)

### Installation

```
npm install @flxaco/buttons --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@flxaco/buttons';`
- Sass/Eyeglass: `@import 'mixtape-buttons';`
- Native CSS: `@import url('dist/buttons.css');`
- Link tag: `<link href="dist/buttons.css" rel="stylesheet" type="text/css">`

### Developer notes

To use with default values:

```css
@import "@flxaco/buttons";
```

To override variables in a project:

```css
@import "@flxaco/constants";

@import "path/to/local/project/vars.css";

@import "@flxaco/buttons/src/_buttons.css";

.button {
  /* Overrides */
}
```
npm package: @flxaco/constants
Description: CSS Custom Properties used by postcss components.
Author: Nick Fletcher
Latest version: 0.0.15

# @flxaco/constants

Global variables.

### Installation

```
npm install @flxaco/constants --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@flxaco/constants';`
- Native CSS: `@import url('dist/constants.css');`
- Link tag: `<link href="dist/constants.css" rel="stylesheet" type="text/css">`

### Developer notes

To override variables in a project:

```css
@import "@flxaco/constants";

:root {
  --brand-primary: hsl(24, 95%, 50%);
  --brand-secondary: hsl(123, 41%, 45%);
} /* Or import project var file */

@import "@flxaco/component/src/_component.css";

.component {
  /* Overrides */
}
```
npm package: @flxaco/header
Description: header component
Author: Nick Fletcher
Latest version: 0.0.18

# @flxaco/header

Header component.

### Installation

```
npm install @flxaco/header --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@flxaco/header';`
- Native CSS: `@import url('dist/header.css');`
- Link tag: `<link href="dist/header.css" rel="stylesheet" type="text/css">`

### Developer notes

To use with default values:

```css
@import "@flxaco/header";
```
npm package: @flxaco/logo
Description: Logo component or site title.
Author: Nick Fletcher
Latest version: 0.0.15

# @flxaco/logo

Logo component.

### Installation

```
npm install @flxaco/logo --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@flxaco/logo';`
- Native CSS: `@import url('dist/logo.css');`
- Link tag: `<link href="dist/logo.css" rel="stylesheet" type="text/css">`

### Developer notes

To override variables in a project:

```css
@import "@flxaco/logo";
```
npm package: @flxaco/post
Description: Post or Article component.
Author: Nick Fletcher
Latest version: 0.0.15

# @flxaco/post

Post or Article component.

### Installation

```
npm install @flxaco/post --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@flxaco/post';`
- Native CSS: `@import url('dist/post.css');`
- Link tag: `<link href="dist/post.css" rel="stylesheet" type="text/css">`
npm package: @flxaco/profile
Description: Profile component, displays writer/user contact details and links.
Author: Nick Fletcher
Latest version: 0.0.15

# @flxaco/profile

Profile component

### Installation

```
npm install @flxaco/profile --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@flxaco/profile';`
- Native CSS: `@import url('dist/profile.css');`
- Link tag: `<link href="dist/profile.css" rel="stylesheet" type="text/css">`

### Developer notes

To use with default values:

```css
@import "@flxaco/profile";
```
npm package: @flxaco/tag
Description: tag component
Author: Nick Fletcher
Latest version: 0.0.15

# @flxaco/tag

Tag component

### Installation

```
npm install @flxaco/tag --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@flxaco/tag';`
- Native CSS: `@import url('dist/tag.css');`
- Link tag: `<link href="dist/tag.css" rel="stylesheet" type="text/css">`

### Developer notes

To use with default values:

```css
@import "@flxaco/tag";
```
npm package: @flxng/circle-timer
Description: Circle Timer (countdown) component for Angular.
Author: seidme
Latest version: 1.1.5


# @flxng/circle-timer
Flexible, lightweight, easy-to-use, without external dependencies - Circle Timer component for Angular.


## Docs and Demo
https://flxng.codeeve.com/#/circle-timer


## Support
All suggestions and improvements are welcome and appreciated.


## License
The [MIT License](https://github.com/seidme/flxng/blob/master/LICENSE).
npm package: @flxng/code-show
Description: Angular component for highlighting code.
Author: seidme
Latest version: 1.0.4


# @flxng/code-show
Code-show component for Angular.


## Docs and Demo
https://flxng.codeeve.com/#/code-show


## Support
All suggestions and improvements are welcome and appreciated.


## License
The [MIT License](https://github.com/seidme/flxng/blob/master/LICENSE).
npm package: @flxng/common
Description: Flxng common package
Author: seidme
Latest version: 1.1.4


# @flxng/common
Common utilities, directives, pipes, components, etc.


## Docs and Demo
https://flxng.codeeve.com/#/common


## Getting Started
Installation:
```bash
$ npm install @flxng/common
```

Importing module:
```javascript
import { CommonModule as FlxngCommonModule } from '@flxng/common';

@NgModule({
  imports: [FlxngCommonModule],
  declarations: [],
})
export class DemoModule {}
```


## Support
All suggestions and improvements are welcome and appreciated.


## License
The [MIT License](https://github.com/seidme/flxng/blob/master/LICENSE).
npm package: @flxng/loader
Description: Loader component for Angular.
Author: seidme
Latest version: 1.1.5


# @flxng/loader
Flexible, lightweight, easy-to-use, without external dependencies - Loader component for Angular.


## Docs and Demo
https://flxng.codeeve.com/#/loader


## Support
All suggestions and improvements are welcome and appreciated.


## License
The [MIT License](https://github.com/seidme/flxng/blob/master/LICENSE).
npm package: @flxng/treetable
Description: Treetable component for Angular
Author: seidme
Latest version: 1.2.0


# @flxng/treetable
A flexible, feature-rich, customizable, lightweight Angular Treetable component without external dependencies which exposes intuitive and easy-to-use APIs.


## Docs and Demo
https://flxng.codeeve.com/#/treetable


## Getting Started
Installation:
```bash
$ npm i @flxng/common && npm i @flxng/paginator && npm i @flxng/treetable
```

After importing the module the lib is ready to use:
```typescript
import { TreetableModule } from '@flxng/treetable';

@NgModule({
  imports: [TreetableModule],
  declarations: [],
})
export class DemoModule {}
```

## Usage
Check [Docs and Demo](https://flxng.codeeve.com/#/treetable).


## Support
All suggestions and improvements are welcome and appreciated.


## License
The [MIT License](https://github.com/seidme/flxng/blob/master/LICENSE).
npm package: @flxp/phantom-html2pdf
Description: A fork of phantom-html2pdf. Simple and lightweight HTML to PDF conversion using Node and PhantomJS
Author: ToanVQ
Latest version: 1.0.4
Deprecated: Deprecated

# phantom-html2pdf for NodeJS

Simple and lightweight HTML to text conversion using Node and PhantomJS.

## Installation

````
npm install phantom-html2pdf
````

## Dependencies

1. PhantomJS
2. Async
3. Temp
4. Debug

## Conversion API

The API exposes a single function 'convert'. Using this function, you can input a multitude of settings, which are further specified below:

```` javascript
var pdf = require('phantom-html2pdf');

pdf.convert(options, function(result) {

	/* Using a buffer and callback */
	result.toBuffer(function(returnedBuffer) {});

	/* Using a readable stream */
	var stream = result.toStream();

	/* Using the temp file path */
	var tmpPath = result.getTmpPath();

	/* Using the file writer and callback */
	result.toFile("/path/to/file.pdf", function() {});
});
````

## Options

Calling convert() requires an options object, which includes the following definitions:

```` json
{
	"html" : "Path to HTML file",
	"css" : "Path to additional CSS file",
	"js" : "Path to additional JavaScript file",
	"runnings" : "Path to runnings file. Check further below for explanation.",
	"paperSize" : "Two ways to do this, see below",
	"deleteOnAction" : true/false (Deletes the created temp file once you access it via toBuffer() or toFile())
}
````

Instead of paths, one can also provide properly escaped source code.

## Paper Size

Either supply a paper format, orientation and border (this is the default)
```` javascript
{format: 'A4', orientation: 'portrait', border: '1cm'}
````
Or supply a page width, height and border.
```` javascript
{width: '3in', height: '2in', border: '0.5in'}
````

See link below for accepted units and formats



## Runnings File

https://github.com/ariya/phantomjs/wiki/API-Reference-WebPage#wiki-webpage-paperSize

## Known issues

On Macs the generated PDF is going to be a bitmap, however it works perfectly fine on Linux and Windows Servers.
So be careful when developing and testing on Macs; it's going to work in production :-)

## License

[MIT](LICENSE)
npm package: @flxsense/svelte-ui
Description: A collection of Svelte components for building interfaces.
Author: Jeppe Christiansen
Latest version: 1.0.13

# Flexsense UI components for Svelte 5 projects

## Usage

Add the library

```bash
pnpm add @flexsense/ui-svelte
```

All components are themed using CSS variables. For now see `src/app.css` for the variables that need to be set.