@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,209 @@
+# MeterGroup
+
+Unstyled meter group primitive for scalar measurements within a range.
+
+<DocPrimitiveIntro description="Bring your own markup and styles. MeterGroup handles the math and the data attributes." />
+
+```tsx
+'use client';
+import { MeterGroup } from 'primereact/metergroup';
+import styles from './basic-demo.module.css';
+
+const values = [
+    { label: 'Apps', value: 16, color: 'var(--p-violet-500)' },
+    { label: 'Messages', value: 8, color: 'var(--p-emerald-500)' },
+    { label: 'Media', value: 24, color: 'var(--p-amber-500)' },
+    { label: 'System', value: 10, color: 'var(--p-blue-500)' }
+];
+
+const total = values.reduce((sum, v) => sum + v.value, 0);
+
+export default function BasicDemo() {
+    return (
+        <div className={styles.wrapper}>
+            <MeterGroup.Root aria-valuenow={total} className={styles.root}>
+                <MeterGroup.Meters className={styles.meters}>
+                    {values.map((item) => (
+                        <MeterGroup.Meter key={item.label} value={item.value} color={item.color} className={styles.meter} />
+                    ))}
+                </MeterGroup.Meters>
+                <MeterGroup.Labels className={styles.labels}>
+                    {values.map((item) => (
+                        <MeterGroup.Label key={item.label} className={styles.label}>
+                            <MeterGroup.Marker color={item.color} className={styles.marker} />
+                            <MeterGroup.Text className={styles.text}>
+                                {item.label} ({item.value}%)
+                            </MeterGroup.Text>
+                        </MeterGroup.Label>
+                    ))}
+                </MeterGroup.Labels>
+            </MeterGroup.Root>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="MeterGroup" />
+
+## Features
+
+- Compound parts: `Root`, `Meters`, `Meter`, `Labels`, `Label`, `Marker`, `Text`
+- No `index` prop. Target individual rows with `:nth-child(n)` on `[data-part="meter"]`, `[data-part="marker"]` or `[data-part="label"]`
+- Percentages computed from `min` / `max`; pass `aria-valuenow` on the root for screen readers
+- Color flows through one `--p-metergroup-color` CSS variable. The primitive never picks a color itself
+- Horizontal or vertical orientation for both meters and labels
+
+## Usage
+
+```tsx
+import { MeterGroup } from 'primereact/metergroup';
+```
+
+```tsx
+<MeterGroup.Root aria-valuenow={total}>
+    <MeterGroup.Meters>
+        <MeterGroup.Meter />
+    </MeterGroup.Meters>
+    <MeterGroup.Labels>
+        <MeterGroup.Label>
+            <MeterGroup.Marker />
+            <MeterGroup.Text></MeterGroup.Text>
+        </MeterGroup.Label>
+    </MeterGroup.Labels>
+</MeterGroup.Root>
+```
+
+The primitive does not look at the children to total their values. Compute the sum where the data lives and pass it as `aria-valuenow`. When omitted, the attribute is `0`.
+
+## Behavior
+
+### Polymorphic Rendering
+
+Every part takes an `as` prop. Pass an element or another component to swap the rendered tag.
+
+```tsx
+<MeterGroup.Root as="section"></MeterGroup.Root>
+<MeterGroup.Labels as="ul"></MeterGroup.Labels>
+<MeterGroup.Label as="div"></MeterGroup.Label>
+```
+
+Defaults: `Root`=`div`, `Meters`=`div`, `Meter`=`div`, `Labels`=`ol`, `Label`=`li`, `Marker`=`span`, `Text`=`span`.
+
+### Per-item styling
+
+No per-child index is emitted. Use `:nth-child(n)` on `[data-part="meter"]`, `[data-part="marker"]` or `[data-part="label"]`. If you really need a stable index attribute, pass it through `pt`: `pt={{ root: { 'data-index': i } }}`.
+
+### Color via CSS variable
+
+`color` on `Meter` and `Marker` accepts any CSS color value. The primitive writes it to `--p-metergroup-color` on the element; the styles layer renders `background: var(--p-metergroup-color, var(--p-primary-color))`. Set the variable on any ancestor to repaint the whole group:
+
+```tsx
+<div style={{ '--p-metergroup-color': 'magenta' } as React.CSSProperties}>
+    <MeterGroup.Root values={values}>{/* ... */}</MeterGroup.Root>
+</div>
+```
+
+### Render Function Children
+
+`Root` accepts a render function as its child. The function receives the component instance.
+
+```tsx
+<MeterGroup.Root>{(instance) => <span>{instance.props['aria-valuenow']}%</span>}</MeterGroup.Root>
+```
+
+## Pass Through
+
+<DocPTViewer name="metergroup-pt" components={['MeterGroupRoot']} />
+
+## API
+
+### MeterGroupRoot
+
+<DocTable name="MeterGroupRoot" category="api" />
+
+| Attribute          | Value                     |
+| ------------------ | ------------------------- |
+| `data-scope`       | `"metergroup"`            |
+| `data-part`        | `"root"`                  |
+| `data-orientation` | Current orientation value |
+
+<DocTable name="MeterGroupRoot" category="pt" />
+
+### MeterGroupMeters
+
+<DocTable name="MeterGroupMeters" category="api" />
+
+| Attribute          | Value                     |
+| ------------------ | ------------------------- |
+| `data-scope`       | `"metergroup"`            |
+| `data-part`        | `"meters"`                |
+| `data-orientation` | Current orientation value |
+
+<DocTable name="MeterGroupMeters" category="pt" />
+
+### MeterGroupMeter
+
+<DocTable name="MeterGroupMeter" category="api" />
+
+| Attribute          | Value                     |
+| ------------------ | ------------------------- |
+| `data-scope`       | `"metergroup"`            |
+| `data-part`        | `"meter"`                 |
+| `data-orientation` | Current orientation value |
+
+<DocTable name="MeterGroupMeter" category="pt" />
+
+### MeterGroupLabels
+
+<DocTable name="MeterGroupLabels" category="api" />
+
+| Attribute          | Value                     |
+| ------------------ | ------------------------- |
+| `data-scope`       | `"metergroup"`            |
+| `data-part`        | `"labels"`                |
+| `data-orientation` | Current orientation value |
+
+<DocTable name="MeterGroupLabels" category="pt" />
+
+### MeterGroupLabel
+
+<DocTable name="MeterGroupLabel" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"metergroup"` |
+| `data-part`  | `"label"`      |
+
+<DocTable name="MeterGroupLabel" category="pt" />
+
+### MeterGroupMarker
+
+<DocTable name="MeterGroupMarker" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"metergroup"` |
+| `data-part`  | `"marker"`     |
+
+<DocTable name="MeterGroupMarker" category="pt" />
+
+### MeterGroupText
+
+<DocTable name="MeterGroupText" category="api" />
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"metergroup"` |
+| `data-part`  | `"text"`       |
+
+<DocTable name="MeterGroupText" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+The root uses `role="meter"` with `aria-valuemin`, `aria-valuemax` and `aria-valuenow`. `aria-valuenow` defaults to `0`; override it with the native attribute on `Root`. Label the group with `aria-labelledby` or `aria-label`.
+
+### Keyboard Support
+
+Nothing inside MeterGroup is focusable or interactive.

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

@@ -0,0 +1,112 @@
+# Motion
+
+Configure enter/leave animations on primitive components with motionProps.
+
+## Usage
+
+Pass `motionProps` to a component's animatable element to configure enter/leave transitions. Collapsible components accept it on `Root`, popup components accept it on `Popup`.
+
+```tsx
+motionProps={{ name: 'slide', cssVarPrefix: 'content', hideStrategy: 'none' }}
+```
+
+## Behavior
+
+### Animation Phases
+
+The motion system applies six CSS classes during the transition lifecycle based on the `name` prefix.
+
+**Enter phase**, applied when the element appears:
+
+| Class                 | Timing              |
+| --------------------- | ------------------- |
+| `{name}-enter-from`   | Before enter starts |
+| `{name}-enter-active` | During enter        |
+| `{name}-enter-to`     | After enter ends    |
+
+**Leave phase**, applied when the element disappears:
+
+| Class                 | Timing              |
+| --------------------- | ------------------- |
+| `{name}-leave-from`   | Before leave starts |
+| `{name}-leave-active` | During leave        |
+| `{name}-leave-to`     | After leave ends    |
+
+Use these classes to define CSS transitions or keyframe animations.
+
+```tsx
+motionProps={{ name: 'fade' }}
+```
+
+```css
+.fade-enter-from {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+.fade-enter-active {
+    transition: all 200ms ease-out;
+}
+.fade-enter-to {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.fade-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+}
+.fade-leave-active {
+    transition: all 200ms ease-in;
+}
+.fade-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+}
+```
+
+### CSS Variable Prefix
+
+Use `cssVarPrefix` to inject element dimension variables during animations. The motion system measures the element and sets these CSS custom properties, enabling height/width-based transitions without hardcoded values.
+
+| Variable            | Description                                       |
+| ------------------- | ------------------------------------------------- |
+| `--{prefix}-height` | Set to the scroll height on enter, `0px` on leave |
+| `--{prefix}-width`  | Set to the scroll width on enter, `0px` on leave  |
+
+```tsx
+motionProps={{ name: 'expand', cssVarPrefix: 'content' }}
+```
+
+```css
+.expand-enter-active,
+.expand-leave-active {
+    transition: max-height 300ms ease;
+    overflow: hidden;
+}
+
+.expand-enter-to,
+.expand-leave-from {
+    max-height: var(--content-height);
+}
+
+.expand-enter-from,
+.expand-leave-to {
+    max-height: 0;
+}
+```
+
+### Hide Strategy
+
+Use `hideStrategy` to control how content is hidden after the leave animation completes.
+
+| Value          | Behavior                                               |
+| -------------- | ------------------------------------------------------ |
+| `'display'`    | Applies `display: none` (default)                      |
+| `'visibility'` | Applies `visibility: hidden` and `max-height: 0`       |
+| `'none'`       | No automatic hiding, CSS animations handle it entirely |
+
+Collapsible content typically uses `'none'` with CSS-driven height transitions, while popups work well with the default `'display'` strategy.
+
+## Headless
+
+See [useMotion](/docs/headless/components/motion) for the underlying hook API, imperative methods, lifecycle callbacks, and mount/unmount control.

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

@@ -0,0 +1,298 @@
+[
+  {
+    "name": "NavigationMenu",
+    "source": "apps/showcase/assets/apidoc/navigationmenu.json",
+    "data": {
+      "description": "NavigationMenu coordinates multiple Menu instances, providing keyboard navigation between them and a single source of truth for which menu is open.",
+      "interfaces": {
+        "NavigationMenuPassThrough": {
+          "description": "Defines passthrough(pt) options of NavigationMenu component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "NavigationMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "NavigationMenuProps": {
+          "description": "Defines valid properties in NavigationMenu component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<NavigationMenuInstance, UseNavigationMenuProps, NavigationMenuPassThrough>",
+          "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?: NavigationMenuInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: NavigationMenuInstance) => 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": "NavigationMenuInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<NavigationMenuPassThrough>",
+              "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: NavigationMenuInstance) => 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": "orientation",
+              "type": "NavigationMenuOrientation",
+              "default": "'horizontal'",
+              "description": "The orientation of the navigationmenu.\nDetermines which arrow keys move between triggers."
+            },
+            {
+              "name": "loopFocus",
+              "type": "boolean",
+              "default": "true",
+              "description": "Whether keyboard focus loops back to the first/last item at the end of the list."
+            },
+            {
+              "name": "modal",
+              "type": "boolean",
+              "default": "true",
+              "description": "Whether the navigationmenu is modal. When true, opening one menu prevents page interaction\noutside that menu."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether all menus in the navigationmenu are disabled."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "NavigationMenuState": {
+          "description": "Defines valid state in NavigationMenu component.",
+          "relatedProp": "",
+          "extendedTypes": "UseNavigationMenuState",
+          "props": [
+            {
+              "name": "openMenuId",
+              "type": "string",
+              "default": "",
+              "description": "The id of the currently open menu, or null if none is open."
+            },
+            {
+              "name": "hasOpenMenu",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether any menu in the navigationmenu is currently open."
+            }
+          ],
+          "methods": []
+        },
+        "NavigationMenuExposes": {
+          "description": "Defines the methods and properties exposed by NavigationMenu component.",
+          "relatedProp": "",
+          "extendedTypes": "UseNavigationMenuExposes",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseNavigationMenuState",
+              "default": "",
+              "description": "The state of the useNavigationMenu."
+            },
+            {
+              "name": "rootProps",
+              "type": "UseNavigationMenuRootProps",
+              "default": "",
+              "description": "Pre-built props for the navigationmenu root element."
+            },
+            {
+              "name": "registerTrigger",
+              "type": "(menuId: string, element: HTMLElement) => void",
+              "default": "",
+              "description": "Register or unregister a menu trigger element with the navigationmenu.\nPass null as element to unregister."
+            },
+            {
+              "name": "setOpenMenuId",
+              "type": "(menuId: string) => void",
+              "default": "",
+              "description": "Set which menu is currently open. Pass null to close all."
+            },
+            {
+              "name": "isMenuOpen",
+              "type": "(menuId: string) => boolean",
+              "default": "",
+              "description": "Whether the menu with the given id is the currently open one."
+            },
+            {
+              "name": "onTriggerKeyDown",
+              "type": "(menuId: string, event: KeyboardEvent) => void",
+              "default": "",
+              "description": "Handle keyboard event on a trigger. Manages ArrowLeft/Right (horizontal)\nor ArrowUp/Down (vertical), Home, End between sibling triggers."
+            },
+            {
+              "name": "onTriggerMouseEnter",
+              "type": "(menuId: string) => void",
+              "default": "",
+              "description": "Handle mouse enter on a trigger. When a menu is already open,\nhovering another trigger switches to it."
+            },
+            {
+              "name": "onMenuOpenChange",
+              "type": "(menuId: string, open: boolean) => void",
+              "default": "",
+              "description": "Notify the navigationmenu that a menu's open state has changed.\nCalled by child Menu.Root via its onOpenChange."
+            },
+            {
+              "name": "orientation",
+              "type": "NavigationMenuOrientation",
+              "default": "",
+              "description": "The orientation of the navigationmenu (echoed for child consumption)."
+            },
+            {
+              "name": "modal",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the navigationmenu is modal (echoed for child consumption)."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether all menus in the navigationmenu are disabled (echoed for child consumption)."
+            },
+            {
+              "name": "focusSibling",
+              "type": "(currentMenuId: string, direction: \"next\" | \"previous\") => void",
+              "default": "",
+              "description": "Move focus to the next or previous sibling trigger and (if a menu is\nalready open) switch the open menu accordingly. Used by the embedded\n `Menu`  to forward ArrowRight / ArrowLeft from list-level into the\nnavigationmenu when the focused item is not a submenu trigger."
+            },
+            {
+              "name": "setPendingFocus",
+              "type": "(target: \"first\" | \"last\") => void",
+              "default": "",
+              "description": "Set the focus target the next time a menu opens. Used by NavigationMenu's\ntrigger keyboard handler so ArrowDown opens the menu and lands on its\nfirst item, while ArrowUp opens it on the last item (WAI-ARIA NavigationMenu\nkeyboard pattern)."
+            },
+            {
+              "name": "consumePendingFocus",
+              "type": "() => \"first\" | \"last\"",
+              "default": "",
+              "description": "Read and clear any pending focus target queued by the navigationmenu. The\nembedded  `Menu`  calls this from  `onListFocus`  to decide whether to\nfocus the first or last item on open."
+            },
+            {
+              "name": "registerInstantSignal",
+              "type": "(menuId: string, handler: () => void) => () => void",
+              "default": "",
+              "description": "Register a callback fired when the navigationmenu is about to switch between\ntwo sibling menus involving this menu. The child  `Menu`  uses this to\nflip its own  `instantType`  and skip the open/close animation during\nfast traversal. Returns an unregister function."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "NavigationMenuClassNamesType": {
+          "description": "Type representing the CSS class names used in the NavigationMenu component.",
+          "values": "typeof NavigationMenuClassNames[keyof typeof NavigationMenuClassNames]"
+        },
+        "NavigationMenuPassThroughType": {
+          "description": "Defines passthrough(pt) options type in NavigationMenu component.",
+          "values": "PassThroughType<NavigationMenuInstance, E>"
+        },
+        "NavigationMenuInstance": {
+          "description": "Instance of NavigationMenu component.",
+          "values": "ComponentInstance<NavigationMenuProps, NavigationMenuState, NavigationMenuExposes>"
+        }
+      },
+      "variables": {
+        "NavigationMenuClassNames": {
+          "description": "Defines the CSS class names used in the NavigationMenu component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-navigationmenu",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            }
+          ]
+        }
+      }
+    }
+  }
+]