@primereact/mcp 11.0.0-rc.2

package/data/llms/headless/components/inputnumber.md

@@ -0,0 +1,167 @@
+# useInputNumber
+
+Hook that manages numeric input with formatting, locale support, and spin button behavior.
+
+```tsx
+'use client';
+import { AngleDown } from '@primeicons/react/angle-down';
+import { AngleUp } from '@primeicons/react/angle-up';
+import { useInputNumber, type UseInputNumberValueChangeEvent } from '@primereact/headless/inputnumber';
+import * as React from 'react';
+
+export default function BasicDemo() {
+    const [value, setValue] = React.useState(50);
+
+    const { rootProps, inputProps, state, incrementProps, decrementProps } = useInputNumber({
+        value,
+        min: 0,
+        max: 100,
+        mode: 'currency',
+        currency: 'EUR',
+        onValueChange: (e: UseInputNumberValueChangeEvent) => setValue(e.value)
+    });
+
+    return (
+        <div className="flex items-center justify-center" {...rootProps}>
+            <div className="flex items-center border border-surface-200 dark:border-surface-700 rounded-lg overflow-hidden">
+                <input
+                    {...inputProps}
+                    value={state.formattedValue as string}
+                    className="w-32 px-3 py-2 text-sm bg-transparent outline-none text-surface-900 dark:text-surface-100"
+                />
+                <div className="flex flex-col border-l border-surface-200 dark:border-surface-700">
+                    <button
+                        type="button"
+                        {...incrementProps}
+                        className="px-2 hover:bg-surface-50 dark:hover:bg-surface-800 cursor-pointer border-b border-surface-200 dark:border-surface-700 text-surface-600 dark:text-surface-400 text-[.5rem] outline-none focus-visible:bg-surface-100 dark:focus-visible:bg-surface-700"
+                    >
+                        <AngleUp />
+                    </button>
+                    <button
+                        type="button"
+                        {...decrementProps}
+                        className="px-2 hover:bg-surface-50 dark:hover:bg-surface-800 cursor-pointer text-surface-600 dark:text-surface-400 text-[.5rem] outline-none focus-visible:bg-surface-100 dark:focus-visible:bg-surface-700"
+                    >
+                        <AngleDown />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useInputNumber } from '@primereact/headless/inputnumber';
+```
+
+```tsx
+const { inputProps, state } = useInputNumber({
+    defaultValue: 0
+});
+
+return <input {...inputProps} value={state.formattedValue} />;
+```
+
+`useInputNumber` handles numeric parsing, formatting, keyboard-driven increment/decrement, and boundary enforcement. See [Primitive](/docs/primitive/components/inputnumber) for a component-based API.
+
+## Features
+
+- **Numeric value state**, tracks raw value and a locale-formatted display string in `state.value` / `state.formattedValue`
+- **Spin button semantics**, applies `role="spinbutton"` and ARIA value properties on the input
+- **Keyboard and pointer stepping**, `increment`, `decrement`, `stepUp`, `stepDown` plus auto-repeat on pointer hold
+- **Locale-aware formatting**, decimal, currency, percent, and grouping configuration via `Intl.NumberFormat`
+- **Boundary enforcement**, `min`/`max` clamp on blur and during spin, with `minBoundry()` / `maxBoundry()` helpers
+- **Affix support**, optional `prefix` and `suffix` text parsed back out of the displayed value
+
+## Working with callbacks
+
+### Controlled value
+
+Pass `value` and `onValueChange` to drive the number from outside state.
+
+```tsx
+const [value, setValue] = React.useState(0);
+
+useInputNumber({
+    value,
+    onValueChange: (e) => setValue(e.value)
+});
+```
+
+### Currency formatting
+
+Combine `mode`, `currency`, and `locale` to render monetary values without custom parsers.
+
+```tsx
+useInputNumber({
+    mode: 'currency',
+    currency: 'USD',
+    locale: 'en-US'
+});
+```
+
+### Clamped range with custom step
+
+Use `min`, `max`, and `step` together when the field represents a bounded quantity like a rating or percentage.
+
+```tsx
+useInputNumber({
+    min: 0,
+    max: 100,
+    step: 5
+});
+```
+
+### Fraction precision
+
+Control decimal precision with `minFractionDigits` and `maxFractionDigits`, useful for financial or scientific fields.
+
+```tsx
+useInputNumber({
+    minFractionDigits: 2,
+    maxFractionDigits: 4
+});
+```
+
+### Highlight on focus
+
+Set `highlightOnFocus` so the input selects its text on focus, letting users overwrite rather than edit.
+
+```tsx
+useInputNumber({ highlightOnFocus: true });
+```
+
+## Styling with data attributes
+
+Each part exposes `data-scope="inputnumber"` and a `data-part` identifier (`root`, `input`). The root reflects state with `data-disabled`, `data-invalid`, and `data-readonly` so descendant selectors can react.
+
+```css
+[data-scope='inputnumber'][data-part='input'] {
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+}
+
+[data-scope='inputnumber'][data-part='input']:focus {
+    border-color: var(--p-primary-color);
+    outline: none;
+}
+
+[data-scope='inputnumber'][data-part='root'][data-disabled] [data-part='input'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+```
+
+## API
+
+### useInputNumber
+
+<DocTable name="useInputNumber" category="api" />
+
+## Accessibility
+
+Up/Down arrows increment or decrement, Shift+arrows step by 10, and type-ahead accepts numeric input. See [Primitive](/docs/primitive/components/inputnumber#accessibility) for full WAI-ARIA compliance details.

package/data/llms/headless/components/inputotp/api.json

@@ -0,0 +1,276 @@
+[
+  {
+    "name": "useInputOtp",
+    "source": "apps/showcase/assets/apidoc/useinputotp.json",
+    "data": {
+      "description": "The useInputOtp manages the state and functionality of an input otp component.",
+      "interfaces": {
+        "UseInputOtpValueChangeEvent": {
+          "description": "Custom value change event.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "originalEvent",
+              "type": "SyntheticEvent<HTMLInputElement>",
+              "default": "",
+              "description": "Original browser event."
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "default": "",
+              "description": "New value."
+            }
+          ],
+          "methods": []
+        },
+        "UseInputOtpProps": {
+          "description": "Defines valid properties in useInputOtp.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "default": "null",
+              "description": "Specifies whether a inputotp should be checked or not."
+            },
+            {
+              "name": "defaultValue",
+              "type": "string",
+              "default": "null",
+              "description": "Specifies whether a inputotp should be checked or not."
+            },
+            {
+              "name": "integerOnly",
+              "type": "boolean",
+              "default": "false",
+              "description": "When present, it specifies that only integers are allowed."
+            },
+            {
+              "name": "mask",
+              "type": "boolean",
+              "default": "false",
+              "description": "Mask pattern."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "undefined",
+              "description": "When present, it specifies that the component should be disabled."
+            },
+            {
+              "name": "onValueChange",
+              "type": "(event: UseInputOtpValueChangeEvent) => void",
+              "default": "",
+              "description": "Callback to invoke when value changes."
+            }
+          ],
+          "methods": []
+        },
+        "UseInputOtpState": {
+          "description": "Defines valid state in useInputOtp.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "default": "",
+              "description": "Value of the otp."
+            },
+            {
+              "name": "tokens",
+              "type": "string[]",
+              "default": "",
+              "description": "Tokens of the otp."
+            }
+          ],
+          "methods": []
+        },
+        "UseInputOtpRootProps": {
+          "description": "Props for the input OTP root element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "ref",
+              "type": "(node: HTMLElement) => void",
+              "default": "",
+              "description": "Ref callback that connects the root element to the hook for DOM-based input detection."
+            },
+            {
+              "name": "id",
+              "type": "string",
+              "default": "",
+              "description": "The id attribute for the root element."
+            },
+            {
+              "name": "data-scope",
+              "type": "\"inputotp\"",
+              "default": "",
+              "description": "Data scope attribute."
+            },
+            {
+              "name": "data-part",
+              "type": "\"root\"",
+              "default": "",
+              "description": "Data part attribute."
+            }
+          ],
+          "methods": []
+        },
+        "UseInputOtpTextProps": {
+          "description": "Props for an input OTP text element at a given index.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "\"inputotp\"",
+              "default": "",
+              "description": "Data scope attribute."
+            },
+            {
+              "name": "data-part",
+              "type": "\"text\"",
+              "default": "",
+              "description": "Data part attribute."
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "default": "",
+              "description": "The current token value for this input position."
+            },
+            {
+              "name": "type",
+              "type": "string",
+              "default": "",
+              "description": "The input type ('text' or 'password' when mask is enabled)."
+            },
+            {
+              "name": "inputMode",
+              "type": "\"text\" | \"numeric\"",
+              "default": "",
+              "description": "The input mode for mobile keyboards."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the input is disabled, resolved from OTP root props with fallback."
+            },
+            {
+              "name": "data-index",
+              "type": "number",
+              "default": "",
+              "description": "The index of this input within the OTP sequence."
+            },
+            {
+              "name": "onInput",
+              "type": "(e: SyntheticEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Input event handler bound to the current index."
+            },
+            {
+              "name": "onClick",
+              "type": "(event: MouseEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Click event handler."
+            },
+            {
+              "name": "onKeyDown",
+              "type": "(event: KeyboardEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Key down event handler."
+            },
+            {
+              "name": "onPaste",
+              "type": "(event: ClipboardEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Paste event handler."
+            }
+          ],
+          "methods": []
+        },
+        "UseInputOtpExposes": {
+          "description": "Defines the methods and properties exposed by useInputOtp.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseInputOtpState",
+              "default": "",
+              "description": "State of the input OTP."
+            },
+            {
+              "name": "getInputEls",
+              "type": "() => HTMLInputElement[]",
+              "default": "",
+              "description": "Returns an array of input elements within the root element.\nUses DOM query with  `input[data-scope=\"inputotp\"][data-part=\"text\"]`  selector."
+            },
+            {
+              "name": "setRootRef",
+              "type": "(node: HTMLElement) => void",
+              "default": "",
+              "description": "Ref callback to connect the root DOM element to the hook."
+            },
+            {
+              "name": "inputType",
+              "type": "string",
+              "default": "",
+              "description": "The input type based on configuration ('text' or 'password')."
+            },
+            {
+              "name": "inputMode",
+              "type": "\"text\" | \"numeric\"",
+              "default": "",
+              "description": "The input mode for mobile keyboards ('numeric' when integerOnly is true, 'text' otherwise)."
+            },
+            {
+              "name": "rootProps",
+              "type": "UseInputOtpRootProps",
+              "default": "",
+              "description": "Pre-built props for the root element.\nIncludes ref callback, id, and data attributes."
+            },
+            {
+              "name": "getTextProps",
+              "type": "(index: number, fallbackDisabled?: boolean) => UseInputOtpTextProps",
+              "default": "",
+              "description": "Returns pre-built props for a text input element at the given index.\nIncludes value, type, inputMode, disabled, data-index, and event handlers."
+            },
+            {
+              "name": "onInput",
+              "type": "(event: SyntheticEvent<HTMLInputElement>, index: number) => void",
+              "default": "",
+              "description": "Input event handler."
+            },
+            {
+              "name": "onClick",
+              "type": "(event: MouseEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Click event handler."
+            },
+            {
+              "name": "onKeyDown",
+              "type": "(event: KeyboardEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Key down event handler."
+            },
+            {
+              "name": "onPaste",
+              "type": "(event: ClipboardEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Paste event handler."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseInputOtpInstance": {
+          "description": "Instance of useInputOtp headless.",
+          "values": "HeadlessInstance<UseInputOtpProps, UseInputOtpState, UseInputOtpExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

package/data/llms/headless/components/inputotp.md

@@ -0,0 +1,130 @@
+# useInputOtp
+
+Hook that manages OTP input state, focus navigation, and keyboard handling.
+
+```tsx
+'use client';
+import { useInputOtp } from '@primereact/headless/inputotp';
+
+export default function BasicDemo() {
+    const { rootProps, getTextProps } = useInputOtp();
+
+    return (
+        <div className="flex justify-center">
+            <div {...rootProps} className="flex items-center gap-2">
+                {[0, 1, 2, 3].map((index) => (
+                    <input
+                        key={index}
+                        {...getTextProps(index)}
+                        className="w-9 py-1.5 text-sm text-center rounded-md border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-900 text-surface-700 dark:text-surface-100 outline-hidden hover:border-surface-400 dark:hover:border-surface-500 focus-visible:border-primary transition-colors duration-200"
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useInputOtp } from '@primereact/headless/inputotp';
+```
+
+```tsx
+const { rootProps, getTextProps } = useInputOtp();
+
+<div {...rootProps}>
+    <input {...getTextProps(0)} />
+    <input {...getTextProps(1)} />
+    <input {...getTextProps(2)} />
+    <input {...getTextProps(3)} />
+</div>;
+```
+
+`useInputOtp` manages OTP value state, per-input focus navigation, and keyboard/paste handling. See [Primitive](/docs/primitive/components/inputotp) for a component-based API.
+
+## Features
+
+- **Per-slot prop getter**, `getTextProps(index)` returns the props for each OTP slot, including refs and handlers
+- **Auto focus flow**, advances focus on input, retreats on backspace, and supports left/right arrow navigation
+- **Paste distribution**, spreads clipboard content across the remaining slots in a single operation
+- **Masking and numeric modes**, `mask` switches to `type="password"`, `integerOnly` restricts to digits with `inputMode="numeric"`
+- **Controlled or uncontrolled**, value driven via `value`/`onValueChange` or tracked internally from `defaultValue`
+
+## Working with callbacks
+
+### Controlled value
+
+Pass `value` and `onValueChange` when the OTP should live in outside state, for form integration or async verification.
+
+```tsx
+const [code, setCode] = React.useState('');
+
+useInputOtp({
+    value: code,
+    onValueChange: (e) => setCode(e.value)
+});
+```
+
+### Numeric-only codes
+
+Enable `integerOnly` to restrict input to digits and signal numeric keyboards on mobile.
+
+```tsx
+useInputOtp({ integerOnly: true });
+```
+
+### Masked entry
+
+Set `mask` to render each slot as a password field, useful for sensitive tokens.
+
+```tsx
+useInputOtp({ mask: true });
+```
+
+### Auto-submit on completion
+
+Combine controlled value with a length check to trigger submission once all slots are filled.
+
+```tsx
+const [code, setCode] = React.useState('');
+
+useInputOtp({
+    value: code,
+    onValueChange: (e) => {
+        setCode(e.value);
+        if (e.value.length === 6) verify(e.value);
+    }
+});
+```
+
+## Styling with data attributes
+
+The root element includes `data-scope="inputotp"` and `data-part="root"`. Each input includes `data-scope="inputotp"` and `data-part="input"`.
+
+```css
+[data-scope='inputotp'][data-part='root'] {
+    display: flex;
+    gap: 0.5rem;
+}
+
+[data-scope='inputotp'][data-part='input'] {
+    width: 2.5rem;
+    text-align: center;
+}
+
+[data-scope='inputotp'][data-part='input']:focus {
+    border-color: var(--p-primary-color);
+}
+```
+
+## API
+
+### useInputOtp
+
+<DocTable name="useInputOtp" category="api" />
+
+## Accessibility
+
+Arrow keys move between slots, Backspace clears the current slot and moves left, and paste distributes characters across all slots. See [Primitive](/docs/primitive/components/inputotp#accessibility) for full WAI-ARIA compliance details.