open-index/open-npm huggingface dataset:
npm package: @inpulse-ui/checkbox
Description: A set of selectable buttons - where only one element can be selected at a time.
Author: Jo Santana
Latest version: 3.0.1

# @inpulse-ui/checkbox

A set of selectable buttons - where only one element can be selected at a time.

## Installation

```sh
pnpm add @inpulse-ui/checkbox
# or
bun add @inpulse-ui/checkbox
# or
yarn add @inpulse-ui/checkbox
# or
npm install @inpulse-ui/checkbox
```

## Documentation

Visit https://ui.inpulse.cx/components/forms/checkbox to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/core
Description: Core Inpulse UI CSS styles for Tailwind 4
Author: Jo Santana
Latest version: 4.0.0

# @inpulse-ui/core

The core.

## Installation

```sh
pnpm add @inpulse-ui/core
# or
bun add @inpulse-ui/core
# or
yarn add @inpulse-ui/core
# or
npm install @inpulse-ui/core
```

## Usage

### Full Styles

Import the whole UI stylesheet (theme + utilities):

```css
@import "@inpulse-ui/core";
```

### Individual Styles

You can also import theme and utilities separately:

```css
/* Theme variables only */
@import "@inpulse-ui/core/theme";

/* Utility classes only */
@import "@inpulse-ui/core/utilities";
```

## What's Included

### Theme Variables

- **Colors**: Complete color palette with HSL values
  - `background`, `foreground`
  - `primary`, `primary-foreground`
  - `secondary`, `secondary-foreground`
  - `muted`, `muted-foreground`
  - `accent`, `accent-foreground`
- **Dark mode support**: Automatic dark mode with `@media (prefers-color-scheme: dark)` and `.dark` class

### Utility Classes

- **Animations**: Pre-built animations for common UI patterns
  - Accordion animations (`animate-accordion-down`, `animate-accordion-up`)
  - Checkmark animations (`animate-checkmark-small-line`, `animate-checkmark-large-line`)
  - Loading dots animations (`animate-loading-dots-1`, `animate-loading-dots-2`, `animate-loading-dots-3`)
  - Ripple effect (`animate-ripple-effect`)

- **Layout Utilities**: Additional layout helpers
  - `min-h-viewport` (100svh)

- **Content Utilities**: Pseudo-element content helpers
  - `content-el`, `content-element`

- **Transition Utilities**: Custom transition properties
  - `transition-stroke`

### Base Styles

- **Image styles**: Optimized default styles for images with LQIP support

## Customization

You can override any theme variables by defining them in your own CSS:

```css
:root {
  --primary: 200 100% 50%; /* Custom primary color */
  --primary-foreground: 0 0% 100%;
}

@import "@inpulse-ui/core";
```

## Documentation

Visit https://ui.inpulse.cx/components/getting-started to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/dialog
Description: Unlike a Toast, the Dialog interrupts the user experience, adding a new step to their navigation journey.
Author: Jo Santana
Latest version: 3.0.1

# @inpulse-ui/dialog

Unlike a Toast, the Dialog interrupts the user experience, adding a new step to their navigation journey.

## Installation

```sh
pnpm add @inpulse-ui/dialog
# or
bun add @inpulse-ui/dialog
# or
yarn add @inpulse-ui/dialog
# or
npm install @inpulse-ui/dialog
```

## Documentation

Visit https://ui.inpulse.cx/components/overlays/dialog to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/flip
Description: Flips an element, revealing its hidden face. It can be used to create transition effects and animations.
Author: Jo Santana
Latest version: 3.0.1

# @inpulse-ui/flip

Flips an element, revealing its hidden face. It can be used to create transition effects and animations.

## Installation

```sh
pnpm add @inpulse-ui/flip
# or
bun add @inpulse-ui/flip
# or
yarn add @inpulse-ui/flip
# or
npm install @inpulse-ui/flip
```

## Documentation

Visit https://ui.inpulse.cx/components/content/flip to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/form
Description: An abstraction layer so that you can put together your form very closely to how you would in the pre-React world.
Author: Jo Santana
Latest version: 3.0.2

# @inpulse-ui/form

An abstraction layer so that you can put together your form very closely to how you would in the pre-React world.

## Installation

```sh
pnpm add @inpulse-ui/form
# or
bun add @inpulse-ui/form
# or
yarn add @inpulse-ui/form
# or
npm install @inpulse-ui/form
```

## Documentation

Visit https://ui.inpulse.cx/components/forms/form to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/icons
Description: A crispy clean, consistent and customizable collection of 536 icons, beautifully crafted for Figma, apps and design systems. Available as React components and SVGs.
Author: Jo Santana
Latest version: 4.0.1

# @inpulse-ui/icons

A crispy clean, consistent and customizable collection of 536 icons, beautifully crafted for Figma, apps and design systems. Available as React components and SVGs.

## Installation

```sh
pnpm add @inpulse-ui/icons
# or
bun add @inpulse-ui/icons
# or
yarn add @inpulse-ui/icons
# or
npm install @inpulse-ui/icons
```

## Documentation

Visit https://ui.inpulse.cx/icons/getting-started to view the documentation.

## Roadmap

Next Icons:

- Dice
- Meta
- Sd Card
- Usb
- Magnet
- Bug
- Flag collection
- Address Book
- Storybook

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/input
Description: Features a multipurpose text field.
Author: Jo Santana
Latest version: 3.1.0

# @inpulse-ui/input

Features a multipurpose text field.

## Installation

```sh
pnpm add @inpulse-ui/input
# or
bun add @inpulse-ui/input
# or
yarn add @inpulse-ui/input
# or
npm install @inpulse-ui/input
```

## Documentation

Visit https://ui.inpulse.cx/components/forms/input to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/label
Description: Renders a label in an accessible form, with its respective controls.
Author: Jo Santana
Latest version: 3.1.0

# @inpulse-ui/label

Renders a label in an accessible form, with its respective controls.

## Installation

```sh
pnpm add @inpulse-ui/label
# or
bun add @inpulse-ui/label
# or
yarn add @inpulse-ui/label
# or
npm install @inpulse-ui/label
```

## Documentation

Visit https://ui.inpulse.cx/components/forms/label to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/loading
Description: This element visually represents that the application is busy.
Author: Jo Santana
Latest version: 3.0.2

# @inpulse-ui/loading

This element visually represents that the application is busy.

## Installation

```sh
pnpm add @inpulse-ui/loading
# or
bun add @inpulse-ui/loading
# or
yarn add @inpulse-ui/loading
# or
npm install @inpulse-ui/loading
```

## Documentation

Visit https://ui.inpulse.cx/components/feedback/loading to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/otc
Description: It presents a group of text fields, each accepting a single character, forming a code.
Author: Jo Santana
Latest version: 3.1.1

# @inpulse-ui/otc

It presents a group of text fields, each accepting a single character, forming a code.

## Installation

```sh
pnpm add @inpulse-ui/otc
# or
bun add @inpulse-ui/otc
# or
yarn add @inpulse-ui/otc
# or
npm install @inpulse-ui/otc
```

## Documentation

Visit https://ui.inpulse.cx/components/forms/otc to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/pagination
Description: Set of page navigation elements, with links that lead to specific pages and navigation buttons for the previous and next page.
Author: Jo Santana
Latest version: 3.0.0

# @inpulse-ui/pagination

Set of page navigation elements, with links that lead to specific pages and navigation buttons for the previous and next page.

## Installation

```sh
pnpm add @inpulse-ui/pagination
# or
bun add @inpulse-ui/pagination
# or
yarn add @inpulse-ui/pagination
# or
npm install @inpulse-ui/pagination
```

## Documentation

Visit https://ui.inpulse.cx/components/navigation/pagination to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/radio
Description: A set of selectable buttons - where only one element can be selected at a time.
Author: Jo Santana
Latest version: 3.0.2

# @inpulse-ui/radio

A set of selectable buttons - where only one element can be selected at a time.

## Installation

```sh
pnpm add @inpulse-ui/radio
# or
bun add @inpulse-ui/radio
# or
yarn add @inpulse-ui/radio
# or
npm install @inpulse-ui/radio
```

## Documentation

Visit https://ui.inpulse.cx/components/forms/radio to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/skeleton
Description: Use to present a placeholder while content is loading.
Author: Jo Santana
Latest version: 3.0.0

# @inpulse-ui/skeleton

Use to present a placeholder while content is loading.

## Installation

```sh
pnpm add @inpulse-ui/skeleton
# or
bun add @inpulse-ui/skeleton
# or
yarn add @inpulse-ui/skeleton
# or
npm install @inpulse-ui/skeleton
```

## Documentation

Visit https://ui.inpulse.cx/components/feedback/skeleton to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/slot
Description: Merges any properties to the element directly below it.
Author: Jo Santana
Latest version: 3.0.2

# @inpulse-ui/slot

Merges any properties to the element directly below it.

## Installation

```sh
pnpm add @inpulse-ui/slot
# or
bun add @inpulse-ui/slot
# or
yarn add @inpulse-ui/slot
# or
npm install @inpulse-ui/slot
```

## Documentation

Visit https://ui.inpulse.cx/components/utilities/slot to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/switch
Description: An element that allows you to toggle the Boolean value of a field.
Author: Jo Santana
Latest version: 3.0.0

# @inpulse-ui/switch

An element that allows you to toggle the Boolean value of a field.

## Installation

```sh
pnpm add @inpulse-ui/switch
# or
bun add @inpulse-ui/switch
# or
yarn add @inpulse-ui/switch
# or
npm install @inpulse-ui/switch
```

## Documentation

Visit https://ui.inpulse.cx/components/forms/switch to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/tabs
Description: A set of content sections - where only one can be displayed at a time.
Author: Jo Santana
Latest version: 3.0.0

# @inpulse-ui/tabs

A set of content sections - where only one can be displayed at a time.

## Installation

```sh
pnpm add @inpulse-ui/tabs
# or
bun add @inpulse-ui/tabs
# or
yarn add @inpulse-ui/tabs
# or
npm install @inpulse-ui/tabs
```

## Documentation

Visit https://ui.inpulse.cx/components/navigation/tabs to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/toast
Description: Displays a message for a short period of time.
Author: Jo Santana
Latest version: 3.0.0

# @inpulse-ui/toast

Displays a message for a short period of time.

## Installation

```sh
pnpm add @inpulse-ui/toast
# or
bun add @inpulse-ui/toast
# or
yarn add @inpulse-ui/toast
# or
npm install @inpulse-ui/toast
```

## Documentation

Visit https://ui.inpulse.cx/components/overlays/toast to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/tooltip
Description: A floating element that displays information related to another element when the element receives keyboard focus or when the mouse hovers over it.
Author: Jo Santana
Latest version: 3.0.1

# @inpulse-ui/tooltip

A floating element that displays information related to another element when the element receives keyboard focus or when the mouse hovers over it.

## Installation

```sh
pnpm add @inpulse-ui/tooltip
# or
bun add @inpulse-ui/tooltip
# or
yarn add @inpulse-ui/tooltip
# or
npm install @inpulse-ui/tooltip
```

## Documentation

Visit https://ui.inpulse.cx/components/overlays/tooltip to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/utils
Description: Inpulse UI Utilities
Author: Jo Santana
Latest version: 1.0.0

# @inpulse-ui/utils

[![Coverage](https://img.shields.io/badge/coverage-92.25%25-brightgreen)](https://github.com/inpulse-cx/ds)

An ever expanding utility library to help you deliver confident ecommerce and SaaS projects.

## Installation

```sh
pnpm add @inpulse-ui/utils
# or
bun add @inpulse-ui/utils
# or
yarn add @inpulse-ui/utils
# or
npm install @inpulse-ui/utils
```

## About Amount

The Amount utility can help you deal with monetary values when you're in a context of ecommerce stores, ERPs and simple reports. This utility converts all numbers to `Int` (cents) and is fast, simple and precise.

But if you're dealing with large numbers, complex calculations, compound interest and crypto currency, you'll be in better hands using libraries like [Dinero.js](https://dinerojs.com/) or [Big.js](https://github.com/MikeMcl/big.js/).

### Convert method

The `convert` method inside `Amount` should consider a ratio value much like the ones exposed by common exchange APIs. For instance, here's one by [Fixer](https://fixer.io/):

```json
{
    "success": true,
    "timestamp": 1519296206,
    "base": "EUR",
    "date": "2025-09-25",
    "rates": {
        "AUD": 1.566015,
        "CAD": 1.560132,
        "CHF": 1.154727,
        "CNY": 7.827874,
        "GBP": 0.882047,
        "JPY": 132.360679,
        "USD": 1.23396,
    [...]
    }
}
```

Before using `convert`, you should fetch the ratios for a given currency and then, pass the proper value to the function.

```js
import { amount } from '@inpulse-ui/utils';

const ratios = {
  "base": "EUR",
  "rates": {
    "USD": 1.23396
  }
};
const { rates } = ratios;
const value = amount.set(19.99, 'EUR');
const targetValue = amount.convert(value, 'USD', rates['USD']);
```

Other services like [FastForex](https://www.fastforex.io/), [ExchangeRatiosAPI](https://exchangeratesapi.io/) and [Open Exchange Rates](https://openexchangerates.org/) offer a similar API response and should work properly with our function.

## Documentation

Visit https://ui.inpulse.cx/utils/getting-started to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @inpulse-ui/visually-hidden
Description: Hides content visually, in an accessible way.
Author: Jo Santana
Latest version: 3.0.2

# @inpulse-ui/visually-hidden

Hides content visually, in an accessible way.

## Installation

```sh
pnpm add @inpulse-ui/visually-hidden
# or
bun add @inpulse-ui/visually-hidden
# or
yarn add @inpulse-ui/visually-hidden
# or
npm install @inpulse-ui/visually-hidden
```

## Documentation

Visit https://ui.inpulse.cx/components/utilities/visually-hidden to view the documentation.

## License

Licensed under the [MIT license](https://github.com/inpulse-cx/ui/blob/main/LICENSE).
npm package: @input-kit/clipboard
Description: Clipboard utilities
Author: Harshit
Latest version: 0.1.0

# @input-kit/clipboard

Headless clipboard utilities for React — copy text to clipboard with state tracking, auto-reset, and a legacy `execCommand` fallback for non-HTTPS environments.

## Installation

```bash
npm install @input-kit/clipboard
```

## Usage

### `useClipboard` hook

The main hook. Returns `copied` state that auto-resets after `timeout` ms.

```tsx
import { useClipboard } from '@input-kit/clipboard';

function CopyButton({ text }: { text: string }) {
  const { copy, copied } = useClipboard({ timeout: 2000 });

  return (
    <button onClick={() => copy(text)}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}
```

**Options**

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `timeout` | `number` | `2000` | ms before `copied` resets to `false` |

**Returns**

| Property | Type | Description |
|----------|------|-------------|
| `copy` | `(text: string) => Promise<boolean>` | Writes text to clipboard; returns `true` on success |
| `copied` | `boolean` | `true` for `timeout` ms after a successful copy |
| `reset` | `() => void` | Manually resets `copied` and cancels the pending timer |

---

### `copyToClipboard`

Standalone async utility — no React required.

```ts
import { copyToClipboard } from '@input-kit/clipboard';

const ok = await copyToClipboard('Hello, world!');
```

---

### `readFromClipboard`

Reads the current clipboard text. Only works in secure contexts (HTTPS / `localhost`) and requires browser permission.

```ts
import { readFromClipboard } from '@input-kit/clipboard';

const text = await readFromClipboard(); // string | null
```

---

## Browser support

Uses the modern `navigator.clipboard` API when available (requires a secure context). Falls back to the legacy `document.execCommand('copy')` path for older browsers and `http://` environments.

## Peer dependencies

- `react` ^18 or ^19
- `react-dom` ^18 or ^19

## License

MIT © Harshit
npm package: @input-kit/fullscreen
Description: Fullscreen API
Author: Harshit
Latest version: 0.1.0

# @input-kit/fullscreen

Headless React hook for controlling the Fullscreen API on a target element or the whole document.

## Installation

```bash
npm install @input-kit/fullscreen
```

## Quick Start

```tsx
import { useRef } from 'react';
import { useFullscreen } from '@input-kit/fullscreen';

function Player() {
	const ref = useRef<HTMLDivElement>(null);
	const { isFullscreen, toggle } = useFullscreen(ref);

	return (
		<div ref={ref}>
			<button onClick={toggle}>
				{isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
			</button>
		</div>
	);
}
```

## API

### `useFullscreen(elementRef?)`

```ts
function useFullscreen(
	elementRef?: RefObject<Element | null>
): {
	isFullscreen: boolean;
	enter: () => Promise<void>;
	exit: () => Promise<void>;
	toggle: () => Promise<void>;
}
```

If `elementRef` is omitted, the hook falls back to `document.documentElement`.

| Return value | Type | Description |
|--------------|------|-------------|
| `isFullscreen` | `boolean` | Whether the browser is currently in fullscreen mode |
| `enter` | `() => Promise<void>` | Requests fullscreen for the target element |
| `exit` | `() => Promise<void>` | Exits fullscreen mode |
| `toggle` | `() => Promise<void>` | Switches between enter and exit |

## Notes

- Fullscreen requests must usually be triggered by a user gesture such as a click.
- The hook includes vendor-prefixed fallbacks for older browser implementations.
- Browsers can reject fullscreen requests based on permissions or platform restrictions.

## License

MIT © Input Kit
npm package: @input-kit/gauge
Description: Gauge/meter
Author: Harshit
Latest version: 0.1.0

# @input-kit/gauge

React gauge and meter components with circular and linear variants, threshold-based colors, labels, ticks, and animated transitions.

## Installation

```bash
npm install @input-kit/gauge
```

## Quick Start

```tsx
import { Gauge, LinearGauge } from '@input-kit/gauge';

function Dashboard() {
	return (
		<>
			<Gauge value={68} label="CPU" />
			<LinearGauge value={42} label="Memory" width={280} />
		</>
	);
}
```

## Components

### `Gauge`

Circular gauge with arc, needle, labels, and optional value display.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number` | — | Current reading |
| `min` | `number` | `0` | Minimum bound |
| `max` | `number` | `100` | Maximum bound |
| `label` | `string` | — | Label below the gauge |
| `showValue` | `boolean` | `true` | Show formatted value text |
| `valueFormatter` | `(value: number) => string` | `v => v.toFixed(0)` | Format displayed values |
| `size` | `number` | `200` | SVG width and height |
| `thickness` | `number` | `20` | Arc stroke width |
| `startAngle` | `number` | `-135` | Start angle in degrees |
| `endAngle` | `number` | `135` | End angle in degrees |
| `colors` | `{ value: number; color: string }[]` | green/yellow/red thresholds | Threshold color scale |
| `backgroundColor` | `string` | `#e5e7eb` | Track color |
| `animated` | `boolean` | `true` | Enable CSS transitions |
| `className` | `string` | — | Wrapper class |
| `style` | `React.CSSProperties` | — | Wrapper style |

### `LinearGauge`

Horizontal or vertical meter with optional ticks.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `number` | — | Current reading |
| `min` | `number` | `0` | Minimum bound |
| `max` | `number` | `100` | Maximum bound |
| `label` | `string` | — | Label above the meter |
| `showValue` | `boolean` | `true` | Show formatted value text |
| `valueFormatter` | `(value: number) => string` | `v => v.toFixed(0)` | Format displayed values |
| `width` | `number` | `200` | Track width |
| `height` | `number` | `24` | Track height |
| `colors` | `{ value: number; color: string }[]` | green/yellow/red thresholds | Threshold color scale |
| `backgroundColor` | `string` | `#e5e7eb` | Track color |
| `animated` | `boolean` | `true` | Enable CSS transitions |
| `vertical` | `boolean` | `false` | Render vertically |
| `showTicks` | `boolean` | `false` | Show tick labels |
| `tickCount` | `number` | `5` | Number of ticks |
| `className` | `string` | — | Wrapper class |
| `style` | `React.CSSProperties` | — | Wrapper style |

## Notes

- Threshold colors are matched against the normalized percentage from `0` to `100`.
- Invalid ranges (`max <= min`) safely fall back to the minimum value instead of rendering `NaN` dimensions.
- Both components clamp the rendered value inside the provided bounds.

## License

MIT © Input Kit
npm package: @input-kit/hooks
Description: Essential React hooks collection for @input-kit
Author: Input Kit Team
Latest version: 1.0.1

# @input-kit/hooks

Reusable React hooks for timing, browser APIs, storage, keyboard input, viewport state, and DOM observation.

## Installation

```bash
npm install @input-kit/hooks
```

## Available hooks

| Hook | Purpose |
|------|---------|
| `useDebounce` | Delay updates to a fast-changing value |
| `useThrottle` | Throttle value updates |
| `useLocalStorage` | Persist state in `localStorage` |
| `useSessionStorage` | Persist state in `sessionStorage` |
| `useMediaQuery` | React to CSS media query matches |
| `useIntersectionObserver` | Track whether an element is visible |
| `usePrevious` | Keep the previous render value |
| `useCountdown` | Countdown timer with start, pause, resume, reset, and stop |
| `useNetworkStatus` | Read online state and connection metadata |
| `useClipboard` | Copy text and track copied state |
| `useFullscreen` | Control fullscreen mode for an element |
| `useResizeObserver` | Observe element width and height |
| `useClickOutside` | Run a callback when the user clicks outside an element |
| `useKeyPress` | Detect a single key press |
| `useKeyPressMultiple` | Detect multiple active keys |
| `useScrollPosition` | Read scroll coordinates |

The package also exports `breakpoints` from `useMediaQuery`.

## Quick examples

### Debounce input

```tsx
import { useState } from 'react';
import { useDebounce } from '@input-kit/hooks';

function SearchBox() {
  const [value, setValue] = useState('');
  const debouncedValue = useDebounce(value, 300);

  return (
    <>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Search for: {debouncedValue}</p>
    </>
  );
}
```

### Persist state

```tsx
import { useLocalStorage } from '@input-kit/hooks';

function Preferences() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme((prev) => prev === 'light' ? 'dark' : 'light')}>
      Theme: {theme}
    </button>
  );
}
```

### Clipboard

```tsx
import { useClipboard } from '@input-kit/hooks';

function CopyButton() {
  const { copy, copied } = useClipboard(1500);

  return (
    <button onClick={() => copy('Hello world')}>
      {copied ? 'Copied!' : 'Copy text'}
    </button>
  );
}
```

### Fullscreen

```tsx
import { useRef } from 'react';
import { useFullscreen } from '@input-kit/hooks';

function CanvasPreview() {
  const ref = useRef<HTMLDivElement>(null);
  const { isFullscreen, toggle } = useFullscreen(ref);

  return (
    <div ref={ref}>
      <button onClick={toggle}>
        {isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
      </button>
    </div>
  );
}
```

## Notes

- Storage hooks accept updater functions, so `setValue((prev) => next)` works reliably.
- `useClipboard` uses the browser Clipboard API and returns `false` when it is unavailable.
- `useFullscreen` relies on a browser user gesture for successful entry into fullscreen mode.

## License

MIT © Input Kit
npm package: @input-kit/json
Description: JSON viewer
Author: Harshit
Latest version: 0.1.0

# @input-kit/json

React JSON tree viewer with collapsible objects and arrays, theme support, optional clipboard copy, and utility helpers for formatting and validation.

## Installation

```bash
npm install @input-kit/json
```

## Quick Start

```tsx
import { JSONViewer } from '@input-kit/json';

const data = {
	user: { id: 1, name: 'Ada Lovelace' },
	tags: ['math', 'logic'],
};

function Example() {
	return <JSONViewer data={data} collapsed theme="dark" enableClipboard />;
}
```

## Component

### `JSONViewer`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `unknown` | — | JSON-compatible value to render |
| `collapsed` | `boolean` | `false` | Collapse nested nodes by default |
| `collapseStringsAfterLength` | `number` | — | Truncate long string values after the specified length |
| `displayDataTypes` | `boolean` | `true` | Show `(string)`, `(number)`, and similar suffixes |
| `displayObjectSize` | `boolean` | `true` | Show item or key counts next to arrays/objects |
| `enableClipboard` | `boolean` | `false` | Show a `Copy JSON` button when the Clipboard API is available |
| `theme` | `'light' \| 'dark'` | `'light'` | Built-in color theme |

## Utilities

### `formatJSON(data, indent?)`

Formats a value with `JSON.stringify(data, null, indent)`.

```ts
formatJSON({ a: 1 }, 2);
// {
//   "a": 1
// }
```

### `isValidJSON(value)`

Returns `true` if the string parses successfully.

```ts
isValidJSON('{"ok":true}'); // true
isValidJSON('{oops}');      // false
```

## Notes

- Collapse state for nested nodes follows the `collapsed` prop and re-syncs when the prop changes.
- Clipboard copy uses the browser Clipboard API and silently no-ops when unavailable.
- String truncation only affects display; the full string remains available in the tooltip.

## License

MIT © Input Kit
npm package: @input-kit/markdown
Description: Markdown renderer
Author: Harshit
Latest version: 0.1.0

# @input-kit/markdown

Lightweight React markdown renderer with custom components, inline parsing helpers, tables, lists, blockquotes, code blocks, and safe URL handling.

## Installation

```bash
npm install @input-kit/markdown
```

## Quick Start

```tsx
import { Markdown, InlineMarkdown } from '@input-kit/markdown';

function Example() {
	return (
		<>
			<Markdown content={`# Hello\n\nVisit [Input Kit](https://example.com)`} />
			<InlineMarkdown content="Use **bold** text inside a sentence." />
		</>
	);
}
```

## Components

### `Markdown`

Renders block-level markdown.

| Prop | Type | Description |
|------|------|-------------|
| `content` | `string` | Markdown source |
| `className` | `string` | Optional wrapper class |
| `style` | `React.CSSProperties` | Optional wrapper styles |
| `components` | `Partial<MarkdownComponents>` | Override rendered elements |

### `InlineMarkdown`

Renders inline markdown without block parsing.

It accepts the same props as `Markdown`.

## Hooks and utilities

### `useMarkdown(content)`

Returns parsed block tokens for memoized custom rendering.

### `parseMarkdown(content)`

Parses markdown into token objects.

### `parseInline(content)`

Parses inline markdown such as bold, italics, links, images, and code spans.

## Supported syntax

- Headings: `#` through `######`
- Paragraphs
- Bold, italic, strikethrough
- Inline code and fenced code blocks
- Blockquotes
- Ordered and unordered lists
- Tables with a separator row
- Links and images
- Horizontal rules

## Security notes

- Links and images are sanitized to allow only `http`, `https`, `mailto`, `tel`, relative paths, and hash links.
- Raw HTML is not executed by the renderer.

## License

MIT © Input Kit
npm package: @input-kit/mask
Description: Input masking
Author: Harshit
Latest version: 0.1.0

# @input-kit/mask

React input masking utilities with a headless hook, ready-to-use masked input component, and common presets for phone, card, date, and other structured formats.

## Installation

```bash
npm install @input-kit/mask
```

## Quick Start

```tsx
import { MaskedInput, masks } from '@input-kit/mask';

function Example() {
	return (
		<MaskedInput
			mask={masks.phone}
			onChange={(masked, raw) => {
				console.log(masked, raw);
			}}
		/>
	);
}
```

## Hook

### `useMask(options)`

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `mask` | `string \| MaskChar[]` | — | Required mask definition |
| `guide` | `boolean` | `true` | Show placeholder characters for unfilled positions |
| `placeholderChar` | `string` | `'_'` | Placeholder character for editable slots |
| `onChange` | `(maskedValue, rawValue) => void` | — | Receives both conformed and raw values |

Returns `value`, `rawValue`, `setValue`, event handlers, `inputRef`, and `isComplete`.

## Component

### `MaskedInput`

| Prop | Type | Description |
|------|------|-------------|
| `mask` | `string \| MaskChar[]` | Mask definition |
| `value` | `string` | Controlled value |
| `onChange` | `(maskedValue, rawValue) => void` | Value callback |
| `placeholder` | `string` | Native input placeholder |
| `guide` | `boolean` | Show guide characters |
| `placeholderChar` | `string` | Guide character |
| `showMaskOnFocus` | `boolean` | Show guide only on focus |
| `disabled` | `boolean` | Disable the input |
| `className` | `string` | Input class |
| `style` | `React.CSSProperties` | Inline styles |
| `id` | `string` | Input id |
| `name` | `string` | Input name |
| `autoFocus` | `boolean` | Focus on mount |

## Built-in masks

`masks.phone`, `masks.phoneIntl`, `masks.ssn`, `masks.zip`, `masks.zipPlus4`, `masks.creditCard`, `masks.date`, `masks.time`, `masks.time12`, `masks.currency`

## Utilities

- `parseMask(mask)`
- `conformToMask(value, mask, options?)`
- `getRawValue(maskedValue, mask, placeholderChar?)`
- `isComplete(maskedValue, mask, placeholderChar?)`

## Notes

- Controlled updates now synchronize through the hook state directly instead of a synthetic event path.
- Forwarded refs and the internal caret-management ref are both maintained, so imperative focus and caret restoration work together.

## License

MIT © Input Kit
npm package: @input-kit/menu
Description: Context menu
Author: Harshit
Latest version: 0.1.0

# @input-kit/menu

Headless React context menu and dropdown menu primitives with nested items, keyboard navigation, disabled states, shortcuts, and portal-based rendering.

## Installation

```bash
npm install @input-kit/menu
```

## Quick Start

```tsx
import { ContextMenu, menuItem, menuSeparator } from '@input-kit/menu';

const items = [
	menuItem('copy', 'Copy', { shortcut: 'Ctrl+C' }),
	menuItem('paste', 'Paste', { shortcut: 'Ctrl+V' }),
	menuSeparator(),
	menuItem('delete', 'Delete', { danger: true }),
];

function Example() {
	return (
		<ContextMenu items={items}>
			<div style={{ padding: 40 }}>Right-click me</div>
		</ContextMenu>
	);
}
```

## Exports

### `useContextMenu(options?)`

Returns `{ isOpen, position, open, close, handleContextMenu }`.

### `Menu`

Low-level floating menu component rendered in a portal.

### `ContextMenu`

Wraps children with native right-click handling.

### `DropdownMenu`

Click-triggered menu with `align` and `side` options.

### `menuItem(id, label, options?)`

Helper for creating menu items.

### `menuSeparator()`

Helper for creating separator rows.

## Menu item shape

| Field | Type | Description |
|------|------|-------------|
| `id` | `string` | Unique item id |
| `label` | `string` | Item label |
| `icon` | `ReactNode` | Optional icon |
| `shortcut` | `string` | Shortcut hint text |
| `disabled` | `boolean` | Disable interaction |
| `danger` | `boolean` | Danger styling |
| `onClick` | `() => void` | Selection handler |
| `children` | `MenuItem[]` | Nested submenu items |

## Notes

- Menus clamp their position to the viewport to avoid opening off-screen.
- Keyboard navigation skips disabled items and supports nested submenu opening.
- Rendering is portal-based and SSR-safe.

## License

MIT © Input Kit
npm package: @input-kit/online
Description: Network status
Author: Harshit
Latest version: 0.1.0

# @input-kit/online

React hooks for browser online/offline status and connection metadata such as downlink, effective connection type, RTT, and data-saver mode.

## Installation

```bash
npm install @input-kit/online
```

## Quick Start

```tsx
import { useOnline, useIsOnline } from '@input-kit/online';

function Banner() {
	const isOnline = useIsOnline();
	const { effectiveType, rtt } = useOnline();

	return (
		<div>
			<p>{isOnline ? 'Online' : 'Offline'}</p>
			<p>{effectiveType ?? 'unknown'} • {rtt ?? '--'}ms</p>
		</div>
	);
}
```

## Hooks

### `useOnline()`

Returns a `NetworkState` object:

| Field | Type | Description |
|------|------|-------------|
| `online` | `boolean` | Current browser connectivity state |
| `offlineAt` | `Date \| undefined` | Timestamp of the last offline transition |
| `onlineAt` | `Date \| undefined` | Timestamp of the last online transition |
| `downlink` | `number \| undefined` | Connection downlink estimate |
| `effectiveType` | `string \| undefined` | Effective connection type such as `4g` |
| `rtt` | `number \| undefined` | Round-trip time estimate |
| `saveData` | `boolean \| undefined` | Whether the user enabled data saver |

### `useIsOnline()`

Returns a single `boolean` for components that only need online/offline state.

## Notes

- Connection metadata depends on the browser Network Information API and may be unavailable.
- The hook is safe for SSR and initializes from `navigator.onLine` when available.

## License

MIT © Input Kit
npm package: @input-kit/paste
Description: Clipboard paste handler
Author: Harshit
Latest version: 0.1.0

# @input-kit/paste

React utilities for handling clipboard paste events, scoped paste zones, manual clipboard reads, and pasted file or image filtering.

## Installation

```bash
npm install @input-kit/paste
```

## Quick Start

```tsx
import { PasteZone } from '@input-kit/paste';

function Example() {
	return (
		<PasteZone
			onPasteText={(text) => console.log(text)}
			onPasteImages={(images) => console.log(images)}
			style={{ minHeight: 160, border: '2px dashed #cbd5e1', borderRadius: 12 }}
		>
			<div style={{ padding: 24 }}>Focus this box and press Ctrl+V</div>
		</PasteZone>
	);
}
```

## Exports

### `usePaste(options?)`

Adds a document-level paste listener and returns:

- `lastPaste`
- `isPasting`
- `pasteFromClipboard()`
- `clearLastPaste()`

Options:

| Option | Type | Default | Description |
|------|------|---------|-------------|
| `onPaste` | `(data: PasteData) => void` | - | Called with the full parsed payload |
| `onPasteText` | `(text: string) => void` | - | Called when pasted text is available |
| `onPasteFiles` | `(files: File[]) => void` | - | Called when pasted files are available |
| `onPasteImages` | `(images: File[]) => void` | - | Called when pasted images are available |
| `enabled` | `boolean` | `true` | Enable or disable listening |
| `preventDefault` | `boolean` | `true` | Prevent the browser default paste behavior |
| `acceptedTypes` | `string[]` | - | MIME types or file extensions to keep |
| `maxFileSize` | `number` | - | Maximum file size in bytes |

### `usePasteZone(ref, options?)`

Same API as `usePaste`, but scoped to a specific element ref.

### `PasteZone`

Focusable wrapper component that wires `usePasteZone` for you.

Props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onPaste` | `(data: PasteData) => void` | - | Full paste callback |
| `onPasteText` | `(text: string) => void` | - | Text callback |
| `onPasteFiles` | `(files: File[]) => void` | - | File callback |
| `onPasteImages` | `(images: File[]) => void` | - | Image callback |
| `acceptedTypes` | `string[]` | - | Allowed MIME types or extensions |
| `maxFileSize` | `number` | - | File size limit in bytes |
| `disabled` | `boolean` | `false` | Disable the zone |
| `showIndicator` | `boolean` | `true` | Show the paste hint when focused |
| `className` | `string` | - | Wrapper class |
| `style` | `React.CSSProperties` | - | Wrapper styles |

### Helpers

- `pasteImageToDataUrl(file)`
- `readTextFromClipboard()`
- `clipboardHasImage()`

## Notes

- Clipboard read helpers are SSR-safe and return empty results when clipboard APIs are unavailable.
- File filtering applies both MIME/extension matching and maximum-size filtering.

## License

MIT © Input Kit
npm package: @input-kit/resize
Description: Resize observer hook
Author: Harshit
Latest version: 0.1.0

# @input-kit/resize

React hooks for observing element size, window size, bounds, overflow, aspect ratio, and container breakpoints with optional debounce support.

## Installation

```bash
npm install @input-kit/resize
```

## Quick Start

```tsx
import { useElementSize } from '@input-kit/resize';

function Example() {
	const [ref, size] = useElementSize();

	return (
		<div ref={ref} style={{ resize: 'both', overflow: 'auto' }}>
			{size.width} × {size.height}
		</div>
	);
}
```

## Hooks

### `useResizeObserver(options?)`

Low-level hook that returns `{ ref, size, entry }`.

### `useElementSize(options?)`

Returns `[ref, size]` for straightforward width and height tracking.

### `useWindowSize(options?)`

Tracks the browser viewport size and supports optional debouncing.

### `useContainerQuery(breakpoints)`

Returns `[ref, matches]` where `matches` maps each breakpoint key to a boolean.

### `useAspectRatio()`

Returns `[ref, aspectRatio]` for the observed element.

### `useOverflow()`

Returns `[ref, { horizontal, vertical }]` to detect content overflow.

### `useElementBounds()`

Returns `[ref, DOMRect | null]` with live position and size updates.

### `observeElements(elements, callback, options?)`

Utility for directly observing multiple DOM elements.

## Extras

- `defaultBreakpoints` includes `xs`, `sm`, `md`, `lg`, `xl`, and `2xl`.
- Debounced listeners cancel their pending timeouts on cleanup.

## Notes

- Hooks degrade safely when `ResizeObserver` is unavailable.
- `useWindowSize` is SSR-safe and initializes to `0 × 0` on the server.

## License

MIT © Input Kit
npm package: @input-kit/search
Description: Search input with debounce
Author: Harshit
Latest version: 0.1.0

# @input-kit/search

Debounced React search utilities with a headless hook and a small ready-to-use search input component.

## Installation

```bash
npm install @input-kit/search
```

## Quick Start

```tsx
import { SearchInput } from '@input-kit/search';

function Example() {
	return (
		<SearchInput
			placeholder="Search products"
			debounceMs={250}
			onSearch={(value) => console.log('Searching:', value)}
		/>
	);
}
```

## Exports

### `useSearch(options?)`

Returns:

- `value`
- `debouncedValue`
- `setValue(value)`
- `clear()`

Options:

| Option | Type | Default | Description |
|------|------|---------|-------------|
| `debounceMs` | `number` | `300` | Delay before updating `debouncedValue` |
| `onSearch` | `(value: string) => void` | - | Called after the debounce delay |
| `initialValue` | `string` | `''` | Initial search value |

### `SearchInput`

Small controlled/uncontrolled search field component.

Important props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `placeholder` | `string` | `'Search...'` | Input placeholder |
| `debounceMs` | `number` | `300` | Debounce delay |
| `onSearch` | `(value: string) => void` | - | Debounced callback |
| `onChange` | `(value: string) => void` | - | Immediate callback on every keystroke |
| `value` | `string` | - | Controlled value |
| `defaultValue` | `string` | `''` | Uncontrolled initial value |
| `autoFocus` | `boolean` | `false` | Focus on mount |
| `className` | `string` | - | Input class |

All other standard input props are forwarded to the rendered `<input>`.

## Notes

- The hook stores the latest `onSearch` callback in a ref to avoid stale closures.
- The component uses `type="search"` by default.

## License

MIT © Input Kit
npm package: @input-kit/slider
Description: Accessible React slider primitives with single and range thumbs
Author: Harshit
Latest version: 0.1.1

# @input-kit/slider

Headless React slider primitives with single-value and range modes.

## Installation

```bash
npm install @input-kit/slider
```

## Features

- Single-value and dual-thumb range sliders
- Keyboard support with arrow, page, home, and end keys
- Vertical and horizontal layouts
- Ticks, marks, tooltips, and formatted value text
- `onChange` and `onChangeEnd` callbacks

## Usage

```tsx
import { RangeSlider, Slider } from '@input-kit/slider';

function Example() {
	return (
		<>
			<Slider defaultValue={32} min={0} max={100} aria-label="Volume" />
			<RangeSlider defaultValue={[200, 700]} min={0} max={1000} minDistance={50} aria-label="Budget" />
		</>
	);
}
```

## Notes

- `RangeSlider` thumbs are keyboard accessible and respect `minDistance`.
- Use `formatValue` to control tooltip text and `aria-valuetext` output.
- Use `orientation="vertical"` for mixer, brightness, or thermostat controls.

## License

MIT © Input Kit
npm package: @input-kit/sparkline
Description: SVG sparkline, area, and bar charts for React dashboards
Author: Harshit
Latest version: 0.1.1

# @input-kit/sparkline

Compact SVG charts for dashboards, tables, and inline metrics.

## Installation

```bash
npm install @input-kit/sparkline
```

## Features

- Line, area, bar, and reference-line variants
- Optional dots, end dots, min/max highlighting, and animation
- `limit` prop for trimming large series to the most recent points
- Accessible SVG output via `label`
- `useSparklineData` hook for streaming or rolling datasets

## Usage

```tsx
import { SparkArea, SparkBar, SparklineWithReference } from '@input-kit/sparkline';

function Example() {
	return (
		<>
			<SparkArea data={[12, 18, 15, 24, 20, 28]} label="Revenue trend" />
			<SparkBar data={[8, -4, 12, 16, -2, 20]} label="Net movement" />
			<SparklineWithReference data={[10, 13, 17, 14, 19]} referenceValue={15} />
		</>
	);
}
```

## Notes

- `SparkArea` and `SparklineWithReference` render a single SVG tree, so gradients and overlays stay valid.
- Animated bars use transform-based growth so each bar animates to its own height.
- Pass `label` when the chart communicates standalone meaning.

## License

MIT © Input Kit
npm package: @input-kit/split
Description: Resizable split panes and panel layouts with keyboard support
Author: Harshit
Latest version: 0.1.1

# @input-kit/split

Resizable React panel layouts with drag and keyboard support.

## Installation

```bash
npm install @input-kit/split
```

## Features

- Horizontal or vertical layouts
- Controlled or uncontrolled size arrays
- Keyboard-accessible separators with ARIA values
- Double-click a separator to rebalance neighboring panes
- Convenience `Split` and `CollapsibleSplit` helpers

## Usage

```tsx
import { SplitPane } from '@input-kit/split';

function Example() {
	return (
		<div style={{ height: 320 }}>
			<SplitPane defaultSizes={[30, 70]} minSizes={[20, 20]} keyboardStep={4}>
				<div>Sidebar</div>
				<div>Workspace</div>
			</SplitPane>
		</div>
	);
}
```

## Notes

- Focus a separator and use arrow keys to resize.
- Press Enter or Space, or double-click, to rebalance the adjacent pair.
- `CollapsibleSplit` is useful for sidebars, inspectors, and drawers.

## License

MIT © Input Kit
npm package: @input-kit/tabs
Description: Accessible React tabs with roving focus and compound primitives
Author: Harshit
Latest version: 0.1.1

# @input-kit/tabs

Accessible compound tabs for React with roving focus and controlled or uncontrolled state.

## Installation

```bash
npm install @input-kit/tabs
```

## Features

- Proper `tab`, `tablist`, and `tabpanel` relationships
- Arrow key navigation with Home and End support
- Automatic or manual activation modes
- Horizontal and vertical layouts
- Optional `forceMount` panels for preserving state

## Usage

```tsx
import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@input-kit/tabs';

function Example() {
	return (
		<Tabs activationMode="manual">
			<TabList aria-label="Sections">
				<Tab>Overview</Tab>
				<Tab>API</Tab>
				<Tab disabled>Locked</Tab>
			</TabList>
			<TabPanels>
				<TabPanel>Overview content</TabPanel>
				<TabPanel>API content</TabPanel>
				<TabPanel forceMount>Locked content</TabPanel>
			</TabPanels>
		</Tabs>
	);
}
```

## Notes

- Use `selectedIndex` and `onChange` for controlled tabs.
- `activationMode="automatic"` activates on focus; `manual` waits for Enter or Space.
- Disabled tabs are skipped by keyboard navigation.

## License

MIT © Input Kit
npm package: @input-kit/time
Description: Locale-aware relative time, countdown, and stopwatch utilities for React
Author: Harshit
Latest version: 0.1.1

# @input-kit/time

Locale-aware relative time, countdown, and stopwatch utilities for React.

## Installation

```bash
npm install @input-kit/time
```

## Features

- Relative time formatting with locale support
- Short, long, and narrow output styles
- Smart auto-refresh scheduling for live labels
- Context formatting for today, yesterday, and tomorrow
- Countdown and stopwatch hooks and components

## Usage

```tsx
import { Countdown, RelativeTime, Stopwatch } from '@input-kit/time';

function Example() {
	return (
		<>
			<RelativeTime date={Date.now() - 90_000} locale="fr-FR" formatStyle="long" />
			<Countdown targetDate={Date.now() + 3_600_000} format="compact" />
			<Stopwatch />
		</>
	);
}
```

## Notes

- When `Intl.RelativeTimeFormat` is available, relative labels are localized automatically.
- `RelativeTime` renders a semantic `<time>` element with `dateTime` and `title` attributes.
- `useRelativeTime` refreshes based on the current distance from the target date instead of a fixed global interval.

## License

MIT © Input Kit