@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,313 @@
+# Avatar
+
+Avatar represents people using icons, labels and images.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+import { Divider } from '@primereact/ui/divider';
+
+export default function Preview() {
+    return (
+        <div className="flex flex-col max-w-3xs mx-auto">
+            <div className="flex items-start gap-3">
+                <Avatar.Root className="size-9" shape="circle">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" alt="Amy Elsner" />
+                    <Avatar.Fallback>A</Avatar.Fallback>
+                </Avatar.Root>
+                <div className="flex-1 flex flex-col items-start gap-1">
+                    <span className="text-muted-color text-xs">Amy Elsner</span>
+                    <span className="text-color font-semibold">London to Miami</span>
+                    <span className="text-muted-color text-sm">LHR → MIA</span>
+                </div>
+                <div className="flex flex-col items-end gap-1">
+                    <span className="text-color font-semibold tabular-nums">14:30</span>
+                    <span className="text-muted-color text-xs">Gate B12</span>
+                </div>
+            </div>
+            <Divider />
+            <div className="flex items-start gap-3">
+                <Avatar.Root className="size-9" shape="circle">
+                    <Avatar.Fallback>OL</Avatar.Fallback>
+                </Avatar.Root>
+                <div className="flex-1 flex flex-col items-start gap-1">
+                    <span className="text-muted-color text-xs">Onyama Limba</span>
+                    <span className="text-color font-semibold">Paris to Istanbul</span>
+                    <span className="text-muted-color text-sm">CDG → IST</span>
+                </div>
+                <div className="flex flex-col items-end gap-1">
+                    <span className="text-color font-semibold tabular-nums">09:15</span>
+                    <span className="text-muted-color text-xs">Gate A4</span>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+import { AvatarGroup } from '@primereact/ui/avatargroup';
+```
+
+```tsx
+<AvatarGroup>
+    <Avatar.Root>
+        <Avatar.Image />
+        <Avatar.Fallback />
+    </Avatar.Root>
+</AvatarGroup>
+```
+
+## Examples
+
+### Basic
+
+Displays a user representation using an image, icon, or label initials.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center gap-4">
+            <Avatar.Root size="large" shape="circle">
+                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                <Avatar.Fallback>A</Avatar.Fallback>
+            </Avatar.Root>
+        </div>
+    );
+}
+```
+
+### Fallback
+
+The `Avatar.Fallback` component displays a label or an icon when an image fails to load or when an image is not preferred.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+import { User } from '@primeicons/react/user';
+import { Check } from '@primeicons/react/check';
+
+export default function LabelDemo() {
+    return (
+        <div className="flex items-center justify-center gap-4">
+            <Avatar.Root>
+                <Avatar.Fallback>J</Avatar.Fallback>
+            </Avatar.Root>
+            <Avatar.Root className="bg-amber-100 dark:bg-amber-950/50 text-amber-500 dark:text-amber-500">
+                <Avatar.Fallback>CC</Avatar.Fallback>
+            </Avatar.Root>
+            <Avatar.Root>
+                <Avatar.Fallback>
+                    <Check className="size-4" />
+                </Avatar.Fallback>
+            </Avatar.Root>
+            <Avatar.Root className="bg-blue-100 dark:bg-blue-950/50 text-blue-500 dark:text-blue-500">
+                <Avatar.Fallback>
+                    <User />
+                </Avatar.Fallback>
+            </Avatar.Root>
+        </div>
+    );
+}
+```
+
+### Image
+
+The `Avatar.Image` component displays an image as an Avatar.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+
+export default function ImageDemo() {
+    return (
+        <div className="flex items-center justify-center gap-4">
+            <Avatar.Root size="large" shape="circle">
+                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                <Avatar.Fallback>A</Avatar.Fallback>
+            </Avatar.Root>
+            <Avatar.Root size="large" shape="circle">
+                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+                <Avatar.Fallback>A</Avatar.Fallback>
+            </Avatar.Root>
+            <Avatar.Root size="large" shape="circle">
+                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+                <Avatar.Fallback>O</Avatar.Fallback>
+            </Avatar.Root>
+        </div>
+    );
+}
+```
+
+### Badge
+
+[`Badge`](/docs/components/badge) component can be used to display a badge on an Avatar.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+import { Badge } from '@primereact/ui/badge';
+import { OverlayBadge } from '@primereact/ui/overlaybadge';
+
+const BadgeDemo = () => {
+    return (
+        <div className="flex items-center justify-center gap-8">
+            <OverlayBadge>
+                <Avatar.Root size="large" shape="circle">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+                    <Avatar.Fallback>O</Avatar.Fallback>
+                </Avatar.Root>
+                <Badge size="small" shape="circle" severity="success">
+                    2
+                </Badge>
+            </OverlayBadge>
+            <OverlayBadge>
+                <Avatar.Root size="large">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" />
+                    <Avatar.Fallback>W</Avatar.Fallback>
+                </Avatar.Root>
+                <Badge shape="circle" severity="danger"></Badge>
+            </OverlayBadge>
+        </div>
+    );
+};
+
+export default BadgeDemo;
+```
+
+### Shape
+
+Use the `shape` property to change the appearance.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+
+const ShapeDemo = () => {
+    return (
+        <div className="flex items-center justify-center gap-4">
+            <Avatar.Root shape="circle" size="large">
+                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" />
+                <Avatar.Fallback>W</Avatar.Fallback>
+            </Avatar.Root>
+            <Avatar.Root shape="square" size="large">
+                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" />
+                <Avatar.Fallback>W</Avatar.Fallback>
+            </Avatar.Root>
+        </div>
+    );
+};
+
+export default ShapeDemo;
+```
+
+### Sizes
+
+Use the `size` property to change the size of an avatar.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+
+export default function SizeDemo() {
+    return (
+        <div className="flex flex-col items-center gap-4">
+            <div className="flex items-center justify-center gap-4">
+                <Avatar.Root shape="circle" size="normal">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                    <Avatar.Fallback>AB</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle" size="large">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                    <Avatar.Fallback>AB</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle" size="xlarge">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                    <Avatar.Fallback>AB</Avatar.Fallback>
+                </Avatar.Root>
+            </div>
+            <div className="flex items-center justify-center gap-4">
+                <Avatar.Root shape="circle" size="normal">
+                    <Avatar.Fallback>AB</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle" size="large">
+                    <Avatar.Fallback>AB</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle" size="xlarge">
+                    <Avatar.Fallback>AB</Avatar.Fallback>
+                </Avatar.Root>
+            </div>
+        </div>
+    );
+}
+```
+
+### AvatarGroup
+
+Grouping is available by wrapping multiple Avatar components inside an `AvatarGroup` component.
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+import { AvatarGroup } from '@primereact/ui/avatargroup';
+
+export default function GroupDemo() {
+    return (
+        <div className="flex justify-center">
+            <AvatarGroup>
+                <Avatar.Root shape="circle">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                    <Avatar.Fallback>A</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+                    <Avatar.Fallback>A</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+                    <Avatar.Fallback>O</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" />
+                    <Avatar.Fallback>I</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle">
+                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
+                    <Avatar.Fallback>X</Avatar.Fallback>
+                </Avatar.Root>
+                <Avatar.Root shape="circle">
+                    <Avatar.Fallback>+2</Avatar.Fallback>
+                </Avatar.Root>
+            </AvatarGroup>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/avatar#api) for `AvatarRoot`, `AvatarImage`, `AvatarFallback`, and `AvatarGroup` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/avatar#api) for `useAvatar` and `useAvatarGroup` hook documentation.
+
+### Accessibility
+
+See [Avatar Primitive](/docs/primitive/components/avatar#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Avatar" category="style" />
+<DocTable name="AvatarGroup" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Avatar" category="token" />

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

@@ -0,0 +1,213 @@
+# Badge
+
+Badge is a small status indicator for another element.
+
+```tsx
+import { Bell, Check, Clock, ExclamationTriangle, Lock, StarFill, Tag, TimesCircle } from '@primeicons/react';
+import { Badge } from '@primereact/ui/badge';
+
+export default function Preview() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-2 max-w-2xs mx-auto">
+            <Badge severity="success">
+                <Check className="size-2.75! mr-1" /> Approved
+            </Badge>
+            <Badge severity="danger">
+                <TimesCircle className="size-2.75! mr-1" /> Rejected
+            </Badge>
+            <Badge severity="warn">
+                <ExclamationTriangle className="size-2.75! mr-1" /> Warning
+            </Badge>
+            <Badge severity="info">
+                <Clock className="size-2.75! mr-1" /> Pending
+            </Badge>
+            <Badge severity="secondary">
+                <Tag className="size-2.75! mr-1" /> Draft
+            </Badge>
+            <Badge>
+                <StarFill className="size-2.75! mr-1" /> Featured
+            </Badge>
+            <Badge severity="info">
+                <Bell className="size-2.75! mr-1" /> 3 New
+            </Badge>
+            <Badge severity="success">Online</Badge>
+            <Badge severity="secondary">
+                <Lock className="size-2.75! mr-1" /> Private
+            </Badge>
+            <Badge severity="danger">Security issue</Badge>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Badge } from '@primereact/ui/badge';
+```
+
+```tsx
+<Badge />
+```
+
+## Examples
+
+### Basic
+
+A small overlay on another element to indicate a count or status.
+
+```tsx
+import { Badge } from '@primereact/ui/badge';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex justify-center">
+            <Badge>Badge</Badge>
+        </div>
+    );
+}
+```
+
+### Severity
+
+The `severity` property defines the visual style of a badge.
+
+```tsx
+import { Badge } from '@primereact/ui/badge';
+
+export default function SeverityDemo() {
+    return (
+        <div className="flex flex-wrap justify-center gap-2">
+            <Badge>Default</Badge>
+            <Badge severity="secondary">Secondary</Badge>
+            <Badge severity="success">Success</Badge>
+            <Badge severity="info">Info</Badge>
+            <Badge severity="warn">Warning</Badge>
+            <Badge severity="danger">Danger</Badge>
+            <Badge severity="contrast">Contrast</Badge>
+        </div>
+    );
+}
+```
+
+### Size
+
+Use the `size` property to change the size of a badge.
+
+```tsx
+import { Badge } from '@primereact/ui/badge';
+
+export default function SizeDemo() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-2">
+            <Badge size="small">Small</Badge>
+            <Badge>Default</Badge>
+            <Badge size="large">Large</Badge>
+            <Badge size="xlarge">XLarge</Badge>
+        </div>
+    );
+}
+```
+
+### Overlay
+
+A badge can be added to any element by encapsulating the content with the `OverlayBadge` component.
+
+```tsx
+import { Bell } from '@primeicons/react/bell';
+import { Calendar } from '@primeicons/react/calendar';
+import { Envelope } from '@primeicons/react/envelope';
+import { Badge } from '@primereact/ui/badge';
+import { OverlayBadge } from '@primereact/ui/overlaybadge';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex flex-wrap justify-center gap-6">
+            <OverlayBadge>
+                <Bell className="size-6!" />
+                <Badge shape="circle">2</Badge>
+            </OverlayBadge>
+            <OverlayBadge>
+                <Calendar className="size-6!" />
+                <Badge shape="circle" severity="danger">
+                    4
+                </Badge>
+            </OverlayBadge>
+            <OverlayBadge>
+                <Envelope className="size-6!" />
+                <Badge shape="circle"></Badge>
+            </OverlayBadge>
+        </div>
+    );
+}
+```
+
+### Button
+
+Buttons have built-in support for badges to display a badge inline.
+
+```tsx
+import { Bell } from '@primeicons/react/bell';
+import { Users } from '@primeicons/react/users';
+import { Badge } from '@primereact/ui/badge';
+import { Button } from '@primereact/ui/button';
+import { OverlayBadge } from '@primereact/ui/overlaybadge';
+
+export default function ButtonDemo() {
+    return (
+        <div className="flex justify-center flex-wrap gap-4">
+            <Button type="button">
+                Emails
+                <Badge severity="secondary" shape="circle">
+                    8
+                </Badge>
+            </Button>
+
+            <Button type="button" variant="outlined">
+                <Users />
+                Messages
+                <Badge severity="contrast" shape="circle">
+                    2
+                </Badge>
+            </Button>
+
+            <OverlayBadge>
+                <Button type="button" variant="outlined" iconOnly>
+                    <Bell />
+                </Button>
+                <Badge severity="info" className="animate-pulse" />
+            </OverlayBadge>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/badge#api) for `Badge` and `OverlayBadge` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/badge#api) for `useBadge` hook documentation.
+
+### Accessibility
+
+See [Badge Primitive](/docs/primitive/components/badge#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Badge" category="style" />
+<DocTable name="OverlayBadge" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Badge" category="token" />