@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,134 @@
+# Avatar
+
+An unstyled avatar component with compound composition and group support.
+
+<DocPrimitiveIntro description="Build fully custom avatar elements with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { User } from '@primeicons/react/user';
+import { Avatar } from 'primereact/avatar';
+import { AvatarGroup } from 'primereact/avatargroup';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    return (
+        <div className={styles.wrapper}>
+            <AvatarGroup className={styles.group}>
+                <Avatar.Root className={`${styles.avatar} ${styles.amber}`}>
+                    <Avatar.Fallback>AB</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root className={`${styles.avatar} ${styles.blue}`}>
+                    <Avatar.Fallback>CD</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root className={`${styles.avatar} ${styles.green}`}>
+                    <Avatar.Fallback>
+                        <User />
+                    </Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root className={`${styles.avatar} ${styles.muted}`}>
+                    <Avatar.Fallback>+3</Avatar.Fallback>
+                </Avatar.Root>
+            </AvatarGroup>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Avatar" />
+
+## Features
+
+- Compound component API with three sub-components: `Root`, `Image`, `Fallback`
+- `AvatarGroup` for visually grouping multiple avatars
+- Automatic image load detection, `Image` renders only after successful load, `Fallback` renders otherwise
+- Configurable `delayDuration` for delayed image reveal
+
+## Usage
+
+```tsx
+import { Avatar } from 'primereact/avatar';
+import { AvatarGroup } from 'primereact/avatargroup';
+```
+
+```tsx
+<AvatarGroup>
+    <Avatar.Root>
+        <Avatar.Image src="..." />
+        <Avatar.Fallback></Avatar.Fallback>
+    </Avatar.Root>
+</AvatarGroup>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element.
+
+```tsx
+<Avatar.Root as="span">
+    <Avatar.Image src="..." />
+    <Avatar.Fallback as="div">AB</Avatar.Fallback>
+</Avatar.Root>
+```
+
+Default elements: `Root`=`div`, `Image`=`img`, `Fallback`=`span`.
+
+### Render Function Children
+
+`Avatar.Fallback` accepts a render function as children, providing access to the component instance.
+
+```tsx
+<Avatar.Fallback>{(instance) => <span>{instance.avatar?.state.load ? 'Loaded' : 'Fallback'}</span>}</Avatar.Fallback>
+```
+
+## Pass Through
+
+<DocPTViewer name="avatar-pt" components={['AvatarRoot']} />
+
+## API
+
+### AvatarRoot
+
+<DocTable name="AvatarRoot" category="api" />
+
+| Attribute    | Value      |
+| ------------ | ---------- |
+| `data-scope` | `"avatar"` |
+| `data-part`  | `"root"`   |
+
+<DocTable name="AvatarRoot" category="pt" />
+
+### AvatarImage
+
+<DocTable name="AvatarImage" category="api" />
+
+<DocTable name="AvatarImage" category="pt" />
+
+### AvatarFallback
+
+<DocTable name="AvatarFallback" category="api" />
+
+<DocTable name="AvatarFallback" category="pt" />
+
+### AvatarGroup
+
+<DocTable name="AvatarGroup" category="api" />
+
+| Attribute    | Value           |
+| ------------ | --------------- |
+| `data-scope` | `"avatargroup"` |
+| `data-part`  | `"root"`        |
+
+<DocTable name="AvatarGroup" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so a role like `img` along with `aria-labelledby` or `aria-label` can be added to describe the component. In case avatars need to be tabbable, `tabIndex` can be added to implement custom key handlers.
+
+### Keyboard Support
+
+Component does not include any interactive elements.

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

@@ -0,0 +1,363 @@
+[
+  {
+    "name": "Badge",
+    "source": "apps/showcase/assets/apidoc/badge.json",
+    "data": {
+      "description": "Badge is a small status indicator for another element.",
+      "interfaces": {
+        "BadgePassThrough": {
+          "description": "Defines passthrough(pt) options of Badge component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "BadgePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "BadgeProps": {
+          "description": "Defines valid properties in Badge component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<BadgeInstance, UseBadgeProps, BadgePassThrough>",
+          "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?: BadgeInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: BadgeInstance) => 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": "BadgeInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<BadgePassThrough>",
+              "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: BadgeInstance) => 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": "shape",
+              "type": "\"circle\"",
+              "default": "",
+              "description": "Defines the shape of the badge."
+            },
+            {
+              "name": "size",
+              "type": "\"small\" | \"large\" | \"xlarge\"",
+              "default": "",
+              "description": "Size of the badge."
+            },
+            {
+              "name": "severity",
+              "type": "\"secondary\" | \"info\" | \"success\" | \"warn\" | \"danger\" | \"contrast\"",
+              "default": "",
+              "description": "Severity type of the badge."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "BadgeState": {
+          "description": "Defines valid state in Badge component.",
+          "relatedProp": "",
+          "extendedTypes": "UseBadgeState",
+          "props": [],
+          "methods": []
+        },
+        "BadgeExposes": {
+          "description": "Defines the methods and properties exposed by Badge component.",
+          "relatedProp": "",
+          "extendedTypes": "UseBadgeExposes",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseBadgeRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "BadgePassThroughType": {
+          "description": "Defines passthrough(pt) options type in Badge component.",
+          "values": "PassThroughType<BadgeInstance, E>"
+        },
+        "BadgeClassNamesType": {
+          "description": "Type representing the CSS class names used in the Badge component.",
+          "values": "typeof BadgeClassNames[keyof typeof BadgeClassNames]"
+        },
+        "BadgeInstance": {
+          "description": "Instance of Badge component.",
+          "values": "ComponentInstance<BadgeProps, BadgeState, BadgeExposes>"
+        }
+      },
+      "variables": {
+        "BadgeClassNames": {
+          "description": "Defines the CSS class names used in the Badge component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-badge",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            }
+          ]
+        }
+      }
+    }
+  },
+  {
+    "name": "OverlayBadge",
+    "source": "apps/showcase/assets/apidoc/overlaybadge.json",
+    "data": {
+      "description": "OverlayBadge component is used to display a badge on top of another element.",
+      "interfaces": {
+        "OverlayBadgePassThrough": {
+          "description": "Defines passthrough(pt) options of OverlayBadge component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "OverlayBadgePassThroughType<HTMLAttributes<HTMLDivElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "OverlayBadgeProps": {
+          "description": "Defines valid properties in OverlayBadge component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<OverlayBadgeInstance, UseOverlayBadgeProps, OverlayBadgePassThrough>",
+          "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?: OverlayBadgeInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: OverlayBadgeInstance) => 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": "OverlayBadgeInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<OverlayBadgePassThrough>",
+              "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: OverlayBadgeInstance) => 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": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "OverlayBadgeState": {
+          "description": "Defines valid state in OverlayBadge component.",
+          "relatedProp": "",
+          "extendedTypes": "UseOverlayBadgeState",
+          "props": [],
+          "methods": []
+        },
+        "OverlayBadgeExposes": {
+          "description": "Defines the methods and properties exposed by OverlayBadge component.",
+          "relatedProp": "",
+          "extendedTypes": "UseOverlayBadgeExposes",
+          "props": [],
+          "methods": []
+        }
+      },
+      "types": {
+        "OverlayBadgePassThroughType": {
+          "description": "Defines passthrough(pt) options type in OverlayBadge component.",
+          "values": "PassThroughType<OverlayBadgeInstance, E>"
+        },
+        "OverlayBadgeClassNamesType": {
+          "description": "Type representing the CSS class names used in the OverlayBadge component.",
+          "values": "typeof OverlayBadgeClassNames[keyof typeof OverlayBadgeClassNames]"
+        },
+        "OverlayBadgeInstance": {
+          "description": "Instance of OverlayBadge component.",
+          "values": "ComponentInstance<OverlayBadgeProps, OverlayBadgeState, OverlayBadgeExposes>"
+        }
+      },
+      "variables": {
+        "OverlayBadgeClassNames": {
+          "description": "Defines the CSS class names used in the OverlayBadge component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-overlaybadge",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            }
+          ]
+        }
+      }
+    }
+  }
+]

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

@@ -0,0 +1,118 @@
+# Badge
+
+An unstyled badge component for displaying status indicators.
+
+<DocPrimitiveIntro description="Build fully custom status indicators with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { Bell } from '@primeicons/react/bell';
+import { Envelope } from '@primeicons/react/envelope';
+import { Badge } from 'primereact/badge';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.row}>
+                <Badge className={`${styles.standalone} ${styles.primary}`}>2</Badge>
+                <Badge className={`${styles.standalone} ${styles.danger}`}>5</Badge>
+                <Badge className={`${styles.standalone} ${styles.success}`}>12</Badge>
+                <Badge className={`${styles.standalone} ${styles.secondary}`}>8</Badge>
+            </div>
+            <div className={styles.row}>
+                <div className={styles.iconWrapper}>
+                    <Bell className={styles.icon} />
+                    <Badge className={`${styles.overlay} ${styles.danger}`} />
+                </div>
+                <div className={styles.iconWrapper}>
+                    <Envelope className={styles.icon} />
+                    <Badge className={`${styles.overlay} ${styles.primary}`} />
+                </div>
+                <div className={styles.iconWrapper}>
+                    <Bell className={styles.icon} />
+                    <Badge className={`${styles.overlay} ${styles.success}`} />
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Badge" />
+
+## Features
+
+- Single `Badge` component with `OverlayBadge` for positioned overlays
+- Dot indicator via empty children, renders as a small status dot when no content is provided
+
+## Usage
+
+```tsx
+import { Badge } from 'primereact/badge';
+import { OverlayBadge } from 'primereact/overlaybadge';
+```
+
+```tsx
+<Badge></Badge>
+
+<OverlayBadge>
+    <IconComponent />
+    <Badge></Badge>
+</OverlayBadge>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` on `Badge` or `OverlayBadge` to change the rendered HTML element.
+
+```tsx
+<Badge as="div">4</Badge>
+<OverlayBadge as="span">...</OverlayBadge>
+```
+
+Default elements: `Badge`=`span`, `OverlayBadge`=`div`.
+
+### Render Function Children
+
+`Badge` accepts a render function as children, providing access to the component instance.
+
+```tsx
+<Badge>{(instance) => <span>Count</span>}</Badge>
+```
+
+## Pass Through
+
+<DocPTViewer name="badge-pt" components={['Badge']} />
+
+## API
+
+### Badge
+
+<DocTable name="Badge" category="api" />
+
+| Attribute    | Value                              |
+| ------------ | ---------------------------------- |
+| `data-scope` | `"badge"`                          |
+| `data-part`  | `"root"`                           |
+| `data-empty` | Present when badge has no children |
+
+<DocTable name="Badge" category="pt" />
+
+### OverlayBadge
+
+<DocTable name="OverlayBadge" category="api" />
+
+<DocTable name="OverlayBadge" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Badge does not include any roles and attributes by default. Any attribute is passed to the root element so `aria-label` or `aria-live` can be added if badges are dynamic. In case badges need to be tabbable, `tabIndex` can be added to implement custom key handlers.
+
+### Keyboard Support
+
+Component does not include any interactive elements.