@primereact/mcp 11.0.0-rc.2

package/data/llms/primitive/components/fileupload.md

@@ -0,0 +1,282 @@
+# FileUpload
+
+An unstyled file upload component with drag-and-drop, validation, and progress tracking.
+
+<DocPrimitiveIntro description="Build fully custom file uploaders with complete control over layout, file lists, and drag-and-drop zones." />
+
+```tsx
+'use client';
+import { Plus } from '@primeicons/react/plus';
+import { Times } from '@primeicons/react/times';
+import { Upload } from '@primeicons/react/upload';
+import type { FileUploadChangeEvent } from 'primereact/fileupload';
+import { FileUpload, FileUploadRootInstance } from 'primereact/fileupload';
+import * as React from 'react';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    const [messages, setMessages] = React.useState<string[]>([]);
+
+    return (
+        <div className="max-w-xl mx-auto">
+            <FileUpload.Root
+                className={styles.root}
+                name="demo[]"
+                url="/api/upload"
+                accept="image/*"
+                multiple
+                maxFileSize={1000000}
+                onChange={(event: FileUploadChangeEvent) => setMessages(event.rejectedFiles.flatMap((r) => r.errors.map((e) => e.message)))}
+            >
+                {(instance: FileUploadRootInstance) => {
+                    const { state, hasFiles, hasUploadedFiles, choose, upload, clear } = instance;
+
+                    return (
+                        <>
+                            <div className={styles.toolbar}>
+                                <button onClick={choose} className={styles.chooseButton}>
+                                    <Plus />
+                                    Choose
+                                </button>
+                                <button onClick={upload} disabled={!hasFiles} className={styles.secondaryButton}>
+                                    <Upload />
+                                    Upload
+                                </button>
+                                <button onClick={clear} disabled={!hasFiles} className={styles.secondaryButton}>
+                                    <Times />
+                                    Cancel
+                                </button>
+                            </div>
+                            {messages.length > 0 && (
+                                <div className={styles.messages}>
+                                    {messages.map((msg, i) => (
+                                        <div key={i} className={styles.message}>
+                                            {msg}
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                            <FileUpload.Content className={styles.content}>
+                                {hasFiles || hasUploadedFiles ? (
+                                    <FileUpload.ItemGroup className={styles.fileList}>
+                                        {state.files.map((file, i) => (
+                                            <FileUpload.Item key={`pending-${file.name}-${file.size}`} file={file} index={i} className={styles.file}>
+                                                {file.type.startsWith('image/') && <FileUpload.ItemPreview className={styles.fileThumbnail} />}
+                                                <FileUpload.ItemInfo className={styles.fileInfo}>
+                                                    <FileUpload.ItemName className={styles.fileName} />
+                                                    <FileUpload.ItemSize className={styles.fileSize} />
+                                                </FileUpload.ItemInfo>
+                                                <span className={styles.badgePending}>Pending</span>
+                                                <FileUpload.ItemRemove className={styles.removeButton}>
+                                                    <Times />
+                                                </FileUpload.ItemRemove>
+                                            </FileUpload.Item>
+                                        ))}
+                                        {state.uploadedFiles.map((file, i) => (
+                                            <FileUpload.Item key={`uploaded-${file.name}-${file.size}`} file={file} index={i} className={styles.file}>
+                                                {file.type.startsWith('image/') && <FileUpload.ItemPreview className={styles.fileThumbnail} />}
+                                                <FileUpload.ItemInfo className={styles.fileInfo}>
+                                                    <FileUpload.ItemName className={styles.fileName} />
+                                                    <FileUpload.ItemSize className={styles.fileSize} />
+                                                </FileUpload.ItemInfo>
+                                                <span className={styles.badgeUploaded}>Uploaded</span>
+                                                <FileUpload.ItemRemove className={styles.removeButton}>
+                                                    <Times />
+                                                </FileUpload.ItemRemove>
+                                            </FileUpload.Item>
+                                        ))}
+                                    </FileUpload.ItemGroup>
+                                ) : (
+                                    <div className={styles.dropMessage}>Drag and drop files here to upload.</div>
+                                )}
+                            </FileUpload.Content>
+                            {state.progress > 0 && (
+                                <div className={styles.progressTrack}>
+                                    <div className={styles.progressBar} style={{ width: `${state.progress}%` }} />
+                                </div>
+                            )}
+                        </>
+                    );
+                }}
+            </FileUpload.Root>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="FileUpload" />
+
+## Features
+
+- Compound component API with sub-components: `Root`, `Trigger`, `Upload`, `Clear`, `Content`, `ItemGroup`, `Item`, `ItemPreview`, `ItemInfo`, `ItemName`, `ItemSize`, `ItemRemove`
+- Self-wired action components, `Trigger` (open dialog), `Upload`, `Clear` and `ItemRemove` read the context and need no manual handlers
+- Built-in file type, size and limit validation surfaced through the `onError` / `onChange` callbacks
+- Drag-and-drop file selection with visual highlight feedback
+- XMLHttpRequest-based upload with progress tracking
+- Custom upload handler support for client-side file processing
+- Separate tracking of pending and uploaded files
+- Composable file item rendering with `Item` context providing file data to nested sub-components
+
+## Usage
+
+```tsx
+import { FileUpload } from 'primereact/fileupload';
+```
+
+```tsx
+<FileUpload.Root>
+    <FileUpload.Trigger>Choose</FileUpload.Trigger>
+    <FileUpload.Upload>Upload</FileUpload.Upload>
+    <FileUpload.Clear>Clear</FileUpload.Clear>
+    <FileUpload.Content>
+        <FileUpload.ItemGroup>
+            <FileUpload.Item file={file} index={index}>
+                <FileUpload.ItemPreview />
+                <FileUpload.ItemInfo>
+                    <FileUpload.ItemName />
+                    <FileUpload.ItemSize />
+                </FileUpload.ItemInfo>
+                <FileUpload.ItemRemove />
+            </FileUpload.Item>
+        </FileUpload.ItemGroup>
+    </FileUpload.Content>
+</FileUpload.Root>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element.
+
+```tsx
+<FileUpload.Root as="section">
+    <FileUpload.Content as="main"></FileUpload.Content>
+</FileUpload.Root>
+```
+
+Default elements: `Root`=`div`, `Trigger`=`button`, `Upload`=`button`, `Clear`=`button`, `Content`=`div`, `ItemGroup`=`div`, `Item`=`div`, `ItemPreview`=`img`, `ItemInfo`=`div`, `ItemName`=`div`, `ItemSize`=`div`, `ItemRemove`=`button`.
+
+### Render Function Children
+
+`Root` accepts a render function as children, providing access to the component instance with state, methods, and computed properties.
+
+```tsx
+<FileUpload.Root>
+    {(instance) => (
+        <>
+            <FileUpload.Trigger>Choose Files</FileUpload.Trigger>
+            <FileUpload.Upload>Upload</FileUpload.Upload>
+            <FileUpload.Content>
+                <FileUpload.ItemGroup>
+                    {instance.state.files.map((file, index) => (
+                        <FileUpload.Item key={file.name + file.size} file={file} index={index}>
+                            <FileUpload.ItemPreview />
+                            <FileUpload.ItemInfo>
+                                <FileUpload.ItemName />
+                                <FileUpload.ItemSize />
+                            </FileUpload.ItemInfo>
+                            <FileUpload.ItemRemove>Remove</FileUpload.ItemRemove>
+                        </FileUpload.Item>
+                    ))}
+                </FileUpload.ItemGroup>
+            </FileUpload.Content>
+        </>
+    )}
+</FileUpload.Root>
+```
+
+## Pass Through
+
+<DocPTViewer name="fileupload-pt" components={['FileUploadRoot']} />
+
+## API
+
+### FileUploadRoot
+
+<DocTable name="FileUploadRoot" category="api" />
+
+<DocTable name="FileUploadRoot" category="pt" />
+
+### FileUploadTrigger
+
+<DocTable name="FileUploadTrigger" category="api" />
+
+<DocTable name="FileUploadTrigger" category="pt" />
+
+### FileUploadUpload
+
+<DocTable name="FileUploadUpload" category="api" />
+
+<DocTable name="FileUploadUpload" category="pt" />
+
+### FileUploadClear
+
+<DocTable name="FileUploadClear" category="api" />
+
+<DocTable name="FileUploadClear" category="pt" />
+
+### FileUploadContent
+
+<DocTable name="FileUploadContent" category="api" />
+
+| Attribute        | Value                                         |
+| ---------------- | --------------------------------------------- |
+| `data-highlight` | `"true"` when files are dragged over the zone |
+
+<DocTable name="FileUploadContent" category="pt" />
+
+### FileUploadItemGroup
+
+<DocTable name="FileUploadItemGroup" category="api" />
+
+<DocTable name="FileUploadItemGroup" category="pt" />
+
+### FileUploadItem
+
+<DocTable name="FileUploadItem" category="api" />
+
+<DocTable name="FileUploadItem" category="pt" />
+
+### FileUploadItemPreview
+
+<DocTable name="FileUploadItemPreview" category="api" />
+
+<DocTable name="FileUploadItemPreview" category="pt" />
+
+### FileUploadItemInfo
+
+<DocTable name="FileUploadItemInfo" category="api" />
+
+<DocTable name="FileUploadItemInfo" category="pt" />
+
+### FileUploadItemName
+
+<DocTable name="FileUploadItemName" category="api" />
+
+<DocTable name="FileUploadItemName" category="pt" />
+
+### FileUploadItemSize
+
+<DocTable name="FileUploadItemSize" category="api" />
+
+<DocTable name="FileUploadItemSize" category="pt" />
+
+### FileUploadItemRemove
+
+<DocTable name="FileUploadItemRemove" category="api" />
+
+<DocTable name="FileUploadItemRemove" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+FileUpload uses a hidden native `input[type="file"]` element for file selection. The choose button triggers this input programmatically. File thumbnails use `role="presentation"` to indicate decorative images. Error messages are rendered as visible text for screen reader announcement.
+
+### Keyboard Support
+
+| Key               | Function                                                                               |
+| ----------------- | -------------------------------------------------------------------------------------- |
+| `tab`             | Moves focus between the choose, upload, cancel buttons and file remove buttons.        |
+| `enter` / `space` | Activates the focused button. Opens the file dialog when the choose button is focused. |

package/data/llms/primitive/components/floatlabel/api.json

@@ -0,0 +1,176 @@
+[
+  {
+    "name": "FloatLabel",
+    "source": "apps/showcase/assets/apidoc/floatlabel.json",
+    "data": {
+      "description": "FloatLabel visually integrates a label with its form element.",
+      "interfaces": {
+        "FloatLabelPassThrough": {
+          "description": "Defines passthrough(pt) options of FloatLabel component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "FloatLabelPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "FloatLabelProps": {
+          "description": "Defines valid properties in FloatLabel component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<FloatLabelInstance, UseFloatLabelProps, FloatLabelPassThrough>",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<unknown>",
+              "default": "",
+              "description": "The reference to the component instance."
+            },
+            {
+              "name": "pIf",
+              "type": "boolean",
+              "default": "true",
+              "description": "Whether the component should be rendered."
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | ((instance?: FloatLabelInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: FloatLabelInstance) => string)",
+              "default": "",
+              "description": "The class name to apply to the component."
+            },
+            {
+              "name": "as",
+              "type": "string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode>",
+              "default": "",
+              "description": "The component type to render."
+            },
+            {
+              "name": "asChild",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the component should be rendered as a child component."
+            },
+            {
+              "name": "instance",
+              "type": "FloatLabelInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<FloatLabelPassThrough>",
+              "default": "",
+              "description": "The pass-through props to pass to the component."
+            },
+            {
+              "name": "ptOptions",
+              "type": "PassThroughOptions",
+              "default": "",
+              "description": "The pass-through options to pass to the component."
+            },
+            {
+              "name": "unstyled",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the component should be rendered without classes."
+            },
+            {
+              "name": "dt",
+              "type": "unknown",
+              "default": "",
+              "description": "The design token to use for the component."
+            },
+            {
+              "name": "styles",
+              "type": "StylesOptions<ComponentInstance>",
+              "default": "",
+              "description": "The styles to use for the component."
+            },
+            {
+              "name": "render",
+              "type": "(instance: FloatLabelInstance) => ReactNode",
+              "default": "",
+              "description": "The render function to render the component with instance access."
+            },
+            {
+              "name": "children",
+              "type": "any",
+              "default": "",
+              "description": "The children to render.\n\nAccepts  `React.ReactNode`  for static content or a render function  `(instance: I) => React.ReactNode`  for instance access.\nTyped as  `any`  to avoid JSX type errors when used directly in templates."
+            },
+            {
+              "name": "variant",
+              "type": "\"on\" | \"in\" | \"over\"",
+              "default": "over",
+              "description": "Defines the positioning of the label relative to the input."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "FloatLabelState": {
+          "description": "Defines valid state in FloatLabel component.",
+          "relatedProp": "",
+          "extendedTypes": "UseFloatLabelState",
+          "props": [],
+          "methods": []
+        },
+        "FloatLabelExposes": {
+          "description": "Defines the methods and properties exposed by FloatLabel component.",
+          "relatedProp": "",
+          "extendedTypes": "UseFloatLabelExposes",
+          "props": [],
+          "methods": []
+        }
+      },
+      "types": {
+        "FloatLabelPassThroughType": {
+          "description": "Defines passthrough(pt) options type in FloatLabel component.",
+          "values": "PassThroughType<FloatLabelInstance, E>"
+        },
+        "FloatLabelClassNamesType": {
+          "description": "Type representing the CSS class names used in the FloatLabel component.",
+          "values": "typeof FloatLabelClassNames[keyof typeof FloatLabelClassNames]"
+        },
+        "FloatLabelInstance": {
+          "description": "Instance of FloatLabel component.",
+          "values": "ComponentInstance<FloatLabelProps, FloatLabelState, FloatLabelExposes>"
+        }
+      },
+      "variables": {
+        "FloatLabelClassNames": {
+          "description": "Defines the CSS class names used in the FloatLabel component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-floatlabel",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            }
+          ]
+        }
+      }
+    }
+  }
+]

package/data/llms/primitive/components/floatlabel.md

@@ -0,0 +1,47 @@
+# FloatLabel
+
+An unstyled wrapper that visually integrates a label with its form element.
+
+<DocPrimitiveIntro description="Build a floating label that transitions above the input with complete control over layout and styling." />
+
+## Features
+
+- Wraps a form element and its `Label` to create a floating-label interaction
+- `variant` property positions the label: `over` (default), `in`, or `on`
+- Works with any compatible input component
+
+## Usage
+
+```tsx
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { Label } from 'primereact/label';
+```
+
+```tsx
+<FloatLabel>
+    <InputText id="username" />
+    <Label htmlFor="username">Username</Label>
+</FloatLabel>
+```
+
+## API
+
+### FloatLabel
+
+<DocTable name="FloatLabel" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"floatlabel"` |
+| `data-part`  | `"root"`       |
+
+## Accessibility
+
+### Screen Reader
+
+FloatLabel does not require any roles and attributes.
+
+### Keyboard Support
+
+Component does not include any interactive elements.