open-index/open-npm huggingface dataset:
npm package: @fotihose/button
Description: A simple button
Author: Andreas Larssen
Latest version: 1.1.0

# Button

This component is part of the [Fotihose](https://github.com/halloverden/fotihose) network, which is a network of standalone components.

## Description
A simple wrapper for a native button element that shows a loading indicator in the button when prompted. 

## Installation
```
npm i @fotihose/button -S
```

## Usage

Add #button to the button, so the component knows what element is the button. Woah, poetry! 

```html
  <fih-button loadingIndicatorColor="#fff" [loadingIndicatorSize]="20" [processing]=true>
    <button #button></button>
  </fih-button>
```

### Inputs

| Input                   | Type     | Default  | Description |
|-------------------------|:--------:|:--------:|:-----------:|
| loadingIndicatorColor   | string   | #000     | Color of the loading indicator (hex)
| loadingIndicatorSize    | number   | 15       | Size of the loading indicator (px)
| processing              | boolean  | false    | When true, it shows a loading indicator

### Outputs

No outputs

## TODO
- Keep button aspect ratio when processing

## License
MIT
npm package: @fotihose/fih-button
Description: A simple button
Author: Andreas Larssen
Latest version: 1.0.0
Deprecated: Use @fotihose/button instead

# Button

This component is part of the [Fotihose](https://github.com/halloverden/fotihose) network, which is a network of standalone components.

## Description
A simple wrapper for a native button element that shows a loading indicator in the button when prompted. 

## Installation
```
npm i @fotihose/button -S
```

## Usage

Add #button to the button, so the component knows what element is the button. Woah, poetry! 

```html
  <fih-button loadingIndicatorColor="#fff" loadingIndicatorSize="20" [processing]=true>
    <button #button></button>
  </fih-button>
```

### Inputs

| Input                   | Type     | Default  | Description |
|-------------------------|:--------:|:--------:|:-----------:|
| loadingIndicatorColor   | string   | #000     | Color of the loading indicator (hex)
| loadingIndicatorSize    | string   | 15       | Size of the loading indicator (px)
| processing              | boolean  | false    | When true, it shows a loading indicator

### Outputs

No outputs

## TODO
- Keep button aspect ratio when processing

## License
MIT

## Change log

### 1.0.0
- First release
npm package: @fotihose/loading-indicator
Description: A simple loading indicator component
Author: Andreas Larssen
Latest version: 2.0.0-rc.7

# Loading indicator

This component is part of the [Fotihose](https://github.com/halloverden/fotihose) network, which is a network of standalone components.

## Description
A simple loading indicator using svg.

## Installation
```
npm i @fotihose/loading-indicator -S
```

## Usage
```html
  <fih-loading-indicator size="15" color="#fff"></fih-loading-indicator>
```

### Inputs

| Input | Type    | Default | Description |
|-------|:-------:|:-------:|:-----------:|
| color | string  | #000    | Color of the loading indicator (hex)
| size  | number  | -       | Size of the loading indicator (px)

### Outputs

No outputs

## TODO
- Support different loading indicators

## License
MIT
npm package: @foton_informatica/foton-data-table
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.
Author: Brunno Sena
Latest version: 1.1.1

# FotonDataTable

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @foton_informatica/ftn-loading
Description: This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.
Author: Brunno Sena
Latest version: 1.3.18

# FtnLoading

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.

##Installing

```npm i @foton_informatica/ftn-loading```

or add in package.json:

```"@foton_informatica/ftn-loading": "^1.3.18"```

##Param

| Param                  | Type               | Required
|--------                |---------               |------------
| `[isShow]`                | Boolean                       | true
| `image`              | String | false

## Usage

```sh
# In each module add:
...
import { FtnLoadingModule } from '@foton_informatica/ftn-loading';  


imports: [
...
FtnLoadingModule
]

# On the screen you want to use.
<app-ftn-loading><app-ftn-loading>
# Is required the param
[isShow] : true or false
# Is option the param
image : string *image location
# Example complete:
<app-ftn-loading [isShow]="true" image="imagem.png"><app-ftn-loading>
```
npm package: @fotoncompany/sort-object
Description: Sort an object's key within source code automatically as part of linting
Author: Fotontech
Latest version: 0.2.2

# Sort Object

Sort an object's key within source code automatically as part of linting

**IMPORTANT**: This lib only works with Typescript files for now. Open an issue to support Javascript files then we’ll add support to it.

## Install

Install with npm:
```
npm i @fotoncompany/sort-object
```

or with yarn:
```
yarn add @fotoncompany/sort-object
```

## Usage

Use the cli with the `--src` flag as follows:
```
sort-object --src ./packages
```

You can filter which files will be formated through the `--regex` flag, as shown below. The Regex must be a string that can be parsed.
```
sort-object --src ./packages --regex '.input.ts'
```
npm package: @fotontv/gotma-api
Description: JS/TS API implementation for Gotma Launcher
Author: TheGotma
Latest version: 0.1.1

#  GotmaLauncherAPI (@fotontv/gotma-api)

Реализация JS / TS API

## Установка

Используя npm:

```bash
npm i @fotontv/gotma-api
```

Используя jsDelivr CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/@fotontv/gotma-api/dist/index-web.js"></script>
```

Используя unpkg CDN:

```html
<script src="https://unpkg.com/@fotontv/gotma-api/dist/index-web.js"></script>
```

## Пример использования (Node.js)

```js
// Подключение класса API
const { GotmaAPI } = require('@fotontv/gotma-api');

// Инициализация класса API и создание подключения к вебсокету
const api = new GotmaAPI('ws://localhost:1370/ws');

// Отправка/обработка запросов в стиле Promise

api.ready() // Ожидание подключения к сокету лаунчсервера
.then(() => {
    api.send('ping').then(result => { // Запрос к API лаунчер сервера
        console.log(result);
    }).catch((error) => {
        console.error(error);
    });
    api.close(); // Закрытие соединения
}).catch((error) => {
    console.error(error);
});

// или в стиле async/await

await api.ready();
try {
    const result = await api.send('ping');
    console.log(result);
} catch (error) {
    console.error(error);
} finally {
    api.close();
}
```

Также библиотека поддерживает работу с TypeScript

## Методы и параметры

Класс `GotmaAPI` содержит следущее:

Методы:

-   `ready()` - функция ожидания подключения к сокету лаунчсервера
-   `close()` - отключение от сокета лаунчсервера
-   `hasConnected()` - проверка на наличие подключения к сокету лаунчер серверу
-   `send(type, obj)` - отправка запроса к лаунчсерверу, где:
    -   `type` - тип запроса
    -   `obj` - объект с параметрами запроса

Эвенты (стандартные эвенты [вебсокета](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)):

-   `onOpen()` - обработчик эвента [onopen](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/onopen)
-   `onClose()` - обработчик эвента [onclose](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/onclose)
-   `onMessage()` - обработчик эвента [onmessage](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/onmessage)
-   `onError()` - обработчик эвента [onerror](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/onerror)
npm package: @fotontv/gotma-core
Description: Base library for Gotma Launcher
Author: TheGotma
Latest version: 0.2.2

<p align="center"><img src="./logo.png" width="200px" height="200px"></p>
<h1 align="center">GotmaLauncher Core (@fotontv/gotma-core)</h1>

## Base library for Gotma Launcher
npm package: @fougassum/tocase
Description: Convert a string to any common case (camel, pascal, snake, kebab, capital, space, dot) with upper/lowercase variants.
Author: Jean Fougasse
Latest version: 1.0.3

# tocase

Convert a string from one case (camel, pascal, snake, kebab) to another case (camel, pascal, snake, kebab, capital, space, dot) with ease.

## Installation

With npm
```
npm install @fougassum/tocase
```

With yarn
```
yarn add @fougassum/tocase
```

With bun
```
bun install @fougassum/tocase
```

## Basic example

```js
import toCase from '@fougassum/tocase'

const snakeStr = 'to_case_test_string';

const camelStr = toCase(snakeStr, 'camel');
console.log(camelStr) // "toCaseTestString"

const uppercaseKebabStr = toCase(snakeStr, 'uppercaseKebab');
console.log(uppercaseKebabStr) // "TO-CASE-TEST-STRING"
```

## Supported cases

You can currently convert strings from those cases :

- Camel case (camelCase)
- Pascal case (PascalCase)
- Snake case (snake_case)
- Kebab case (kebab-cace)

To those cases :

- 'camel' : Camel case (camelCase)
- 'pascal' : Pascal case (PascalCase)
- 'snake' : Snake case (snake_case)
- 'uppercaseSnake' : Uppercase snake case (UPPERCASE_SNAKE_CASE)
- 'kebab' : Kebab case (kebab_cace)
- 'uppercaseKebab' : Uppercase kebab case (UPPERCASE_KEBAB_CASE)
- 'capital' : Capital case (Capital Case)
- 'spaceCase' : Space case (space case)
- 'uppercaseSpace' : Uppercase space case (UPPERCASE SPACE CASE)
- 'dot' : Dot case (dot.case) 
- 'uppercaseDog : Uppercase dot case (UPPERCASE.DOT.CASE)

## Importing utils functions

You can also import all utils functions to convert a string to a splitted array of strings, and the ones to convert back to a string.

```js
import { fromCamel, toSnake } from '@fougassum/tocase';

const str = 'welcomeToFrance';
const splitted = fromCamel(str);
const snakeStr = toSnake(splitted);

console.log(snakeStr); // 'welcome_to_france'
```
npm package: @fouita/form-editor
Description: Svelte component to build forms using nocode editor. Built with svelte and tailwindcss.
Author: fouita
Latest version: 0.0.5

## Form Builder With Svelte & Tailwindcss

NoCode Customizable Form Editor

### Demo 
[Demo Form Builder](https://fouita.com/explore/form-builder/forms/0x57341/edit) 


### Screenshots

![Form Builder Fouita](https://cdn.fouita.com/0x2713/media/imgs/form-builder-2-1672321442528.png)

![Form builder Fouita](https://cdn.fouita.com/0x2713/media/imgs/form-builder-6-1672322223740.png)

![Form builder Fouita](https://cdn.fouita.com/0x2713/media/imgs/form-builder-5-1672322203693.png)


## Features

- Customize text and inputs (WYSIWYG)
- Multi Steps Forms
- Customize colors 
- RTL support
- Add images and videos by inserting a link inside the text
- Form Schema is exported so you can manipulate the data yourself
- Form data is dispatched when user click on the Submit of the last step



### Install

```bash
npm i @fouita/form-editor
```

### How to use

Inside your svelte app

```html
<script>
  import FormEditor from "@fouita/form-editor"

  // you can create a button to toggle the editable variable
  let editable = true

  // initial form schema needed
  let form =  {
    "name": "My Form",
    "version": "1",
    "steps": [{
        "index": 0,
        "props": {
            "previousBtn": "Back",
            "nextBtn": "Next"
        },
        "inputs": [
            
        ]
    }]
  }

  const settings = {
	  textColor: "250 250 250",
	  bgColor: "0 0 0",
	  outlineColor: "165 180 252",
	  buttonBgColor: "79 70 229",
	  buttonTextColor: "255 255 255",
	  borderColor: "200 200 200",
	  form: form,
	  rounded: "rounded-none",
	  size: "full",
	  rtl: false,
	  transparent: false,
	  btnsPosition: "start", // start, end, center
  }

  // get updated data
  $: if(form) {
    // form is updated
  }

  function handleSubmit(evt) {
    // send data to your server
  }
</script>

<FormEditor bind:form {editable} {...settings} on:submit={handleSubmit} />
```


### Generate CSS
To be able to see the styled Editor, you can either use `form-editor.css` in your index.html or you can build the CSS using tailwind

1. Copy the file `tailwind.config.js`
2. Generate a seperate CSS for the Form Editor using the following command in your project 

```bash
npx tailwindcss -i ./src/global.css -o ./public/form-editor.css --minify
```

( change `global.css` to your css file that includes `@tailwind`) 

`gloabl.css`
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Include the file in your HTML index file

```html
<link rel="stylesheet" href="/form-editor.css" />
```



## Use it as widget

You can use the form-editor in your project as an external widget, with backend data collection at [Fouita](https://fouita.com/explore/form-builder) for Free
npm package: @fouita/images-carousel-zoom
Description: svelte tailwind Image carousel zoom
Author: islem
Latest version: 0.0.1

# Svelte + tailwindcss image preview with zoom

Svelte component to display and zoom on product images

# install
```bash
$npm install @fouita/images-carousel-zoom
```

![fouita simple zoom](https://cdn.fouita.com/assets/pics/template/image-zoom/carousel-zoom.gif)

# Responsive display

![fouita simple zoom](https://cdn.fouita.com/assets/pics/template/image-zoom/small-screen.jpg)

# How to use?

```html
<script>
    import ImgZoom from '@fouita/images-carousel-zoom'
    const base_url = "https://multimedia.bbycastatic.ca/multimedia/products/500x500/130/13021"
</script>

<ImgZoom images ={
    selected :`${base_url}/13021743.jpg`,
	List :  [
	 `${base_url}/13021743.jpg`,
	 `${base_url}/13021743_1.jpg`,
     `${base_url}/13021743_2.jpg`,
     `${base_url}/13021743_3.jpg`,
     `${base_url}/13021743_4.jpg`
	]
   } >
```

# Requirements
* Tailwindcss 
* Svelte project

# About
[Fouita : UI framework for svelte + tailwind components](https://fouita.com)
npm package: @fouita/pagination
Description: Simple pagination component built with svelte and tailwindcss
Author: fouita
Latest version: 0.0.2

# Responsive Svelte + Tailwind Pagination component

Simple pagination component built with svelte and tailwindcss 

## Installation
```bash
    $npm i @fouita/pagination -D
```

## Simple usage

![fouita pagination](https://cdn.fouita.com/assets/pics/template/pagination/pagination-simple.png)

```html
<script>
    import Pagination from '@fouita/pagination'
    let current =1
    let num_items=30
    let per_page=3
</script>

<Pagination bind:current={current} {num_items} {per_page} />
```

## Style rounded

![fouita pagination rounded](https://cdn.fouita.com/assets/pics/template/pagination/pagination-rounded.png)

```html
<Pagination rounded bind:current={current} {num_items} {per_page} />
```


## Change Size to small

![fouita pagination small](https://cdn.fouita.com/assets/pics/template/pagination/pagination-small.png)

```html
<Pagination small rounded bind:current={current} {num_items} {per_page} />
```

## Change Color

You can use a color from tailwindcss list `(gray, red, blue, indigo, pink, purple, teal, orange, yellow)`

![fouita pagination small](https://cdn.fouita.com/assets/pics/template/pagination/pagination-color.png)

```html
<Pagination small rounded color="pink" bind:current={current} {num_items} {per_page} />
```


## Per page selection

You can add

![fouita pagination selection](https://cdn.fouita.com/assets/pics/template/pagination/pagination_per_page.png)

```html
<script>
	import Pagination from '@fouita/pagination'

	let current =1
	let num_items=30
	let per_page=3	
</script>
	
<div class="flex justify-between items-center">
	<div class="flex items-center">
		Per page:
		<select class="border px-2 rounded ml-2" bind:value={per_page}>
			<option>3</option>
			<option>5</option>
			<option>10</option>
		</select>
	</div>
	<Pagination small  bind:current={current} {num_items} per_page={per_page} />
</div>			  
```

## Navigate Action

if you like to perform some actions or API requests when navigating through pages, you can do so by calling `on:navigate` event.

```html
<script>
	import Pagination from '@fouita/pagination'

	let current =1
	let num_items=30
	let per_page=3	
	
	// let list_fetch = ... your init data
	async function changePage(evt){
		current = evt.detail
		// list_fetched = ... FETCH DATA HERE
	}
</script>

<Pagination small {current} {num_items} per_page={per_page} on:navigate={changePage} />
```


## About

[Fouita : UI framework for svelte + tailwind components](https://fouita.com)
npm package: @fouita/tooltip
Description: Easy to use Tooltip component for your svelte and tailwindcss projects
Author: fouita
Latest version: 0.0.1

## Svelte and Tailwind tooltip component

Easy to use Tooltip component for your svelte and tailwindcss projects

## Install

```bash
 $npm i @fouita/tooltip -D
```

## Usage

Import the tooltip component and use it like the following

![fouita tooltip](https://cdn.fouita.com/assets/pics/template/tooltip/tooltip-simple.jpg)

```html
<script>
	import Tooltip from '@fouita/tooltip'
</script>

<div class="m-4 p-4 border rounded text-center relative">
    Element 1
    <Tooltip pointer=middle position=top text="Middle Top" show/>
</div>
```

### Positions
* top
* left 
* right
* bottom

### Pointer
* start
* middle
* end


## Change Color

You can use `color` and `text_color` props to customize the color 

![fouita tooltip](https://cdn.fouita.com/assets/pics/template/tooltip/tooltip-color.jpg)


```html
<div class="m-4 p-4 border rounded text-center relative">
    Element 1
    <Tooltip pointer=start position=top text="Start Top" text_color=red-100 color=red-700 show />
</div>  
```

## Hover action

To show the tooltip when hovering on an element you can use `on:mouseenter` and `on:mouseleave` events and toggle a show flag, like the following.

![fouita tooltip](https://cdn.fouita.com/assets/pics/template/tooltip/tooltip-hover.jpg)

```html
<script>
	import Tooltip from '@fouita/tooltip'
	let show_elm = false
</script>

<div class="p-4 w-32 m-20 border rounded text-center relative" on:mouseenter={() => show_elm=true} on:mouseleave={() => show_elm=false}>
        Hover
        <Tooltip pointer=middle position=top text="Info to share!" w=48 show={show_elm}/>
</div>
```

We can also customize the width of the tooltip by adding `w` attribute and use the scale used in tailwindcss.


## Custom content

To add custom content to a tooltip we can just add children tags and add some html

![fouita tooltip](https://cdn.fouita.com/assets/pics/template/tooltip/tooltip-click.jpg)

```html
<script>
	import Tooltip from '@fouita/tooltip'
	let show_elm = false
</script>

<div class="m-20 mt-64 w-32 p-4 border text-center relative cursor-pointer" on:click={() => show_elm=!show_elm} >
        Click
        <Tooltip pointer=end position=right color="red-500" show={show_elm}>
            <div class="p-4 w-64 bg-red-500 text-red-100">
                <div class="text-2xl font-bold mb-2">Custom Content!</div>
                <p class="text-left mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos dolores excepturi placeat, eos et iste magnam illo voluptates veritatis exercitationem laborum, doloremque eius omnis, enim corrupti inventore rem vero assumenda.</p>
                <button class="border-2 border-white py-2 px-4">
					Great!
				</button>
            </div>
        </Tooltip>
</div>
```


## About

[Fouita : UI framework for svelte + tailwind components](https://fouita.com)
npm package: @fouldomain/mcp-server
Description: MCP server for Foul Domain Phish concert analytics. Query 36,000+ analyzed tracks, show scores, and jam data.
Author: Kevin Spence
Latest version: 2.1.0

# Foul Domain MCP Server

An MCP (Model Context Protocol) server that gives AI assistants access to Phish concert analytics from [Foul Domain](https://fouldomain.com). Query 36,000+ analyzed tracks, show scores, jam ratings, and more.

## Tools

| Tool | Description |
|------|-------------|
| `search_songs` | Find songs by name |
| `best_versions` | Top-rated versions of any song, filterable by year/era, venue, state |
| `get_show` | Show details with full setlist and scores |
| `top_shows` | Highest-rated shows, filterable by year/era, tour, venue, state |
| `song_stats` | Detailed song stats: plays, debut, gap, audio analysis |
| `find_jams` | Search jams by song, tags, year/era, venue, state, BPM, duration, groove, with sort options |
| `bustouts` | Find songs with long gaps between performances |
| `shows_by_venue` | Find shows at a specific venue, city, or state |

## Setup

### Claude Desktop

Add to your `claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "fouldomain": {
      "command": "npx",
      "args": ["-y", "@fouldomain/mcp-server"]
    }
  }
}
```

### Claude Code

Add to your `~/.claude/settings.json`:

```json
{
  "mcpServers": {
    "fouldomain": {
      "command": "npx",
      "args": ["-y", "@fouldomain/mcp-server"]
    }
  }
}
```

### Manual

```bash
npx @fouldomain/mcp-server
```

## Example Queries

Once connected, you can ask your AI assistant things like:

### By song
- "What's the best version of Tweezer?"
- "Best Reba from 1997"
- "Top Ghost versions at MSG"
- "Best 3.0 Tweezers"

### By style
- "Find me a long, dark Phish jam"
- "Dark funky jams from 1997-1999"
- "Best Type II jams over 20 minutes"
- "Grooviest jams from Fall 1997"
- "Longest jams in 2.0"

### By year and era
- "Best Phish shows from 1997"
- "Top shows in 3.0"
- "Best jams from 2003-2004"

### By venue and location
- "Best shows at MSG"
- "When did they last play Red Rocks?"
- "Top shows in Colorado"
- "What shows were at the Gorge in 2023?"
- "Best jams at Hampton Coliseum"

### Bustouts and gaps
- "What songs haven't they played in 50+ shows?"
- "What bustouts happened in 2024?"
- "Songs they haven't played since 1.0"

### Show details
- "What happened at the Phish show on 12/31/99?"
- "Show me the setlist from Baker's Dozen night 1"
- "How many times has Phish played Reba?"

Every response includes links back to [fouldomain.com](https://fouldomain.com) for full audio analysis, waveforms, and playback.

## Data

Powered by audio analysis of 36,861 Phish tracks from [Phish.in](https://phish.in), scored using a blend of:

- **Phish.net community ratings** (343,000+ votes)
- **Phish.in likes**
- **Jam chart recognition**
- **Audio analysis** (energy, groove, rhythm, BPM, peak detection)

## License

MIT
npm package: @foundation-base/button
Description: Base button component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/button

> Base button component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/button.svg)](https://www.npmjs.com/package/@foundation-base/button) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundation-base/button
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/calendar-date-picker
Description: Base Calendar Date Picker component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/calendar-date-picker

> Base Calendar Date Picker component for foundation

## Props

### `availableSlots: object`

The `availableSlots` prop is used to pass the information regarding the dates available for selection

The object structure is as follows:

```
availableSlots = {
    [year: number]: {
      [month: number]: Array<number>;
    };
};
```

### `startDate?: string`

The `startDate` prop is to set a lower limit for calendar navigation. The string can be of any format that can be accepted by the `Date` constructor.

### `endDate?: string`

The `endDate` prop is to set a upper limit for calendar navigation. The string can be of any format that can be accepted by the `Date` constructor.

### `onClick: (e: any) => void`

The `onClick` can be used to pass a function to retrieve the date string of the date on which the user clicks.

### `onChange: (month: number, year: number) => void`

The `onChange` can be used to pass a function to retrieve the month and year of the current calendar being displayed. This function gets triggered everytime the user goes to the next or previous month.

## Install

```bash
npm install --save @foundation-base/calendar-date-picker
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/container
Description: Base container component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/container

> Base container component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/container.svg)](https://www.npmjs.com/package/@foundation-base/container) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundation-base/container
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/eventlistingscard
Description: Base eventlistingscard component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/eventlistingscard

> Base Event Listings card component for foundation

## Props

### `title: string;`

The `title` prop corresponds to the Title of the Event

### `slots: Array<string>;`

The `slots` prop corresponds to the list of schedule slots of the Event

### `category: string;`

The `category` prop corresponds to the category (Ex: One-on-One) of the Event

### `copyLink: string;`

The `copyLink` prop corresponds to the link of the Event, which can be copied to clickboard on the click of "Copy Link"

### `disabled: boolean;`

The `disabled` prop corresponds to whether the Event is disabled or not

### `onClickEdit?: (e: any) => void;`

The `onClickEdit` prop can be used to the trigger the functionality of Edit Event option

### `onClickReplicate?: (e: any) => void;`

The `onClickRepilcate` prop can be used to the trigger the functionality of Replicate Event option

### `onClickDelete?: (e: any) => void;`

The `onClickDelete` prop can be used to the trigger the functionality of Delete Event option

### `onClickSwitch?: (e: any) => void;`

The `onClickSwitch` prop can be used to the trigger the functionality when the Event switch is toggled

## Install

```bash
npm install --save @foundation-base/dummy
```

## Props

### eventData: dataFormat

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/footer
Description: Base footer component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/footer

> Base footer component for foundation

## Install

```bash
npm install --save @foundation-base/footer
```

## Props

### data:{}

````bash
dataFormat {
  LogoLink: string;
  AboutUsLink: string;
  ContactUsLink: string;
  PublisherLink: string;
}
```

The `data` prop is to pass the data required for the Footer component.


## License

MIT © [lijoejohn](https://github.com/lijoejohn)
````
npm package: @foundation-base/icon
Description: Base icon component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/icon

> Base icon component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/icon.svg)](https://www.npmjs.com/package/@foundation-base/icon) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundation-base/icon
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/input
Description: Base input component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/input

> Base input component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/input.svg)](https://www.npmjs.com/package/@foundation-base/input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundation-base/input
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/loaders
Description: Base loaders component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/loaders

> Base loaders component for foundation

## Props

### size : string
The `size` prop control the size of loader. size values can be xsmall, small, medium, large.

## Install

```bash
npm install --save @foundation-base/loaders
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/login-form
Description: Base login-form component for foundation
Author: lijoejohn
Latest version: 1.0.28

# @foundation-base/login-form

> Base login-form component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/login-form.svg)](https://www.npmjs.com/package/@foundation-base/login-form) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundation-base/login-form
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/modal
Description: Base Modal component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/Modal

> Base Modal component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/modal.svg)](https://www.npmjs.com/package/@foundation-base/Modal) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Props

### `isOpen: boolean`

The `isOpen` prop determines whether the modal is open/visible or not.

### `children?: JSX.Element`

The `children` prop can be used if a custom JSX element/React component is to be displayed in the modal

### `handleClose?: () => void`

The `handleClose` prop is to handle the action performed when the modal is to be closed. The `close` button on the top right corner is displayed only if this prop is passed.

### `handleNavBack?: () => void`

The `handleNavBack` prop facilitates in performing navigation actions. The `back` button on the top left corner is displayed only if this prop is passed.

### `template?: ConfirmTemplateInterface | AlertTemplateInterface | AlertInputTemplateInterface`:

The `template` prop has to be used if one of the three existing modal designs/templates is needed

> The existing modal designs/templates are
>
> `confirm-template`\
> `alert-template`\
> `alert-with-input-template`\

```
interface ConfirmTemplateInterface {
  type: string;     // 'confirm-template'
  title: string;
  label: string;
  onCancel?: () => void;
  onSave?: () => void;
};

interface AlertTemplateInterface = {
  type: string;     // 'alert-template'
  title: string;
  label: string;
  onClickNo?: () => void;
  onClickYes?: () => void;
};

interface AlertInputTemplateInterface = {
  type: string;     // 'alert-input-template'
  title: string;
  dropLabel: string;
  dropOptions: Array<{
    id: number;
    data: string;
    active: boolean;
  }>;
  textLabel: string;
  onClickNo?: () => void;
  onClickYes?: (formData: { textarea: string; option: string }) => void;
};
```

## Install

```bash
npm install --save @foundation-base/modal
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/multi-select-field
Description: Base select-field component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/multi-select-field

> Base multi-select-field component for foundation

This is the Multi Select Dropdown component with search field; for foundation

## Props

### `options: Array<option>` (Required)

The `options` prop is to pass an array of `option` objects, each of which represent an option in the Multi Select dropdown. The interface of `option` is provided below.

```
interface option {
  id: string;
  data: string;
  active: boolean;
}
```

### `label?: string`

The `label` prop is to pass a string, which is displayed as the placeholder of the input search field within the dropdown.

### `dropdownHeight?: number`

The `dropdownHeight` prop is to pass a number, which decides the max number of options to be displayed in the dropdown list at once. If the number of total `options` exceeds `dropdownHeight`, then a scroll bar appears in the dropdown list.

### `onClick?: (e: any) => void`

The `onClick` prop is to pass a function, which can be used to capture the options selected, outside the component. This enables transfer of data from the component to the application level.

The component data, (i.e., the Selected options in this case) can be accessed as follows:
```
e.target.id       ->  Option ID
e.target.value    ->  Option Data
e.target.checked  ->  Option Active State (true if selected, else false)
```

## Install

```bash
npm install --save @foundation-base/multi-select-field
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/overlay
Description: Base overlay component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/overlay

> Base overlay component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/overlay.svg)](https://www.npmjs.com/package/@foundation-base/overlay) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundation-base/overlay
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/progress
Description: Base progress component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/progress

> Base progress component for foundation

## Install

```bash
npm install --save @foundation-base/progress
```
## Props
### max: number
The max prop specifies the maximum value of the progress bar

### value: number
The value prop specifies how much has the bar progressed out of max

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/search-fields
Description: Base search-fields component for foundation
Author: Unplatforms
Latest version: 5.4.0

# @foundation-base/search-fields

> Base search-fields component for foundation

## Install

```bash
npm install --save @foundation-base/search-fields
```

## Props

### `action: string`

The `action` prop is to pass the type of the `search-fields`. It can either be `search` or `default`.

### `name: string`

The `name` prop is to pass the `name` attribute to the `<input>` tag of the `search-fields`.

### `id: string`

The `id` prop is to pass the `id` attribute to the `<input>` tag of the `search-fields`.

### `value?: string`

The `value` prop is to pass the `value` attribute to the `<input>` tag of the `search-fields`.

### `type?: string`

The `type` prop is to pass the `type` attribute to the `<input>` tag of the `search-fields`.

### `placeholder?: string`

The `placeholder` prop is to pass the `placeholder` attribute to the `<input>` tag of the `search-fields`.

### `required?: string`

The `required` prop is to pass the `required` attribute to the `<input>` tag of the `search-fields`.

### `disabled?: boolean`

The `disabled` prop is to pass the `disabled` attribute to the `<input>` tag of the `search-fields`.

### `onChange?: (e: any) => void`

The `onChange` prop is used to perform an action based on the change of content in the `search-fields`.

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/select-field
Description: Base select-field component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/select-field

> Base select-field component for foundation

## Props

### `options: string[]`

The `options` prop is to pass options to the select field as an array of strings.

### `onClick: (e: any) => void`

The `onClick` prop can be used to retrieve the `id` of the select-field, the `option` selected, on the click of an option

### `activeIndex?: number`

The `activeIndex` prop is the zero-based index of the initially active option.

### `optionCount?: number`

The `optionCount` prop decides the number of options to be displayed in the dropdown list, beyond which, a scroll bar appears.

### id?: string

The `id` prop represents the unique ID of the select-field

### name?: string

The `name` prop represents the name of the select-field

### placeholder?: string

The `placeholder` prop is to display placeholder text in the select-field, if no option is selected

## Install

```bash
npm install --save @foundation-base/select-field
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/switches
Description: Base switches component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/switches

> Base switches component for foundation

## Install

```bash
npm install --save @foundation-base/switches
```

## Props

### type : string

The `type` prop is to pass the type of the switch. It is either selected or success.

### select : bool

The `select` prop is to pass the initial state of the switch.

### disabled : bool

The `disabled` prop is pass the disabled state ( true or false ) of the switch.

### onClick : func

This `onClick` prop is an optional prop used to retrive the select state of the switch.

Example:

```
const sampleFunction = (e: any) => {
    console.log(e.target.checked)   // Prints the select state of the switch
}

<Switches type="selected" onClick={sampleFunction}>
```

You can add your own function and pass it through this prop.

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/tag
Description: Base tag component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/tag

> Base tag component for foundation

## Props

### `label: string`
The `label` prop is to pass the content, that is to be displayed in the tag

### `selectable : boolean`
The `selectable` prop determines whether the tag shows a fixed label, or acts like a toggle

### `selected : boolean`
The `selected` prop controls the toggle action, i.e., whether the tag is selected or not

### `onClick: (e: any) => void`
The `onClick` prop is to pass a function which is to be triggered on the click of the tag 

## Install

```
npm install --save @foundation-base/tag
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/tagremovable
Description: Base tagremovable component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/tagremovable

> Base tagremovable component for foundation

## Install

```bash
npm install --save @foundation-base/tagremovable
```

## Props

### OnClick : func

The `onClick` prop is to pass a function which is to be triggered on the click of the tag-removable.

### Text : string

The `text` prop is to pass the content, that is to be displayed in the tag-removable.

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/text-area
Description: Base text-area component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/text-area

> Base text-area component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/text-area.svg)](https://www.npmjs.com/package/@foundation-base/text-area) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Props

### `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';`

The `size` prop can be used to set the size/height of the text-area component

```
for 'xs' size:
  height: 128px; (2 lines)

for 'sm' size:
  height: 152px; (4 lines)

for 'md' size:
  height: 176px; (6 lines)

for 'lg' size:
  height: 224px; (8 lines)

for 'xl' size:
  height: 272px; (10 lines)
```

### `placeholder: string;`

The `placeholder` prop can be used to set the placeholder of the text-area component

### `id: string;`

The `id` prop can be used to set the id of the text-area component

### `name: string;`

The `name` prop can be used to set the name of the text-area component

### `value: string;`

The `value` prop can be used to set the value of the text-area component. Can be used alongside the `onChange` function

### `disabled: boolean;`

The `disabled` prop can be used to set the disabled status of the text-area component

### `phase: 'default' | 'success' | 'invalid' | 'error';`

The `phase` prop can be used to set the phase of the text-area component

```
for 'default' phase:
  border-color: default;
  text-color: default;

for 'success' phase:
  border-color: default;
  text-color: green;

for 'invalid' phase:
  border-color: red;
  text-color: red;

for 'error' phase:
  border-color: red;
  text-color: default;
```

### `onChange: (e: any) => void;`

The `onChange` prop can be used to pass a function that is supposed to handle the change in the text, that is being entered into the text-area

## Install

```bash
npm install --save @foundation-base/text-area
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/timeline
Description: Base dummy component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/timeline

> Base timeline component for foundation

## Props

### data: info[]

The `data` prop is to pass the data for the timeline component, as an array of objects of type `info`.

```
type role = {
  id: number;
  roleName: string;
  startDate: string;
  endDate: string;
  roleExperience: string;
};

type info = {
  id: number;
  companyLogo: string;
  companyName: string;
  experience: string;
  roleInfo: role[];
};
```

## Install

```bash
npm install --save @foundation-base/timeline
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/tooltips
Description: Tooltips component for foundation
Author: UnPlatforms
Latest version: 5.4.0

# @foundation-base/tooltips

> Tooltips component for foundation

## Props

### `label: string`
The `label` prop is to pass the content, that is to be displayed in the tooltip

### `position : string`
The `position` prop can be one of `top`, `bottom`, `left` or `right`. It indicates where the tooltip is placed relative to the content, and where the tooltip arrow should appear. For example, for `top`, the tooltip arrow appears to the bottom of the tooltip, and is relatively placed on top of the content.

### `visible : boolean`
The `visible` prop determines whether the tooltip is displayed or not.

### `styles: React.CSSProperties`
The `styles` prop is to pass CSS styles, which are applied to the container of the tooltip. This can be preferrably used to absolutely position the tooltip, relative to the content.

## Install

```bash
npm install --save @foundation-base/tooltips
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/typography
Description: Base typography component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/typography

> Base typography component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/typography.svg)](https://www.npmjs.com/package/@foundation-base/typography) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundation-base/typography
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-base/utils
Description: Base theme component for foundation
Author: lijoejohn
Latest version: 5.4.0

# @foundation-base/utils

> Base utils component for foundation

[![NPM](https://img.shields.io/npm/v/@foundation-base/utils.svg)](https://www.npmjs.com/package/@foundation-base/utils) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @foundation-base/utils
```

## License

MIT © [lijoejohn](https://github.com/lijoejohn)
npm package: @foundation-network/perpetual-client
Description: Perpetual trading javascript client for [Foundation Network](https://foundation.network)
Latest version: 0.0.5

# Foundation Network Perpetual Client

Perpetual trading javascript client for [Foundation Network](https://foundation.network)

## Install

This library depends on [viem](https://viem.sh)

```sh
npm install viem @foundation-network/perpetual-client
```

## Usage

```typescipt
import { TESTNET_RPC_URL, FoundationPerpClient } from '@foundation-network/perpetual-client';
import { privateKeyToAccount } from 'viem/accounts';

const signer = privateKeyToAccount(process.env.PRIVATE_KEY);

const client = new FoundationPerpClient(signer, {
    rpcUrl: TESTNET_RPC_URL,
});

await client.placeLimit('CRYPTO_BTC_PERP', 'ask', '61000', '1');
```
npm package: @foundation-network/spot-client
Description: Spot trading javascript client for [Foundation Network](https://foundation.network)
Latest version: 0.0.5

# Foundation Network Spot Client

Spot trading javascript client for [Foundation Network](https://foundation.network)

## Install

This library depends on [viem](https://viem.sh)

```sh
npm install viem @foundation-network/spot-client
```

## Usage

```typescipt
import { TESTNET_RPC_URL, TESTNET_API_URL, FoundationPerpClient } from '@foundation-network/spot-client';
import { privateKeyToAccount } from 'viem/accounts';

const signer = privateKeyToAccount(process.env.PRIVATE_KEY);

const client = new FoundationSpotClient(signer, {
    rpcUrl: TESTNET_RPC_URL,
    apiUrl: TESTNET_API_URL,
});

await client.placeLimit('BTC', 'USDT', 'ask', '61000', '1');
```