@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,262 @@
+# ToggleButtonGroup
+
+ToggleButtonGroup component is used to create a group of toggle buttons.
+
+```tsx
+import { ToggleButton } from '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
+
+export default function Preview() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButtonGroup allowEmpty={false} multiple={false}>
+                <ToggleButton value="left">
+                    <i className="pi pi-align-left" />
+                </ToggleButton>
+                <ToggleButton value="center">
+                    <i className="pi pi-align-center" />
+                </ToggleButton>
+                <ToggleButton value="right">
+                    <i className="pi pi-align-right" />
+                </ToggleButton>
+                <ToggleButton value="justify">
+                    <i className="pi pi-align-justify" />
+                </ToggleButton>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+## Installation
+
+<DocTabs value="CLI">
+<DocTabsList>
+    <DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
+    <DocTabsTab value="Manual">Manual</DocTabsTab>
+</DocTabsList>
+<DocTabsPanel value="CLI">
+```bash
+npx shadcn@latest add https://primereact.dev/r/togglebuttongroup.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+<DocStepper>
+<DocStep>
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/togglebuttongroup" />
+</DocStep>
+<DocStep>
+Update the import paths to match your project setup.
+</DocStep>
+</DocStepper>
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
+```
+
+```tsx
+<ToggleButtonGroup>
+    <ToggleButton value="option1">Option 1</ToggleButton>
+    <ToggleButton value="option2">Option 2</ToggleButton>
+</ToggleButtonGroup>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { ToggleButton } from '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButtonGroup allowEmpty={false} defaultValue="left">
+                <ToggleButton value="left">
+                    <i className="pi pi-align-left" />
+                </ToggleButton>
+                <ToggleButton value="center">
+                    <i className="pi pi-align-center" />
+                </ToggleButton>
+                <ToggleButton value="right">
+                    <i className="pi pi-align-right" />
+                </ToggleButton>
+                <ToggleButton value="justify">
+                    <i className="pi pi-align-justify" />
+                </ToggleButton>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+Use `value` and `onValueChange` properties to control the state of the `ToggleButtonGroup`.
+
+```tsx
+'use client';
+import type { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
+import { ToggleButton } from '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/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 value="left">
+                    <i className="pi pi-align-left" />
+                </ToggleButton>
+                <ToggleButton value="center">
+                    <i className="pi pi-align-center" />
+                </ToggleButton>
+                <ToggleButton value="right">
+                    <i className="pi pi-align-right" />
+                </ToggleButton>
+                <ToggleButton value="justify">
+                    <i className="pi pi-align-justify" />
+                </ToggleButton>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+### Multiple
+
+`ToggleButtonGroup` 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 '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
+
+export default function MultipleDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButtonGroup multiple>
+                <ToggleButton value="bold">Bold</ToggleButton>
+                <ToggleButton value="italic">Italic</ToggleButton>
+                <ToggleButton value="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```
+
+### Sizes
+
+`ToggleButtonGroup` provides small and large sizes as alternatives to the base by using the `size` property.
+
+```tsx
+import { ToggleButton } from '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
+
+export default function SizesDemo() {
+    return (
+        <div className="flex flex-col gap-4 items-center justify-center">
+            <ToggleButtonGroup size="small" multiple>
+                <ToggleButton value="bold">Bold</ToggleButton>
+                <ToggleButton value="italic">Italic</ToggleButton>
+                <ToggleButton value="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
+            <ToggleButtonGroup size="normal" multiple>
+                <ToggleButton value="bold">Bold</ToggleButton>
+                <ToggleButton value="italic">Italic</ToggleButton>
+                <ToggleButton value="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
+            <ToggleButtonGroup size="large" multiple>
+                <ToggleButton value="bold">Bold</ToggleButton>
+                <ToggleButton value="italic">Italic</ToggleButton>
+                <ToggleButton value="underline">Underline</ToggleButton>
+            </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 '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
+
+export default function FluidDemo() {
+    return (
+        <ToggleButtonGroup fluid multiple>
+            <ToggleButton value="bold">Bold</ToggleButton>
+            <ToggleButton value="italic">Italic</ToggleButton>
+            <ToggleButton value="underline">Underline</ToggleButton>
+        </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 type { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
+import { ToggleButton } from '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/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 value="monthly">Monthly</ToggleButton>
+                <ToggleButton value="yearly">Yearly</ToggleButton>
+            </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 '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex items-center gap-4 justify-center">
+            <ToggleButtonGroup disabled>
+                <ToggleButton value="off">Off</ToggleButton>
+                <ToggleButton value="on">On</ToggleButton>
+            </ToggleButtonGroup>
+            <ToggleButtonGroup>
+                <ToggleButton value="option1">Option 1</ToggleButton>
+                <ToggleButton value="option2" disabled>
+                    Option 2
+                </ToggleButton>
+            </ToggleButtonGroup>
+        </div>
+    );
+}
+```

package/data/llms/tailwind/components/toggleswitch.md

@@ -0,0 +1,203 @@
+# ToggleSwitch
+
+ToggleSwitch is used to select a boolean value.
+
+```tsx
+import { Divider } from '@/components/ui/divider';
+import { ToggleSwitch } from '@/components/ui/toggleswitch';
+
+export default function Preview() {
+    return (
+        <div className="flex flex-col justify-center items-center gap-2 max-w-xs mx-auto w-full ">
+            <label className="flex items-center justify-between gap-12  select-none">
+                <div className="flex-1">
+                    <div className="text-color font-bold">Email address</div>
+                    <div className="text-muted-color">Users can add email addresses to their account</div>
+                </div>
+                <ToggleSwitch />
+            </label>
+            <Divider />
+            <label className="flex items-center justify-between gap-12 select-none">
+                <div className="flex-1">
+                    <div className="text-color font-bold">Two-factor authentication</div>
+                    <div className="text-muted-color">Require a verification code when signing in</div>
+                </div>
+                <ToggleSwitch defaultChecked />
+            </label>
+        </div>
+    );
+}
+```
+
+## Installation
+
+<DocTabs value="CLI">
+<DocTabsList>
+   <DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
+    <DocTabsTab value="Manual">Manual</DocTabsTab>
+</DocTabsList>
+<DocTabsPanel value="CLI">
+```bash
+npx shadcn@latest add https://primereact.dev/r/toggleswitch.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+<DocStepper>
+<DocStep>
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/toggleswitch" />
+</DocStep>
+<DocStep>
+Update the import paths to match your project setup.
+</DocStep>
+</DocStepper>
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { ToggleSwitch } from '@/components/ui/toggleswitch';
+```
+
+```tsx
+<ToggleSwitch />
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Label } from '@/components/ui/label';
+import { ToggleSwitch } from '@/components/ui/toggleswitch';
+
+export default function BasicDemo() {
+    return (
+        <Label className="flex justify-center items-center gap-2">
+            Off
+            <ToggleSwitch />
+            On
+        </Label>
+    );
+}
+```
+
+### Controlled
+
+A controlled ToggleSwitch requires managing the checked state with a state variable and handling the change event manually. This allows for complete control over the ToggleSwitch's behavior.
+
+```tsx
+'use client';
+import { Label } from '@/components/ui/label';
+import { ToggleSwitch } from '@/components/ui/toggleswitch';
+import { ToggleSwitchRootChangeEvent } from 'primereact/toggleswitch';
+import React from 'react';
+
+export default function ControlledDemo() {
+    const [checked, setChecked] = React.useState(true);
+
+    return (
+        <div className="flex justify-center items-center gap-2">
+            <ToggleSwitch inputId="mode" checked={checked} onCheckedChange={(event: ToggleSwitchRootChangeEvent) => setChecked(event.checked)} />
+            <Label htmlFor="mode">Airplane Mode</Label>
+        </div>
+    );
+}
+```
+
+### Uncontrolled
+
+For an uncontrolled ToggleSwitch component, `defaultChecked` is used to set the initial state, and the component manages its own state internally.
+
+```tsx
+import { ToggleSwitch } from '@/components/ui/toggleswitch';
+
+export default function UncontrolledDemo() {
+    return (
+        <div className="flex justify-center">
+            <ToggleSwitch defaultChecked />
+        </div>
+    );
+}
+```
+
+### Template
+
+`ToggleSwitch` also allows displaying custom content inside itself.
+
+```tsx
+import { ToggleSwitch } from '@/components/ui/toggleswitch';
+import { Check, Times } from '@primeicons/react';
+
+export default function TemplateDemo() {
+    return (
+        <div className="flex justify-center">
+            <ToggleSwitch className="group">
+                <Times className="text-[10px] absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-surface-400 dark:text-surface-600 group-data-checked:opacity-0 opacity-100 transition-opacity duration-200" />
+                <Check className="text-[10px] absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 text-primary group-data-checked:opacity-100 opacity-0 transition-opacity duration-200" />
+            </ToggleSwitch>
+        </div>
+    );
+}
+```
+
+### Invalid
+
+Invalid state is displayed using the `invalid` prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+
+```tsx
+'use client';
+import { ToggleSwitch } from '@/components/ui/toggleswitch';
+import { ToggleSwitchRootChangeEvent } from 'primereact/toggleswitch';
+import * as React from 'react';
+
+export default function InvalidDemo() {
+    const [checked, setChecked] = React.useState(false);
+
+    return (
+        <div className="flex justify-center">
+            <ToggleSwitch checked={checked} onCheckedChange={(event: ToggleSwitchRootChangeEvent) => setChecked(event.checked)} invalid={!checked} />
+        </div>
+    );
+}
+```
+
+### Disabled
+
+When `disabled` is present, the element cannot be edited and focused.
+
+```tsx
+import { ToggleSwitch } from '@/components/ui/toggleswitch';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex justify-center">
+            <ToggleSwitch disabled />
+        </div>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+ToggleSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via `label` tag combined with `id` prop or using `aria-labelledby`, `aria-label` props.
+
+```tsx
+<label htmlFor="switch1">Remember Me</label>
+<ToggleSwitch inputId="switch1" />
+
+<span id="switch2">Remember Me</span>
+<ToggleSwitch aria-labelledby="switch2" />
+
+<ToggleSwitch aria-label="Remember Me" />
+```
+
+### Keyboard Support
+
+| Key     | Function                          |
+| ------- | --------------------------------- |
+| `tab`   | Moves focus to the toggle switch. |
+| `space` | Toggles the checked state.        |

package/data/llms/tailwind/components/toolbar.md

@@ -0,0 +1,192 @@
+# Toolbar
+
+Toolbar is a grouping component for buttons and other content.
+
+```tsx
+import { Button } from '@/components/ui/button';
+import { InputText } from '@/components/ui/inputtext';
+import { Toolbar, ToolbarCenter, ToolbarEnd, ToolbarStart } from '@/components/ui/toolbar';
+import { Plus, Upload } from '@primeicons/react';
+
+export default function Preview() {
+    return (
+        <div>
+            <Toolbar>
+                <ToolbarStart>
+                    <Button className="mr-2" severity="secondary" variant="text">
+                        <Plus></Plus>
+                    </Button>
+                    <Button className="mr-2" severity="secondary" variant="text">
+                        <i className="pi pi-print" />
+                    </Button>
+                    <Button severity="secondary" variant="text">
+                        <Upload></Upload>
+                    </Button>
+                </ToolbarStart>
+                <ToolbarCenter>
+                    <InputText placeholder="Search" />
+                </ToolbarCenter>
+                <ToolbarEnd>
+                    <Button severity="secondary" variant="outlined" size="small">
+                        Cancel
+                    </Button>
+                    <Button size="small" className="ml-2">
+                        Save
+                    </Button>
+                </ToolbarEnd>
+            </Toolbar>
+        </div>
+    );
+}
+```
+
+## Installation
+
+<DocTabs value="CLI">
+<DocTabsList>
+   <DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
+    <DocTabsTab value="Manual">Manual</DocTabsTab>
+</DocTabsList>
+<DocTabsPanel value="CLI">
+```bash
+npx shadcn@latest add https://primereact.dev/r/toolbar.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+<DocStepper>
+<DocStep>
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/toolbar" />
+</DocStep>
+<DocStep>
+Update the import paths to match your project setup.
+</DocStep>
+</DocStepper>
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Toolbar, ToolbarCenter, ToolbarEnd, ToolbarStart } from '@/components/ui/toolbar';
+```
+
+```tsx
+<Toolbar>
+    <ToolbarStart />
+    <ToolbarCenter />
+    <ToolbarEnd />
+</Toolbar>
+```
+
+## Examples
+
+### Basic
+
+Combines action buttons and controls in a horizontal bar.
+
+```tsx
+import { Button } from '@/components/ui/button';
+import { InputText } from '@/components/ui/inputtext';
+import { Toolbar, ToolbarCenter, ToolbarEnd, ToolbarStart } from '@/components/ui/toolbar';
+import { Plus, Upload } from '@primeicons/react';
+
+export default function BasicDemo() {
+    return (
+        <div>
+            <Toolbar>
+                <ToolbarStart>
+                    <Button className="mr-2" severity="secondary" variant="text">
+                        <Plus></Plus>
+                    </Button>
+                    <Button className="mr-2" severity="secondary" variant="text">
+                        <i className="pi pi-print" />
+                    </Button>
+                    <Button severity="secondary" variant="text">
+                        <Upload></Upload>
+                    </Button>
+                </ToolbarStart>
+                <ToolbarCenter>
+                    <InputText placeholder="Search" />
+                </ToolbarCenter>
+                <ToolbarEnd>
+                    <Button severity="secondary" variant="outlined" size="small">
+                        Cancel
+                    </Button>
+                    <Button size="small" className="ml-2">
+                        Save
+                    </Button>
+                </ToolbarEnd>
+            </Toolbar>
+        </div>
+    );
+}
+```
+
+### Custom
+
+A customized toolbar with navigation bar functionality.
+
+```tsx
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Toolbar, ToolbarEnd, ToolbarStart } from '@/components/ui/toolbar';
+import { Search } from '@primeicons/react';
+
+export default function CustomDemo() {
+    return (
+        <Toolbar style={{ borderRadius: '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }}>
+            <ToolbarStart>
+                <div className="flex items-center gap-1">
+                    <i className="pi pi-prime text-xl" style={{ color: 'var(--p-primary-400)' }} />
+                    <span className="font-bold text-lg ml-2" style={{ color: 'var(--p-surface-0)' }}>
+                        Brand
+                    </span>
+                </div>
+                <div className="ml-6 flex gap-1">
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        Products
+                    </Button>
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        Solutions
+                    </Button>
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        Resources
+                    </Button>
+                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                        Pricing
+                    </Button>
+                </div>
+            </ToolbarStart>
+            <ToolbarEnd>
+                <div className="flex items-center gap-2">
+                    <Button variant="text" size="small" iconOnly aria-label="Search" className="text-surface-0 hover:bg-surface-700">
+                        <Search />
+                    </Button>
+                    <Button severity="contrast" size="small">
+                        Get Started
+                    </Button>
+                    <Avatar shape="circle" size="normal">
+                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                        <AvatarFallback>A</AvatarFallback>
+                    </Avatar>
+                </div>
+            </ToolbarEnd>
+        </Toolbar>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/toolbar#api) for `ToolbarRoot`, `ToolbarStart`, `ToolbarCenter`, `ToolbarEnd` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/toolbar#api) for `useToolbar` hook documentation.
+
+### Accessibility
+
+See [Toolbar Primitive](/docs/primitive/components/toolbar#accessibility) for WAI-ARIA compliance details and keyboard support.