@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,246 @@
+# Toast
+
+Toast is a component that displays a message to the user.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { toast, Toaster } from '@/components/ui/toast';
+
+function Preview() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-4">
+            <Button
+                onClick={() => {
+                    toast({
+                        title: 'Successfully completed',
+                        description: 'The task was completed successfully. You can now view the details.',
+                        group: 'tw-basic'
+                    });
+                }}
+            >
+                Create toast
+            </Button>
+            <Toaster group="tw-basic" />
+        </div>
+    );
+}
+
+export default Preview;
+```
+
+## 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/toast.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/toast" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { toast, Toaster } from '@/components/ui/toast';
+```
+
+```tsx
+<Toaster />
+```
+
+Trigger toasts from anywhere with `toast(...)` or one of the severity shortcuts (`toast.success`, `toast.info`, `toast.warn`, `toast.error`, `toast.secondary`, `toast.contrast`).
+
+## Examples
+
+### Basic
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { toast, Toaster } from '@/components/ui/toast';
+
+function BasicDemo() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-4">
+            <Button
+                onClick={() => {
+                    toast({
+                        title: 'Successfully completed',
+                        description: 'The task was completed successfully. You can now view the details.',
+                        group: 'basic'
+                    });
+                }}
+                variant="outlined"
+            >
+                Create toast
+            </Button>
+            <Toaster group="basic" />
+        </div>
+    );
+}
+
+export default BasicDemo;
+```
+
+### Position
+
+Use the `position` prop on `<Toaster>` to control where toasts appear.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { toast, Toaster } from '@/components/ui/toast';
+
+function PositionDemo() {
+    const createToast = (group: string) => {
+        toast({
+            title: 'Successfully completed',
+            description: 'The task was completed successfully. You can now view the details.',
+            group
+        });
+    };
+
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-4">
+            <Button onClick={() => createToast('top-left')} variant="outlined">
+                Top Left
+            </Button>
+            <Button onClick={() => createToast('top-center')} variant="outlined">
+                Top Center
+            </Button>
+            <Button onClick={() => createToast('top-right')} variant="outlined">
+                Top Right
+            </Button>
+            <Button onClick={() => createToast('bottom-left')} variant="outlined">
+                Bottom Left
+            </Button>
+            <Button onClick={() => createToast('bottom-center')} variant="outlined">
+                Bottom Center
+            </Button>
+            <Button onClick={() => createToast('bottom-right')} variant="outlined">
+                Bottom Right
+            </Button>
+
+            <Toaster group="top-left" position="top-left" />
+            <Toaster group="top-right" position="top-right" />
+            <Toaster group="top-center" position="top-center" />
+            <Toaster group="bottom-left" position="bottom-left" />
+            <Toaster group="bottom-right" position="bottom-right" />
+            <Toaster group="bottom-center" position="bottom-center" />
+        </div>
+    );
+}
+
+export default PositionDemo;
+```
+
+### Action
+
+Add an interactive button to the toast with the `action` field.
+
+```tsx
+'use client';
+import { Camera } from '@primeicons/react';
+import { Button } from '@/components/ui/button';
+import { toast, Toaster } from '@/components/ui/toast';
+
+function ActionDemo() {
+    const handleCreateToast = () => {
+        const id = toast({
+            title: 'Allow camera access',
+            description: 'We need access to your camera to scan QR codes.',
+            icon: <Camera />,
+            group: 'action',
+            action: {
+                children: 'Enable camera',
+                onClick: () => {
+                    toast.dismiss(id);
+                    toast({
+                        severity: 'success',
+                        title: 'Camera access granted',
+                        description: 'You can now scan QR codes.',
+                        group: 'action'
+                    });
+                }
+            }
+        });
+    };
+
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-4">
+            <Button onClick={handleCreateToast} variant="outlined">
+                Create toast with action
+            </Button>
+            <Toaster group="action" />
+        </div>
+    );
+}
+
+export default ActionDemo;
+```
+
+## toast function
+
+`toast(options)` queues a toast and returns its id.
+
+```tsx
+const id = toast({ severity: 'success', title: 'Saved' });
+```
+
+### Severity shortcuts
+
+Each severity has a shortcut that sets `severity` automatically:
+
+```tsx
+toast.success({ title: 'Saved' });
+toast.info({ title: 'Heads up' });
+toast.warn({ title: 'Check this' });
+toast.error({ title: 'Failed' });
+toast.secondary({ title: '...' });
+toast.contrast({ title: '...' });
+```
+
+### Methods
+
+```tsx
+toast.dismiss(id); // dismiss specific toast
+toast.dismiss(); // dismiss all
+toast.update(id, options); // merge options into existing toast
+toast.promise(p, { loading, success, error });
+```
+
+## Toast options
+
+Any of these fields can be passed to `toast(...)` or its shortcuts.
+
+| Field         | Type                                                                    | Description                                                                     |
+| ------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `severity`    | `'info' \| 'success' \| 'warn' \| 'error' \| 'secondary' \| 'contrast'` | Visual severity. Defaults to `info`.                                            |
+| `title`       | `ReactNode`                                                             | Main heading.                                                                   |
+| `description` | `ReactNode`                                                             | Secondary text.                                                                 |
+| `icon`        | `ReactNode`                                                             | Custom icon, overrides the matched `<Toast.Icon match="..." />` for this toast. |
+| `action`      | `ButtonProps`                                                           | Props forwarded to `<ToastAction>` (e.g. `children`, `onClick`).                |
+| `render`      | `ReactElement`                                                          | Replaces the default body with custom JSX.                                      |
+| `duration`    | `number`                                                                | Auto-dismiss delay in ms. Pass `Infinity` to keep open.                         |
+| `loading`     | `boolean`                                                               | Marks the toast as loading and disables auto-dismiss.                           |
+| `dismissible` | `boolean`                                                               | If `false`, hides the close button and disables swipe-to-dismiss.               |
+| `group`       | `string`                                                                | Scopes the toast to a specific `<Toaster group="..." />`.                       |
+| `data`        | `Record<string, unknown>`                                               | Arbitrary metadata, available on the toast object and in callbacks.             |
+| `onDismiss`   | `(toast) => void`                                                       | Called when dismissed by user (close button, swipe, or `dismiss(id)`).          |
+| `onTimeout`   | `(toast) => void`                                                       | Called when `duration` elapses.                                                 |
+
+## Accessibility
+
+### Screen Reader
+
+Toast component use alert role that implicitly defines `aria-live` as "assertive" and `aria-atomic` as "true".

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

@@ -0,0 +1,264 @@
+# ToggleButton
+
+ToggleButton component is used to create a button that can be toggled on or off.
+
+```tsx
+'use client';
+import { Bookmark, BookmarkFill, Heart, HeartFill } from '@primeicons/react';
+import type { ToggleButtonIndicatorInstance } from 'primereact/togglebutton';
+import { ToggleButton } from '@/components/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 defaultPressed className="min-w-24">
+                    {({ togglebutton }: ToggleButtonIndicatorInstance) => {
+                        const isPressed = togglebutton?.state.pressed;
+
+                        return (
+                            <>
+                                {isPressed ? <HeartFill /> : <Heart />}
+                                <span>{isPressed ? 'Liked' : 'Like'}</span>
+                            </>
+                        );
+                    }}
+                </ToggleButton>
+                <ToggleButton className="min-w-24">
+                    {({ togglebutton }: ToggleButtonIndicatorInstance) => {
+                        const isPressed = togglebutton?.state.pressed;
+
+                        return (
+                            <>
+                                {isPressed ? <BookmarkFill /> : <Bookmark />}
+                                <span>{isPressed ? 'Saved' : 'Save'}</span>
+                            </>
+                        );
+                    }}
+                </ToggleButton>
+            </div>
+        </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/togglebutton.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+<DocStepper>
+<DocStep>
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/togglebutton" />
+</DocStep>
+<DocStep>
+Update the import paths to match your project setup.
+</DocStep>
+</DocStepper>
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { ToggleButton } from '@/components/ui/togglebutton';
+```
+
+```tsx
+<ToggleButton>Toggle</ToggleButton>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+'use client';
+import { Heart, HeartFill } from '@primeicons/react';
+import type { ToggleButtonIndicatorInstance } from 'primereact/togglebutton';
+import { ToggleButton } from '@/components/ui/togglebutton';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButton>
+                {({ togglebutton }: ToggleButtonIndicatorInstance) => (togglebutton?.state.pressed ? <HeartFill></HeartFill> : <Heart></Heart>)}
+            </ToggleButton>
+        </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';
+import type { ToggleButtonIndicatorInstance } from 'primereact/togglebutton';
+import { ToggleButton } from '@/components/ui/togglebutton';
+
+export default function RenderPropsDemo() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-4">
+            <ToggleButton className="min-w-16">
+                {({ togglebutton }: ToggleButtonIndicatorInstance) => (togglebutton?.state.pressed ? 'On' : 'Off')}
+            </ToggleButton>
+            <ToggleButton className="min-w-29">
+                {({ togglebutton }: ToggleButtonIndicatorInstance) =>
+                    togglebutton?.state.pressed ? (
+                        <>
+                            <Lock></Lock>Locked
+                        </>
+                    ) : (
+                        <>
+                            <i className="pi pi-lock-open" />
+                            Unlocked
+                        </>
+                    )
+                }
+            </ToggleButton>
+            <ToggleButton className="min-w-26">
+                {({ togglebutton }: ToggleButtonIndicatorInstance) =>
+                    togglebutton?.state.pressed ? (
+                        <>
+                            <i className="pi pi-volume-up" />
+                            Mute
+                        </>
+                    ) : (
+                        <>
+                            <i className="pi pi-volume-off" />
+                            Unmute
+                        </>
+                    )
+                }
+            </ToggleButton>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+Use `pressed` and `onPressedChange` properties to control the state of the ToggleButton.
+
+```tsx
+'use client';
+import type { ToggleButtonRootChangeEvent } from 'primereact/togglebutton';
+import { ToggleButton } from '@/components/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
+                pressed={pressedState}
+                onPressedChange={(e: ToggleButtonRootChangeEvent) => setPressedState(e.pressed)}
+                className="min-w-32"
+            >
+                {pressedState ? 'Pressed' : 'Not Pressed'}
+            </ToggleButton>
+        </div>
+    );
+}
+```
+
+### Size
+
+`ToggleButton` provides small and large sizes as alternatives to the base by using the `size` property.
+
+```tsx
+import { ToggleButton } from '@/components/ui/togglebutton';
+
+export default function SizesDemo() {
+    return (
+        <div className="flex flex-col gap-2 items-center justify-center">
+            <ToggleButton size="small" className="min-w-16">
+                Small
+            </ToggleButton>
+            <ToggleButton size="normal" className="min-w-20">
+                Normal
+            </ToggleButton>
+            <ToggleButton size="large" className="min-w-28">
+                Large
+            </ToggleButton>
+        </div>
+    );
+}
+```
+
+### Fluid
+
+When `fluid` is enabled, the ToggleButton spans the full width of its parent container.
+
+```tsx
+import { ToggleButton } from '@/components/ui/togglebutton';
+
+export default function FluidDemo() {
+    return <ToggleButton fluid>Toggle</ToggleButton>;
+}
+```
+
+### 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 { ToggleButtonRootChangeEvent } from 'primereact/togglebutton';
+import { ToggleButton } from '@/components/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
+                pressed={pressedState}
+                onPressedChange={(e: ToggleButtonRootChangeEvent) => setPressedState(e.pressed)}
+                invalid={!pressedState}
+            >
+                Invalid
+            </ToggleButton>
+        </div>
+    );
+}
+```
+
+### Disabled
+
+When `disabled` is present, the element cannot be edited and focused.
+
+```tsx
+import { ToggleButton } from '@/components/ui/togglebutton';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <ToggleButton disabled>Disabled</ToggleButton>
+        </div>
+    );
+}
+```