@primereact/mcp 11.0.0-rc.2

package/data/llms/styled/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/styled/guides/configuration.md

@@ -0,0 +1,151 @@
+# Configuration
+
+Application wide configuration for PrimeReact.
+
+## Provider
+
+Wrap your app with `PrimeReactProvider` in your main file (like `main.tsx` or `App.tsx`). This enables PrimeReact features everywhere in your app:
+
+```tsx showLineNumbers {10, 12}
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import { PrimeReactProvider } from "@primereact/core";
+
+...
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <PrimeReactProvider>
+        <App />
+    </PrimeReactProvider>
+  </StrictMode>,
+)
+
+```
+
+## License
+
+PrimeReact is a commercially licensed library. Provide your license key via the `license` property of the provider to activate it. You can obtain a key from your [PrimeUI](https://primeui.dev/pricing) account.
+
+```tsx showLineNumbers {4}
+import { PrimeReactProvider } from '@primereact/core';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <PrimeReactProvider license="PrimeUI-Commercial-Key...">
+        <App />
+    </PrimeReactProvider>
+);
+```
+
+## Theme
+
+Style mode offers theming based on a design token based architecture. See the [styled mode](/docs/theming/styled) documentation for details such as building your own theme.
+
+```tsx full showLineNumbers {2,5-12,16}
+...
+import Aura from '@primeuix/themes/aura';
+import { PrimeReactProvider } from '@primereact/core';
+
+const theme = {
+    preset: Aura,
+    options: {
+        prefix: 'p',
+        darkModeSelector: 'system',
+        cssLayer: false,
+        cssVariables: true,
+        scoped: false
+    }
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider theme={theme}>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+## Unstyled
+
+Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind and Bootstrap. Visit Unstyled mode documentation for more information.
+
+```tsx showLineNumbers {6}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider unstyled>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+## PassThrough
+
+Defines the shared pass through properties per component type. Visit the [Pass Through Props](/docs/passthrough) documentation for more information.
+
+```tsx showLineNumbers {4-8,12}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+const pt = {
+    slider: {
+        handle: { className: 'bg-primary text-primary-contrast' }
+    }
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider pt={pt}>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+## PassThrough Options
+
+Used to configure the `ptOptions` properties of components. The `mergeSections` defines whether the sections from the main configuration gets added and the `mergeProps` controls whether to override or merge the defined props.
+Defaults are `true` for `mergeSections` and `false` for `mergeProps`.
+
+```tsx showLineNumbers {4-7,11}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+const ptOptions = {
+    mergeSections: true,
+    mergeProps: false
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider ptOptions={ptOptions}>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+## InputVariant
+
+Input fields come in two styles, default is `outlined` with borders around the field whereas `filled` alternative adds a background color to the field.
+Applying `p-variant-filled` to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class.
+Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree,
+to resolve this case set inputVariant to `filled` at PrimeReactProvider as well.
+
+```tsx showLineNumbers {6}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider inputVariant="filled">
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```

package/data/llms/styled/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/styled/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>
+    );
+}
+```

package/data/llms/styled/guides/installation/astro.md

@@ -0,0 +1,97 @@
+# With Astro
+
+Setting up PrimeReact in an Astro project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/astro-quickstart" target="_blank" rel="noopener noreferrer">Astro template</a>, pre-configured with PrimeReact.
+</DocMessage>
+
+## Installation
+
+<DocStepper>
+    <DocStep>
+
+### Install Packages
+
+Install PrimeReact and a theme package using your favorite package manager:
+
+```bash
+npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
+```
+
+    </DocStep>
+    <DocStep>
+
+### PrimeReactProvider
+
+Create a React component that wraps your UI with `PrimeReactProvider`, a theme preset such as Aura, and your [PrimeUI](https://primeui.dev/pricing) license key:
+
+```tsx title="src/components/Providers.tsx" showLineNumbers {1,2,9}
+import { PrimeReactProvider } from '@primereact/core';
+import Aura from '@primeuix/themes/aura';
+import type { ReactNode } from 'react';
+
+const primereact = {
+    theme: {
+        preset: Aura
+    },
+    license: 'PrimeUI-Commercial-Key...'
+};
+
+export default function Providers({ children }: { children: ReactNode }) {
+    return <PrimeReactProvider {...primereact}>{children}</PrimeReactProvider>;
+}
+```
+
+Render it as an island in your `.astro` page with a `client:*` directive so it hydrates on the client:
+
+```astro showLineNumbers {2,3,6-8}
+---
+import Providers from '../components/Providers';
+import VerifyInstallation from '../components/VerifyInstallation';
+---
+
+<Providers client:load>
+    <VerifyInstallation client:load />
+</Providers>
+```
+
+    </DocStep>
+    <DocStep>
+
+### Verify
+
+To verify that PrimeReact is installed correctly, you can create a simple component such as [Button](/button) and render it in your application.
+Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.
+
+```tsx
+import { Button } from '@primereact/ui/button';
+
+export default function VerifyDemo() {
+    return (
+        <div className="flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+```tsx showLineNumbers {1,6}
+import { Button } from '@primereact/ui/button';
+
+export default function VerifyInstallation() {
+    return (
+        <div className="card flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+    </DocStep>
+
+</DocStepper>
+
+## Next Steps
+
+Choose how you want to style your components — [Styled](/docs/styled/guides/theming/styled), [Tailwind](/docs/styled/guides/theming/tailwind), or [Unstyled](/docs/styled/guides/theming/unstyled) — then [browse the components](/docs/styled/components/autocomplete) and import only what you need.

package/data/llms/styled/guides/installation/manual.md

@@ -0,0 +1,3 @@
+# Manual
+
+Setting up PrimeReact manually in any project.

package/data/llms/styled/guides/installation/nextjs.md

@@ -0,0 +1,129 @@
+# With Next.js
+
+Setting up PrimeReact in a Next.js project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/nextjs-quickstart" target="_blank" rel="noopener noreferrer">Next.js template</a>, pre-configured with PrimeReact.
+</DocMessage>
+
+## Installation
+
+<DocStepper>
+    <DocStep>
+
+### Install Packages
+
+Install PrimeReact and a theme package using your favorite package manager:
+
+```bash
+npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
+```
+
+    </DocStep>
+    <DocStep>
+
+### PrimeReactProvider
+
+Create a `prime-ssr-provider.tsx` file in the root of your project and add the following code. The provider configuration requires a `theme` to style the components and a `license` key to activate your commercial license, available from your [PrimeUI](https://primeui.dev/pricing) account:
+
+```tsx title="prime-ssr-provider.tsx" showLineNumbers {2,3,5,26}
+'use client';
+import { PrimeReactProvider, PrimeReactStyleSheet } from '@primereact/core';
+import { useServerInsertedHTML } from 'next/navigation';
+import * as React from 'react';
+import Aura from '@primeuix/themes/aura';
+
+const styledStyleSheet = new PrimeReactStyleSheet();
+
+export default function PrimeSSRProvider({
+    children
+}: Readonly<{
+    children?: React.ReactNode;
+}>) {
+    useServerInsertedHTML(() => {
+        const styleElements = styledStyleSheet.getAllElements();
+
+        styledStyleSheet.clear();
+
+        return <>{styleElements}</>;
+    });
+
+    const primereact = {
+        theme: {
+            preset: Aura
+        },
+        license: 'PrimeUI-Commercial-Key...'
+    };
+
+    return (
+        <PrimeReactProvider {...primereact} stylesheet={styledStyleSheet}>
+            {children}
+        </PrimeReactProvider>
+    );
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add SSRProvider
+
+Import the `PrimeSSRProvider` in your root `layout.tsx` file and wrap your app with it.
+
+```tsx showLineNumbers {2,12}
+...
+import PrimeSSRProvider from './prime-ssr-provider';
+
+export default function RootLayout({
+    children
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    return (
+        <html lang="en">
+            <body>
+                <PrimeSSRProvider>{children}</PrimeSSRProvider>
+            </body>
+        </html>
+    );
+}
+```
+
+    </DocStep>
+    <DocStep>
+     ### Verify
+
+To verify that PrimeReact is installed correctly, you can create a simple component such as <Link href="/button">Button</Link> and render it in your application.
+Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.
+
+```tsx
+import { Button } from '@primereact/ui/button';
+
+export default function VerifyDemo() {
+    return (
+        <div className="flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+```tsx showLineNumbers {1,6}
+import { Button } from '@primereact/ui/button';
+
+export default function VerifyInstallation() {
+    return (
+        <div className="card flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+    </DocStep>
+
+</DocStepper>
+
+## Next Steps
+
+Choose how you want to style your components — [Styled](/docs/styled/guides/theming/styled), [Tailwind](/docs/styled/guides/theming/tailwind), or [Unstyled](/docs/styled/guides/theming/unstyled) — then [browse the components](/docs/styled/components/autocomplete) and import only what you need.

package/data/llms/styled/guides/installation/react-router.md

@@ -0,0 +1,88 @@
+# With React Router
+
+Setting up PrimeReact in a React Router project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/react-router-quickstart" target="_blank" rel="noopener noreferrer">React Router template</a>, pre-configured with PrimeReact.
+</DocMessage>
+
+## Installation
+
+<DocStepper>
+    <DocStep>
+
+### Install Packages
+
+Install PrimeReact and a theme package using your favorite package manager:
+
+```bash
+npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
+```
+
+    </DocStep>
+    <DocStep>
+
+### PrimeReactProvider
+
+Wrap your app with `PrimeReactProvider` in `app/root.tsx` so PrimeReact features are available across every route. Pass a theme preset such as Aura and your [PrimeUI](https://primeui.dev/pricing) license key to enable styling:
+
+```tsx title="app/root.tsx" showLineNumbers {2,3,9}
+import { Outlet } from 'react-router';
+import { PrimeReactProvider } from '@primereact/core';
+import Aura from '@primeuix/themes/aura';
+
+const primereact = {
+    theme: {
+        preset: Aura
+    },
+    license: 'PrimeUI-Commercial-Key...'
+};
+
+export default function App() {
+    return (
+        <PrimeReactProvider {...primereact}>
+            <Outlet />
+        </PrimeReactProvider>
+    );
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Verify
+
+To verify that PrimeReact is installed correctly, you can create a simple component such as [Button](/button) and render it in your application.
+Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.
+
+```tsx
+import { Button } from '@primereact/ui/button';
+
+export default function VerifyDemo() {
+    return (
+        <div className="flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+```tsx showLineNumbers {1,6}
+import { Button } from '@primereact/ui/button';
+
+export default function VerifyInstallation() {
+    return (
+        <div className="card flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+    </DocStep>
+
+</DocStepper>
+
+## Next Steps
+
+Choose how you want to style your components — [Styled](/docs/styled/guides/theming/styled), [Tailwind](/docs/styled/guides/theming/tailwind), or [Unstyled](/docs/styled/guides/theming/unstyled) — then [browse the components](/docs/styled/components/autocomplete) and import only what you need.