@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,287 @@
+# ToggleButton
+
+ToggleButton component is used to create a button that can be toggled on or off.
+
+```tsx
+'use client';
+import { BookmarkFill, Heart, HeartFill } from '@primeicons/react';
+import { Bookmark } from '@primeicons/react/bookmark';
+import { ToggleButton, type ToggleButtonIndicatorInstance } from '@primereact/ui/togglebutton';
+
+export default function Preview() {
+    return (
+        <div className="max-w-xs mx-auto">
+            <div className="w-full text-balance">
+                <div className="text-color text-lg font-bold">Migrating to PrimeReact: What Changed and Why</div>
+                <div className="mt-1 line-clamp-2 text-muted-color">
+                    A hands-on guide to the new compound component API, headless hooks, and Tailwind-first theming in PrimeReact v11.
+                </div>
+            </div>
+            <div className="mt-4 flex items-start gap-2">
+                <div className="flex-1 flex items-center gap-2">
+                    <span className="text-muted-color opacity-75">May 12</span>
+                </div>
+                <ToggleButton.Root defaultPressed className="min-w-24">
+                    <ToggleButton.Indicator>
+                        {({ togglebutton }: ToggleButtonIndicatorInstance) => {
+                            const isPressed = togglebutton?.state.pressed;
+
+                            return (
+                                <>
+                                    {isPressed ? <HeartFill /> : <Heart />}
+                                    <span>{isPressed ? 'Liked' : 'Like'}</span>
+                                </>
+                            );
+                        }}
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root className="min-w-24">
+                    <ToggleButton.Indicator>
+                        {({ togglebutton }: ToggleButtonIndicatorInstance) => {
+                            const isPressed = togglebutton?.state.pressed;
+
+                            return (
+                                <>
+                                    {isPressed ? <BookmarkFill /> : <Bookmark />}
+                                    <span>{isPressed ? 'Saved' : 'Save'}</span>
+                                </>
+                            );
+                        }}
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+```
+
+```tsx
+<ToggleButton.Root>
+    <ToggleButton.Indicator>Toggle</ToggleButton.Indicator>
+</ToggleButton.Root>
+```
+
+## Examples
+
+### Basic
+
+A button that switches between active and inactive states.
+
+```tsx
+'use client';
+import { Bookmark } from '@primeicons/react/bookmark';
+import { ToggleButton } from '@primereact/ui/togglebutton';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButton.Root>
+                <ToggleButton.Indicator>
+                    <Bookmark />
+                </ToggleButton.Indicator>
+            </ToggleButton.Root>
+        </div>
+    );
+}
+```
+
+### Render Props
+
+This is called the render prop pattern. It allows using a function to customize what the component displays based on its internal state.
+
+```tsx
+'use client';
+import { Lock } from '@primeicons/react/lock';
+import { ToggleButton, type ToggleButtonIndicatorInstance } from '@primereact/ui/togglebutton';
+
+export default function RenderPropsDemo() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-4">
+            <ToggleButton.Root className="min-w-16">
+                <ToggleButton.Indicator>
+                    {({ togglebutton }: ToggleButtonIndicatorInstance) => (togglebutton?.state.pressed ? 'On' : 'Off')}
+                </ToggleButton.Indicator>
+            </ToggleButton.Root>
+            <ToggleButton.Root className="min-w-29">
+                <ToggleButton.Indicator>
+                    {({ togglebutton }: ToggleButtonIndicatorInstance) =>
+                        togglebutton?.state.pressed ? (
+                            <>
+                                <Lock></Lock>Locked
+                            </>
+                        ) : (
+                            <>
+                                <i className="pi pi-lock-open" />
+                                Unlocked
+                            </>
+                        )
+                    }
+                </ToggleButton.Indicator>
+            </ToggleButton.Root>
+            <ToggleButton.Root className="min-w-26">
+                <ToggleButton.Indicator>
+                    {({ togglebutton }: ToggleButtonIndicatorInstance) =>
+                        togglebutton?.state.pressed ? (
+                            <>
+                                <i className="pi pi-volume-up" />
+                                Mute
+                            </>
+                        ) : (
+                            <>
+                                <i className="pi pi-volume-off" />
+                                Unmute
+                            </>
+                        )
+                    }
+                </ToggleButton.Indicator>
+            </ToggleButton.Root>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+Use `pressed` and `onPressedChange` properties to control the state of the ToggleButton.
+
+```tsx
+'use client';
+import { ToggleButton, type ToggleButtonRootChangeEvent } from '@primereact/ui/togglebutton';
+import * as React from 'react';
+
+export default function ControlledDemo() {
+    const [pressedState, setPressedState] = React.useState(false);
+
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButton.Root
+                pressed={pressedState}
+                onPressedChange={(e: ToggleButtonRootChangeEvent) => setPressedState(e.pressed)}
+                className="min-w-32"
+            >
+                <ToggleButton.Indicator>{pressedState ? 'Pressed' : 'Not Pressed'}</ToggleButton.Indicator>
+            </ToggleButton.Root>
+        </div>
+    );
+}
+```
+
+### Size
+
+`ToggleButton` provides small and large sizes as alternatives to the base by using the `size` property.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+
+export default function SizesDemo() {
+    return (
+        <div className="flex flex-col gap-2 items-center justify-center">
+            <ToggleButton.Root size="small" className="min-w-16">
+                <ToggleButton.Indicator>Small</ToggleButton.Indicator>
+            </ToggleButton.Root>
+            <ToggleButton.Root size="normal" className="min-w-20">
+                <ToggleButton.Indicator>Normal</ToggleButton.Indicator>
+            </ToggleButton.Root>
+            <ToggleButton.Root size="large" className="min-w-28">
+                <ToggleButton.Indicator>Large</ToggleButton.Indicator>
+            </ToggleButton.Root>
+        </div>
+    );
+}
+```
+
+### Fluid
+
+When `fluid` is enabled, the ToggleButton spans the full width of its parent container.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+
+export default function FluidDemo() {
+    return (
+        <ToggleButton.Root fluid>
+            <ToggleButton.Indicator>Toggle</ToggleButton.Indicator>
+        </ToggleButton.Root>
+    );
+}
+```
+
+### Invalid
+
+Invalid state is displayed using the `invalid` prop to indicate a failed validation. This style is useful when integrating with form validation libraries.
+
+```tsx
+'use client';
+import { ToggleButton, type ToggleButtonRootChangeEvent } from '@primereact/ui/togglebutton';
+import * as React from 'react';
+
+export default function InvalidDemo() {
+    const [pressedState, setPressedState] = React.useState(false);
+
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButton.Root
+                pressed={pressedState}
+                onPressedChange={(e: ToggleButtonRootChangeEvent) => setPressedState(e.pressed)}
+                invalid={!pressedState}
+            >
+                <ToggleButton.Indicator>Invalid</ToggleButton.Indicator>
+            </ToggleButton.Root>
+        </div>
+    );
+}
+```
+
+### Disabled
+
+When `disabled` is present, the element cannot be edited and focused.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButton.Root disabled>
+                <ToggleButton.Indicator>Disabled</ToggleButton.Indicator>
+            </ToggleButton.Root>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/togglebutton#api) for `ToggleButtonRoot`, `ToggleButtonIndicator`, `ToggleButtonGroup` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/togglebutton#api) for `useToggleButton` and `useToggleButtonGroup` hook documentation.
+
+### Accessibility
+
+See [ToggleButton Primitive](/docs/primitive/components/togglebutton#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="ToggleButton" category="style" />
+<DocTable name="ToggleButtonGroup" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="ToggleButton" category="token" />

package/data/llms/styled/components/togglebuttongroup.md

@@ -0,0 +1,328 @@
+# ToggleButtonGroup
+
+ToggleButtonGroup component is used to create a group of toggle buttons.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
+
+export default function Preview() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButtonGroup allowEmpty={false} multiple={false}>
+                <ToggleButton.Root value="left">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-left" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="center">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-center" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="right">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-right" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="justify">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-justify" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
+```
+
+```tsx
+<ToggleButtonGroup></ToggleButtonGroup>
+```
+
+## Examples
+
+### Basic
+
+A group of toggle buttons where one or more can be active at a time.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButtonGroup allowEmpty={false} multiple={false} defaultValue="left">
+                <ToggleButton.Root value="left">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-left" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="center">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-center" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="right">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-right" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="justify">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-justify" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+Use `value` and `onValueChange` properties to control the state of the `ToggleButton.Group`.
+
+```tsx
+'use client';
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
+import * as React from 'react';
+
+export default function ControlledDemo() {
+    const [value, setValue] = React.useState<string[]>([]);
+
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButtonGroup
+                allowEmpty={false}
+                value={value}
+                onValueChange={(e: ToggleButtonGroupValueChangeEvent) => setValue(e.value as string[])}
+            >
+                <ToggleButton.Root value="left">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-left" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="center">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-center" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="right">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-right" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="justify">
+                    <ToggleButton.Indicator>
+                        <i className="pi pi-align-justify" />
+                    </ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+### Multiple
+
+`ToggleButton.Group` allows selecting only one item by default and setting `multiple` option enables choosing more than one item. In multiple case, model property should be an array.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
+
+export default function MultipleDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButtonGroup multiple>
+                <ToggleButton.Root value="bold">
+                    <ToggleButton.Indicator>Bold</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="italic">
+                    <ToggleButton.Indicator>Italic</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="underline">
+                    <ToggleButton.Indicator>Underline</ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+### Sizes
+
+`ToggleButton.Group` provides small and large sizes as alternatives to the base by using the `size` property.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
+
+export default function SizesDemo() {
+    return (
+        <div className="flex flex-col gap-4 items-center justify-center">
+            <ToggleButtonGroup size="small" multiple>
+                <ToggleButton.Root value="bold">
+                    <ToggleButton.Indicator>Bold</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="italic">
+                    <ToggleButton.Indicator>Italic</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="underline">
+                    <ToggleButton.Indicator>Underline</ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+            <ToggleButtonGroup size="normal" multiple>
+                <ToggleButton.Root value="bold">
+                    <ToggleButton.Indicator>Bold</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="italic">
+                    <ToggleButton.Indicator>Italic</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="underline">
+                    <ToggleButton.Indicator>Underline</ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+            <ToggleButtonGroup size="large" multiple>
+                <ToggleButton.Root value="bold">
+                    <ToggleButton.Indicator>Bold</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="italic">
+                    <ToggleButton.Indicator>Italic</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="underline">
+                    <ToggleButton.Indicator>Underline</ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+### Fluid
+
+When `fluid` is enabled, the ToggleButtonGroup spans the full width of its parent container, distributing the buttons evenly.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
+
+export default function FluidDemo() {
+    return (
+        <ToggleButtonGroup fluid multiple>
+            <ToggleButton.Root value="bold">
+                <ToggleButton.Indicator>Bold</ToggleButton.Indicator>
+            </ToggleButton.Root>
+            <ToggleButton.Root value="italic">
+                <ToggleButton.Indicator>Italic</ToggleButton.Indicator>
+            </ToggleButton.Root>
+            <ToggleButton.Root value="underline">
+                <ToggleButton.Indicator>Underline</ToggleButton.Indicator>
+            </ToggleButton.Root>
+        </ToggleButtonGroup>
+    );
+}
+```
+
+### Invalid
+
+Invalid state is displayed using the `invalid` prop to indicate a failed validation. This style is useful when integrating with form validation libraries.
+
+```tsx
+'use client';
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
+import * as React from 'react';
+
+export default function InvalidDemo() {
+    const [value, setValue] = React.useState<string[] | null>(null);
+
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButtonGroup
+                value={value}
+                onValueChange={(e: ToggleButtonGroupValueChangeEvent) => setValue(e.value as string[])}
+                invalid={value === null}
+            >
+                <ToggleButton.Root value="monthly">
+                    <ToggleButton.Indicator>Monthly</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="yearly">
+                    <ToggleButton.Indicator>Yearly</ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+### Disabled
+
+When `disabled` is present, the element cannot be edited and focused entirely. Certain options can also be disabled using their `disabled` properties.
+
+```tsx
+import { ToggleButton } from '@primereact/ui/togglebutton';
+import { ToggleButtonGroup } from '@primereact/ui/togglebuttongroup';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex items-center gap-4 justify-center">
+            <ToggleButtonGroup disabled>
+                <ToggleButton.Root value="off">
+                    <ToggleButton.Indicator>Off</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="on">
+                    <ToggleButton.Indicator>On</ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+            <ToggleButtonGroup>
+                <ToggleButton.Root value="option1">
+                    <ToggleButton.Indicator>Option 1</ToggleButton.Indicator>
+                </ToggleButton.Root>
+                <ToggleButton.Root value="option2" disabled>
+                    <ToggleButton.Indicator>Option 2</ToggleButton.Indicator>
+                </ToggleButton.Root>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/togglebutton#api) for `ToggleButtonRoot`, `ToggleButtonIndicator`, `ToggleButtonGroup` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/togglebutton#api) for `useToggleButton` and `useToggleButtonGroup` hook documentation.
+
+### Accessibility
+
+See [ToggleButton Primitive](/docs/primitive/components/togglebutton#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="ToggleButton" category="style" />
+<DocTable name="ToggleButtonGroup" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="ToggleButton" category="token" />