# NumberField Documentation

## Installation

```bash
jsrepo add number-field
```

## Components

### Root

The root component of the number field. Manages the value state and ramp behavior.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| value | number | - | false | true | The current value of the input. |
| rampBy | number | - | false | false | The amount to increment or decrement the value by. |
| min | number | - | false | false | The minimum value allowed. |
| max | number | - | false | false | The maximum value allowed. |
| rampSettings | { startDelay?: number; rampUpTime?: number; minFrequency?: number; maxFrequency?: number } | { startDelay: 400, rampUpTime: 0, minFrequency: 35, maxFrequency: 35 } | false | false | Configuration options for the ramp behavior when holding down increment/decrement buttons. |
| children | Snippet | - | false | false | The child components of the number field. |

### Group

A container component that groups the input and buttons together with proper styling.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLDivElement | null | false | true | A reference to the group container element. |
| class | string | - | false | false | Additional CSS classes to apply to the group container. |
| children | Snippet | - | false | false | The child components of the group (typically Input, Increment, and Decrement). |

### Input

The input element that displays and allows editing of the value.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLInputElement | null | false | true | A reference to the input element. |
| class | string | - | false | false | Additional CSS classes to apply to the input element. |

### Increment

A button that increments the value. Supports ramp behavior when held down.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLButtonElement | null | false | true | A reference to the button element. |
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | ghost | false | false | The visual style of the button. |
| size | "default" | "sm" | "lg" | "icon" | icon | false | false | The size of the button. |
| class | string | - | false | false | Additional CSS classes to apply to the button. |
| children | Snippet | - | false | false | The content of the button. Defaults to a plus icon if not provided. |
| disabled | boolean | false | false | false | Whether the button is disabled. |
| onpointerdown | (e: PointerEvent) => void | - | false | false | Handler for the pointerdown event. |
| onpointerup | (e: PointerEvent) => void | - | false | false | Handler for the pointerup event. |
| onclick | (e: MouseEvent) => void | - | false | false | Handler for the click event. |

### Decrement

A button that decrements the value. Supports ramp behavior when held down.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLButtonElement | null | false | true | A reference to the button element. |
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | ghost | false | false | The visual style of the button. |
| size | "default" | "sm" | "lg" | "icon" | icon | false | false | The size of the button. |
| class | string | - | false | false | Additional CSS classes to apply to the button. |
| children | Snippet | - | false | false | The content of the button. Defaults to a minus icon if not provided. |
| disabled | boolean | false | false | false | Whether the button is disabled. |
| onpointerdown | (e: PointerEvent) => void | - | false | false | Handler for the pointerdown event. |
| onpointerup | (e: PointerEvent) => void | - | false | false | Handler for the pointerup event. |
| onclick | (e: MouseEvent) => void | - | false | false | Handler for the click event. |