@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,326 @@
+# Fieldset
+
+Fieldset is a container component with a legend and optional collapsible content.
+
+```tsx
+import { Fieldset, FieldsetContent, FieldsetLegend, FieldsetTitle } from '@/components/ui/fieldset';
+
+export default function Preview() {
+    return (
+        <Fieldset className="max-w-xs mx-auto">
+            <FieldsetLegend>
+                <FieldsetTitle>Shipping Address</FieldsetTitle>
+            </FieldsetLegend>
+            <FieldsetContent>
+                <div className="flex flex-col gap-6 text-sm p-2">
+                    <div className="flex gap-8">
+                        <div>
+                            <div className="text-color font-medium">Name</div>
+                            <div className="text-muted-color">Jane Cooper</div>
+                        </div>
+                        <div>
+                            <div className="text-color font-medium">Phone</div>
+                            <div className="text-muted-color">(415) 555-0132</div>
+                        </div>
+                    </div>
+                    <div>
+                        <div className="text-color font-medium">Address</div>
+                        <div className="text-muted-color">1234 Elm Street, Apt 5B</div>
+                        <div className="text-muted-color">San Francisco, CA 94102</div>
+                    </div>
+                </div>
+            </FieldsetContent>
+        </Fieldset>
+    );
+}
+```
+
+## 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/fieldset.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/fieldset" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Fieldset, FieldsetContent, FieldsetLegend, FieldsetTitle } from '@/components/ui/fieldset';
+```
+
+```tsx
+<Fieldset>
+    <FieldsetLegend>
+        <FieldsetTitle>Legend</FieldsetTitle>
+    </FieldsetLegend>
+    <FieldsetContent />
+</Fieldset>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Divider } from '@/components/ui/divider';
+import { Fieldset, FieldsetContent, FieldsetLegend, FieldsetTitle } from '@/components/ui/fieldset';
+
+export default function BasicDemo() {
+    return (
+        <Fieldset className="max-w-xs mx-auto">
+            <FieldsetLegend>
+                <FieldsetTitle>Invoice #1024</FieldsetTitle>
+            </FieldsetLegend>
+            <FieldsetContent>
+                <div className="flex flex-col text-sm p-2">
+                    <div className="flex justify-between">
+                        <span className="text-color">Design Service</span>
+                        <span className="text-muted-color">$120.00</span>
+                    </div>
+                    <div className="flex justify-between mt-3">
+                        <span className="text-color">Hosting</span>
+                        <span className="text-muted-color">$30.00</span>
+                    </div>
+                    <Divider />
+                    <div className="flex justify-between">
+                        <span className="text-color font-medium">Total</span>
+                        <span className="text-color font-medium">$150.00</span>
+                    </div>
+                </div>
+            </FieldsetContent>
+        </Fieldset>
+    );
+}
+```
+
+### Toggleable
+
+Use `Fieldset.Trigger` inside the legend to make the fieldset collapsible. The `defaultOpen` prop sets the initial state, and content visibility is animated by default.
+
+```tsx
+'use client';
+import { Minus, Plus } from '@primeicons/react';
+import { Divider } from '@/components/ui/divider';
+import { Fieldset, FieldsetContent, FieldsetIndicator, FieldsetLegend, FieldsetTitle, FieldsetTrigger } from '@/components/ui/fieldset';
+
+export default function ToggleableDemo() {
+    return (
+        <Fieldset defaultOpen className="max-w-xs mx-auto">
+            <FieldsetLegend>
+                <FieldsetTrigger className="flex items-center gap-2">
+                    <FieldsetIndicator match="open">
+                        <Minus />
+                    </FieldsetIndicator>
+                    <FieldsetIndicator match="closed">
+                        <Plus />
+                    </FieldsetIndicator>
+                    <FieldsetTitle>Invoice #1024</FieldsetTitle>
+                </FieldsetTrigger>
+            </FieldsetLegend>
+            <FieldsetContent>
+                <div className="flex flex-col text-sm p-2">
+                    <div className="flex justify-between">
+                        <span className="text-color">Design Service</span>
+                        <span className="text-muted-color">$120.00</span>
+                    </div>
+                    <div className="flex justify-between mt-3">
+                        <span className="text-color">Hosting</span>
+                        <span className="text-muted-color">$30.00</span>
+                    </div>
+                    <Divider />
+                    <div className="flex justify-between">
+                        <span className="text-color font-medium">Total</span>
+                        <span className="text-color font-medium">$150.00</span>
+                    </div>
+                </div>
+            </FieldsetContent>
+        </Fieldset>
+    );
+}
+```
+
+### Controlled
+
+Control fieldset state from outside with the `open` and `onOpenChange` props.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { Divider } from '@/components/ui/divider';
+import { Fieldset, FieldsetContent, FieldsetIndicator, FieldsetLegend, FieldsetTitle, FieldsetTrigger } from '@/components/ui/fieldset';
+import { Minus, Plus } from '@primeicons/react';
+import type { FieldsetRootOpenChangeEvent } from 'primereact/fieldset';
+import { useState } from 'react';
+
+export default function ControlledToggleableDemo() {
+    const [open, setOpen] = useState(true);
+
+    return (
+        <div className="space-y-4 max-w-xs mx-auto">
+            <div className="flex gap-2 justify-center">
+                <Button onClick={() => setOpen(true)} severity={open ? undefined : 'secondary'}>
+                    Open
+                </Button>
+                <Button onClick={() => setOpen(false)} severity={!open ? undefined : 'secondary'}>
+                    Close
+                </Button>
+            </div>
+            <Fieldset open={open} onOpenChange={(e: FieldsetRootOpenChangeEvent) => setOpen(e.value ?? false)}>
+                <FieldsetLegend>
+                    <FieldsetTrigger className="flex items-center gap-2">
+                        <FieldsetIndicator match="open">
+                            <Minus />
+                        </FieldsetIndicator>
+                        <FieldsetIndicator match="closed">
+                            <Plus />
+                        </FieldsetIndicator>
+                        <FieldsetTitle>Invoice #1024</FieldsetTitle>
+                    </FieldsetTrigger>
+                </FieldsetLegend>
+                <FieldsetContent>
+                    <div className="flex flex-col text-sm p-2">
+                        <div className="flex justify-between">
+                            <span className="text-color">Design Service</span>
+                            <span className="text-muted-color">$120.00</span>
+                        </div>
+                        <div className="flex justify-between mt-3">
+                            <span className="text-color">Hosting</span>
+                            <span className="text-muted-color">$30.00</span>
+                        </div>
+                        <Divider />
+                        <div className="flex justify-between">
+                            <span className="text-color font-medium">Total</span>
+                            <span className="text-color font-medium">$150.00</span>
+                        </div>
+                    </div>
+                </FieldsetContent>
+            </Fieldset>
+        </div>
+    );
+}
+```
+
+### Indicator
+
+`Fieldset.Indicator` supports conditional rendering based on fieldset state. Use the `match` prop to render content only when the state matches.
+
+```tsx
+<Fieldset.Legend>
+    <Fieldset.Trigger>
+        <Fieldset.Title>Header</Fieldset.Title>
+        <Fieldset.Indicator match="open">
+            <Minus />
+        </Fieldset.Indicator>
+        <Fieldset.Indicator match="closed">
+            <Plus />
+        </Fieldset.Indicator>
+    </Fieldset.Trigger>
+</Fieldset.Legend>
+```
+
+Available values: `open`, `closed`. Without the `match` prop, the indicator renders in all states.
+
+```tsx
+'use client';
+import { ChevronDown, Minus, Plus } from '@primeicons/react';
+import { Divider } from '@/components/ui/divider';
+import { Fieldset, FieldsetContent, FieldsetIndicator, FieldsetLegend, FieldsetTitle, FieldsetTrigger } from '@/components/ui/fieldset';
+
+export default function IndicatorDemo() {
+    return (
+        <div className="flex flex-col gap-8 max-w-xs mx-auto">
+            <div>
+                <h3 className="text-sm font-medium text-surface-500 mb-2">Match open / closed</h3>
+                <Fieldset defaultOpen>
+                    <FieldsetLegend>
+                        <FieldsetTrigger className="flex items-center gap-2">
+                            <FieldsetIndicator match="open">
+                                <Minus />
+                            </FieldsetIndicator>
+                            <FieldsetIndicator match="closed">
+                                <Plus />
+                            </FieldsetIndicator>
+                            <FieldsetTitle>Invoice #1024</FieldsetTitle>
+                        </FieldsetTrigger>
+                    </FieldsetLegend>
+                    <FieldsetContent>
+                        <div className="flex flex-col text-sm p-2">
+                            <div className="flex justify-between">
+                                <span className="text-color">Design Service</span>
+                                <span className="text-muted-color">$120.00</span>
+                            </div>
+                            <div className="flex justify-between mt-3">
+                                <span className="text-color">Hosting</span>
+                                <span className="text-muted-color">$30.00</span>
+                            </div>
+                            <Divider />
+                            <div className="flex justify-between">
+                                <span className="text-color font-medium">Total</span>
+                                <span className="text-color font-medium">$150.00</span>
+                            </div>
+                        </div>
+                    </FieldsetContent>
+                </Fieldset>
+            </div>
+
+            <div>
+                <h3 className="text-sm font-medium text-surface-500 mb-2">CSS-only with data attributes</h3>
+                <Fieldset defaultOpen>
+                    <FieldsetLegend>
+                        <FieldsetTrigger className="flex items-center gap-2">
+                            <FieldsetIndicator>
+                                <ChevronDown className="transition-transform duration-200 in-data-open:rotate-180" />
+                            </FieldsetIndicator>
+                            <FieldsetTitle>Invoice #1024</FieldsetTitle>
+                        </FieldsetTrigger>
+                    </FieldsetLegend>
+                    <FieldsetContent>
+                        <div className="flex flex-col text-sm p-2">
+                            <div className="flex justify-between">
+                                <span className="text-color">Design Service</span>
+                                <span className="text-muted-color">$120.00</span>
+                            </div>
+                            <div className="flex justify-between mt-3">
+                                <span className="text-color">Hosting</span>
+                                <span className="text-muted-color">$30.00</span>
+                            </div>
+                            <Divider />
+                            <div className="flex justify-between">
+                                <span className="text-color font-medium">Total</span>
+                                <span className="text-color font-medium">$150.00</span>
+                            </div>
+                        </div>
+                    </FieldsetContent>
+                </Fieldset>
+            </div>
+        </div>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+Fieldset uses the semantic `fieldset` element. For toggleable usage, the trigger button uses `aria-controls` to reference the content region and `aria-expanded` to reflect visibility state.
+
+### Keyboard Support
+
+| Key           | Function                                                                |
+| ------------- | ----------------------------------------------------------------------- |
+| `tab`         | Moves focus to the next focusable element in the page tab sequence.     |
+| `shift + tab` | Moves focus to the previous focusable element in the page tab sequence. |
+| `enter`       | Toggles the visibility of the content.                                  |
+| `space`       | Toggles the visibility of the content.                                  |

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

@@ -0,0 +1,117 @@
+# Fluid
+
+Fluid is a layout component to make descendant components span full width of their container.
+
+```tsx
+import { Fluid } from '@/components/ui/fluid';
+import { InputText } from '@/components/ui/inputtext';
+import { Label } from '@/components/ui/label';
+
+export default function Preview() {
+    return (
+        <div>
+            <Fluid>
+                <Label htmlFor="tw-with-fluid" className="font-bold mb-2 block">
+                    With Fluid
+                </Label>
+                <InputText id="tw-with-fluid" placeholder="Type..." />
+            </Fluid>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Fluid } from '@/components/ui/fluid';
+```
+
+```tsx
+<Fluid></Fluid>
+```
+
+## Examples
+
+### Basic
+
+Stretches form components to fill the available container width.
+
+```tsx
+import { Fluid } from '@/components/ui/fluid';
+import { InputText } from '@/components/ui/inputtext';
+import { Label } from '@/components/ui/label';
+
+export default function BasicDemo() {
+    return (
+        <div>
+            <Fluid>
+                <Label htmlFor="with-fluid" className="font-bold mb-2 block">
+                    With Fluid
+                </Label>
+                <InputText id="with-fluid" placeholder="Type..." />
+            </Fluid>
+        </div>
+    );
+}
+```
+
+### Comparison
+
+Components with the _fluid_ option like _InputText_ have the ability to span the full width of their component. Enabling _fluid_ on each component individually may be cumbersome, so wrapping content with _Fluid_ is an easier alternative.
+
+Any component that has the _fluid_ property can be nested inside the _Fluid_ component. The fluid property of a child component has higher precedence than the _fluid_ container as shown in the last sample.
+
+```tsx
+import { Fluid } from '@/components/ui/fluid';
+import { InputText } from '@/components/ui/inputtext';
+import { Label } from '@/components/ui/label';
+
+export default function ComparisionDemo() {
+    return (
+        <div className="flex flex-col gap-6">
+            <div>
+                <Label htmlFor="non-fluid" className="font-bold mb-2 block">
+                    Non-Fluid
+                </Label>
+                <InputText id="non-fluid" />
+            </div>
+
+            <div>
+                <Label htmlFor="fluid" className="font-bold mb-2 block">
+                    Fluid Prop
+                </Label>
+                <InputText id="fluid" fluid />
+            </div>
+
+            <Fluid>
+                <span className="font-bold mb-2 block">Fluid Container</span>
+                <div className="grid grid-cols-2 gap-4">
+                    <div>
+                        <InputText />
+                    </div>
+                    <div>
+                        <InputText />
+                    </div>
+                    <div className="col-span-full">
+                        <InputText />
+                    </div>
+                    <div>
+                        <InputText fluid={false} placeholder="Non-Fluid" />
+                    </div>
+                </div>
+            </Fluid>
+        </div>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+Fluid does not require any roles and attributes.
+
+### Keyboard Support
+
+Component does not include any interactive elements.

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

@@ -0,0 +1,197 @@
+# IconField
+
+IconField wraps an input and an icon.
+
+```tsx
+import { CreditCard, Eye, Lock, Search, Spinner, Times } from '@primeicons/react';
+import { IconField, IconFieldInset } from '@/components/ui/iconfield';
+import { InputText } from '@/components/ui/inputtext';
+import { InputPassword } from '@/components/ui/inputpassword';
+
+export default function Preview() {
+    return (
+        <div className="flex flex-col gap-4 max-w-3xs w-full mx-auto">
+            <IconField>
+                <IconFieldInset>
+                    <Search />
+                </IconFieldInset>
+                <InputText fluid placeholder="Search for everything" />
+                <IconFieldInset>
+                    <kbd className="text-xs font-medium leading-none!">⌘+K</kbd>
+                </IconFieldInset>
+            </IconField>
+            <IconField>
+                <InputText fluid variant="filled" placeholder="Processing..." />
+                <IconFieldInset>
+                    <Spinner className="animate-spin" />
+                </IconFieldInset>
+            </IconField>
+            <IconField>
+                <IconFieldInset>
+                    <CreditCard />
+                </IconFieldInset>
+                <InputText fluid defaultValue="4352" />
+                <IconFieldInset>
+                    <Times />
+                </IconFieldInset>
+            </IconField>
+            <IconField>
+                <IconFieldInset>
+                    <img
+                        alt="US"
+                        src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
+                        className="flag flag-us"
+                        style={{ width: '20px', height: '13.5px' }}
+                    />
+                </IconFieldInset>
+                <InputText fluid placeholder="+1 (___) ___-____" />
+            </IconField>
+            <IconField>
+                <IconFieldInset>
+                    <Lock />
+                </IconFieldInset>
+                <InputPassword variant="filled" fluid defaultValue="12345678" placeholder="Enter your password" />
+                <IconFieldInset>
+                    <Eye />
+                </IconFieldInset>
+            </IconField>
+        </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/iconfield.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/iconfield" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { IconField, IconFieldInset } from '@/components/ui/iconfield';
+```
+
+```tsx
+<IconField>
+    <IconFieldInset />
+</IconField>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Search, Spinner } from '@primeicons/react';
+import { IconField, IconFieldInset } from '@/components/ui/iconfield';
+import { InputText } from '@/components/ui/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex flex-wrap justify-center gap-4">
+            <IconField>
+                <IconFieldInset>
+                    <Search />
+                </IconFieldInset>
+                <InputText placeholder="Search" />
+            </IconField>
+            <IconField>
+                <InputText variant="filled" />
+                <IconFieldInset>
+                    <Spinner className="animate-spin" />
+                </IconFieldInset>
+            </IconField>
+        </div>
+    );
+}
+```
+
+### Clickable
+
+```tsx
+'use client';
+import { Search, Times } from '@primeicons/react';
+import { IconField, IconFieldInset } from '@/components/ui/iconfield';
+import { InputText } from '@/components/ui/inputtext';
+import * as React from 'react';
+
+export default function ClickableDemo() {
+    const [value, setValue] = React.useState('PrimeReact');
+
+    return (
+        <div className="flex flex-wrap justify-center gap-4">
+            <IconField>
+                <IconFieldInset>
+                    <Search />
+                </IconFieldInset>
+                <InputText value={value} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)} placeholder="Search" />
+                <IconFieldInset>
+                    <Times className="cursor-pointer" onClick={() => setValue('')} />
+                </IconFieldInset>
+            </IconField>
+        </div>
+    );
+}
+```
+
+### Sizes
+
+```tsx
+import { Lock, Search, Spinner, User } from '@primeicons/react';
+import { IconField, IconFieldInset } from '@/components/ui/iconfield';
+import { InputText } from '@/components/ui/inputtext';
+
+export default function SizesDemo() {
+    return (
+        <div className="flex flex-col items-center gap-4">
+            <IconField>
+                <IconFieldInset>
+                    <Search />
+                </IconFieldInset>
+                <InputText placeholder="Small" size="small" />
+            </IconField>
+
+            <IconField>
+                <InputText placeholder="Normal" />
+                <IconFieldInset>
+                    <User />
+                </IconFieldInset>
+            </IconField>
+
+            <IconField>
+                <IconFieldInset>
+                    <Lock />
+                </IconFieldInset>
+                <InputText placeholder="Large" size="large" />
+                <IconFieldInset>
+                    <Spinner className="animate-spin" />
+                </IconFieldInset>
+            </IconField>
+        </div>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+IconField and IconFieldInset do not require any roles and attributes.
+
+### Keyboard Support
+
+Component does not include any interactive elements.