@primereact/mcp 11.0.0-rc.2

package/data/llms/hooks/use-key-filter.md

@@ -0,0 +1,139 @@
+# useKeyFilter
+
+Block individual keystrokes that don't match a pattern, before they reach the input.
+
+## Usage
+
+```tsx
+import { useKeyFilter } from '@primereact/hooks/use-key-filter';
+```
+
+```tsx
+const { onBeforeInput, onKeyPress, onPaste } = useKeyFilter({ pattern: 'int' });
+
+<InputText onBeforeInput={onBeforeInput} onKeyPress={onKeyPress} onPaste={onPaste} />;
+```
+
+Spread the returned handlers onto a native input. Keystrokes and pastes that don't match the pattern are rejected before they change the value.
+
+## Signature
+
+```ts
+function useKeyFilter(options: UseKeyFilterOptions): UseKeyFilterExposes;
+```
+
+## Options
+
+- `pattern`, a preset name or a `RegExp`. Presets: `pint`, `int`, `pnum`, `num`, `money`, `hex`, `email`, `alpha`, `alphanum`.
+- `validateOnly?`, when `true`, individual keys are allowed and the whole value is validated instead (use `validate` on form events).
+
+## Returns
+
+`{ onBeforeInput, onKeyPress, onPaste, validate }`. The first three are input handlers to spread; `validate(event)` returns a boolean for the `validateOnly` flow.
+
+## Basic
+
+```tsx
+'use client';
+import { useKeyFilter } from '@primereact/hooks';
+import { InputText } from '@primereact/ui/inputtext';
+import { Label } from '@primereact/ui/label';
+import * as React from 'react';
+
+export default function PatternDemo() {
+    const { onKeyPress: onIntegerKeyPress } = useKeyFilter({ pattern: 'int' });
+    const { onKeyPress: onNumberKeyPress } = useKeyFilter({ pattern: 'num' });
+    const { onKeyPress: onMoneyKeyPress } = useKeyFilter({ pattern: 'money' });
+    const { onKeyPress: onHexKeyPress } = useKeyFilter({ pattern: 'hex' });
+    const { onKeyPress: onAlphaKeyPress } = useKeyFilter({ pattern: 'alpha' });
+    const { onKeyPress: onAlphanumKeyPress } = useKeyFilter({ pattern: 'alphanum' });
+
+    const [integer, setInteger] = React.useState('');
+    const [number, setNumber] = React.useState('');
+    const [money, setMoney] = React.useState('');
+    const [hex, setHex] = React.useState('');
+    const [alphabetic, setAlphabetic] = React.useState('');
+    const [alphanumeric, setAlphanumeric] = React.useState('');
+
+    return (
+        <div>
+            <div className="flex flex-wrap gap-3 mb-4">
+                <div className="flex-auto">
+                    <Label htmlFor="integer" className="font-bold block mb-2">
+                        Integer
+                    </Label>
+                    <InputText
+                        id="integer"
+                        value={integer}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInteger(e.target.value)}
+                        onKeyPress={onIntegerKeyPress}
+                        className="w-full"
+                    />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="number" className="font-bold block mb-2">
+                        Number
+                    </Label>
+                    <InputText
+                        id="number"
+                        value={number}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNumber(e.target.value)}
+                        onKeyPress={onNumberKeyPress}
+                        className="w-full"
+                    />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="money" className="font-bold block mb-2">
+                        Money
+                    </Label>
+                    <InputText
+                        id="money"
+                        value={money}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMoney(e.target.value)}
+                        onKeyPress={onMoneyKeyPress}
+                        className="w-full"
+                    />
+                </div>
+            </div>
+            <div className="flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <Label htmlFor="hex" className="font-bold block mb-2">
+                        Hex
+                    </Label>
+                    <InputText
+                        id="hex"
+                        value={hex}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setHex(e.target.value)}
+                        onKeyPress={onHexKeyPress}
+                        className="w-full"
+                    />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="alphabetic" className="font-bold block mb-2">
+                        Alphabetic
+                    </Label>
+                    <InputText
+                        id="alphabetic"
+                        value={alphabetic}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAlphabetic(e.target.value)}
+                        onKeyPress={onAlphaKeyPress}
+                        className="w-full"
+                    />
+                </div>
+                <div className="flex-auto">
+                    <Label htmlFor="alphanumeric" className="font-bold block mb-2">
+                        Alphanumeric
+                    </Label>
+                    <InputText
+                        id="alphanumeric"
+                        value={alphanumeric}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setAlphanumeric(e.target.value)}
+                        onKeyPress={onAlphanumKeyPress}
+                        className="w-full"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
+```

package/data/llms/hooks/use-local-storage.md

@@ -0,0 +1,28 @@
+# useLocalStorage
+
+State persisted to localStorage, with SSR-safe hydration and custom serialization.
+
+## Usage
+
+```tsx
+import { useLocalStorage } from '@primereact/hooks/use-local-storage';
+```
+
+```tsx
+const [sizes, setSizes, removeSizes] = useLocalStorage({
+    key: 'splitter-sizes',
+    initialValue: [50, 50]
+});
+```
+
+The hook renders `initialValue` for SSR and the first client render, then reads the stored value in a layout effect, so the real value appears before paint and there's no hydration mismatch or flash.
+
+## Options
+
+- `key`, storage key.
+- `initialValue`, value used when nothing is stored yet.
+- `serializer?` / `deserializer?`, default to `JSON.stringify` / `JSON.parse`. Override for dates, maps, or custom codecs.
+
+## Returns
+
+`[value, setValue, remove]`. `setValue` accepts a value or an updater function (like `useState`). `remove()` clears the key from storage and resets to `initialValue`.

package/data/llms/hooks/use-mask.md

@@ -0,0 +1,53 @@
+# useMask
+
+Format an input as the user types, phone, date, currency and similar fixed patterns.
+
+## Usage
+
+```tsx
+import { useMask } from '@primereact/hooks/use-mask';
+```
+
+```tsx
+const { ref, value, rawValue, isComplete } = useMask({ mask: '(999) 999-9999' });
+
+<InputText ref={ref} />;
+```
+
+Attach `ref` to any component that forwards a ref to a native input. The hook formats keystrokes against `mask` and keeps both the masked and raw values in sync.
+
+## Signature
+
+```ts
+function useMask(options: UseMaskOptions): UseMaskReturn;
+```
+
+## Options
+
+- `mask`, pattern string: `9` numeric, `a` alphabetic, `*` alphanumeric. Literals like `(`, `)`, `-` and `/` are inserted automatically. A `?` marks everything after it as optional.
+- `slotChar?`, placeholder for unfilled slots (default `_`). Pass a full template like `dd/mm/yyyy` to label each slot.
+- `autoClear?`, clear an incomplete value on blur (default `true`).
+- `value?` / `defaultValue?` / `onValueChange?`, controlled / uncontrolled masked value.
+- `onComplete?`, fires when every required slot is filled.
+
+## Returns
+
+`{ ref, value, rawValue, isComplete, setValue }`. `value` is the masked string, `rawValue` strips the literals and placeholders, `isComplete` is `true` once all required slots are filled.
+
+## Basic
+
+```tsx
+'use client';
+import { useMask } from '@primereact/hooks';
+import { InputText } from '@primereact/ui/inputtext';
+
+export default function BasicDemo() {
+    const { ref } = useMask({ mask: '99-999999' });
+
+    return (
+        <div className="flex justify-center">
+            <InputText ref={ref} placeholder="99-999999" />
+        </div>
+    );
+}
+```

package/data/llms/hooks/use-match-media.md

@@ -0,0 +1,28 @@
+# useMatchMedia
+
+Reactive boolean for any CSS media query.
+
+## Usage
+
+```tsx
+import { useMatchMedia } from '@primereact/hooks/use-match-media';
+```
+
+```tsx
+const prefersDark = useMatchMedia('(prefers-color-scheme: dark)');
+const isNarrow = useMatchMedia('(max-width: 768px)');
+```
+
+Subscribes to the query via `window.matchMedia` and updates on change. Toggle the `when` flag to pause listening without unmounting:
+
+```tsx
+const matches = useMatchMedia('(max-width: 600px)', isActive);
+```
+
+## Signature
+
+```ts
+function useMatchMedia(query: string, when?: boolean): boolean;
+```
+
+Server renders return `false`; the hook syncs to the real value after hydration.

package/data/llms/hooks/use-mount-effect.md

@@ -0,0 +1,25 @@
+# useMountEffect
+
+Run an effect exactly once, after the first render.
+
+## Usage
+
+```tsx
+import { useMountEffect } from '@primereact/hooks/use-mount-effect';
+```
+
+```tsx
+useMountEffect(() => {
+    console.log('mounted');
+
+    return () => console.log('cleanup');
+});
+```
+
+Equivalent to `useEffect(fn, [])` but reads clearer at the call site. The optional return value is treated as the cleanup function, just like `useEffect`.
+
+## Signature
+
+```ts
+function useMountEffect(effect: React.EffectCallback): void;
+```

package/data/llms/hooks/use-mounted.md

@@ -0,0 +1,36 @@
+# useMounted
+
+SSR-safe flag that flips to true once the component mounts on the client.
+
+## Usage
+
+```tsx
+import { useMounted } from '@primereact/hooks/use-mounted';
+```
+
+```tsx
+const mounted = useMounted();
+
+if (!mounted) return null;
+
+return <ClientOnlyContent />;
+```
+
+Useful when you need to gate content that depends on browser APIs without causing a hydration mismatch.
+
+## Options
+
+```ts
+useMounted({
+    onMounted: () => console.log('mounted'),
+    onUnmounted: () => console.log('unmounted')
+});
+```
+
+Both callbacks are optional.
+
+## Signature
+
+```ts
+function useMounted(options?: { onMounted?: () => void; onUnmounted?: () => void }): boolean;
+```

package/data/llms/hooks/use-number-formatter.md

@@ -0,0 +1,48 @@
+# useNumberFormatter
+
+Locale-aware number formatting and parsing built on Intl.NumberFormat, decimal or currency, with custom prefix/suffix and rounding.
+
+## Usage
+
+```tsx
+import { useNumberFormatter } from '@primereact/hooks/use-number-formatter';
+```
+
+```tsx
+const formatter = useNumberFormatter({
+    value: 1234.56,
+    locale: 'en-US',
+    mode: 'currency',
+    currency: 'USD'
+});
+
+formatter.formattedValue; // "$1,234.56"
+formatter.formatValue(99); // "$99.00"
+formatter.parseValue('$1,234.56'); // 1234.56
+```
+
+## Options
+
+- `value?`, optional input; if provided, `formattedValue` in the return mirrors it.
+- `locale?`, `localeMatcher?`, passed to `Intl.NumberFormat`.
+- `mode?`, `'decimal'` (default) or `'currency'`.
+- `currency?`, `currencyDisplay?`, ISO code and display style.
+- `useGrouping?`, thousands separators. Default `true`.
+- `minFractionDigits?`, `maxFractionDigits?`, `roundingMode?`, fraction handling.
+- `prefix?`, `suffix?`, additional text wrapped around the formatted value.
+- `min?`, lower bound; controls whether a minus sign is allowed.
+- `format?`, `false` returns the raw string without applying the formatter.
+
+## Returns
+
+- `formattedValue`, formatted representation of `options.value`.
+- `formatValue(value)` / `parseValue(text)`, format or parse on demand.
+- `addWithPrecision(base, inc)`, floating-point-safe addition, useful for steppers.
+- Character classifiers (`isNumeralChar`, `isMinusSign`, `isDecimalSign`, `allowMinusSign`) and index helpers (`getDecimalCharIndexes`, `getCharIndexes`, `getDecimalLength`, `concatValues`) that power input-mask behaviour.
+- `groupChar`, `prefixChar`, `suffixChar`, resolved separator characters for the active locale.
+- `resolvedOptions()`, forwards `Intl.NumberFormat#resolvedOptions`.
+- `constructParser()`, rebuild the internal parser; the hook calls it automatically when options change.
+
+## When to use it
+
+Anywhere you want consistent localized number rendering without maintaining your own parsers, inputs with currency/percent formatting, read-only totals, calculator-style UIs.

package/data/llms/hooks/use-presence.md

@@ -0,0 +1,44 @@
+# usePresence
+
+Coordinate enter/exit animations by delaying unmount until CSS transitions finish.
+
+## Usage
+
+```tsx
+import { usePresence } from '@primereact/hooks/use-presence';
+```
+
+```tsx
+function Dialog({ open }: { open: boolean }) {
+    const { present, mounted, ref } = usePresence(open);
+
+    if (!present) return null;
+
+    return (
+        <div ref={ref} data-state={mounted ? 'open' : 'closed'} className="dialog">
+            ...
+        </div>
+    );
+}
+```
+
+The element stays in the tree after `open` flips to `false` until `transitionend` or `animationend` fires on it, giving your CSS a chance to run the exit animation.
+
+## Signature
+
+```ts
+function usePresence(
+    open: boolean,
+    fallbackMs?: number
+): {
+    present: boolean;
+    exiting: boolean;
+    mounted: boolean;
+    ref: (node: HTMLElement | null) => void;
+};
+```
+
+- `present`, whether the element should render.
+- `mounted`, set to `true` a few frames after opening; use it to toggle the visible state in CSS so the transition can play.
+- `exiting`, `true` while the close animation is running.
+- `ref`, callback ref that must be attached to the animated element. Without it the hook cannot observe the transition.

package/data/llms/hooks/use-previous.md

@@ -0,0 +1,28 @@
+# usePrevious
+
+Remember the value of a variable from the previous render.
+
+## Usage
+
+```tsx
+import { usePrevious } from '@primereact/hooks/use-previous';
+```
+
+```tsx
+const [count, setCount] = React.useState(0);
+const prev = usePrevious(count);
+
+React.useEffect(() => {
+    if (prev !== undefined && prev !== count) {
+        console.log(`changed from ${prev} to ${count}`);
+    }
+}, [count, prev]);
+```
+
+Returns `null` on the first render, then the value from the prior render on every subsequent render.
+
+## Signature
+
+```ts
+function usePrevious<T>(value: T): T | null | undefined;
+```

package/data/llms/hooks/use-props.md

@@ -0,0 +1,37 @@
+# useProps
+
+Split incoming props into known props and extra attrs, preserving referential stability when values don't change.
+
+## Usage
+
+```tsx
+import { useProps } from '@primereact/hooks/use-props';
+```
+
+```tsx
+const defaults = { variant: 'primary', size: 'medium' };
+const { props, attrs } = useProps(defaults, userProps);
+
+<button {...props} {...attrs} />;
+```
+
+- `props` contains only the keys that appear in `defaults`, with values taken from `userProps` when present.
+- `attrs` contains the remaining keys from `userProps`, typically DOM attributes and event handlers you want to spread onto the rendered element.
+
+If the computed `props` and `attrs` are shallowly equal to the previous result, the same references are returned. This prevents cascading `useMemo` / `React.memo` invalidations when a parent passes a new object literal with identical values.
+
+## Signature
+
+```ts
+function useProps<P1, P2>(
+    defaults?: P1,
+    userProps?: P2
+): {
+    props: Pick<P1 & P2, keyof P1>;
+    attrs: Omit<P2, keyof P1>;
+};
+```
+
+## When to use it
+
+Building a reusable component that accepts both known props and passthrough attributes, `useProps` gives you a clean split without the boilerplate of `const { knownA, knownB, ...rest } = props`.

package/data/llms/hooks/use-queue-task.md

@@ -0,0 +1,29 @@
+# useQueueTask
+
+Deduplicate work by id and flush it on the next microtask.
+
+## Usage
+
+```tsx
+import { useQueueTask } from '@primereact/hooks/use-queue-task';
+```
+
+```tsx
+const queue = useQueueTask();
+
+function schedule(rowId: string) {
+    queue(rowId, () => recalculate(rowId));
+}
+```
+
+Calling `queue(id, task)` replaces any pending task for the same `id`. All queued tasks run together in a single microtask, so many calls within the same synchronous batch collapse into one flush.
+
+## Signature
+
+```ts
+function useQueueTask(): (id: string | number, task: () => void) => void;
+```
+
+## When to use it
+
+Coalescing expensive work triggered from multiple places in the same render, layout measurements, cache invalidations, or derived state updates where only the latest value per key matters.

package/data/llms/hooks/use-scrolltop.md

@@ -0,0 +1,87 @@
+# useScrollTop
+
+useScrollTop is a hook that provides a way to scroll to the top of a container.
+
+## Usage
+
+```tsx
+import { useScrollTop } from '@primereact/hooks/use-scrolltop';
+```
+
+```tsx
+const scrollTop = useScrollTop();
+```
+
+## Examples
+
+### Basic
+
+useScrollTop listens window scroll by default.
+
+```tsx
+'use client';
+import { AngleDown } from '@primeicons/react/angle-down';
+import { ChevronUp } from '@primeicons/react/chevron-up';
+import { useScrollTop } from '@primereact/hooks';
+import { Button } from '@primereact/ui/button';
+
+export default function BasicDemo() {
+    const { scrollToTop, visible } = useScrollTop();
+
+    return (
+        <div className="flex flex-col items-center">
+            <p>Scroll down the page to display the ScrollTop component.</p>
+            <AngleDown className="animate-fadeout animate-duration-1000 animate-infinite text-[2rem] mb-[30rem]"></AngleDown>
+            {visible && (
+                <Button onClick={scrollToTop} iconOnly rounded className="fixed [inset-block-end:20px] [inset-inline-end:20px]">
+                    <ChevronUp />
+                </Button>
+            )}
+        </div>
+    );
+}
+```
+
+Setting the _target_ option binds useScrollTop to this element that has scrolling content.
+
+### Element
+
+```tsx
+'use client';
+import { ArrowUp } from '@primeicons/react';
+import { useScrollTop } from '@primereact/hooks';
+import { Button } from '@primereact/ui/button';
+import * as React from 'react';
+
+export default function ElementDemo() {
+    const [target, setTarget] = React.useState<HTMLDivElement | null>(null);
+
+    const { scrollToTop, visible } = useScrollTop({
+        target,
+        threshold: 100
+    });
+
+    return (
+        <div className="flex justify-center">
+            <div ref={setTarget} className="overflow-y-scroll" style={{ width: '250px', height: '200px', scrollbarWidth: 'thin' }}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae
+                    et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut. Nam libero justo
+                    laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed
+                    vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris. Semper feugiat nibh sed pulvinar proin gravida
+                    hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam
+                    ultrices. Sodales ut etiam sit amet nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac
+                    turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
+                    viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor
+                    nec.
+                </p>
+                {visible && (
+                    <Button onClick={scrollToTop} iconOnly rounded className="sticky flex ms-auto [inset-block-end:20px] [inset-inline-end:20px]">
+                        <ArrowUp />
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}
+```