@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,433 @@
+[
+  {
+    "name": "ToggleButtonIndicator",
+    "source": "apps/showcase/assets/apidoc/togglebuttonindicator.json",
+    "data": {
+      "description": "ToggleButtonIndicator component is used to display the indicator of ToggleButton.",
+      "interfaces": {
+        "ToggleButtonIndicatorPassThrough": {
+          "description": "Defines passthrough(pt) options of ToggleButtonIndicator component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "ToggleButtonIndicatorPassThroughType<HTMLAttributes<HTMLDivElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "ToggleButtonIndicatorProps": {
+          "description": "Defines valid properties in ToggleButtonIndicator component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<ToggleButtonIndicatorInstance, unknown, ToggleButtonIndicatorPassThrough>",
+          "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?: ToggleButtonIndicatorInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: ToggleButtonIndicatorInstance) => 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": "ToggleButtonIndicatorInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<ToggleButtonIndicatorPassThrough>",
+              "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: ToggleButtonIndicatorInstance) => 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": []
+        },
+        "ToggleButtonIndicatorState": {
+          "description": "Defines valid state in ToggleButtonIndicator component.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "ToggleButtonIndicatorExposes": {
+          "description": "Defines the methods and properties exposed by ToggleButtonIndicator component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "togglebutton",
+              "type": "ToggleButtonRootInstance",
+              "default": "",
+              "description": "The ToggleButton component instance."
+            },
+            {
+              "name": "indicatorProps",
+              "type": "UseToggleButtonIndicatorProps",
+              "default": "",
+              "description": "Pre-built props for the indicator element (excluding className)."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "ToggleButtonIndicatorPassThroughType": {
+          "description": "Defines passthrough(pt) options type in ToggleButtonIndicator component.",
+          "values": "PassThroughType<ToggleButtonIndicatorInstance, E>"
+        },
+        "ToggleButtonIndicatorInstance": {
+          "description": "Instance of ToggleButtonIndicator component.",
+          "values": "ComponentInstance<ToggleButtonIndicatorProps, ToggleButtonIndicatorState, ToggleButtonIndicatorExposes>"
+        }
+      },
+      "variables": {}
+    }
+  },
+  {
+    "name": "ToggleButtonRoot",
+    "source": "apps/showcase/assets/apidoc/togglebuttonroot.json",
+    "data": {
+      "description": "ToggleButton is an extension to standard ToggleButton element with theming.",
+      "interfaces": {
+        "ToggleButtonRootPassThrough": {
+          "description": "Defines passthrough(pt) options of ToggleButton component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "ToggleButtonRootPassThroughType<HTMLAttributes<HTMLDivElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            },
+            {
+              "name": "indicator",
+              "type": "ToggleButtonRootPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the indicator's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "ToggleButtonRootChangeEvent": {
+          "description": "Event fired when the ToggleButton's checked state changes.",
+          "relatedProp": "",
+          "extendedTypes": "UseToggleButtonChangeEvent<React.ChangeEvent<HTMLButtonElement>>",
+          "props": [
+            {
+              "name": "originalEvent",
+              "type": "ChangeEvent",
+              "default": "",
+              "description": "The original event that triggered the change."
+            },
+            {
+              "name": "pressed",
+              "type": "boolean",
+              "default": "",
+              "description": "The pressed state of the ToggleButton."
+            },
+            {
+              "name": "value",
+              "type": "unknown",
+              "default": "",
+              "description": "Value of the ToggleButton."
+            }
+          ],
+          "methods": []
+        },
+        "ToggleButtonRootProps": {
+          "description": "Defines valid properties in ToggleButton component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<ToggleButtonRootInstance, Omit<UseToggleButtonProps, \"onPressedChange\">, ToggleButtonRootPassThrough>",
+          "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?: ToggleButtonRootInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: ToggleButtonRootInstance) => 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": "ToggleButtonRootInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<ToggleButtonRootPassThrough>",
+              "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: ToggleButtonRootInstance) => 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": "pressed",
+              "type": "boolean",
+              "default": "",
+              "description": "When present, it specifies that the ToggleButton should be pressed."
+            },
+            {
+              "name": "defaultPressed",
+              "type": "boolean",
+              "default": "",
+              "description": "The default pressed value when not controlled by  `pressed`  and  `onPressedChange` ."
+            },
+            {
+              "name": "value",
+              "type": "unknown",
+              "default": "",
+              "description": "Value of the ToggleButton."
+            },
+            {
+              "name": "size",
+              "type": "\"small\" | \"large\" | \"normal\"",
+              "default": "",
+              "description": "Defines the size of the ToggleButton."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "false",
+              "description": "When present, it specifies that the element should be disabled."
+            },
+            {
+              "name": "invalid",
+              "type": "boolean",
+              "default": "false",
+              "description": "When present, it specifies that the component should have invalid state style."
+            },
+            {
+              "name": "fluid",
+              "type": "boolean",
+              "default": "",
+              "description": "Spans 100% width of the container when enabled."
+            },
+            {
+              "name": "onPressedChange",
+              "type": "(event: ToggleButtonRootChangeEvent) => void",
+              "default": "",
+              "description": "Callback fired when the ToggleButton's pressed state changes."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "ToggleButtonRootState": {
+          "description": "Defines valid state in ToggleButton component.",
+          "relatedProp": "",
+          "extendedTypes": "UseToggleButtonState",
+          "props": [
+            {
+              "name": "pressed",
+              "type": "boolean",
+              "default": "",
+              "description": "The pressed state of the useToggleButton."
+            }
+          ],
+          "methods": []
+        },
+        "ToggleButtonRootExposes": {
+          "description": "Defines the methods and properties exposed by ToggleButton component.",
+          "relatedProp": "",
+          "extendedTypes": "UseToggleButtonExposes",
+          "props": [
+            {
+              "name": "state",
+              "type": "UseToggleButtonState",
+              "default": "",
+              "description": "The state of the useToggleButton."
+            },
+            {
+              "name": "onChange",
+              "type": "(event: UseToggleButtonChangeEvent) => void",
+              "default": "",
+              "description": "Callback fired when the useToggleButton's pressed state changes."
+            },
+            {
+              "name": "getRootProps",
+              "type": "(disabled: boolean, invalid: boolean) => UseToggleButtonRootProps",
+              "default": "",
+              "description": "Returns pre-built props for the root element."
+            },
+            {
+              "name": "getIndicatorProps",
+              "type": "(disabled: boolean, invalid: boolean) => UseToggleButtonIndicatorProps",
+              "default": "",
+              "description": "Returns pre-built props for the indicator element."
+            },
+            {
+              "name": "group",
+              "type": "ToggleButtonGroupInstance",
+              "default": "",
+              "description": "The ToggleButtonGroup component instance."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "ToggleButtonRootPassThroughType": {
+          "description": "Defines passthrough(pt) options type in ToggleButton component.",
+          "values": "PassThroughType<ToggleButtonRootInstance, E>"
+        },
+        "ToggleButtonRootInstance": {
+          "description": "Instance of ToggleButton component.",
+          "values": "ComponentInstance<ToggleButtonRootProps, ToggleButtonRootState, ToggleButtonRootExposes>"
+        }
+      },
+      "variables": {}
+    }
+  }
+]

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

@@ -0,0 +1,161 @@
+# ToggleButton
+
+An unstyled toggle button component with group selection support for single and multiple modes.
+
+<DocPrimitiveIntro description="Build fully custom toggle buttons and button groups with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { AlignCenter } from '@primeicons/react/align-center';
+import { AlignJustify } from '@primeicons/react/align-justify';
+import { AlignLeft } from '@primeicons/react/align-left';
+import { AlignRight } from '@primeicons/react/align-right';
+import { Heart } from '@primeicons/react/heart';
+import { HeartFill } from '@primeicons/react/heart-fill';
+import { ToggleButton, type ToggleButtonIndicatorInstance } from 'primereact/togglebutton';
+import { ToggleButtonGroup } from 'primereact/togglebuttongroup';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    return (
+        <div className={styles.wrapper}>
+            <ToggleButton.Root className={styles.button}>
+                <ToggleButton.Indicator className={styles.indicator}>
+                    {({ togglebutton }: ToggleButtonIndicatorInstance) => (togglebutton?.state.pressed ? <HeartFill /> : <Heart />)}
+                </ToggleButton.Indicator>
+            </ToggleButton.Root>
+
+            <ToggleButtonGroup className={styles.group} allowEmpty={false}>
+                <ToggleButton.Root className={styles.groupButton} value="left">
+                    <ToggleButton.Indicator className={styles.groupIndicator}>
+                        <AlignLeft />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root className={styles.groupButton} value="center">
+                    <ToggleButton.Indicator className={styles.groupIndicator}>
+                        <AlignCenter />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root className={styles.groupButton} value="right">
+                    <ToggleButton.Indicator className={styles.groupIndicator}>
+                        <AlignRight />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root className={styles.groupButton} value="justify">
+                    <ToggleButton.Indicator className={styles.groupIndicator}>
+                        <AlignJustify />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="ToggleButton" />
+
+## Features
+
+- Compound component API with sub-components: `Root`, `Indicator`
+- Standalone toggle with boolean pressed state
+- Group selection with `ToggleButtonGroup` for single and multiple modes
+- Configurable `allowEmpty` to require at least one selection in a group
+
+## Usage
+
+```tsx
+import { ToggleButton } from 'primereact/togglebutton';
+import { ToggleButtonGroup } from 'primereact/togglebuttongroup';
+```
+
+```tsx
+<ToggleButton.Root>
+    <ToggleButton.Indicator></ToggleButton.Indicator>
+</ToggleButton.Root>
+
+<ToggleButtonGroup>
+    <ToggleButton.Root value="a">
+        <ToggleButton.Indicator></ToggleButton.Indicator>
+    </ToggleButton.Root>
+    <ToggleButton.Root value="b">
+        <ToggleButton.Indicator></ToggleButton.Indicator>
+    </ToggleButton.Root>
+</ToggleButtonGroup>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered element.
+
+```tsx
+<ToggleButton.Root as="div"></ToggleButton.Root>
+<ToggleButton.Indicator as="span"></ToggleButton.Indicator>
+```
+
+Default elements: `Root`=`button`, `Indicator`=`span`, `ToggleButtonGroup`=`div`.
+
+### Render Function Children
+
+`Indicator` accepts a render function as children, providing access to the component instance. The instance exposes `togglebutton` (parent instance with `state.pressed`).
+
+```tsx
+<ToggleButton.Indicator>{({ togglebutton }: ToggleButtonIndicatorInstance) => (togglebutton?.state.pressed ? 'On' : 'Off')}</ToggleButton.Indicator>
+```
+
+## Pass Through
+
+<DocPTViewer name="togglebutton-pt" components={['ToggleButtonRoot']} />
+
+## API
+
+### ToggleButtonRoot
+
+<DocTable name="ToggleButtonRoot" category="api" />
+
+| Attribute       | Value                 |
+| --------------- | --------------------- |
+| `data-pressed`  | Present when pressed  |
+| `data-disabled` | Present when disabled |
+| `data-invalid`  | Present when invalid  |
+
+<DocTable name="ToggleButtonRoot" category="pt" />
+
+### ToggleButtonIndicator
+
+<DocTable name="ToggleButtonIndicator" category="api" />
+
+| Attribute       | Value                 |
+| --------------- | --------------------- |
+| `data-pressed`  | Present when pressed  |
+| `data-disabled` | Present when disabled |
+| `data-invalid`  | Present when invalid  |
+
+<DocTable name="ToggleButtonIndicator" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+ToggleButton uses `aria-pressed` to indicate its toggle state and `aria-disabled` when disabled. Provide `aria-label` or visible text content to give each button an accessible name. ToggleButtonGroup uses `role="group"` and should have `aria-label` to describe the group purpose.
+
+```tsx
+<ToggleButton.Root aria-label="Favorite">
+    <ToggleButton.Indicator></ToggleButton.Indicator>
+</ToggleButton.Root>
+
+<ToggleButtonGroup aria-label="Text alignment">
+    <ToggleButton.Root value="left" aria-label="Align left">
+        <ToggleButton.Indicator></ToggleButton.Indicator>
+    </ToggleButton.Root>
+</ToggleButtonGroup>
+```
+
+### Keyboard Support
+
+| Key              | Function                         |
+| ---------------- | -------------------------------- |
+| <kbd>Space</kbd> | Toggles the pressed state.       |
+| <kbd>Enter</kbd> | Toggles the pressed state.       |
+| <kbd>Tab</kbd>   | Moves focus to the next element. |