@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,150 @@
+# useBadge
+
+Hook that provides data attributes and prop spreading for badge elements.
+
+```tsx
+'use client';
+import { Bell } from '@primeicons/react/bell';
+import { useBadge } from '@primereact/headless/badge';
+
+export default function BasicDemo() {
+    const standalone1 = useBadge();
+    const standalone2 = useBadge();
+    const standalone3 = useBadge();
+    const overlay = useBadge();
+    const dotBadge = useBadge();
+
+    return (
+        <div className="flex flex-col items-center justify-center gap-8">
+            <div className="flex items-center gap-3">
+                <span
+                    {...standalone1.rootProps}
+                    className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 text-xs font-bold rounded-md bg-red-500 text-white"
+                >
+                    5
+                </span>
+                <span
+                    {...standalone2.rootProps}
+                    className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 text-xs font-bold rounded-md bg-green-500 text-white"
+                >
+                    12
+                </span>
+                <span
+                    {...standalone3.rootProps}
+                    className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 text-xs font-bold rounded-md bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300"
+                >
+                    8
+                </span>
+            </div>
+            <div className="flex items-center gap-3">
+                <div className="relative inline-flex">
+                    <Bell className="text-surface-700 dark:text-surface-200 w-6! h-6!" />
+                    <span
+                        {...overlay.rootProps}
+                        className="absolute -top-2 -right-2 inline-flex items-center justify-center min-w-5 h-5 px-1 text-xs font-bold text-white bg-red-500 rounded-md"
+                    >
+                        3
+                    </span>
+                </div>
+                <div className="relative inline-flex">
+                    <Bell className="text-surface-700 dark:text-surface-200 w-6! h-6!" />
+                    <span {...dotBadge.rootProps} className="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 rounded-full" />
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useBadge } from '@primereact/headless/badge';
+```
+
+```tsx
+const { rootProps } = useBadge();
+
+return <span {...rootProps}></span>;
+```
+
+`useBadge` returns spread-ready `rootProps` with scoped data attributes so you can render inline counts, overlays, and status dots with your own CSS. See [Primitive](/docs/primitive/components/badge) for a component-based API.
+
+## Features
+
+- **Spread-ready root props**, a single object you can drop onto any element or custom component
+- **Stateless**, no internal state or effects; all visual behavior lives in your CSS
+- **Styling hooks**, `data-scope="badge"` and `data-part="root"` selectors let you branch styles on context
+- **Markup-agnostic**, works with `span`, `div`, or any component that forwards standard props
+
+## Working with callbacks
+
+### Inline badge next to content
+
+Render the badge alongside a label to show counts directly inside a button or link.
+
+```tsx
+const { rootProps } = useBadge();
+
+<button>
+    Messages
+    <span {...rootProps}>8</span>
+</button>;
+```
+
+### Overlay badge on an icon
+
+Combine positioning styles with `rootProps` to place the badge on top of another element.
+
+```tsx
+const { rootProps } = useBadge();
+
+<div style={{ position: 'relative', display: 'inline-flex' }}>
+    <BellIcon />
+    <span {...rootProps} style={{ position: 'absolute', top: '-0.5rem', right: '-0.5rem' }}>
+        3
+    </span>
+</div>;
+```
+
+### Dot indicator
+
+Leave the badge empty and rely on the `:empty` CSS selector to render a status dot.
+
+```tsx
+const { rootProps } = useBadge();
+
+<span {...rootProps} />;
+```
+
+## Styling with data attributes
+
+The prop object includes `data-scope="badge"` and `data-part="root"` for styling. Use the `:empty` pseudo-class to distinguish dot badges from count badges without extra props.
+
+```css
+[data-scope='badge'][data-part='root'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border-radius: 9999px;
+}
+
+[data-scope='badge'][data-part='root']:empty {
+    min-width: 0.5rem;
+    height: 0.5rem;
+}
+```
+
+## API
+
+### useBadge
+
+<DocTable name="useBadge" category="api" />
+
+## Accessibility
+
+Static visual element; screen readers receive the label via aria-label when provided. See [Primitive](/docs/primitive/components/badge#accessibility) for full WAI-ARIA compliance details.

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

@@ -0,0 +1,142 @@
+[
+  {
+    "name": "useBreadcrumb",
+    "source": "apps/showcase/assets/apidoc/usebreadcrumb.json",
+    "data": {
+      "description": "The useBreadcrumb manages the state and functionality of a breadcrumb component.",
+      "interfaces": {
+        "UseBreadcrumbProps": {
+          "description": "Defines valid properties in useBreadcrumb.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseBreadcrumbState": {
+          "description": "Defines valid state in useBreadcrumb.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseBreadcrumbRootProps": {
+          "description": "Pre-built props for the Breadcrumb root element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "\"breadcrumb\"",
+              "default": "",
+              "description": "Component scope identifier."
+            },
+            {
+              "name": "data-part",
+              "type": "\"root\"",
+              "default": "",
+              "description": "Component part identifier."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "default": "",
+              "description": "Accessible label for the breadcrumb navigation."
+            }
+          ],
+          "methods": []
+        },
+        "UseBreadcrumbEllipsisProps": {
+          "description": "Pre-built props for the Breadcrumb ellipsis element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "\"breadcrumb\"",
+              "default": "",
+              "description": "Component scope identifier."
+            },
+            {
+              "name": "data-part",
+              "type": "\"ellipsis\"",
+              "default": "",
+              "description": "Component part identifier."
+            },
+            {
+              "name": "role",
+              "type": "\"presentation\"",
+              "default": "",
+              "description": "ARIA role indicating the element is presentational."
+            },
+            {
+              "name": "aria-hidden",
+              "type": "true",
+              "default": "",
+              "description": "Hidden from screen readers as it is decorative."
+            }
+          ],
+          "methods": []
+        },
+        "UseBreadcrumbSeparatorProps": {
+          "description": "Pre-built props for the Breadcrumb separator element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "\"breadcrumb\"",
+              "default": "",
+              "description": "Component scope identifier."
+            },
+            {
+              "name": "data-part",
+              "type": "\"separator\"",
+              "default": "",
+              "description": "Component part identifier."
+            },
+            {
+              "name": "role",
+              "type": "\"presentation\"",
+              "default": "",
+              "description": "ARIA role indicating the element is presentational."
+            },
+            {
+              "name": "aria-hidden",
+              "type": "true",
+              "default": "",
+              "description": "Hidden from screen readers as it is decorative."
+            }
+          ],
+          "methods": []
+        },
+        "UseBreadcrumbExposes": {
+          "description": "Defines the methods and properties exposed by useBreadcrumb.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseBreadcrumbRootProps",
+              "default": "",
+              "description": "Pre-built props for the root element.\nIncludes data attributes and accessible label."
+            },
+            {
+              "name": "ellipsisProps",
+              "type": "UseBreadcrumbEllipsisProps",
+              "default": "",
+              "description": "Pre-built props for the ellipsis element.\nIncludes data attributes, presentational role, and aria-hidden."
+            },
+            {
+              "name": "separatorProps",
+              "type": "UseBreadcrumbSeparatorProps",
+              "default": "",
+              "description": "Pre-built props for the separator element.\nIncludes data attributes, presentational role, and aria-hidden."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseBreadcrumbInstance": {
+          "description": "Instance of useBreadcrumb headless.",
+          "values": "HeadlessInstance<UseBreadcrumbProps, UseBreadcrumbState, UseBreadcrumbExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

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

@@ -0,0 +1,149 @@
+# useBreadcrumb
+
+Hook that provides semantic ARIA attributes and data attributes for breadcrumb navigation.
+
+```tsx
+'use client';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+import { Home } from '@primeicons/react/home';
+import { useBreadcrumb } from '@primereact/headless/breadcrumb';
+
+export default function BasicDemo() {
+    const { rootProps, separatorProps } = useBreadcrumb();
+
+    return (
+        <div className="flex justify-center">
+            <nav {...rootProps} className="bg-surface-0 dark:bg-surface-900 py-3 px-4 rounded-lg overflow-x-auto">
+                <ol className="m-0 p-0 list-none flex items-center flex-nowrap gap-2">
+                    <li className="flex items-center gap-2">
+                        <a
+                            href="/"
+                            className="no-underline flex items-center gap-2 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 transition-colors rounded-md focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                        >
+                            <Home className="w-4 h-4" />
+                        </a>
+                    </li>
+                    <li {...separatorProps} className="flex items-center text-surface-400 dark:text-surface-500">
+                        <ChevronRight className="w-3 h-3" />
+                    </li>
+                    <li className="flex items-center gap-2">
+                        <a
+                            href="#"
+                            className="no-underline text-sm text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 transition-colors rounded-md focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                        >
+                            Products
+                        </a>
+                    </li>
+                    <li {...separatorProps} className="flex items-center text-surface-400 dark:text-surface-500">
+                        <ChevronRight className="w-3 h-3" />
+                    </li>
+                    <li className="flex items-center gap-2">
+                        <a
+                            href="#"
+                            className="no-underline text-sm text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 transition-colors rounded-md focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                        >
+                            Electronics
+                        </a>
+                    </li>
+                    <li {...separatorProps} className="flex items-center text-surface-400 dark:text-surface-500">
+                        <ChevronRight className="w-3 h-3" />
+                    </li>
+                    <li className="flex items-center gap-2">
+                        <span className="text-sm text-surface-950 dark:text-surface-0" aria-current="page">
+                            Laptops
+                        </span>
+                    </li>
+                </ol>
+            </nav>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useBreadcrumb } from '@primereact/headless/breadcrumb';
+```
+
+```tsx
+const { rootProps, separatorProps, ellipsisProps } = useBreadcrumb();
+
+<nav {...rootProps}>
+    <ol>
+        <li></li>
+        <li {...separatorProps}></li>
+    </ol>
+</nav>;
+```
+
+`useBreadcrumb` provides semantic ARIA attributes for navigation, separators, and ellipsis elements, see [Primitive](/docs/primitive/components/breadcrumb) for a component-based API.
+
+## Features
+
+- **Navigation landmark**, `rootProps` labels the nav element with `aria-label="Breadcrumb"` so assistive tech announces it as a navigation region
+- **Presentational separators**, `separatorProps` marks visual dividers with `role="presentation"` and `aria-hidden` so screen readers skip them
+- **Collapsed items**, `ellipsisProps` hides overflow indicators from the accessibility tree while keeping them visible
+- **Stateless and composable**, no internal state, spread the returned props on any element and handle links with native anchor semantics
+
+## Working with callbacks
+
+### Marking separators between items
+
+Spread `separatorProps` on any visual divider element to keep it out of the accessibility tree.
+
+```tsx
+const { separatorProps } = useBreadcrumb();
+
+<li {...separatorProps}>
+    <ChevronRight />
+</li>;
+```
+
+### Rendering a collapsed overflow indicator
+
+Use `ellipsisProps` on the element that represents collapsed breadcrumb items.
+
+```tsx
+const { ellipsisProps } = useBreadcrumb();
+
+<span {...ellipsisProps}>...</span>;
+```
+
+### Marking the current page
+
+The hook does not annotate the active item. Apply `aria-current="page"` yourself on the last crumb so assistive tech announces it as the current location.
+
+```tsx
+<span aria-current="page">Laptops</span>
+```
+
+## Styling with data attributes
+
+Every prop object includes `data-scope="breadcrumb"` and a `data-part` attribute. Use them as CSS selectors instead of classNames.
+
+| Scope        | Part        | Notes                        |
+| ------------ | ----------- | ---------------------------- |
+| `breadcrumb` | `root`      | The nav element              |
+| `breadcrumb` | `separator` | Visual divider between items |
+| `breadcrumb` | `ellipsis`  | Collapsed overflow indicator |
+
+```css
+[data-scope='breadcrumb'][data-part='root'] {
+    padding: 0.75rem 1rem;
+}
+
+[data-scope='breadcrumb'][data-part='separator'] {
+    color: rgba(0, 0, 0, 0.3);
+}
+```
+
+## API
+
+### useBreadcrumb
+
+<DocTable name="useBreadcrumb" category="api" />
+
+## Accessibility
+
+Tab moves through links sequentially using native anchor semantics. See [Primitive](/docs/primitive/components/breadcrumb#accessibility) for full WAI-ARIA compliance details.

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

@@ -0,0 +1,62 @@
+[
+  {
+    "name": "useButton",
+    "source": "apps/showcase/assets/apidoc/usebutton.json",
+    "data": {
+      "description": "The useButton manages the state and functionality of a Button component.",
+      "interfaces": {
+        "UseButtonProps": {
+          "description": "Defines valid properties in useButton.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseButtonState": {
+          "description": "Defines valid state in useButton.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseButtonRootProps": {
+          "description": "Data attribute props for the Button root element.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "data-scope",
+              "type": "string",
+              "default": "",
+              "description": "Component scope identifier."
+            },
+            {
+              "name": "data-part",
+              "type": "string",
+              "default": "",
+              "description": "Component part identifier."
+            }
+          ],
+          "methods": []
+        },
+        "UseButtonExposes": {
+          "description": "Defines the methods and properties exposed by useButton.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseButtonRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseButtonInstance": {
+          "description": "Instance of useButton headless.",
+          "values": "HeadlessInstance<UseButtonProps, UseButtonState, UseButtonExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

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

@@ -0,0 +1,73 @@
+# useButton
+
+Hook that provides data attributes and prop spreading for button elements.
+
+```tsx
+'use client';
+import { useButton } from '@primereact/headless/button';
+
+export default function BasicDemo() {
+    const { rootProps } = useButton();
+
+    return (
+        <div className="flex justify-center">
+            <button
+                {...rootProps}
+                className="px-2.5 py-1.5 bg-primary text-primary-contrast text-sm rounded cursor-pointer hover:bg-primary/90 focus-visible:outline focus-visible:outline-primary focus-visible:outline-offset-2 transition"
+            >
+                Submit
+            </button>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { useButton } from '@primereact/headless/button';
+```
+
+```tsx
+const { rootProps } = useButton();
+
+return <button {...rootProps}></button>;
+```
+
+`useButton` returns spread-ready `rootProps` with data attributes for styling, see [Primitive](/docs/primitive/components/button) for a component-based API.
+
+## Features
+
+- **Spread-ready root props**, a single `rootProps` object with `data-scope` and `data-part` attributes ready to spread on any element
+- **Stateless**, no internal state; native `<button>` semantics drive all behavior
+- **Element agnostic**, works on `<button>`, `<a>`, or any custom component that accepts spread props
+
+## Styling with data attributes
+
+The prop object includes `data-scope="button"` and `data-part="root"`, which work as selectors for all button styling.
+
+```css
+[data-scope='button'][data-part='root'] {
+    font-weight: 600;
+    padding: 0.5rem 1rem;
+}
+
+[data-scope='button'][data-part='root']:hover {
+    opacity: 0.9;
+}
+
+[data-scope='button'][data-part='root']:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+```
+
+## API
+
+### useButton
+
+<DocTable name="useButton" category="api" />
+
+## Accessibility
+
+Space and Enter activate the button while focused, matching native button semantics. See [Primitive](/docs/primitive/components/button#accessibility) for full WAI-ARIA compliance details.

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

@@ -0,0 +1,36 @@
+[
+  {
+    "name": "useCard",
+    "source": "apps/showcase/assets/apidoc/usecard.json",
+    "data": {
+      "description": "The useCard manages the state and functionality of a Card component.",
+      "interfaces": {
+        "UseCardProps": {
+          "description": "Defines valid properties in useCard.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseCardState": {
+          "description": "Defines valid state in useCard.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "UseCardExposes": {
+          "description": "Defines the methods and properties exposed by useCard.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        }
+      },
+      "types": {
+        "UseCardInstance": {
+          "description": "Instance of useCard headless.",
+          "values": "HeadlessInstance<UseCardProps, UseCardState, UseCardExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]