open-index/open-npm huggingface dataset:
npm package: @fye/serverless-plugin-ncc
Description: A serverless plugin to use @vercel/ncc for bundling
Author: Jaydeep Solanki
Latest version: 0.5.0

# serverless-plugin-ncc

A serverless plugin to use [@zeit/ncc](https://www.npmjs.com/package/@vercel/ncc) for compiling code before packaging.

## Usage

```sh
npm install -D serverless-plugin-ncc @vercel/ncc
```

`@vercel/ncc` is a peer dependency, so we'll have to install it separately.

Add the pluging to `serverless.yml`

```yml
plugins:
  - serverless-plugin-ncc
```

## How to use with TypeScript files?

```yml
# serverless.yml

functions:
  typescriptFn:
    # the plugin checks for src/index.ts as well as src/index.js
    # whichever exists is picked up
    handler: src/index.handler
```

## Pass options

Custom options can be passed to ncc like this:
```yml
# serverless.yml

custom:
  ncc:
    minify: true
```
Note that all options are currently passed directly to ncc. To view all possible options
check the [ncc docs](https://github.com/vercel/ncc#programmatically-from-nodejs)

## Pass custom options per-function

Passing custom options to a function is as simple as introducing a custom block under the function with your ncc config

```yml
# serverless.yml

functions:
  hello:
    handler: src/hello/index.hello
    custom:
      ncc:
        minify: false
```

## Disable ncc per function

You can pass `enabled: false` as custom config per function to disable ncc on that function

```yml
# serverless.yml

functions:
  hello:
    handler: src/hello/index.hello
    custom:
      ncc:
        enabled: false
```

## License

MIT
npm package: @fyears/eme
Description: EME (Encrypt-Mix-Encrypt) wide-block encryption in TypeScript/JavaScript.
Latest version: 0.0.3

# EME

EME (Encrypt-Mix-Encrypt) wide-block encryption in TypeScript/JavaScript.

## Intro

Pure and full TypeScript/JavaScript port of <https://github.com/rfjakob/eme>.

Almost line-to-line "translation", with all the ported test cases.

## Usage

```bash
npm install @fyears/eme
```

```typescript
import { EMECipher, AESCipherBlock } from "@fyears/eme"
import { deepStrictEqual } from "assert"
import { webcrypto } from "crypto"

(async function(){
    const key = new Uint8Array([
        0,1,2,3,4,5,6,7,
        8,9,10,11,12,13,14,15
    ]) // 16-byte Uint8Array the user provided for the AES part

    const tweak = new Uint8Array(16)
    webcrypto.getRandomValues(tweak)  // iv

    const input = new Uint8Array(64) // some Uint8Array the user provided
    webcrypto.getRandomValues(input)

    const bc = new AESCipherBlock(key)
    const eme = new EMECipher(bc)

    const output = await eme.encrypt(tweak, input)
    const inputBack = await eme.decrypt(tweak, output)

    deepStrictEqual(inputBack, input)
})()
```
npm package: @fyears/rclone-crypt
Description: RClone Crypt
Latest version: 0.0.7

# RClone Crypt

RClone Crypt algorithm subset implemented in TypeScript/JavaScript.

This is basically some line-to-line translations of [`rclone/backend/crypt/cipher.go`](https://github.com/rclone/rclone/blob/master/backend/crypt/cipher.go) and [`rclone/backend/crypt/cipher_test.go`](https://github.com/rclone/rclone/blob/master/backend/crypt/cipher_test.go), with limited features.

# Why

Because I'd like to encrypt files using widely-used rclone format in TypeScript/JavaScript.

# Usage

```bash
npm install @fyears/rclone-crypt
```

```typescript
import { Cipher } from "@fyears/rclone-crypt";
import { deepStrictEqual } from "assert";

(async function () {
  const password = "custom-password";
  const salt = "custom-salt";
  const cipher = new Cipher("base32");
  await cipher.key(password, salt);

  const fileName = "custom-dir/custom-filename";
  const encFileName = await cipher.encryptFileName(fileName);
  console.log(encFileName);
  const recoveredFileName = await cipher.decryptFileName(encFileName);
  console.log(recoveredFileName);
  deepStrictEqual(fileName, recoveredFileName);

  const fileContent = new Uint8Array([1, 2, 3, 4, 5]); // user provided
  const encFileContent = await cipher.encryptData(fileContent);
  console.log(encFileContent);
  const recoveredFileContent = await cipher.decryptData(encFileContent);
  console.log(recoveredFileContent);
  deepStrictEqual(fileContent, recoveredFileContent);
})();
```

# Features

- [x] file name encryption/decryption
- [x] file content encryption
- [x] many tests
- [ ] streaming encryption/decryption
- [ ] ~~file name obfuscate (not planned)~~
npm package: @fyears/tsqueue
Description: implement queue and stack
Author: fyears
Latest version: 1.0.1

# implementation of Queue and Stack in TypeScript/JavaScript

## idea

Inspired from [this](https://stackoverflow.com/questions/1590247/how-do-you-implement-a-stack-and-a-queue-in-javascript).

An array is a stack in js. But `Array.prototype.shift()` is **NOT** an O(1) operation. So a queue should be implemented using two stacks to get amortized O(1) `pop` time.

## install

```bash
npm i @fyears/tsqueue
```

## usage

```typescript
import { Queue } from '@fyears/tsqueue';

const q = new Queue<string>();

q.push('abc');
q.push('efg');

const xx = q.pop();
console.log(xx); // abc

console.log(q.length); // 1

q.pop();
console.log(q.length); // 0

const xx2 = q.pop();
console.log(xx2); // undefined
```
npm package: @fyfirman/mcp-postgresql
Description: MCP server for interacting with PostgreSQL databases
Author: fyfirman
Latest version: 1.0.6

# PostgreSQL Server for Model Context Protocol

This is a PostgreSQL server implementation for the Model Context Protocol. It provides a simple interface to interact with PostgreSQL databases.

## Installation

```bash
npm install
```

## Configuration

Create a configuration object with your PostgreSQL connection details:

```typescript
const config = {
  host: 'localhost',
  port: 5432,
  database: 'your_database',
  user: 'your_user',
  password: 'your_password',
  ssl: false // optional
};
```

## Usage

```typescript
import { PostgresServer } from './server';

// Create a new server instance
const server = new PostgresServer(config);

// Test connection
const isConnected = await server.testConnection();
console.log('Connection successful:', isConnected);

// Execute a query
const results = await server.query('SELECT * FROM your_table');
console.log('Query results:', results);

// Close the connection when done
await server.close();
```

## Development

- Build: `npm run build`
- Test: `npm run test`
- Lint: `npm run lint`

## License

MIT
npm package: @fyfm/teabag
Description: Forum DApp berbasis TEA blockchain
Author: fyfme
Latest version: 1.0.0


# 🫖 TEA BAG

**TEA BAG** is a decentralized forum built on the **TEA Protocol** network. This application allows anyone to express opinions, thoughts, or ideas about the TEA ecosystem freely and openly. All messages are stored on the blockchain, making them transparent and immutable.

## 🚀 Demo
> [🔗 https://teabag-rose.vercel.app/]

---

## 📚 What is TEA Protocol?

[TEA Protocol](https://tea.xyz/) is a decentralized protocol that rewards open-source software projects based on their impact, without requiring complex tokenomics. With TEA, projects like TEA BAG can earn TEA Rank and potential rewards simply by being OSS (Open Source Software).

---

## ✨ Key Features

- 💬 Write and read public messages
- ⛓️ All messages are stored on-chain (TEA Sepolia)
- 🔐 Wallet authentication (Metamask)
- 📜 Transparent and open source smart contracts
---

## 🛠️ Technologies Used

- **Frontend:** React, TailwindCSS, Framer Motion
- **Smart Contracts:** Solidity, Hardhat
- **Blockchain:** [TEA Sepolia Testnet](https://sepolia.tea.xyz/)
- **Web3 Integration:** ethers.js

---

## 🚀 How to Run the Project

### 1. Clone the repository
```bash
git clone https://github.com/fyfme/teabag.git
cd teabag
```

### 2. Install dependencies
```bash
npm install
```

### 3. Start the local development server
```bash
npm run dev
```

### 4. Deploy smart contract (optional)
```bash
npx hardhat run scripts/deploy.js --network tea
```

---

## 🤝 Contributions

We welcome contributions from anyone who wants to help improve, fix, or expand TEA BAG. Feel free to open [Issues](https://github.com/fyfme/teabag/issues) or submit a Pull Request!

---

## 🪪 License

This project is licensed under the [MIT License](./LICENSE).

---

## 🧾 OSS Status

TEA BAG is an OSS (Open Source Software) project and will be registered on [tea.xyz](https://app.tea.xyz) to gain TEA Rank and recognition from the TEA community.

---

## 🙌 Contributors

- [fyfme](https://github.com/fyfme) – Creator and Developer
npm package: @fyipedia/ipfyi
Description: IP geolocation and ASN lookup API client — ipfyi.com. Zero dependencies.
Author: FYIPedia
Latest version: 0.1.0

# ipfyi

IP geolocation and ASN lookup API client — [ipfyi.com](https://ipfyi.com). Zero dependencies.

## Install

```bash
npm install ipfyi
```

## Quick Start

```typescript
import { IPFYI } from "ipfyi";

const client = new IPFYI();
const results = await client.search("cloudflare");
console.log(results);
```

## License

MIT
npm package: @fyit/crouton-devtools
Description: DevTools integration for Nuxt Crouton - visual inspection and management of CRUD collections
Author: FYIT
Latest version: 0.1.0

# @fyit/crouton-devtools

DevTools integration for Nuxt Crouton - visual inspection and management of CRUD collections.

## Features

- 🔍 **Collection Inspector** - View all registered collections in your app
- 📊 **Configuration Details** - Inspect collection schemas, metadata, and settings
- 🎨 **Beautiful UI** - Professional design with smooth animations and dark mode support
- 🔎 **Search & Filter** - Quickly find collections by name, layer, or API path
- ♻️ **Refresh on Demand** - Update collection data without reloading
- 🌙 **Dark Mode** - Automatic dark mode support
- 🚀 **Zero Config** - Works automatically when DevTools is enabled

## Installation

```bash
pnpm add -D @fyit/crouton-devtools
```

## Usage

Add the module to your `nuxt.config.ts`:

```typescript
export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools',
    '@fyit/crouton-devtools'
  ],

  devtools: {
    enabled: true
  }
})
```

That's it! The DevTools integration will automatically appear in your Nuxt DevTools when you run your app in development mode.

## What You'll See

### Collection Inspector

The main view shows all collections registered in your `app.config.croutonCollections`:

- **Collection Cards** - Quick overview of each collection
- **Search & Filter** - Find collections by name, layer, or API path
- **Layer Badges** - Visual indicators for internal/external/custom collections
- **Detail View** - Click any collection to see full configuration

### Collection Details

Each collection displays:

- Name and key
- API path
- Component name (for internal collections)
- Layer type
- Full JSON configuration
- Metadata and custom fields

## Development

This package only runs in development mode and has zero impact on your production builds.

## Requirements

- Nuxt 4+
- @nuxt/devtools
- @fyit/crouton

## Roadmap

This is Phase 1 (MVP) of the DevTools integration. Future phases will include:

- **Phase 2**: CRUD operations monitoring, API endpoint testing
- **Phase 3**: Collection data browser with inline editing
- **Phase 4**: Generator history and rollback management
- **Phase 5**: Schema validation debugger, i18n manager

## License

MIT

## Contributing

Contributions are welcome! Please see the [main repository](https://github.com/pmcp/nuxt-crouton) for guidelines.
npm package: @fykit/appify
Description: Effortless opinionated API bootstrap as module.
Author: Rafael Willians
Latest version: 1.1.1

![Package latest version](https://img.shields.io/npm/v/@fykit/appify/latest.svg?label=%40fykit%2Fappify)
![Required node version](https://img.shields.io/node/v/@fykit/appify.svg?style=flat)
![Supported types](https://img.shields.io/npm/types/@fykit/appify.svg)


# @fykit/appify

## How to install

This is a [Node.js](https://nodejs.org/en/) module available through the [npm registry](https://www.npmjs.com).

Installation is done using the npm install command:

```sh
npm install @fykit/appify
```

## Exported objects

...

## How to use

Comming soon...
npm package: @fykit/appify-http
Description: The native HTTP server for your appify app.
Author: Rafael Willians
Latest version: 1.1.1

![Package latest version](https://img.shields.io/npm/v/@fykit/appify-http/latest.svg?label=%40fykit%2Fappify-http)
![Required node version](https://img.shields.io/node/v/@fykit/appify-http.svg?style=flat)
![Supported types](https://img.shields.io/npm/types/@fykit/appify-http.svg)


# @fykit/appify-http

## How to install

This is a [Node.js](https://nodejs.org/en/) module available through the [npm registry](https://www.npmjs.com).

Installation is done using the npm install command:

```sh
npm install @fykit/appify-http
```

## Exported objects

...

## How to use

Comming soon...
npm package: @fykit/appify-server-factory
Description: The easiest way to create a custom server for your appify app.
Author: Rafael Willians
Latest version: 1.1.1

![Package latest version](https://img.shields.io/npm/v/@fykit/server-builder/latest.svg?label=%40fykit%2Fserver-builder)
![Required node version](https://img.shields.io/node/v/@fykit/server-builder.svg?style=flat)
![Supported types](https://img.shields.io/npm/types/@fykit/server-builder.svg)


# @fykit/server-builder

## How to install

This is a [Node.js](https://nodejs.org/en/) module available through the [npm registry](https://www.npmjs.com).

Installation is done using the npm install command:

```sh
npm install @fykit/server-builder
```

## Exported objects

- default (alias to factory)
- factory
- Argv
- Debugger
- RequestListener

## How to use

Comming soon...
npm package: @fykit/commons
Description: Common objects used accross the fykit packages.
Author: Rafael Willians
Latest version: 1.1.1

![Package latest version](https://img.shields.io/npm/v/@fykit/commons/latest.svg?label=%40fykit%2Fcommons)
![Required node version](https://img.shields.io/node/v/@fykit/commons.svg?style=flat)
![Supported types](https://img.shields.io/npm/types/@fykit/commons.svg)


# @fykit/commons

## How to install

This is a [Node.js](https://nodejs.org/en/) module available through the [npm registry](https://www.npmjs.com).

Installation is done using the npm install command:

```sh
npm install @fykit/commons
```

## Exported objects

- CommonError
- DomainError
- InfrastructureError
- HttpError
- UserFaultHttpError
- BadRequestHttpError
- UnauthorizedHttpError
- PaymentRequiredHttpError
- ForbiddenHttpError
- NotFoundHttpError
- ConflictHttpError
- GoneHttpError
- UnprocessableEntityHttpError
- LockedHttpError
- TooManyRequestsHttpError
- ServerFaultHttpError
- InternalServerErrorHttpError
- ServiceUnavailableHttpError
- environments
    - TEST
    - REVIEW
    - STAGING
    - PRODUCTION
    - DEVELOPMENT


## Errors inheritance tree

- CommonError
    - DomainError
    - InfrastructureError
        - HttpError
            - UserFaultHttpError **4xx**
                - BadRequestHttpError **400**
                - UnauthorizedHttpError **401**
                - PaymentRequiredHttpError **402**
                - ForbiddenHttpError **403**
                - NotFoundHttpError **404**
                - ConflictHttpError **409**
                - GoneHttpError **410**
                - UnprocessableEntityHttpError **422**
                - LockedHttpError **423**
                - TooManyRequestsHttpError **429**
            - ServerFaultHttpError **5xx**
                - InternalServerErrorHttpError **500**
                - ServiceUnavailableHttpError **503**
npm package: @fykit/config
Description: Centralized application-configuration object builder for the cool kids.
Author: Rafael Willians
Latest version: 1.1.1

![Package latest version](https://img.shields.io/npm/v/@fykit/config/latest.svg?label=%40fykit%2Fconfig)
![Required node version](https://img.shields.io/node/v/@fykit/config.svg?style=flat)
![Supported types](https://img.shields.io/npm/types/@fykit/config.svg)


# @fykit/config

## How to install

This is a [Node.js](https://nodejs.org/en/) module available through the [npm registry](https://www.npmjs.com).

Installation is done using the npm install command:

```sh
npm install @fykit/config
```

## Exported objects

- config
- halt
- ConfigError
- ConfigValidationError
- PropertyValueBuildingError
- PropertyValueCastingError
- PropertyValueValidationError

## How to use

Comming soon...
npm package: @fyko/botmart
Description: a package to aide in pulling botmart product prices
Author: Carter 'Fyko' Himmel
Latest version: 0.0.2

# @fyko/botmart
a package to aide in fetching the latest sales of botmart products

## usage
check the [docs](https://github.com/Fyko/botmart/blob/docs/modules/_index_.md)
all viable products are listed [here](https://github.com/Fyko/botmart/blob/docs/modules/_index_.md#const-bots) and [here](https://github.com/Fyko/botmart/blob/docs/modules/_index_.md#const-groups)

## todo
- [ ] type guarding for lifetime & renewal products
npm package: @fyko/jobq
Description: boilerplate for structured task handling.
Author: Carter Himmel
Latest version: 0.2.1

# jobq
Generic **job** **q**ueueing.

## Why?
I got sick of seeing people writing bad implementations of job queues for stuff like a Discord bot temporary-mute system or jobs to expire someone's subscription to a product after n days.  

This system has an internal queueing system so you don't have to wait for items "to fire" after the time of the next check. 

## How do I use it?
There's a great example in the [examples directory](examples/)
npm package: @fyleto/onearray
Description: 1 indexed arrays. Don't kill me this wasn't my idea
Author: YetNT
Latest version: 1.0.1

# oneArray
1 indexed array. This wasn't my idea so don't kill me 😭
I have a slight feeling this may become one of the most controversial packages out there.

# Install

```sh
npm i @fyleto/oneArray
yarn add @fyleto/oneArray
```
 # Use

 ```js
const oneArray = require("@fyleto/oneArray")

let a = new oneArray("hey", "how are you?", 239)

a.pos(1) // "hey"

a.set(3, 134) // sets element 3 (element 2 if you're a normal javascript user) to 134
```

I aplogize for my severe mistake
but then again, you are commiting to the joke.
npm package: @fylgja/aria-only
Description: The aria-only (a.k.a. sr-only) visually hides elements. But keeps it accessible to screen-readers and other aria tools
Author: Fylgja
Latest version: 1.2.4
Deprecated: This Package has been deprecated for @fylgja/utilities, please replace this package with @fylgja/utilities

# Fylgja - Aria-only

[![NPM version](https://img.shields.io/npm/v/@fylgja/aria-only)](https://www.npmjs.org/package/@fylgja/aria-only)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The aria-only (a.k.a. **sr-only**) visually hides elements.

But keeps them accessible to screen-readers and other aria tools.

## Installation

```bash
npm install @fylgja/aria-only
```

Then include the component in to your code via;

```scss
@use "@fylgja/aria-only";
// Or via PostCSS import
@import "@fylgja/aria-only";
```

### Media Query support

If you need support for media queries,
use the following import;

```scss
@use "@fylgja/aria-only" with ($enable-aria-only-mq: true);
// Or via PostCSS import
@import "@fylgja/aria-only/mq";
```

When enabled/used, the aria-only style can be used with the mq prefix,
for example: `md-aria-only`.

The `not-aria-only` option is exclusive to the mq option and unsets the aria-only styles.

For what mq options are available [see the mq package](https://fylgja.dev/components/mq/).

All mq values used by the `$aria-only-breakpoints` variable
take the values directly from the Fylgja Mq component.

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/aria-only" with ($aria-only-layer: "utilities");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/aria-only" layer("utilities");
```

## How to use

For more information see the [aria-only docs on the Fylgja.dev](https://fylgja.dev/components/aria-only/).
npm package: @fylgja/aspect-ratio
Description: The aspect ratio component allows you to make not just videos. But anything you want to a certain responsive aspect ratio
Author: Fylgja
Latest version: 1.2.4
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Aspect Ratio

[![NPM version](https://img.shields.io/npm/v/@fylgja/aspect-ratio)](https://www.npmjs.org/package/@fylgja/aspect-ratio)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The aspect ratio component is used to set videos to a certain responsive aspect ratio,

but can also be used for images and other content.

## Installation

```bash
npm install @fylgja/aspect-ratio
```

Then include the component in to your code via;

```scss
@use "@fylgja/aspect-ratio";
// Or via PostCSS import
@import "@fylgja/aspect-ratio";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/aspect-ratio" with ($aspect-ratio-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/aspect-ratio" layer("components");
```

## How to use

For more information see the [aspect-ratio docs on the Fylgja.dev](https://fylgja.dev/components/aspect-ratio/).
npm package: @fylgja/auto-grid
Description: A super small grid with auto flowing behavior based on the container size. Using a similar method to container queries
Author: Fylgja
Latest version: 1.1.3
Deprecated: This Package has been deprecated for @fylgja/utilities, please replace this package with @fylgja/utilities

# Fylgja - Auto Grid

[![NPM version](https://img.shields.io/npm/v/@fylgja/auto-grid)](https://www.npmjs.org/package/@fylgja/auto-grid)
![license](https://img.shields.io/github/license/fylgja/fylgja)

A super small grid with auto flowing behavior, based on the container size.

Using a similar method to container queries.

This grid uses a minmax method,
it fills the grid items based on the space available.

Where the min value is static value and the max value is `1fr`.

It creates a grid without needing to setup any columns and rows,

since the grid items will do this for you, following the **content first** approach!

## Installation

```bash
npm install @fylgja/auto-grid
```

Then include the component in to your code via;

```scss
@use "@fylgja/auto-grid";
// Or via PostCSS import
@import "@fylgja/auto-grid";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/auto-grid" with ($auto-grid-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/auto-grid" layer("components");
```

## How to use

For more information see the [auto-grid docs on the Fylgja.dev](https://fylgja.dev/components/auto-grid/).
npm package: @fylgja/avatar
Description: The avatar component allows you to make a avatar style with ease
Author: Fylgja
Latest version: 1.1.1
Deprecated: This Package has been deprecated for the UI Library, please replace this package with utilities from @fylgja/utilities, to create the same component

# Fylgja - Avatar

[![NPM version](https://img.shields.io/npm/v/@fylgja/avatar)](https://www.npmjs.org/package/@fylgja/avatar)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The avatar component allows you to make an avatar style with ease.

## Installation

```bash
npm install @fylgja/avatar
```

Then include the component in to your code via;

```scss
@use "@fylgja/avatar";
// Or via PostCSS import
@import "@fylgja/avatar";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/avatar" with ($avatar-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/avatar" layer("components");
```

## How to use

For more information see the [avatar docs on the Fylgja.dev](https://fylgja.dev/components/avatar/).
npm package: @fylgja/badge
Description: The Fylgja badge component
Author: Fylgja
Latest version: 2.0.0

# Fylgja Badge

[![NPM version](https://img.shields.io/npm/v/@fylgja/badge)](https://www.npmjs.com/package/@fylgja/badge)
[![NPM Downloads](https://img.shields.io/npm/dt/%40fylgja%2Fbadge)](https://www.npmjs.com/package/@fylgja/badge)
[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234)](https://github.com/fylgja/fylgja/blob/main/LICENSE)

The Fylgja Badge component allows you to display compact labels or status indicators alongside other UI elements.

This component is ideal for showing counts, status chips, or small tags — for example: unread counts, state indicators (active/inactive), or categorical markers.

## Installation

You can install Fylgja Badge via npm or other Node-based package managers like pnpm or bun:

```bash
npm install @fylgja/badge
```

Alternatively, you can use it directly via a CDN:

```html
<link href="https://cdn.jsdelivr.net/npm/@fylgja/badge/index.min.css" rel="stylesheet">
```

## Usage

Once installed, you can import the full package with:

```css
@import "@fylgja/badge";
```
npm package: @fylgja/base
Description: Base provides a streamlined starting point for any web project. It’s a collection of class-less solutions, allowing you to focus on building your site.
Author: Fylgja
Latest version: 2.1.4

# Fylgja Base

[![NPM version](https://img.shields.io/npm/v/@fylgja/base)](https://www.npmjs.com/package/@fylgja/base)
[![NPM Downloads](https://img.shields.io/npm/dt/%40fylgja%2Fbase)](https://www.npmjs.com/package/@fylgja/base)
[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234)](https://github.com/fylgja/fylgja/blob/main/LICENSE)

Fylgja Base provides a streamlined starting point for any web project.
It’s a collection of class-less solutions,
allowing you to focus on building your site using plain HTML or your preferred frontend language,
without the need to add any additional classes.

If you don't require everything that Fylgja Base offers,
you can import only the parts you need.
For example, the preflight module provides a solid foundation for typography
but excludes styles for forms, buttons, and the HTML dialog element.

## Installation

You can install Fylgja Base via npm or other Node-based package managers like pnpm or bun:

```bash
npm install @fylgja/base
```

Alternatively, you can use it directly via a CDN:

```html
<link href="https://cdn.jsdelivr.net/npm/@fylgja/base/index.min.css" rel="stylesheet">
```

## Usage

Once installed, you can import the full package with:

```css
@import "@fylgja/base";
```

Alternatively, if you only need specific parts of the base, you can import them individually:

| Import Path                     | Description                                           |
| ------------------------------- | ----------------------------------------------------- |
| `@fylgja/base/preflight`        | Global defaults, typography and table defaults        |
| `@fylgja/base/preflight-scoped` | Global defaults, scoped typography and table defaults |
| `@fylgja/base/btn`              | HTML Button styles + `.btn` class for links           |
| `@fylgja/base/btn-class-only`   | Just the `.btn` class for adding btn styles           |
| `@fylgja/base/btn-class-less`   | Just the HTML Button styles                           |
| `@fylgja/base/form`             | Comprehensive form styles                             |
| `@fylgja/base/dialog`           | Dialog styles, including support for popovers         |

### Theme Styles

Fylgja Base provides a clean foundation,
intentionally excluding brand colors and extra styling by default.

To apply a pre-defined theme, import it separately:

```CSS
@import "@fylgja/base/theme";
```

For theme customization, copy the styles to your project:

```Bash
npx @fylgja/base
```

This command will add the theme styles to `src/css`, `src/styles`, or `src/assets` (if present),
or the current directory if no folder is found.

Beyond brand colors, the theme includes styles for dark mode, view transitions,
primary buttons, and off-canvas dialog support.
npm package: @fylgja/borders
Description: The Fylgja borders offers Design Tokens (CSS props) for consistent and semantic borders
Author: Fylgja
Latest version: 1.0.2
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Borders

[![NPM version](https://img.shields.io/npm/v/@fylgja/borders)](https://www.npmjs.org/package/@fylgja/borders)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Fylgja borders offers Design Tokens (CSS props) for consistent and semantic borders.

## Installation

```bash
npm install @fylgja/borders
```

Then include the component in to your code via;

```scss
@use "@fylgja/borders";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/borders"; // *
```

## How to use

For more information see the [borders docs on the Fylgja.dev](https://fylgja.dev/components/borders/).
npm package: @fylgja/breadcrumbs
Description: The Fylgja breadcrumbs component
Author: Fylgja
Latest version: 2.0.1

# Fylgja breadcrumbs

[![NPM version](https://img.shields.io/npm/v/@fylgja/breadcrumbs)](https://www.npmjs.com/package/@fylgja/breadcrumbs)
[![NPM Downloads](https://img.shields.io/npm/dt/%40fylgja%2Fbreadcrumbs)](https://www.npmjs.com/package/@fylgja/breadcrumbs)
[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234)](https://github.com/fylgja/fylgja/blob/main/LICENSE)

The Fylgja breadcrumbs component provides a simple, accessible way to render breadcrumb navigation.

## Installation

You can install Fylgja breadcrumbs via npm or other Node-based package managers like pnpm or bun:

```bash
npm install @fylgja/breadcrumbs
```

Alternatively, you can use it directly via a CDN:

```html
<link href="https://cdn.jsdelivr.net/npm/@fylgja/breadcrumbs/index.min.css" rel="stylesheet">
```

## Usage

Once installed, you can import the full package with:

```css
@import "@fylgja/breadcrumbs";
```

### Basic Usage

The breadcrumbs component can be used with a utility class or completely classless by relying on standard HTML5 accessibility attributes.

#### Classless (Recommended)

To use the breadcrumbs without adding specific CSS classes, simply wrap your list in a `<nav>` element with `aria-label="breadcrumbs"`. This approach promotes semantic HTML and automatic accessibility.

```html
<nav aria-label="breadcrumbs">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#" aria-current="page">Current Page</a></li>
  </ol>
</nav>
```

#### Class-based

If you prefer using classes or need to style a list that isn't inside a navigation landmark, you can use the `.breadcrumbs` class.

```html
<ol class="breadcrumbs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Category</a></li>
  <li><a href="#" aria-current="page">Current Page</a></li>
</ol>
```

## Customization

The breadcrumbs component uses CSS variables for easy customization. You can override these variables to match your design system.

| Variable | Default | Description |
|----------|---------|-------------|
| `--breadcrumbs-gap` | `0.5rem` | The space between breadcrumb items. |
| `--breadcrumbs-separator` | `"/"` | The character or string used as a separator. |

### Example

```css
.breadcrumbs,
nav[aria-label="breadcrumbs"] {
    --breadcrumbs-gap: 1rem;
    --breadcrumbs-separator: ">";
}
```
npm package: @fylgja/button
Description: The Button component serves as an interactive element. To call your users to an action
Author: Fylgja
Latest version: 1.2.8
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - Button

[![NPM version](https://img.shields.io/npm/v/@fylgja/button)](https://www.npmjs.org/package/@fylgja/button)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Button component serves as an interactive element.
To call your users to an action.

Since not all buttons need to be an Call To Action.

The base button is as simple as possible
and many styles can be build on top of this foundation.

## Installation

```bash
npm install @fylgja/button
```

Then include the component in to your code via;

```scss
@use "@fylgja/button";
// Or via PostCSS import
@import "@fylgja/button";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/button" with ($btn-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/button" layer("components");
```

## How to use

For more information see the [button docs on the Fylgja.dev](https://fylgja.dev/components/button/).
npm package: @fylgja/card
Description: The Fylgja card component
Author: Fylgja
Latest version: 2.0.2

# Fylgja Card

[![NPM version](https://img.shields.io/npm/v/@fylgja/card)](https://www.npmjs.com/package/@fylgja/card)
[![NPM Downloads](https://img.shields.io/npm/dt/%40fylgja%2Fcard)](https://www.npmjs.com/package/@fylgja/card)
[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234)](https://github.com/fylgja/fylgja/blob/main/LICENSE)

The Fylgja Card component allows you to group content together, for a more contained content element.

This component is ideal for building various UI elements such as
Product items, Blog items or for a Dropdown Panel.

## Installation

You can install Fylgja Card via npm or other Node-based package managers like pnpm or bun:

```bash
npm install @fylgja/card
```

Alternatively, you can use it directly via a CDN:

```html
<link href="https://cdn.jsdelivr.net/npm/@fylgja/card/index.min.css" rel="stylesheet">
```

## Usage

Once installed, you can import the full package with:

```css
@import "@fylgja/card";
```

Alternatively, if you only need specific parts, you can import them individually:

| Import Path             | Description                                |
| ----------------------- | ------------------------------------------ |
| `@fylgja/card/base`     | Contains to core of the Card               |
| `@fylgja/card/elevated` | Contains the `--elevated` modifier classes |
| `@fylgja/card/hover`    | Contains the `--hover` modifier classes    |

## Modifiers

### `--elevated`

The `--elevated` modifier unset the border color and add a shadow with a depth of 2 to the card.

This variant requires the Design Token `--shadow-2`.
This token is provided by the `@fylgja/tokens` or by other Token/Props frameworks such as [Open Props](https://open-props.style/)

### `--hover`

Simliar to the `--elevated` modifier, only instead this work on the hover interaction and does not unset the border.
This version uses a shadow dept of 4, so the Design Token `--shadow-4` is required.

This modifier is paired best with solutions such as the [`stretched-link`](https://fylgja.dev/library/utilities/#stretched-link) which makes the card clickable.
npm package: @fylgja/code
Description: The Fylgja code component
Author: Fylgja
Latest version: 1.0.3
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - Code

[![NPM version](https://img.shields.io/npm/v/@fylgja/code)](https://www.npmjs.org/package/@fylgja/code)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Code component is a extension component on the base component.

This includes more styling to the `<code>`, `<pre>` and `<kbd>` elements.

## Installation

```bash
npm install @fylgja/code
```

Then include the component in to your code via;

```scss
@use "@fylgja/code";
// Or via PostCSS import
@import "@fylgja/code";
```

## How to use

Out of the box all the styling is done directly,
no extra steps are needed.

For a more complete code syntax highlighting in `<pre>` element,

use a frameworks like
[Prims](https://prismjs.com/),
[highlight](https://highlightjs.org/)
or [shiki](https://shiki.matsu.io/) instead,
or combine it with `@fylgja/code`.

## Config

As with almost all of our components,
CSS variables can be configured to add your own look/style.

Want direct control on the base styles,  
Here are the following SCSS variables can you modify.

```scss
$family-code: (
    SFMono-Regular,
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace
) !default;

$code-padding: 0 0.15em !default;
$code-radius: 0.2rem !default;
$code-border: 1px solid rgba(0, 0, 0, 0.05) !default;
$code-bg: #eee !default;
$code-color: #111 !default;

$pre-margin: 1em 0 !default;
$pre-padding: 1rem !default;
$pre-radius: 0.2rem !default;
$pre-border: 1px solid rgba(0, 0, 0, 0.05) !default;
$pre-bg: #f2f2f2 !default;
$pre-color: #111 !default;
$pre-font-size: 0.875em !default;
$pre-tab-index: 4 !default;

$key-radius: 0.3em !default;
$key-border: 1px solid currentcolor !default;
$key-shadow: inset 0 -1px 0 currentcolor !default;
$key-padding: 0.1em 0.25em !default;
$key-bg: null !default;
$key-fg: null !default;
$key-font-size: 0.875em !default;
```
npm package: @fylgja/colors
Description: Add a collection of prebuild colors to any project with ease, using Fylgja Colors
Author: Fylgja
Latest version: 1.1.3
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Colors

[![NPM version](https://img.shields.io/npm/v/@fylgja/colors)](https://www.npmjs.org/package/@fylgja/colors)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Add a collection of prebuild colors to any project with ease, using Fylgja Colors.

## Installation

```bash
npm install @fylgja/colors
```

Then include the component in to your code via;

```scss
@use "@fylgja/colors";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/colors"; // *
```

## How to use

For more information see the [colors docs on the Fylgja.dev](https://fylgja.dev/components/colors/).
npm package: @fylgja/container
Description: The Fylgja container component
Author: Fylgja
Latest version: 1.1.4
Deprecated: This Package has been deprecated for @fylgja/utilities, please replace this package with @fylgja/utilities

# Container component

[![NPM version](https://img.shields.io/npm/v/@fylgja/container)](https://www.npmjs.org/package/@fylgja/container)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The container component is wrapper component,
to make all child elements fit better in the page.

## Installation

```bash
npm install @fylgja/container
```

Then include the component in to your code via;

```scss
@use "@fylgja/container";
// Or via PostCSS import
@import "@fylgja/container";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/container" with ($container-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/container" layer("components");
```

## How to use

For more information see the [container docs on the Fylgja.dev](https://fylgja.dev/components/container/).
npm package: @fylgja/control
Description: The control component styles the default input radio's and checkbox's
Author: Fylgja
Latest version: 1.3.0

# Fylgja - Control

[![NPM version](https://img.shields.io/npm/v/@fylgja/control)](https://www.npmjs.org/package/@fylgja/control)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The control component styles the default `input[radio]` and `input[checkbox]`,
allowing an easier control on the style of both these elements.

## Installation

```bash
npm install @fylgja/control
```

Then include the component in to your code via;

```scss
@use "@fylgja/control";
// Or via PostCSS import
@import "@fylgja/control";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/control" with ($control-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/control" layer("components");
```

## How to use

For more information see the [control docs on the Fylgja.dev](https://fylgja.dev/components/control/).
npm package: @fylgja/details
Description: The Fylgja details component
Author: Fylgja
Latest version: 1.0.3
Deprecated: This Package has been deprecated for the UI Library, please replace this package with utilities from @fylgja/utilities, to create the same component

# Fylgja - Details

[![NPM version](https://img.shields.io/npm/v/@fylgja/details)](https://www.npmjs.org/package/@fylgja/details)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The details component enhances the default details behavior.

## Installation

```bash
npm install @fylgja/details
```

Then include the component in to your code via;

```scss
@use "@fylgja/details";
// Or via PostCSS import
@import "@fylgja/details";
```

## How to use

Out of the box all the styling is done directly, 
so no extra steps are needed.

And the details element wil look relativity the same as the browser default.

The style should be changeable for many purposes, 
think a sub menu toggle or a accordion.

## Config

As with almost all of our components,
CSS variables can be configured to add your own look/style.

Want direct control on the base styles,
here are the following SCSS variables can you modify.

```scss
$details-animation: details-show 200ms ease-in-out !default;
$details-margin: 1em 0 !default;
```

## Tip

If you need the common accordion style you can use the Card component,
and a little extra CSS.

```html
<style>
    .accordion {
        --card-elevation: none;
        --card-border: 1px solid #ccc;
        --card-padding: 0.5em 0.8em;
    }

    .accordion > details:first-of-type {
        border-radius: 4px 4px 0 0;
        margin-bottom: 0;
    }

    .accordion > details:last-of-type {
        border-radius: 0 0 4px 4px;
        margin-top: 0;
    }

    .accordion > details:not(:last-of-type) {
        border-bottom: 0;
    }

    .accordion > details:not(:first-of-type):not(:last-of-type) {
        border-radius: 0;
        margin-top: 0;
        margin-bottom: 0;
    }
</style>
<div class="accordion">
    <details class="card">
        <summary class="card-action">Details element 1</summary>
        <div class="card-content pt-0">..</div>
    </details>
    <details class="card">
        <summary class="card-action">Details element 2</summary>
        <div class="card-content pt-0">..</div>
    </details>
    <details class="card">
        <summary class="card-action">Details element 3</summary>
        <div class="card-content pt-0">..</div>
    </details>
</div>
```
npm package: @fylgja/dialog
Description: The Fylgja dialog component
Author: Fylgja
Latest version: 1.5.0
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - Dialog

[![NPM version](https://img.shields.io/npm/v/@fylgja/dialog)](https://www.npmjs.org/package/@fylgja/dialog)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The dialog combines 3 components in 1, it a modal by default,
and with a small change it's a offcanvas,
notification popup aka the snackbar.

This code is super tiny compared to other solutions,
and it's super flexible.
Use it to have a modal on desktop and offcanvas on mobile,
simply by changing a few CSS variables.

## Installation

```bash
npm install @fylgja/dialog
```

Then include the component in to your code via;

```scss
@use "@fylgja/dialog";
// Or via PostCSS import
@import "@fylgja/dialog";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/dialog" with ($dialog-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/dialog" layer("components");
```

## How to use

For more information see the [dialog docs on the Fylgja.dev](https://fylgja.dev/components/dialog/).
npm package: @fylgja/easing
Description: The Fylgja easing Design Tokens (CSS props) component
Author: Fylgja
Latest version: 1.1.2
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Easing

[![NPM version](https://img.shields.io/npm/v/@fylgja/easing)](https://www.npmjs.org/package/@fylgja/easing)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Fylgja easing offers Design Tokens (CSS props) for consistent and semantic transitions.

## Installation

```bash
npm install @fylgja/easing
```

Then include the component in to your code via;

```scss
@use "@fylgja/easing";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/easing"; // *
```

## How to use

For more information see the [easing docs on the Fylgja.dev](https://fylgja.dev/components/easing/).
npm package: @fylgja/fonts
Description: The Fylgja fonts offers Design Tokens (CSS props) for consistent and semantic typography.
Author: Fylgja
Latest version: 1.0.1
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Fonts

[![NPM version](https://img.shields.io/npm/v/@fylgja/fonts)](https://www.npmjs.org/package/@fylgja/fonts)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The Fylgja fonts offers Design Tokens (CSS props) for consistent and semantic typography.

## Installation

```bash
npm install @fylgja/fonts
```

Then include the component in to your code via;

```scss
@use "@fylgja/fonts";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/fonts"; // *
```

## How to use

For more information see the [fonts docs on the Fylgja.dev](https://fylgja.dev/components/fonts/).
npm package: @fylgja/form
Description: The form component is super easy to use. Since it is a zero config module that styles the form elements directly
Author: Fylgja
Latest version: 1.1.6
Deprecated: This Package has been deprecated for @fylgja/base, please replace this package with @fylgja/base

# Fylgja - Form

[![NPM version](https://img.shields.io/npm/v/@fylgja/form.svg)](https://www.npmjs.org/package/@fylgja/form)
![license](https://img.shields.io/github/license/fylgja/fylgja)

The form component is super easy to use,
it's a zero config module that styles all form elements directly.

Allowing you to focus on the form itself.

## Installation

```bash
npm install @fylgja/form
```

Then include the component in to your code via;

```scss
@use "@fylgja/form";
// Or via PostCSS import
@import "@fylgja/form";
```

### Styles

By default all form styles are set to the fylgja default style.

If you want to use the field or box style,
change the variable `$form-style` to one of the other options.

Or if you are importing this as plain CSS or in PostCSS use;

```css
@import "@fylgja/form/field.css";
@import "@fylgja/form/box.css";
```

_For versions older than v1.2 use `style-{field|box}.css`_

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/form" with ($form-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/form" layer("components");
```

## How to use

For more information see the [form docs on the Fylgja.dev](https://fylgja.dev/components/form/).
npm package: @fylgja/gradient
Description: Add gradient's with easy via the gradient utility class
Author: Fylgja
Latest version: 1.1.3
Deprecated: This Package has been deprecated for @fylgja/tokens, please replace this package with @fylgja/tokens

# Fylgja - Gradient

[![NPM version](https://img.shields.io/npm/v/@fylgja/gradient)](https://www.npmjs.org/package/@fylgja/gradient)
![license](https://img.shields.io/github/license/fylgja/fylgja)

Add gradient's with ease via the gradient utility class.

This component offers both the background and border versions,
which you can modify to your needs.

## Installation

```bash
npm install @fylgja/gradient
```

Then include the component in to your code via;

```scss
@import "@fylgja/gradient";
// Or via PostCSS import
@import "@fylgja/gradient";
```

### `@layer` support

If you need support for `@layer`,
use the following import;

```scss
@use "@fylgja/gradient" with ($gradient-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/gradient" layer("components");
```

## How to use

For more information see the [gradient docs on the Fylgja.dev](https://fylgja.dev/components/gradient/).