@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,231 @@
+# Accordion
+
+An unstyled, accessible accordion component with compound composition.
+
+<DocPrimitiveIntro description="Build fully custom collapsible content sections with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { ChevronDown } from '@primeicons/react/chevron-down';
+import { Accordion } from 'primereact/accordion';
+import styles from './basic-demo.module.css';
+
+const items = [
+    {
+        value: '1',
+        title: 'What is PrimeReact?',
+        content:
+            'PrimeReact is a rich set of open source UI components for React. It provides a wide range of accessible, themeable components to build modern web applications.'
+    },
+    {
+        value: '2',
+        title: 'How to get started?',
+        content:
+            'Install PrimeReact via npm and import the components you need. Each component is available as a compound primitive or as a styled variant with built-in theming.'
+    },
+    {
+        value: '3',
+        title: 'What about accessibility?',
+        content:
+            'All components follow WAI-ARIA guidelines with full keyboard support. Accordion headers use proper button semantics and aria-expanded attributes automatically.'
+    }
+];
+
+export default function BasicDemo() {
+    return (
+        <Accordion.Root className={styles.root}>
+            {items.map((item) => (
+                <Accordion.Panel key={item.value} value={item.value} className={styles.panel}>
+                    <Accordion.Header className={styles.header}>
+                        <Accordion.Trigger className={styles.trigger}>
+                            {item.title}
+                            <Accordion.Indicator className={styles.indicator}>
+                                <ChevronDown />
+                            </Accordion.Indicator>
+                        </Accordion.Trigger>
+                    </Accordion.Header>
+                    <Accordion.Content className={styles.content}>
+                        <div className={styles.contentInner}>{item.content}</div>
+                    </Accordion.Content>
+                </Accordion.Panel>
+            ))}
+        </Accordion.Root>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Accordion" />
+
+## Features
+
+- Compound component API with six sub-components: `Root`, `Panel`, `Header`, `Trigger`, `Content`, `Indicator`
+- Single or multiple panel expansion
+
+## Usage
+
+```tsx
+import { Accordion } from 'primereact/accordion';
+```
+
+```tsx
+<Accordion.Root>
+    <Accordion.Panel>
+        <Accordion.Header>
+            <Accordion.Trigger>
+                <Accordion.Indicator />
+            </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content />
+    </Accordion.Panel>
+</Accordion.Root>
+```
+
+## Behavior
+
+### Motion Animation
+
+Use `motionProps` on `Root` to configure open/close animations.
+
+```tsx
+<Accordion.Root motionProps={{ name: 'accordion-slide', cssVarPrefix: 'accordion-content', hideStrategy: 'none' }}>...</Accordion.Root>
+```
+
+See [Motion](/docs/primitive/components/motion) for animation phases, CSS variables, and hide strategies.
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element or use a custom React component.
+
+```tsx
+<Accordion.Root as="section">
+    <Accordion.Panel as="article">
+        <Accordion.Header as="h3">
+            <Accordion.Trigger as="div">...</Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content as="section">...</Accordion.Content>
+    </Accordion.Panel>
+</Accordion.Root>
+```
+
+Custom components receive all the props that would be applied to the default element:
+
+```tsx
+<Accordion.Trigger as={MyCustomButton}>...</Accordion.Trigger>
+```
+
+Default elements: `Root`=`div`, `Panel`=`div`, `Header`=`div`, `Trigger`=`button`, `Content`=`div`, `Indicator`=`span`.
+
+### Render Function Children
+
+`Content` accepts a render function as children, providing access to the component instance. The instance exposes `accordion` (root instance), `accordionpanel` (parent panel instance), and `motion` (animation state).
+
+```tsx
+<Accordion.Content>{(instance) => <div>Panel is {instance.accordionpanel?.state.open ? 'open' : 'closed'}</div>}</Accordion.Content>
+```
+
+## Pass Through
+
+<DocPTViewer name="accordion-pt" components={['AccordionRoot']} />
+
+## API
+
+### AccordionRoot
+
+<DocTable name="AccordionRoot" category="api" />
+
+| Attribute       | Value                 |
+| --------------- | --------------------- |
+| `data-scope`    | `"accordion"`         |
+| `data-part`     | `"root"`              |
+| `data-disabled` | Present when disabled |
+
+<DocTable name="AccordionRoot" category="pt" />
+
+### AccordionPanel
+
+<DocTable name="AccordionPanel" category="api" />
+
+| Attribute       | Value                  |
+| --------------- | ---------------------- |
+| `data-scope`    | `"accordion"`          |
+| `data-part`     | `"panel"`              |
+| `data-open`     | Present when expanded  |
+| `data-closed`   | Present when collapsed |
+| `data-disabled` | Present when disabled  |
+
+<DocTable name="AccordionPanel" category="pt" />
+
+### AccordionHeader
+
+<DocTable name="AccordionHeader" category="api" />
+
+| Attribute     | Value                  |
+| ------------- | ---------------------- |
+| `data-scope`  | `"accordion"`          |
+| `data-part`   | `"header"`             |
+| `data-open`   | Present when expanded  |
+| `data-closed` | Present when collapsed |
+
+<DocTable name="AccordionHeader" category="pt" />
+
+### AccordionTrigger
+
+<DocTable name="AccordionTrigger" category="api" />
+
+| Attribute             | Value                       |
+| --------------------- | --------------------------- |
+| `data-scope`          | `"accordion"`               |
+| `data-part`           | `"trigger"`                 |
+| `data-content-open`   | Present when content open   |
+| `data-content-closed` | Present when content closed |
+| `data-disabled`       | Present when disabled       |
+
+<DocTable name="AccordionTrigger" category="pt" />
+
+### AccordionContent
+
+<DocTable name="AccordionContent" category="api" />
+
+| Attribute       | Value                  |
+| --------------- | ---------------------- |
+| `data-scope`    | `"accordion"`          |
+| `data-part`     | `"content"`            |
+| `data-open`     | Present when expanded  |
+| `data-closed`   | Present when collapsed |
+| `data-disabled` | Present when disabled  |
+
+<DocTable name="AccordionContent" category="pt" />
+
+### AccordionIndicator
+
+<DocTable name="AccordionIndicator" category="api" />
+
+| Attribute     | Value                  |
+| ------------- | ---------------------- |
+| `data-scope`  | `"accordion"`          |
+| `data-part`   | `"indicator"`          |
+| `data-open`   | Present when expanded  |
+| `data-closed` | Present when collapsed |
+
+<DocTable name="AccordionIndicator" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Accordion headers are buttons. They use `aria-controls` to reference the content region and `aria-expanded` to reflect visibility state. The announced label can be customized with `aria-label` or `aria-labelledby` via pt.
+
+The content uses `role="region"` and an `id` that matches the header button's `aria-controls`.
+
+### Header Keyboard Support
+
+| Key           | Function                                                                                             |
+| ------------- | ---------------------------------------------------------------------------------------------------- |
+| `tab`         | Moves focus to the next focusable element in the page tab sequence.                                  |
+| `shift + tab` | Moves focus to the previous focusable element in the page tab sequence.                              |
+| `enter`       | Toggles the visibility of the content.                                                               |
+| `space`       | Toggles the visibility of the content.                                                               |
+| `down arrow`  | Moves focus to the next header. If focus is on the last header, moves focus to the first header.     |
+| `up arrow`    | Moves focus to the previous header. If focus is on the first header, moves focus to the last header. |
+| `home`        | Moves focus to the first header.                                                                     |
+| `end`         | Moves focus to the last header.                                                                      |

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

@@ -0,0 +1,193 @@
+[
+  {
+    "name": "AnimateOnScroll",
+    "source": "apps/showcase/assets/apidoc/animateonscroll.json",
+    "data": {
+      "description": "AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.",
+      "interfaces": {
+        "AnimateOnScrollPassThrough": {
+          "description": "Defines passthrough(pt) options of AnimateOnScroll component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "AnimateOnScrollPassThroughType<HTMLAttributes<HTMLDivElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "AnimateOnScrollProps": {
+          "description": "Defines valid properties in AnimateOnScroll component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<AnimateOnScrollInstance, UseAnimateOnScrollProps, AnimateOnScrollPassThrough>",
+          "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?: AnimateOnScrollInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: AnimateOnScrollInstance) => 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": "AnimateOnScrollInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<AnimateOnScrollPassThrough>",
+              "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: AnimateOnScrollInstance) => 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": "enterClassName",
+              "type": "string",
+              "default": "",
+              "description": "CSS class names that are applied when the element enters the viewport."
+            },
+            {
+              "name": "leaveClassName",
+              "type": "string",
+              "default": "",
+              "description": "CSS class names that are applied when the element leaves the viewport."
+            },
+            {
+              "name": "once",
+              "type": "boolean",
+              "default": "false",
+              "description": "When enabled, animation is triggered only once."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "AnimateOnScrollState": {
+          "description": "Defines valid state in AnimateOnScroll component.",
+          "relatedProp": "",
+          "extendedTypes": "UseAnimateOnScrollState",
+          "props": [],
+          "methods": []
+        },
+        "AnimateOnScrollExposes": {
+          "description": "Defines the methods and properties exposed by AnimateOnScroll component.",
+          "relatedProp": "",
+          "extendedTypes": "UseAnimateOnScrollExposes",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseAnimateOnScrollState",
+              "default": "",
+              "description": "State of the animate on scroll."
+            },
+            {
+              "name": "rootProps",
+              "type": "UseAnimateOnScrollRootProps",
+              "default": "",
+              "description": "Pre-built props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "AnimateOnScrollPassThroughType": {
+          "description": "Defines passthrough(pt) options type in AnimateOnScroll component.",
+          "values": "PassThroughType<AnimateOnScrollInstance, E>"
+        },
+        "AnimateOnScrollClassNamesType": {
+          "description": "Type representing the CSS class names used in the AnimateOnScroll component.",
+          "values": "typeof AnimateOnScrollClassNames[keyof typeof AnimateOnScrollClassNames]"
+        },
+        "AnimateOnScrollInstance": {
+          "description": "Instance of AnimateOnScroll component.",
+          "values": "ComponentInstance<AnimateOnScrollProps, AnimateOnScrollState, AnimateOnScrollExposes>"
+        }
+      },
+      "variables": {
+        "AnimateOnScrollClassNames": {
+          "description": "Defines the CSS class names used in the AnimateOnScroll component.",
+          "variables": []
+        }
+      }
+    }
+  }
+]

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

@@ -0,0 +1,91 @@
+# AnimateOnScroll
+
+An unstyled component that applies CSS animations to elements entering or leaving the viewport.
+
+<DocPrimitiveIntro description="Build fully custom scroll-triggered animations with complete control over enter and leave transitions." />
+
+```tsx
+'use client';
+import { ArrowDown } from '@primeicons/react/arrow-down';
+import { AnimateOnScroll } from 'primereact/animateonscroll';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    return (
+        <div className={styles.container}>
+            <div className={styles.intro}>
+                <div className={styles.introTitle}>Scroll Down</div>
+                <div className={styles.introIcon}>
+                    <ArrowDown />
+                </div>
+            </div>
+            <div className={styles.spacer}></div>
+            <div className={styles.content}>
+                <AnimateOnScroll enterClassName={styles.fadeSlideIn} leaveClassName={styles.fadeOut}>
+                    <div className={styles.heading}>Discover real-world design inspiration.</div>
+                </AnimateOnScroll>
+                <AnimateOnScroll enterClassName={styles.fadeSlideIn} leaveClassName={styles.fadeOut}>
+                    <div className={styles.subtitle}>Featuring over 400,000 screens and 1,000 iOS, Android & Web apps.</div>
+                </AnimateOnScroll>
+            </div>
+            <div className={styles.spacerSmall}></div>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="AnimateOnScroll" />
+
+## Features
+
+- Applies `enterClassName` when the element scrolls into view and `leaveClassName` when it scrolls out
+- Configurable Intersection Observer options: `root`, `rootMargin`, `threshold`
+- `once` mode to trigger animation only on first viewport entry
+- Automatic cleanup of animation classes after `animationend` and `transitionend` events
+
+## Usage
+
+```tsx
+import { AnimateOnScroll } from 'primereact/animateonscroll';
+```
+
+```tsx
+<AnimateOnScroll enterClassName="" leaveClassName=""></AnimateOnScroll>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` to change the rendered HTML element.
+
+```tsx
+<AnimateOnScroll as="section" enterClassName="fade-in">
+    ...
+</AnimateOnScroll>
+```
+
+Default element: `div`.
+
+## API
+
+### AnimateOnScroll
+
+<DocTable name="AnimateOnScroll" category="api" />
+
+| Attribute    | Value               |
+| ------------ | ------------------- |
+| `data-scope` | `"animateonscroll"` |
+| `data-part`  | `"root"`            |
+
+<DocTable name="AnimateOnScroll" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+AnimateOnScroll does not require any roles and attributes.
+
+### Keyboard Support
+
+Component does not include any interactive elements.