@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,449 @@
+# Tooltip
+
+Tooltip is a component that displays a tooltip when the user hovers over an element.
+
+```tsx
+'use client';
+import { ChevronRight, QuestionCircle } from '@primeicons/react';
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function Preview() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-2">
+            <TooltipManager>
+                <div className="flex justify-center w-fit  text-sm font-medium border border-surface rounded-lg h-8 divide-x divide-(--p-content-border-color) [&>*:first-child]:rounded-l-lg [&>*:last-child]:rounded-r-lg">
+                    <Tooltip>
+                        <TooltipTrigger className="px-2.5 flex items-center justify-center cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-900">
+                            IST <ChevronRight className="size-3 mx-1 opacity-50" /> LHR
+                        </TooltipTrigger>
+                        <TooltipPortal>
+                            <TooltipPositioner sideOffset={8}>
+                                <TooltipPopup className="flex gap-1">
+                                    <TooltipArrow />
+                                    Turkish Airlines{' '}
+                                    <span className="-mr-1 flex items-center justify-center leading-none px-1.5 rounded-sm bg-green-600 text-green-50 text-xs font-medium font-mono">
+                                        ON TIME
+                                    </span>
+                                </TooltipPopup>
+                            </TooltipPositioner>
+                        </TooltipPortal>
+                    </Tooltip>
+
+                    <Tooltip>
+                        <TooltipTrigger className="px-2.5 flex items-center justify-center cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-900">
+                            IST <ChevronRight className="size-3 mx-1 opacity-50" /> CDG
+                        </TooltipTrigger>
+                        <TooltipPortal>
+                            <TooltipPositioner sideOffset={8}>
+                                <TooltipPopup className="flex gap-1">
+                                    <TooltipArrow />
+                                    Lufthansa{' '}
+                                    <span className="-mr-1 flex items-center justify-center leading-none px-1.5 rounded-sm bg-sky-600 text-sky-50 text-xs font-medium font-mono">
+                                        DELAYED
+                                    </span>
+                                </TooltipPopup>
+                            </TooltipPositioner>
+                        </TooltipPortal>
+                    </Tooltip>
+
+                    <Tooltip>
+                        <TooltipTrigger className="px-2.5 flex items-center justify-center  cursor-pointer hover:bg-surface-50 dark:hover:bg-surface-900">
+                            IST <ChevronRight className="size-3 mx-1 opacity-50" /> FRA
+                        </TooltipTrigger>
+                        <TooltipPortal>
+                            <TooltipPositioner sideOffset={8}>
+                                <TooltipPopup className="flex gap-1">
+                                    <TooltipArrow />
+                                    Qatar Airways{' '}
+                                    <span className="-mr-1 flex items-center justify-center leading-none tracking-tighter px-1.5 rounded-sm bg-amber-600 text-amber-50 text-xs font-medium font-mono">
+                                        BOARDING
+                                    </span>
+                                </TooltipPopup>
+                            </TooltipPositioner>
+                        </TooltipPortal>
+                    </Tooltip>
+                </div>
+            </TooltipManager>
+            <TooltipManager>
+                <Tooltip>
+                    <TooltipTrigger className="flex items-center justify-center size-8 rounded-md border border-surface-200 dark:border-surface-800 hover:bg-surface-50 dark:hover:bg-surface-900">
+                        <QuestionCircle />
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipPositioner sideOffset={8}>
+                            <TooltipPopup className="w-56">
+                                <TooltipArrow />
+                                Hover or focus on the flight information to see the status.
+                            </TooltipPopup>
+                        </TooltipPositioner>
+                    </TooltipPortal>
+                </Tooltip>
+            </TooltipManager>
+        </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/tooltip.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/tooltip" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
+```
+
+```tsx
+<TooltipManager>
+    <Tooltip>
+        <TooltipTrigger>Hover me</TooltipTrigger>
+        <TooltipPortal>
+            <TooltipPositioner>
+                <TooltipPopup>
+                    <TooltipArrow />
+                    Tooltip content
+                </TooltipPopup>
+            </TooltipPositioner>
+        </TooltipPortal>
+    </Tooltip>
+</TooltipManager>
+```
+
+## Examples
+
+### Basic
+
+Shows additional context for an element on hover.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <TooltipManager>
+                <Tooltip>
+                    <TooltipTrigger as={Button} variant="outlined" severity="secondary">
+                        Hover me
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipPositioner sideOffset={8}>
+                            <TooltipPopup className="w-60 p-2.5">
+                                <div className="font-semibold text-sm">Quick Tip</div>
+                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
+                            </TooltipPopup>
+                        </TooltipPositioner>
+                    </TooltipPortal>
+                </Tooltip>
+            </TooltipManager>
+        </div>
+    );
+}
+```
+
+### Arrow
+
+Use `TooltipArrow` to display an arrow on the tooltip.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function ArrowDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <TooltipManager>
+                <Tooltip>
+                    <TooltipTrigger as={Button} variant="outlined" severity="secondary">
+                        Hover me
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipPositioner sideOffset={8}>
+                            <TooltipPopup className="w-60 p-2.5">
+                                <TooltipArrow />
+                                <div className="font-semibold text-sm">Quick Tip</div>
+                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
+                            </TooltipPopup>
+                        </TooltipPositioner>
+                    </TooltipPortal>
+                </Tooltip>
+            </TooltipManager>
+        </div>
+    );
+}
+```
+
+### Placement
+
+Use `side` and `align` to control the placement of the tooltip.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
+
+const placements = [
+    { side: 'top', align: 'start' },
+    { side: 'top', align: 'center' },
+    { side: 'top', align: 'end' },
+    { side: 'right', align: 'start' },
+    { side: 'right', align: 'center' },
+    { side: 'right', align: 'end' },
+    { side: 'bottom', align: 'start' },
+    { side: 'bottom', align: 'center' },
+    { side: 'bottom', align: 'end' },
+    { side: 'left', align: 'start' },
+    { side: 'left', align: 'center' },
+    { side: 'left', align: 'end' }
+] as const;
+
+export default function PlacementDemo() {
+    return (
+        <div className="grid grid-cols-3 items-center w-fit mx-auto justify-center gap-4">
+            <TooltipManager>
+                {placements.map((placement, index) => (
+                    <Tooltip key={index}>
+                        <TooltipTrigger as={Button} variant="outlined" severity="secondary">
+                            {placement.side} - {placement.align}
+                        </TooltipTrigger>
+                        <TooltipPortal>
+                            <TooltipPositioner side={placement.side} align={placement.align} sideOffset={8}>
+                                <TooltipPopup className="w-60 p-2.5">
+                                    <TooltipArrow />
+                                    <div className="font-semibold text-sm">Quick Tip</div>
+                                    <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
+                                </TooltipPopup>
+                            </TooltipPositioner>
+                        </TooltipPortal>
+                    </Tooltip>
+                ))}
+            </TooltipManager>
+        </div>
+    );
+}
+```
+
+### Offset
+
+Use `sideOffset` and `alignOffset` to control the offset of the tooltip.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function OffsetDemo() {
+    return (
+        <div className="flex items-center justify-center gap-4">
+            <TooltipManager>
+                <Tooltip>
+                    <TooltipTrigger as={Button} variant="outlined" severity="secondary">
+                        Side Offset
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipPositioner sideOffset={24}>
+                            <TooltipPopup className="w-60 p-2.5">
+                                <TooltipArrow />
+                                <div className="font-semibold text-sm">Quick Tip</div>
+                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
+                            </TooltipPopup>
+                        </TooltipPositioner>
+                    </TooltipPortal>
+                </Tooltip>
+            </TooltipManager>
+            <TooltipManager>
+                <Tooltip>
+                    <TooltipTrigger as={Button} variant="outlined" severity="secondary">
+                        Align Offset
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipPositioner sideOffset={8} align="start" alignOffset={24}>
+                            <TooltipPopup className="w-60 p-2.5">
+                                <TooltipArrow />
+                                <div className="font-semibold text-sm">Quick Tip</div>
+                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
+                            </TooltipPopup>
+                        </TooltipPositioner>
+                    </TooltipPortal>
+                </Tooltip>
+            </TooltipManager>
+        </div>
+    );
+}
+```
+
+### Delay
+
+Use `openDelay` and `closeDelay` to control tooltip timing. For `TooltipManager`, use `timeout` to control delay when moving between adjacent tooltips.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function DelayDemo() {
+    return (
+        <div className="flex items-center justify-center gap-4">
+            <TooltipManager>
+                <Tooltip openDelay={500} closeDelay={1000}>
+                    <TooltipTrigger as={Button} variant="outlined" severity="secondary">
+                        500ms Open / 1000ms Close
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipPositioner sideOffset={8}>
+                            <TooltipPopup className="w-60 p-2.5">
+                                <TooltipArrow />
+                                <div className="font-semibold text-sm">Quick Tip</div>
+                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
+                            </TooltipPopup>
+                        </TooltipPositioner>
+                    </TooltipPortal>
+                </Tooltip>
+            </TooltipManager>
+            <TooltipManager openDelay={1000} closeDelay={500}>
+                <Tooltip>
+                    <TooltipTrigger as={Button} variant="outlined" severity="secondary">
+                        1000ms Open / 500ms Close
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipPositioner sideOffset={8}>
+                            <TooltipPopup className="w-60 p-2.5">
+                                <TooltipArrow />
+                                <div className="font-semibold text-sm">Quick Tip</div>
+                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
+                            </TooltipPopup>
+                        </TooltipPositioner>
+                    </TooltipPortal>
+                </Tooltip>
+            </TooltipManager>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+Use `open` and `onOpenChange` to control the tooltip programmatically.
+
+```tsx
+'use client';
+import { TooltipRootChangeEvent } from 'primereact/tooltip';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from '@/components/ui/tooltip';
+import * as React from 'react';
+
+export default function ControlledDemo() {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+        <div className="flex items-center justify-center gap-4">
+            <TooltipManager>
+                <Tooltip open={open} onOpenChange={(e: TooltipRootChangeEvent) => setOpen(e.value || false)}>
+                    <TooltipTrigger as={Button} variant="outlined" severity="secondary">
+                        Tooltip is {open ? 'open' : 'close'}
+                    </TooltipTrigger>
+                    <TooltipPortal>
+                        <TooltipPositioner sideOffset={8}>
+                            <TooltipPopup className="w-60 p-2.5">
+                                <TooltipArrow />
+                                <div className="font-semibold text-sm">Quick Tip</div>
+                                <div className="opacity-75 text-sm mt-1">You can use tooltips to display helpful information on hover.</div>
+                            </TooltipPopup>
+                        </TooltipPositioner>
+                    </TooltipPortal>
+                </Tooltip>
+            </TooltipManager>
+        </div>
+    );
+}
+```
+
+### With ToggleButton
+
+Tooltip can be combined with ToggleButton components to show contextual labels for grouped actions.
+
+```tsx
+'use client';
+import { ToggleButton } from '@/components/ui/togglebutton';
+import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
+import { Tooltip, TooltipArrow, TooltipManager, TooltipPopup, TooltipPortal, TooltipPositioner } from '@/components/ui/tooltip';
+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 { useTooltipContext } from 'primereact/tooltip';
+
+function TooltipToggleButton({ value, children }: { value: string; children: React.ReactNode }) {
+    const tooltip = useTooltipContext();
+
+    return (
+        <ToggleButton value={value} pt={{ root: tooltip?.triggerProps }}>
+            {children}
+        </ToggleButton>
+    );
+}
+
+const items = [
+    { value: 'left', label: 'Align left', icon: <AlignLeft /> },
+    { value: 'center', label: 'Align center', icon: <AlignCenter /> },
+    { value: 'right', label: 'Align right', icon: <AlignRight /> },
+    { value: 'justify', label: 'Align justify', icon: <AlignJustify /> }
+];
+
+export default function WithToggleButtonDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <TooltipManager>
+                <ToggleButtonGroup allowEmpty={false} defaultValue="left">
+                    {items.map((item) => (
+                        <Tooltip key={item.value}>
+                            <TooltipToggleButton value={item.value}>{item.icon}</TooltipToggleButton>
+                            <TooltipPortal>
+                                <TooltipPositioner sideOffset={8}>
+                                    <TooltipPopup className="px-2.5 py-1.5">
+                                        <TooltipArrow />
+                                        <div className="text-sm font-medium">{item.label}</div>
+                                    </TooltipPopup>
+                                </TooltipPositioner>
+                            </TooltipPortal>
+                        </Tooltip>
+                    ))}
+                </ToggleButtonGroup>
+            </TooltipManager>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/tooltip#api) for `TooltipManager`, `TooltipRoot`, `TooltipTrigger`, `TooltipPortal`, `TooltipPositioner`, `TooltipPopup`, `TooltipArrow` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/tooltip#api) for `useTooltip`, `useTooltipManager` hook documentation.
+
+### Accessibility
+
+See [Tooltip Primitive](/docs/primitive/components/tooltip#accessibility) for WAI-ARIA compliance details and keyboard support.

package/data/llms/tailwind/guides/ai/llms.md

@@ -0,0 +1,25 @@
+# LLMs.txt
+
+LLMs.txt is a file that contains the LLMs for the PrimeReact documentation.
+
+## /llms.txt
+
+The [llms.txt](https://llmstxt.org/) file is an industry standard that helps AI models better understand and navigate the PrimeReact documentation. It lists key pages in a structured format, making it easier for LLMs to retrieve relevant information.
+
+<Button as="a" href="/llms.txt" target="_blank">Open llms.txt</Button>
+
+&nbsp;
+
+## /llms-full.txt
+
+The `llms-full.txt` file is a complete list of all the pages in the PrimeReact documentation. It is used to help AI models understand the entire documentation set.
+
+<Button as="a" href="/llms-full.txt" target="_blank">Open llms-full.txt</Button>
+
+&nbsp;
+
+## .md extension
+
+Add a `.md` to a page’s URL to display a Markdown version of that page.
+
+<Button as="a" href="/docs/overview/llms.md" target="_blank">Open /docs/overview/llms.md</Button>

package/data/llms/tailwind/guides/icons/customicons.md

@@ -0,0 +1,47 @@
+# Custom Icons
+
+PrimeReact components can be used with any icon library using the templating features.
+
+## Material
+
+[Material icons](https://fonts.google.com/icons) is the official icon library based on Google Material Design.
+
+```tsx
+<Button>
+    <span className="material-icons">arrow_drop_down</span>
+</Button>
+```
+
+## FontAwesome
+
+[Font Awesome](https://fontawesome.com/) is a popular icon library with a wide range of icons.
+
+```tsx
+<Button>
+    <i className="fa-light fa-chevron-down"></i>
+</Button>
+```
+
+## SVG
+
+Inline SVGs are embedded inside the dom.
+
+```tsx
+<Button>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g id="chevron-down">
+            <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z" />
+        </g>
+    </svg>
+</Button>
+```
+
+## Image
+
+Any type of image can be used as an icon.
+
+```tsx
+<Button>
+    <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
+</Button>
+```

package/data/llms/tailwind/guides/icons/primeicons.md

@@ -0,0 +1,112 @@
+# Prime Icons
+
+PrimeIcons is the default icon library of PrimeReact with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeReact components can use any icon with templating.
+
+<DocNotification>
+    Browse all 250+ icons on <a href="https://primeicons.dev" target="_blank" rel="noopener noreferrer">primeicons.dev</a>.
+</DocNotification>
+
+## Download
+
+`@primeicons/react` is available on npm. Each icon is a standalone React component, so only the icons you import are included in your bundle.
+
+```bash
+npm install @primeicons/react
+```
+
+## Import
+
+Import icons individually from their own entry point.
+
+```tsx
+import { Check } from '@primeicons/react/check';
+import { Search } from '@primeicons/react/search';
+```
+
+## Figma
+
+PrimeIcons library is now available on [Figma Community](https://www.figma.com/community/file/1354343849355792252/primeicons). By adding them as a library, you can easily use these icons in your designs.
+
+## Basic
+
+Each icon is an SVG React component. Import and render it directly — no additional configuration needed.
+
+```tsx
+import { Check } from '@primeicons/react/check';
+import { Search } from '@primeicons/react/search';
+import { Times } from '@primeicons/react/times';
+import { User } from '@primeicons/react/user';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex justify-center gap-4">
+            <Check />
+            <Times />
+            <Search />
+            <User />
+        </div>
+    );
+}
+```
+
+## Size
+
+Icon size is controlled with the `size` prop, which sets both the width and height in pixels.
+
+```tsx
+import { Check } from '@primeicons/react/check';
+import { Search } from '@primeicons/react/search';
+import { Times } from '@primeicons/react/times';
+import { User } from '@primeicons/react/user';
+
+export default function SizeDemo() {
+    return (
+        <div className="flex justify-center items-center gap-4">
+            <Check size={16} />
+            <Times size={24} />
+            <Search size={32} />
+            <User size={40} />
+        </div>
+    );
+}
+```
+
+## Color
+
+Icon color is set with the `color` prop and is inherited from the parent element by default.
+
+```tsx
+import { Check } from '@primeicons/react/check';
+import { Search } from '@primeicons/react/search';
+import { Times } from '@primeicons/react/times';
+import { User } from '@primeicons/react/user';
+
+export default function ColorDemo() {
+    return (
+        <div className="flex justify-center items-center gap-4">
+            <Check color="#22c55e" />
+            <Times color="#ef4444" />
+            <Search color="#3b82f6" />
+            <User color="#a855f7" />
+        </div>
+    );
+}
+```
+
+## Spin
+
+Use a spin animation utility like `animate-spin` from Tailwind apply rotation.
+
+```tsx
+import { Cog } from '@primeicons/react/cog';
+import { Spinner } from '@primeicons/react/spinner';
+
+export default function SpinDemo() {
+    return (
+        <div className="flex justify-center gap-4">
+            <Spinner className="animate-spin" size={32} />
+            <Cog className="animate-spin" size={32} />
+        </div>
+    );
+}
+```