@primereact/mcp 11.0.0-rc.2

package/data/llms/styled/components/iftalabel.md

@@ -0,0 +1,158 @@
+# IftaLabel
+
+IftaLabel visually integrates a label with its form element.
+
+```tsx
+import { IftaLabel } from '@primereact/ui/iftalabel';
+import { InputText } from '@primereact/ui/inputtext';
+import { Label } from '@primereact/ui/label';
+
+export default function Preview() {
+    return (
+        <div className="mx-auto flex w-full max-w-3xs flex-col gap-1.5">
+            <IftaLabel>
+                <InputText id="name" fluid defaultValue="Isabella Reyes" />
+                <Label htmlFor="name">Full Name</Label>
+            </IftaLabel>
+            <small className="text-surface-500 opacity-75">The label stays inside the field, above the value</small>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { IftaLabel } from '@primereact/ui/iftalabel';
+```
+
+```tsx
+<IftaLabel></IftaLabel>
+```
+
+## Examples
+
+### Basic
+
+An infield top-aligned label positioned inside the input boundary.
+
+```tsx
+import { IftaLabel } from '@primereact/ui/iftalabel';
+import { InputText } from '@primereact/ui/inputtext';
+import { Label } from '@primereact/ui/label';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex flex-wrap justify-center">
+            <IftaLabel>
+                <InputText id="username" />
+                <Label htmlFor="username">Username</Label>
+            </IftaLabel>
+        </div>
+    );
+}
+```
+
+### Invalid
+
+When the form element is invalid, the label is also highlighted.
+
+```tsx
+'use client';
+import { IftaLabel } from '@primereact/ui/iftalabel';
+import { InputText } from '@primereact/ui/inputtext';
+import { Label } from '@primereact/ui/label';
+import * as React from 'react';
+
+export default function InvalidDemo() {
+    const [value, setValue] = React.useState('');
+
+    return (
+        <div className="flex flex-wrap justify-center">
+            <IftaLabel>
+                <InputText
+                    id="invalid"
+                    value={value}
+                    onInput={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}
+                    invalid={!value}
+                />
+                <Label htmlFor="invalid">Username</Label>
+            </IftaLabel>
+        </div>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+IftaLabel does not require any roles and attributes.
+
+### Keyboard Support
+
+Component does not include any interactive elements.
+
+
+# IftaLabel API
+
+API documentation for IftaLabel component
+
+## IftaLabel
+
+### Props
+
+<DocTable name="IftaLabel" category="api" type="props" />
+
+### State
+
+<DocTable name="IftaLabel" category="api" type="state" />
+
+### Exposes
+
+<DocTable name="IftaLabel" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="IftaLabel" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="IftaLabel" category="api" type="types" />
+
+## useIftaLabel
+
+### Props
+
+<DocTable name="useIftaLabel" category="api" type="props" />
+
+### State
+
+<DocTable name="useIftaLabel" category="api" type="state" />
+
+### Exposes
+
+<DocTable name="useIftaLabel" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="useIftaLabel" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="useIftaLabel" category="api" type="types" />
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="IftaLabel" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="IftaLabel" category="token" />

package/data/llms/styled/components/inplace.md

@@ -0,0 +1,312 @@
+# Inplace
+
+Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
+
+```tsx
+import { Check } from '@primeicons/react/check';
+import { Times } from '@primeicons/react/times';
+import { Button } from '@primereact/ui/button';
+import { Divider } from '@primereact/ui/divider';
+import { Inplace } from '@primereact/ui/inplace';
+import { InputGroup } from '@primereact/ui/inputgroup';
+import { InputText } from '@primereact/ui/inputtext';
+import { InputPassword } from '@primereact/ui/inputpassword';
+
+export default function Preview() {
+    return (
+        <div className="max-w-3xs mx-auto w-full">
+            <div className="text-sm font-medium pl-2">Profile</div>
+            <p className="text-sm text-surface-500 mt-1 pl-2">Update your profile settings.</p>
+            <Divider />
+            <div className="space-y-4">
+                <Inplace.Root>
+                    <div className="font-mono uppercase text-xs opacity-50 pl-2 mb-1">Name</div>
+                    <Inplace.Display className="w-full text-sm">John Doe</Inplace.Display>
+                    <Inplace.Content className="flex items-center gap-1.5">
+                        <InputGroup.Root>
+                            <InputText placeholder="Enter name" className="flex-1" fluid autoFocus />
+                            <InputGroup.Addon>
+                                <Button iconOnly variant="text" severity="success">
+                                    <Check />
+                                </Button>
+                            </InputGroup.Addon>
+                            <InputGroup.Addon>
+                                <Inplace.Close as={Button} iconOnly variant="text" severity="danger">
+                                    <Times />
+                                </Inplace.Close>
+                            </InputGroup.Addon>
+                        </InputGroup.Root>
+                    </Inplace.Content>
+                </Inplace.Root>
+                <Inplace.Root>
+                    <div className="font-mono uppercase text-xs opacity-50 pl-2 mb-1">Email</div>
+                    <Inplace.Display className="w-full text-sm">john.doe@example.com</Inplace.Display>
+                    <Inplace.Content className="flex items-center gap-1.5">
+                        <InputGroup.Root>
+                            <InputText placeholder="Enter email" className="flex-1" fluid autoFocus />
+                            <InputGroup.Addon>
+                                <Button iconOnly variant="text" severity="success">
+                                    <Check />
+                                </Button>
+                            </InputGroup.Addon>
+                            <InputGroup.Addon>
+                                <Inplace.Close as={Button} iconOnly variant="text" severity="danger">
+                                    <Times />
+                                </Inplace.Close>
+                            </InputGroup.Addon>
+                        </InputGroup.Root>
+                    </Inplace.Content>
+                </Inplace.Root>
+                <Inplace.Root>
+                    <div className="font-mono uppercase text-xs opacity-50 pl-2 mb-1">Password</div>
+                    <Inplace.Display className="w-full text-sm">********</Inplace.Display>
+                    <Inplace.Content className="flex items-center gap-1.5">
+                        <InputGroup.Root>
+                            <InputPassword placeholder="Enter password" className="flex-1" fluid mask={true} autoFocus />
+                            <InputGroup.Addon>
+                                <Button iconOnly variant="text" severity="success">
+                                    <Check />
+                                </Button>
+                            </InputGroup.Addon>
+                            <InputGroup.Addon>
+                                <Inplace.Close as={Button} iconOnly variant="text" severity="danger">
+                                    <Times />
+                                </Inplace.Close>
+                            </InputGroup.Addon>
+                        </InputGroup.Root>
+                    </Inplace.Content>
+                </Inplace.Root>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Inplace } from '@primereact/ui/inplace';
+```
+
+```tsx
+<Inplace.Root>
+    <Inplace.Display></Inplace.Display>
+    <Inplace.Content></Inplace.Content>
+</Inplace.Root>
+```
+
+## Examples
+
+### Basic
+
+Switches between a display and an edit mode on click.
+
+```tsx
+import { Check } from '@primeicons/react/check';
+import { Times } from '@primeicons/react/times';
+import { Button } from '@primereact/ui/button';
+import { Inplace } from '@primereact/ui/inplace';
+import { InputGroup } from '@primereact/ui/inputgroup';
+import { InputText } from '@primereact/ui/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="max-w-3xs mx-auto w-full">
+            <Inplace.Root>
+                <div className="font-mono uppercase text-xs opacity-50 pl-2 mb-1">Name</div>
+                <Inplace.Display className="w-full text-sm">John Doe</Inplace.Display>
+                <Inplace.Content className="flex items-center gap-1.5">
+                    <InputGroup.Root>
+                        <InputText placeholder="Enter name" className="flex-1" fluid autoFocus />
+                        <InputGroup.Addon>
+                            <Button iconOnly variant="text" severity="success">
+                                <Check />
+                            </Button>
+                        </InputGroup.Addon>
+                        <InputGroup.Addon>
+                            <Inplace.Close as={Button} iconOnly variant="text" severity="danger">
+                                <Times />
+                            </Inplace.Close>
+                        </InputGroup.Addon>
+                    </InputGroup.Root>
+                </Inplace.Content>
+            </Inplace.Root>
+        </div>
+    );
+}
+```
+
+### Disabled
+
+Use the `disabled` prop to disable the inplace content.
+
+```tsx
+import { Check } from '@primeicons/react/check';
+import { Times } from '@primeicons/react/times';
+import { Button } from '@primereact/ui/button';
+import { Divider } from '@primereact/ui/divider';
+import { Inplace } from '@primereact/ui/inplace';
+import { InputGroup } from '@primereact/ui/inputgroup';
+import { InputText } from '@primereact/ui/inputtext';
+import { InputPassword } from '@primereact/ui/inputpassword';
+
+export default function DisabledDemo() {
+    return (
+        <div className="max-w-3xs mx-auto w-full">
+            <div className="text-sm font-medium pl-2">Profile</div>
+            <p className="text-sm text-surface-500 mt-1 pl-2">Update your profile settings.</p>
+            <Divider />
+            <div className="space-y-4">
+                <Inplace.Root disabled>
+                    <div className="font-mono uppercase text-xs opacity-50 pl-2 mb-1">Name</div>
+                    <Inplace.Display className="w-full text-sm">John Doe</Inplace.Display>
+                    <Inplace.Content className="flex items-center gap-1.5">
+                        <InputGroup.Root>
+                            <InputText placeholder="Enter name" className="flex-1" fluid autoFocus />
+                            <InputGroup.Addon>
+                                <Button iconOnly variant="text" severity="success">
+                                    <Check />
+                                </Button>
+                            </InputGroup.Addon>
+                            <InputGroup.Addon>
+                                <Inplace.Close as={Button} iconOnly variant="text" severity="danger">
+                                    <Times />
+                                </Inplace.Close>
+                            </InputGroup.Addon>
+                        </InputGroup.Root>
+                    </Inplace.Content>
+                </Inplace.Root>
+                <Inplace.Root defaultOpen>
+                    <div className="font-mono uppercase text-xs opacity-50 pl-2 mb-1">Email</div>
+                    <Inplace.Display className="w-full text-sm">john.doe@example.com</Inplace.Display>
+                    <Inplace.Content className="flex items-center gap-1.5">
+                        <InputGroup.Root>
+                            <InputText placeholder="Enter email" className="flex-1" fluid />
+                            <InputGroup.Addon>
+                                <Button iconOnly variant="text" severity="success">
+                                    <Check />
+                                </Button>
+                            </InputGroup.Addon>
+                            <InputGroup.Addon>
+                                <Inplace.Close as={Button} iconOnly variant="text" severity="danger" disabled>
+                                    <Times />
+                                </Inplace.Close>
+                            </InputGroup.Addon>
+                        </InputGroup.Root>
+                    </Inplace.Content>
+                </Inplace.Root>
+                <Inplace.Root disabled>
+                    <div className="font-mono uppercase text-xs opacity-50 pl-2 mb-1">Password</div>
+                    <Inplace.Display className="w-full text-sm">********</Inplace.Display>
+                    <Inplace.Content className="flex items-center gap-1.5">
+                        <InputGroup.Root>
+                            <InputPassword placeholder="Enter password" className="flex-1" fluid mask={true} autoFocus />
+                            <InputGroup.Addon>
+                                <Button iconOnly variant="text" severity="success">
+                                    <Check />
+                                </Button>
+                            </InputGroup.Addon>
+                            <InputGroup.Addon>
+                                <Inplace.Close as={Button} iconOnly variant="text" severity="danger">
+                                    <Times />
+                                </Inplace.Close>
+                            </InputGroup.Addon>
+                        </InputGroup.Root>
+                    </Inplace.Content>
+                </Inplace.Root>
+            </div>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+Use the `open` and `onOpenChange` props to control the inplace content.
+
+```tsx
+'use client';
+import { InplaceRootOpenChangeEvent } from '@primereact/ui/inplace';
+import { Button } from '@primereact/ui/button';
+import { Inplace } from '@primereact/ui/inplace';
+import { InputText } from '@primereact/ui/inputtext';
+import * as React from 'react';
+
+export default function ControlledDemo() {
+    const [open, setOpen] = React.useState<boolean>(false);
+
+    return (
+        <div className="max-w-3xs mx-auto w-full">
+            <Inplace.Root open={open} onOpenChange={(e: InplaceRootOpenChangeEvent) => setOpen(e.open)}>
+                <div className="font-mono uppercase text-xs opacity-50 pl-2 mb-1">Name</div>
+                <Inplace.Display className="w-full text-sm">John Doe</Inplace.Display>
+                <Inplace.Content className="flex items-center gap-1.5">
+                    <InputText placeholder="Enter name" className="flex-1" fluid autoFocus />
+                </Inplace.Content>
+                <div className="flex items-center gap-2 mt-2">
+                    <Button onClick={() => setOpen((prev) => !prev)} className="flex-1" variant="outlined" severity="secondary">
+                        {open ? 'Cancel' : 'Edit Name'}
+                    </Button>
+                    {open && (
+                        <Inplace.Close as={Button} onClick={() => setOpen(false)} className="flex-1" fluid variant="outlined">
+                            Save
+                        </Inplace.Close>
+                    )}
+                </div>
+            </Inplace.Root>
+        </div>
+    );
+}
+```
+
+### Image
+
+Any content such as an image can be placed inside the `Inplace.Content` component.
+
+```tsx
+import { Image as ImageIcon } from '@primeicons/react';
+import { Inplace } from '@primereact/ui/inplace';
+
+export default function ImageDemo() {
+    return (
+        <Inplace.Root>
+            <Inplace.Display>
+                <ImageIcon className="mr-2" />
+                <span>View Photo</span>
+            </Inplace.Display>
+            <Inplace.Content>
+                <img className="w-full sm:w-80 shadow-md" alt="Nature" src="https://primefaces.org/cdn/primevue/images/nature/nature8.jpg" />
+            </Inplace.Content>
+        </Inplace.Root>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/inplace#api) for sub-component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/inplace#api) for hook documentation.
+
+### Accessibility
+
+See [Inplace Primitive](/docs/primitive/components/inplace#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Inplace" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Inplace" category="token" />