open-index/open-npm huggingface dataset:
npm package: @glasskube/theme
Description: The official Glasskube Theme
Latest version: 0.1.2

# Glasskube Theme

This is the official theme used by Glasskube products.
It is consists of a customized build of [`bootstrap`](https://github.com/twbs/bootstrap), as well as some additional components and utilities (see below).

Used by the [Glasskube package manager](https://github.com/glasskube/glasskube/).

## Features

* **All features of bootstrap**

* **Modularized build approach**<br>
  Choose only the parts you need.

* **Fonts, icons included**<br>
  We use bootstrap icons and the beautiful Inter an Poppins fonts.

* **Beautiful light and dark mode**<br>
  See [bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/color-modes/).

* **Sensible theme colors**<br>
  We selected a small number of theme colors that are used consistently throughout the theme.

* **Streamlined typography for long-form text**<br>
  Use the `.prose-content`, `.text-justified` and `.text-hyphens` CSS classes for your texts.

## Installation

The Glasskube theme is published as an NPM package. 
To add it to you your project:

1. Install `@glasskube/theme` using your preferred node package manager
2. Import the theme into your project (see [Usage](#usage))

## Usage

The Glasskube theme is distributed in two variants: Source and prebuilt. 
The source files can be imported into an SCSS file, while the prebuilt CSS variant can be used as-is.

## Contributing

Contributions are welcome! 
Please open a new issue before you start working, so we can discuss the planned changes. 
If you make any changes, please make sure that they are viewable in the examples file at `examples/index.html`.
Before committing your changes, run `npm run build` and `npm run prettier:check`,
in order to ensure that your changes conform with our code style standards.
npm package: @glassmkr/bench-forge
Description: MCP server for Forge monitoring dashboard. Query server health, alerts, and AI analysis from any MCP client.
Latest version: 0.1.0

# @glassmkr/bench-forge

MCP server for the Forge monitoring dashboard. Query server health, alerts, fleet status, and AI analysis from Claude Code, Cursor, or any MCP client.

Part of [The Bench](https://github.com/glassmkr/bench) by [Glassmkr](https://glassmkr.com).

**Requires a Forge Pro plan.**

## Install

```bash
npx @glassmkr/bench-forge
```

## Configuration

| Variable | Required | Description | Default |
|----------|----------|-------------|---------|
| `FORGE_URL` | No | Forge API base URL | https://forge.glassmkr.com |
| `FORGE_TOKEN` | Yes | API token (generate in Forge Settings) | -- |

## MCP Config

```json
{
  "mcpServers": {
    "forge": {
      "command": "npx",
      "args": ["@glassmkr/bench-forge"],
      "env": {
        "FORGE_TOKEN": "forge_xxx"
      }
    }
  }
}
```

## Tools (8)

- **list_servers** - All monitored servers with health status
- **get_server_health** - Latest snapshot + active alerts for a server
- **list_alerts** - Active alerts across fleet or for a specific server
- **acknowledge_alert** - Mark an alert as acknowledged
- **get_fleet_summary** - Aggregate fleet health overview
- **get_server_history** - Historical metrics for trending
- **get_ai_analysis** - AI-powered health analysis (triggers fresh analysis)
- **get_billing_status** - Current plan and usage

## Examples

- "Are any of my servers having issues?" -> list_alerts
- "What's the health of web-01?" -> get_server_health
- "Run an AI analysis on db-03" -> get_ai_analysis
- "Show me CPU trends for the last week" -> get_server_history
- "Acknowledge the RAM alert on web-01" -> acknowledge_alert

## License

[MIT](../../LICENSE)
npm package: @glassmkr/bench-ipmi
Description: MCP server for IPMI/BMC hardware management. Power control, sensors, event logs, boot device, chassis status.
Latest version: 0.1.0

# @glassmkr/bench-ipmi

MCP server for IPMI/BMC hardware management. Gives AI agents structured access to power control, sensor readings, event logs, boot device selection, and chassis status.

Part of [The Bench](https://github.com/glassmkr/bench) by [Glassmkr](https://glassmkr.com).

## Prerequisites

Requires `ipmitool` installed on the machine running the MCP server:

```bash
# Debian/Ubuntu
apt install ipmitool

# RHEL/CentOS
yum install ipmitool

# macOS
brew install ipmitool
```

## Install

```bash
npx @glassmkr/bench-ipmi
```

## Configuration

| Variable | Required | Description | Default |
|----------|----------|-------------|---------|
| `IPMI_HOST` | Yes | BMC IP address | -- |
| `IPMI_USER` | Yes | IPMI username | -- |
| `IPMI_PASS` | Yes | IPMI password | -- |
| `IPMI_INTERFACE` | No | IPMI interface type | lanplus |
| `IPMI_TIMEOUT_MS` | No | Command timeout in milliseconds | 10000 |

## MCP Config

```json
{
  "mcpServers": {
    "ipmi": {
      "command": "npx",
      "args": ["@glassmkr/bench-ipmi"],
      "env": {
        "IPMI_HOST": "10.0.0.1",
        "IPMI_USER": "admin",
        "IPMI_PASS": "secret"
      }
    }
  }
}
```

## Tools (12: 8 read, 4 write)

### Read tools (execute freely)

- **get_power_status** - Current power state (on/off)
- **get_sensor_readings** - Temperatures, fan speeds, voltages, power draw. Optional filter by type.
- **get_event_log** - System Event Log (SEL) entries
- **get_bmc_info** - BMC firmware version, manufacturer, product info
- **get_boot_device** - Current boot device setting
- **get_chassis_status** - Power state, last power event, intrusion, faults
- **get_lan_info** - BMC network configuration
- **get_sol_info** - Serial Over LAN status

### Write tools (require confirmation)

Write tools return a confirmation request instead of executing immediately. Call `confirm_action` with the provided token to execute.

- **power_control** - Power on, off, cycle, reset, or soft shutdown
- **set_boot_device** - Change boot device (pxe, disk, bios, cdrom)
- **clear_event_log** - Clear the System Event Log
- **confirm_action** - Execute a confirmed write operation

## Examples

Ask your agent:

- "Is the server powered on?"
- "What are the CPU temperatures?"
- "Show me the last 10 hardware events"
- "Power cycle the server" (will require confirmation)
- "Set next boot to PXE"

## License

[MIT](../../LICENSE)
npm package: @glassmkr/bench-netdata
Description: MCP server for Netdata monitoring. Query CPU, memory, disk, network, alarms, and any chart.
Latest version: 0.1.0

# @glassmkr/bench-netdata

MCP server for Netdata monitoring. Gives AI agents structured access to CPU, memory, disk, network, alarms, and any chart from any Netdata instance.

Part of [The Bench](https://github.com/glassmkr/bench) by [Glassmkr](https://glassmkr.com).

## Install

```bash
npx @glassmkr/bench-netdata
```

## Configuration

| Variable | Required | Description | Default |
|----------|----------|-------------|---------|
| `NETDATA_URL` | Yes | Base URL of Netdata instance | -- |
| `NETDATA_API_KEY` | No | API key for Netdata Cloud or protected instances | -- |
| `NETDATA_TIMEOUT_MS` | No | Request timeout in milliseconds | 5000 |

## MCP Config

Add to your MCP client (Claude Code, Cursor, etc.):

```json
{
  "mcpServers": {
    "netdata": {
      "command": "npx",
      "args": ["@glassmkr/bench-netdata"],
      "env": {
        "NETDATA_URL": "http://your-server:19999"
      }
    }
  }
}
```

## Tools (10, all read-only)

### get_server_overview

High-level server snapshot: hostname, OS, uptime, CPU count, total RAM, Netdata version.

### get_cpu_usage

Current CPU utilization breakdown (user, system, iowait, idle) and load averages.

- `period_seconds` (optional, default 60): Time period to average over.

### get_memory_usage

Current RAM and swap usage in MB with percentage.

### get_disk_usage

Disk space for all mounted filesystems.

- `mount_point` (optional): Filter to a specific mount point.

### get_disk_io

Disk I/O rates (reads/writes per second).

- `device` (optional): Filter to a specific device.
- `period_seconds` (optional, default 60): Time period to average over.

### get_network_traffic

Network interface traffic (received/sent).

- `interface` (optional): Filter to a specific interface.
- `period_seconds` (optional, default 60): Time period to average over.

### get_chart_data

Raw time-series data from any Netdata chart. The power tool.

- `chart` (required): Chart ID, e.g. `system.cpu`, `disk_space._`, `net.eth0`.
- `after` (optional): Start time as negative seconds ago or unix timestamp.
- `before` (optional): End time as negative seconds ago or unix timestamp.
- `points` (optional, default 60): Number of data points.

### list_charts

Lists all available charts on this Netdata instance.

- `filter` (optional): Substring filter on chart name.

### get_alarms

Current alarm status (active warnings and criticals).

- `status` (optional): Filter by `warning`, `critical`, or `all` (default).

### get_alarm_log

Recent alarm transitions (alarm history).

- `last_n` (optional, default 20): Number of recent transitions.

## Examples

Ask your agent:

- "What's the CPU usage on my server?"
- "Are there any active alarms?"
- "Show me the last hour of system.cpu chart data"
- "List all charts related to disk"

## Netdata API Reference

This tool wraps Netdata's `/api/v1/` REST endpoints. See the [Netdata API docs](https://learn.netdata.cloud/api) for details on chart IDs and data formats.

## License

[MIT](../../LICENSE)
npm package: @glassmkr/collector
Description: Lightweight bare metal server monitoring. IPMI, SMART, OS, network. Opinionated alerts.
Latest version: 0.1.0
Deprecated: Renamed to @glassmkr/crucible. Use @glassmkr/crucible instead.

# Glassmkr Collector

Lightweight bare metal server monitoring. Collects hardware and OS health data, evaluates 15 opinionated alert rules, sends notifications directly (Telegram, Slack, email), and optionally pushes to [Forge](https://forge.glassmkr.com) for dashboard and history.

Runs as a systemd service. Wakes up every 5 minutes, collects everything, alerts if needed, sleeps.

## Quick Install

```bash
curl -sf https://forge.glassmkr.com/install | bash
```

Or manual:

```bash
npm install -g @glassmkr/collector
```

## What It Monitors

**Hardware (IPMI):** CPU temperature, ECC memory errors, PSU redundancy
**Storage:** SMART health, NVMe wear, RAID status, disk space, I/O latency
**Network:** Interface errors/drops, link speed, saturation
**OS:** RAM pressure, swap usage, CPU iowait, OOM kills, disk space

## 15 Alert Rules

| # | Alert | Severity | Default Threshold |
|---|-------|----------|-------------------|
| 1 | RAM usage high | Warning/Critical | 90% / 95% |
| 2 | Swap active | Warning | Any usage |
| 3 | Disk space high | Warning/Critical | 85% / 95% |
| 4 | CPU iowait high | Warning | 20% |
| 5 | OOM kills detected | Critical | Any |
| 6 | SMART failure | Critical | Bad health/sectors |
| 7 | NVMe wear high | Warning/Critical | 85% / 95% |
| 8 | RAID degraded | Critical | Any degradation |
| 9 | Disk latency high | Warning | 50ms NVMe, 200ms HDD |
| 10 | Interface errors | Warning | Any errors/drops |
| 11 | Link speed mismatch | Warning | Below 1 Gbps |
| 12 | Interface saturation | Warning | 90% utilization |
| 13 | CPU temperature high | Warning/Critical | 80C / 90C |
| 14 | ECC memory errors | Warning/Critical | Correctable / Uncorrectable |
| 15 | PSU redundancy loss | Critical | Any PSU failed/absent |

## Configuration

Edit `/etc/glassmkr/collector.yaml`:

```yaml
server_name: "web-01"
collection:
  interval_seconds: 300
  ipmi: true
  smart: true
forge:
  enabled: true
  url: "https://forge.glassmkr.com"
  api_key: "col_xxx"
thresholds:
  ram_percent: 90
  disk_percent: 85
channels:
  telegram:
    enabled: true
    bot_token: "123:abc"
    chat_id: "123456"
```

See [config/collector.example.yaml](config/collector.example.yaml) for all options.

## Requirements

- Linux (Ubuntu 22.04/24.04, Debian 11/12)
- Node.js 22+
- Root access
- Optional: smartmontools (for SMART monitoring)
- Optional: ipmitool (for IPMI/BMC monitoring)

## Notification Channels

**Telegram:** Provide bot token and chat ID. Create a bot via @BotFather.
**Email:** Uses local sendmail. Install postfix or msmtp.
**Slack:** Provide an incoming webhook URL.

## Forge Integration

Optional. Register at [forge.glassmkr.com](https://forge.glassmkr.com), add a server, get an API key. The collector pushes health snapshots for dashboard display and history.

## License

[MIT](LICENSE)
npm package: @glassmkr/crucible
Description: Lightweight bare metal server monitoring. IPMI, SMART, OS, network. Opinionated alerts.
Latest version: 0.1.0

# Glassmkr Collector

Lightweight bare metal server monitoring. Collects hardware and OS health data, evaluates 15 opinionated alert rules, sends notifications directly (Telegram, Slack, email), and optionally pushes to [Forge](https://forge.glassmkr.com) for dashboard and history.

Runs as a systemd service. Wakes up every 5 minutes, collects everything, alerts if needed, sleeps.

## Quick Install

```bash
curl -sf https://forge.glassmkr.com/install | bash
```

Or manual:

```bash
npm install -g @glassmkr/collector
```

## What It Monitors

**Hardware (IPMI):** CPU temperature, ECC memory errors, PSU redundancy
**Storage:** SMART health, NVMe wear, RAID status, disk space, I/O latency
**Network:** Interface errors/drops, link speed, saturation
**OS:** RAM pressure, swap usage, CPU iowait, OOM kills, disk space

## 15 Alert Rules

| # | Alert | Severity | Default Threshold |
|---|-------|----------|-------------------|
| 1 | RAM usage high | Warning/Critical | 90% / 95% |
| 2 | Swap active | Warning | Any usage |
| 3 | Disk space high | Warning/Critical | 85% / 95% |
| 4 | CPU iowait high | Warning | 20% |
| 5 | OOM kills detected | Critical | Any |
| 6 | SMART failure | Critical | Bad health/sectors |
| 7 | NVMe wear high | Warning/Critical | 85% / 95% |
| 8 | RAID degraded | Critical | Any degradation |
| 9 | Disk latency high | Warning | 50ms NVMe, 200ms HDD |
| 10 | Interface errors | Warning | Any errors/drops |
| 11 | Link speed mismatch | Warning | Below 1 Gbps |
| 12 | Interface saturation | Warning | 90% utilization |
| 13 | CPU temperature high | Warning/Critical | 80C / 90C |
| 14 | ECC memory errors | Warning/Critical | Correctable / Uncorrectable |
| 15 | PSU redundancy loss | Critical | Any PSU failed/absent |

## Configuration

Edit `/etc/glassmkr/collector.yaml`:

```yaml
server_name: "web-01"
collection:
  interval_seconds: 300
  ipmi: true
  smart: true
forge:
  enabled: true
  url: "https://forge.glassmkr.com"
  api_key: "col_xxx"
thresholds:
  ram_percent: 90
  disk_percent: 85
channels:
  telegram:
    enabled: true
    bot_token: "123:abc"
    chat_id: "123456"
```

See [config/collector.example.yaml](config/collector.example.yaml) for all options.

## Requirements

- Linux (Ubuntu 22.04/24.04, Debian 11/12)
- Node.js 22+
- Root access
- Optional: smartmontools (for SMART monitoring)
- Optional: ipmitool (for IPMI/BMC monitoring)

## Notification Channels

**Telegram:** Provide bot token and chat ID. Create a bot via @BotFather.
**Email:** Uses local sendmail. Install postfix or msmtp.
**Slack:** Provide an incoming webhook URL.

## Forge Integration

Optional. Register at [forge.glassmkr.com](https://forge.glassmkr.com), add a server, get an API key. The collector pushes health snapshots for dashboard display and history.

## License

[MIT](LICENSE)
npm package: @glasspane/sdk
Description: Frontend observability SDK for automatic logging, performance insights, rage click detection, and more.
Author: Daniel Selga
Latest version: 1.0.23

# @glasspane/sdk

**GlassPane** is a plug-and-play frontend observability SDK that captures:

- ✅ JavaScript errors & unhandled promise rejections
- ✅ Performance metrics (TTFB, DOM load, etc.)
- ✅ Rage clicks & dead clicks
- ✅ SPA navigation & DOM interaction tracking
- ✅ Element visibility & scroll impressions
- 🔒 (Pro) Long tasks, heatmaps, replay support, and more

---

## 🚀 Installation

```bash
npm install @glasspane/sdk
```

---

## 🧠 Usage

### 🆓 Free Tier Example

```ts
import { init } from "@glasspane/sdk";

init({
  projectId: "glp_free_abc123",
});
```

You get automatic tracking of:

- JavaScript errors
- Performance metrics
- SPA route changes
- DOM click interactions

---

### 💳 Pro Tier Example

```ts
import { init } from "@glasspane/sdk";

init({
  projectId: "glp_pro_xyz789",
  licenseKey: "glp_live_12345-67890-ABCDE",
});
```

This unlocks additional advanced features:

- Rage click detection
- Dead click detection
- Long task reporting
- Scroll & element visibility impressions

---

## 📦 What It Tracks Automatically

| Event Type         | Free | Pro |
| ------------------ | ---- | --- |
| `error`            | ✅   | ✅  |
| `promiseRejection` | ✅   | ✅  |
| `performance`      | ✅   | ✅  |
| `click`            | ✅   | ✅  |
| `navigation`       | ✅   | ✅  |
| `console` logs     | ✅   | ✅  |
| `rageClick`        | ❌   | ✅  |
| `deadClick`        | ❌   | ✅  |
| `longTask`         | ❌   | ✅  |
| `elementVisible`   | ❌   | ✅  |

---

## 🛠️ Custom Event Tracking

You can also manually send events:

```ts
import { track } from "@glasspane/sdk";

track({
  eventType: "custom",
  severity: "info",
  message: "User clicked upgrade",
  tags: { source: "pricing-page" },
});
```

---

## 📌 Setup Requirements

- You’ll need a `projectId` (free or pro)
- For pro features, also request a `licenseKey`
- All events are sent to `https://glasspane-api.fly.dev/track` (built-in)

---

## 🔐 Security & Control

- All access control is server-side
- SDK does not expose internal config
- Feature gating is enforced by your backend via `projectId` or `licenseKey`

---

## 🧾 License

MIT © [Daniel Selga](https://github.com/danielselga)

---

## 🌍 Learn More

Visit [https://glasspane.io](https://glasspane.io) for documentation, dashboard access, and pricing.
npm package: @glasstrace/sdk
Description: Glasstrace server-side debugging SDK for AI coding agents
Latest version: 0.7.2

# @glasstrace/sdk

Server-side debugging SDK for AI coding agents. Captures traces,
errors, and runtime context from your Node.js application and delivers
them to coding agents through an MCP server and live dashboard.

> **Status: Pre-release** -- not yet published to npm.

See the [monorepo README](../../README.md) for the planned API.

## License

[MIT](./LICENSE)
npm package: @glasswall/glasswall-design-system
Description: glasswall design system for official glasswall applications
Author: hafizglasswall
Latest version: 0.1.9

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
npm package: @glasswallsolutions/cra-template-glasswall-react-app
Description: A Glasswall template for CRA with a Glasswall NPM library pre-loaded. To enforce a consistent codebase and allow for our frontend styles to come together from pre-packaged NPM modules.
Author: glasswallsolutions
Latest version: 2.5.5

# Glasswall React App

The Glasswall React and Typescript template for [Create React App](https://create-react-app.dev/)

# Usage

```
npx create-react-app app-name --template @glasswallsolutions/cra-template-glasswall-react-app
```

# Bugs
If there are any problems, please create an issue on [GitHub](https://github.com/filetrust/glasswall-react-app/issues).
npm package: @glatek/rutabaga
Description: JSON Schema-backed CRUD operations in Service Workers with IndexedDB.
Author: Jeremy Karlsson
Latest version: 0.0.6

# @glatek/rutabaga

[![Biome](https://github.com/Glatek/rutabaga/actions/workflows/biome.yml/badge.svg)](https://github.com/Glatek/rutabaga/actions/workflows/biome.yml)
[![Vitest](https://github.com/Glatek/rutabaga/actions/workflows/vitest.yml/badge.svg)](https://github.com/Glatek/rutabaga/actions/workflows/vitest.yml)

![Rutabaga Logo](https://i.imgur.com/0eOAq3T.png)

JSON Schema-backed CRUD operations in Service Workers with IndexedDB.

## Description

That short intro is a mouth full. This project takes JSON Schema definitions and:

- Creates API routes for CRUD
- Generates HTML forms
- Stores the data in IndexedDB via Dexie.JS

```mermaid
sequenceDiagram
    participant A as App
    participant S as ServiceWorker
    participant D as IndexedDB
    critical CREATE | POST /api/:table
        A->>S: Request
        S->>D: read
        D-->>S: read success
        S-->>A: Response
    end
    critical READ | GET /api/:table
        A->>S: Request
        S->>D: write
        D-->>S: write success
        S-->>A: Response
    end
    critical UPDATE | PUT /api/:table
        A->>S: Request
        S->>D: update
        D-->>S: update success
        S-->>A: Response
    end
    critical DELETE | DELETE /api/:table
        A->>S: Request
        S->>D: delete
        D-->>S: delete success
        S-->>A: Response
    end
```

## Usage

Coming soon...
npm package: @glaudsonsilva/react-images-upload
Description: It's a fork project from https://github.com/JakeHartnell/react-images-upload. I make it to wait for the PR response. Check that repository for documentation and oficial commits.
Latest version: 1.2.23

# Images uploader UI component
It's a fork project from https://github.com/JakeHartnell/react-images-upload.
I make it to wait for the PR response.
Check that repository for documentation and oficial commits.


## Installation

```bash
npm install --save react-images-upload
```

## Usage

```javascript
import React from 'react';
import ImageUploader from 'react-images-upload';

class App extends React.Component {

	constructor(props) {
		super(props);
		 this.state = { pictures: [] };
		 this.onDrop = this.onDrop.bind(this);
	}

	onDrop(picture) {
		this.setState({
            pictures: this.state.pictures.concat(picture),
        });
	}

    render() {
        return (
            <ImageUploader
				withIcon={true}
				buttonText='Choose images'
				onChange={this.onDrop}
				imgExtension={['.jpg', '.gif', '.png', '.gif']}
				maxFileSize={5242880}
			/>
        );
    }
}
```

### Available Options

| parameter | type | default | description |
| :--------: | :--: | :-----: | :---------- |
| className | String | - | Class name for the input. |
| fileContainerStyle | Object | - | Inline styles for the file container. |
| onChange | Function | - | On change handler for the input. |
| buttonClassName | String | - | Class name for upload button. |
| buttonStyles | Object | - | Inline styles for upload button. |
| withPreview | Boolean | true | Show preview of selected images. |
| accept | String | "accept=image/*" | Accept attribute for file input. |
| name | String | - | Input name. |
| withIcon | Boolean | true | If true, show upload icon on top |
| buttonText | String | 'Choose images' | The text that display in the button. |
| withLabel | Boolean | true | Show instruction label |
| label | String | 'Max file size: 5mb, accepted: jpg|gif|png|gif' | Label text |
| labelStyles | Object | - | Inline styles for the label. |
| labelClass | string | - | Class name for the label |
| imgExtension | Array | ['.jpg', '.gif', '.png', '.gif'] | Supported image extension (will use in the image validation). |
| maxFileSize | Number | 5242880 | Max image size. |
| fileSizeError | String | " file size is too big" | Label for file size error message. |
| fileTypeError | String | " is not supported file extension" | Label for file extension error message. |
| errorClass | String | - | Class for error messages |
| errorStyle | Object | - | Inline styles for errors |
| singleImage | Boolean | false | If true, only a single image can be selected |

### License
MIT
npm package: @glav-kod/react-timeline-range-slider
Description: Time Slider component for React
Author: GlavKod
Latest version: 3.0.12

### Typescript react timeline range slider

![demo png](https://github.com/glav-kod/react-timeline-range-slider/blob/main/demo.png)

### Installation

     yarn add @glav-kod/react-timeline-range-slider

### Props

```typescript
type Props = {
    /**
     * Selected interval inside the timeline
     */
    selectedInterval: TimelineInterval,

    /**
     * Callback function to handle changes to the selected interval
     * @param interval - The updated TimelineInterval
     */
    onChange: (interval: TimelineInterval) => void,

    /**
     * Callback function to handle live updates to the selected interval
     * @param interval - The updated TimelineInterval
     */
    onUpdate?: (interval: TimelineInterval) => void
}
```

### Example

```tsx
import React, {useState} from "react";
import TimeRange, {TimelineInterval} from "@glav-kod/react-timeline-range-slider";
import "./App.css";

const initialInterval = TimelineInterval.FromString("00:00", "24:00");

function App() {
    const [selectedInterval, setSelectedInterval] = useState<TimelineInterval>(initialInterval);

    function handleChange(selectedInterval: TimelineInterval) {
        setSelectedInterval(selectedInterval);
    }

    return (
            <TimeRange
                    selectedInterval={selectedInterval}
                    onChange={handleChange}
            />
    );
}

export default App;
```

## Feature Requests

If you have any ideas for new features or improvements for this library,
we welcome your input!
Please feel free to create a new issue on
[our GitHub repository](https://github.com/glav-kod/react-timeline-range-slider). We appreciate your feedback and will consider your suggestions
for future updates.

Thank you for helping us make this library even better!