@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,117 @@
+[
+  {
+    "name": "useTerminal",
+    "source": "apps/showcase/assets/apidoc/useterminal.json",
+    "data": {
+      "description": "The useTerminal manages the state and functionality of a terminal component.",
+      "interfaces": {
+        "UseTerminalProps": {
+          "description": "Defines valid properties in useTerminal.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "prompt",
+              "type": "string",
+              "default": "",
+              "description": "Prompt text for each command."
+            },
+            {
+              "name": "onCommand",
+              "type": "TerminalCommandHandler",
+              "default": "",
+              "description": "Callback function invoked when a command is entered.\nReturn value determines the response:\n- React.ReactNode: Displayed as command response\n- null: Clears the terminal\n- undefined: No response shown\nSupports async functions for delayed responses."
+            }
+          ],
+          "methods": []
+        },
+        "UseTerminalState": {
+          "description": "Defines valid state in useTerminal.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "commandText",
+              "type": "string",
+              "default": "",
+              "description": "Current command text being typed."
+            },
+            {
+              "name": "commands",
+              "type": "TerminalCommandItem[]",
+              "default": "",
+              "description": "Array of commands and their responses."
+            }
+          ],
+          "methods": []
+        },
+        "UseTerminalExposes": {
+          "description": "Defines the methods and properties exposed by useTerminal.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseTerminalState",
+              "default": "",
+              "description": "State of the terminal."
+            },
+            {
+              "name": "inputRef",
+              "type": "RefObject<HTMLInputElement>",
+              "default": "",
+              "description": "Reference to the input element."
+            },
+            {
+              "name": "rootProps",
+              "type": "Record<string, unknown>",
+              "default": "",
+              "description": "Pre-built props for the terminal root element."
+            },
+            {
+              "name": "promptValueProps",
+              "type": "Record<string, unknown>",
+              "default": "",
+              "description": "Pre-built props for the prompt value input element."
+            },
+            {
+              "name": "commandResponseProps",
+              "type": "Record<string, unknown>",
+              "default": "",
+              "description": "Pre-built props for the command response element."
+            },
+            {
+              "name": "onClick",
+              "type": "() => void",
+              "default": "",
+              "description": "Click handler for terminal container."
+            },
+            {
+              "name": "onKeyDown",
+              "type": "(event: KeyboardEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Key down handler for input element."
+            },
+            {
+              "name": "onInputChange",
+              "type": "(event: ChangeEvent<HTMLInputElement>) => void",
+              "default": "",
+              "description": "Input change handler."
+            },
+            {
+              "name": "clear",
+              "type": "() => void",
+              "default": "",
+              "description": "Clears all commands from the terminal."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseTerminalInstance": {
+          "description": "Instance of useTerminal headless.",
+          "values": "HeadlessInstance<UseTerminalProps, UseTerminalState, UseTerminalExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

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

@@ -0,0 +1,183 @@
+# useTerminal
+
+Hook that manages command execution, input state, and command history for a terminal-style interface.
+
+```tsx
+'use client';
+import { TerminalResponse, useTerminal } from '@primereact/headless/terminal';
+
+export default function BasicDemo() {
+    const commandHandler = (text: string): TerminalResponse => {
+        const command = text.trim().split(/\s+/)[0];
+
+        switch (command) {
+            case 'help':
+                return 'Available commands: date, greet, random, clear';
+            case 'date':
+                return new Date().toLocaleString();
+            case 'greet':
+                return `Hello, ${text.substring(text.indexOf(' ') + 1).trim() || 'World'}!`;
+            case 'random':
+                return `Your random number: ${Math.floor(Math.random() * 100)}`;
+            case 'clear':
+                return null;
+            default:
+                return `Unknown command: ${command}. Type "help" for available commands.`;
+        }
+    };
+
+    const { rootProps, promptValueProps, state } = useTerminal({ prompt: '$', onCommand: commandHandler });
+
+    return (
+        <div className="max-w-2xl mx-auto">
+            <div {...rootProps} className="bg-surface-900 text-surface-0 rounded-lg p-4 h-72 overflow-y-auto cursor-text font-mono text-sm">
+                <div className="text-surface-400 mb-2">Welcome to PrimeReact Terminal. Type &quot;help&quot; for available commands.</div>
+                <div className="flex flex-col gap-1">
+                    {state.commands.map((cmd, index) => (
+                        <div key={index}>
+                            <div className="flex gap-2">
+                                <span className="text-emerald-400">$</span>
+                                <span>{cmd.text}</span>
+                            </div>
+                            {cmd.response && (
+                                <div className="text-surface-300 whitespace-pre-wrap pl-4" aria-live="polite">
+                                    {cmd.response}
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                </div>
+                <div className="flex gap-2 items-center mt-1">
+                    <span className="text-emerald-400">$</span>
+                    <input {...promptValueProps} className="flex-1 bg-transparent border-none outline-none text-surface-0 p-0 font-mono text-sm" />
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useTerminal, TerminalResponse } from '@primereact/headless/terminal';
+```
+
+```tsx
+const { rootProps, promptValueProps, commandResponseProps, state } = useTerminal({
+    prompt: '$',
+    onCommand: commandHandler
+});
+
+<div {...rootProps}>
+    {state.commands.map((cmd, index) => (
+        <div key={index}>
+            <span>{cmd.text}</span>
+            {cmd.response && <div {...commandResponseProps}>{cmd.response}</div>}
+        </div>
+    ))}
+    <input {...promptValueProps} />
+</div>;
+```
+
+`useTerminal` manages command input, execution, and history navigation. See [Primitive](/docs/primitive/components/terminal) for a component-based API.
+
+## Features
+
+- **Command execution**, `onCommand` receives the entered text and returns a `ReactNode`, a clear signal, or a promise
+- **Command history**, `state.commands` records every entered command alongside its rendered response
+- **History recall**, Arrow Up walks backwards through previously entered commands
+- **Async support**, `onCommand` may return `Promise<TerminalResponse>` for network-backed commands
+- **Live region output**, `commandResponseProps` includes `aria-live` so responses are announced to assistive tech
+
+## Working with callbacks
+
+### Handling commands
+
+Return a `ReactNode` to render the response, `null` to clear the history, or `undefined` to skip rendering.
+
+```tsx
+const handler = (text: string): TerminalResponse => {
+    if (text === 'clear') return null;
+    if (text === 'help')
+        return (
+            <ul>
+                <li>clear</li>
+                <li>help</li>
+            </ul>
+        );
+    return `Unknown command: ${text}`;
+};
+
+const terminal = useTerminal({ onCommand: handler });
+```
+
+### Async command execution
+
+Return a promise from `onCommand` to handle network calls, the response renders once it resolves.
+
+```tsx
+const handler = async (text: string): Promise<TerminalResponse> => {
+    const result = await fetch(`/api/cmd?q=${encodeURIComponent(text)}`);
+    return result.text();
+};
+```
+
+### Reading command history
+
+`state.commands` is an array of `{ text, response? }` entries, render it directly to show a running log.
+
+```tsx
+const { state } = useTerminal({ onCommand: handler });
+
+state.commands.map((cmd) => cmd.text);
+```
+
+### Clearing via command
+
+Return `null` from `onCommand` to wipe the terminal, giving users a conventional `clear` command.
+
+```tsx
+const handler = (text: string): TerminalResponse => {
+    if (text === 'clear') return null;
+    return `echo: ${text}`;
+};
+```
+
+## Styling with data attributes
+
+The prop objects include `data-scope="terminal"` and a `data-part` attribute.
+
+| Scope      | Part              |
+| ---------- | ----------------- |
+| `terminal` | `root`            |
+| `terminal` | `promptvalue`     |
+| `terminal` | `commandresponse` |
+
+```css
+[data-scope='terminal'][data-part='root'] {
+    background-color: #1e1e1e;
+    color: #fff;
+    font-family: monospace;
+}
+
+[data-scope='terminal'][data-part='promptvalue'] {
+    background: transparent;
+    border: none;
+    outline: none;
+}
+
+[data-scope='terminal'][data-part='commandresponse'] {
+    padding-left: 1rem;
+}
+```
+
+## API
+
+### useTerminal
+
+<DocTable name="useTerminal" category="api" />
+
+## Accessibility
+
+Enter submits the current command, Up/Down arrows navigate command history, and focus is maintained on the input. See [Primitive](/docs/primitive/components/terminal#accessibility) for full WAI-ARIA compliance details.

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

@@ -0,0 +1,81 @@
+[
+  {
+    "name": "useTextarea",
+    "source": "apps/showcase/assets/apidoc/usetextarea.json",
+    "data": {
+      "description": "The useTextarea manages the state and functionality of a textarea component.",
+      "interfaces": {
+        "UseTextareaProps": {
+          "description": "Defines valid properties in useTextarea.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "autoResize",
+              "type": "boolean",
+              "default": "false",
+              "description": "When present, height of textarea changes as being typed."
+            }
+          ],
+          "methods": []
+        },
+        "UseTextareaState": {
+          "description": "Defines valid state in useTextarea.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseTextareaRootProps": {
+          "description": "Data attribute props for the Textarea root element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "string",
+              "default": "",
+              "description": "Component scope identifier."
+            },
+            {
+              "name": "data-part",
+              "type": "string",
+              "default": "",
+              "description": "Component part identifier."
+            },
+            {
+              "name": "aria-invalid",
+              "type": "boolean",
+              "default": "",
+              "description": "Accessibility attribute for invalid state."
+            },
+            {
+              "name": "onInput",
+              "type": "(event: FormEvent<HTMLTextAreaElement>) => void",
+              "default": "",
+              "description": "Event handler for input events on the textarea."
+            }
+          ],
+          "methods": []
+        },
+        "UseTextareaExposes": {
+          "description": "Defines the methods and properties exposed by useTextarea.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseTextareaRootProps",
+              "default": "",
+              "description": "Pre-built props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseTextareaInstance": {
+          "description": "Instance of useTextarea headless.",
+          "values": "HeadlessInstance<UseTextareaProps, UseTextareaState, UseTextareaExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

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

@@ -0,0 +1,110 @@
+# useTextarea
+
+Hook that provides auto-resize logic and data attributes for textarea elements.
+
+```tsx
+'use client';
+import { useTextarea } from '@primereact/headless/textarea';
+
+export default function BasicDemo() {
+    const { rootProps } = useTextarea();
+
+    return (
+        <div className="flex justify-center">
+            <textarea
+                {...rootProps}
+                rows={5}
+                cols={30}
+                placeholder="Enter text"
+                className="px-2.5 py-1.5 text-sm rounded-md border border-surface-300 dark:border-surface-600 bg-white dark:bg-surface-900 text-surface-700 dark:text-surface-100 placeholder:text-surface-400 dark:placeholder:text-surface-500 outline-hidden hover:border-surface-400 dark:hover:border-surface-500 focus-visible:border-primary transition-colors duration-200"
+            />
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useTextarea } from '@primereact/headless/textarea';
+```
+
+```tsx
+const { rootProps } = useTextarea({ autoResize: true });
+
+return <textarea {...rootProps} rows={5} placeholder="Enter text" />;
+```
+
+`useTextarea` returns spread-ready `rootProps` with optional auto-resize logic and data attributes for styling. See [Primitive](/docs/primitive/components/textarea) for a component-based API.
+
+## Features
+
+- **Spread-ready root props**, single `rootProps` object for the textarea element
+- **Auto-resize**, height follows content when `autoResize` is enabled
+- **Native-first sizing**, uses CSS `field-sizing: content` when the browser supports it, falling back to `scrollHeight` measurement
+- **Stateless value**, leaves value management to React or the native element
+
+## Working with callbacks
+
+### Controlled value
+
+Drive the textarea from outside state by placing `value`/`onChange` directly on the element.
+
+```tsx
+const [text, setText] = React.useState('');
+const { rootProps } = useTextarea({ autoResize: true });
+
+return <textarea {...rootProps} value={text} onChange={(e) => setText(e.target.value)} />;
+```
+
+### Auto-resize with min/max rows
+
+Combine `autoResize` with a minimum `rows` and CSS `max-height` to cap growth on long input.
+
+```tsx
+const { rootProps } = useTextarea({ autoResize: true });
+
+return <textarea {...rootProps} rows={3} style={{ maxHeight: '12rem' }} />;
+```
+
+### Disable auto-resize
+
+Leave `autoResize` unset (or `false`) when the surrounding layout owns the height, the hook falls back to a plain textarea.
+
+```tsx
+const { rootProps } = useTextarea();
+
+return <textarea {...rootProps} rows={8} />;
+```
+
+## Styling with data attributes
+
+The prop object includes `data-scope="textarea"` and `data-part="root"` for styling.
+
+```css
+[data-scope='textarea'][data-part='root'] {
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+}
+
+[data-scope='textarea'][data-part='root']:focus {
+    border-color: var(--p-primary-color);
+    outline: none;
+}
+
+[data-scope='textarea'][data-part='root']:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+```
+
+## API
+
+### useTextarea
+
+<DocTable name="useTextarea" category="api" />
+
+## Accessibility
+
+Standard multiline text input behavior with Enter inserting newlines. See [Primitive](/docs/primitive/components/textarea#accessibility) for full WAI-ARIA compliance details.