@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,300 @@
+# Chip
+
+Chip represents entities using icons, labels and images.
+
+```tsx
+'use client';
+import { Check } from '@primeicons/react';
+import { Chip } from '@primereact/ui/chip';
+import * as React from 'react';
+
+export default function Preview() {
+    const [selectedIndex, setSelectedIndex] = React.useState([0, 4, 7, 10, 15]);
+
+    const onSelect = (index: number) => {
+        if (selectedIndex.includes(index)) {
+            setSelectedIndex((prev) => prev.filter((i) => i !== index));
+        } else {
+            setSelectedIndex((prev) => [...prev, index]);
+        }
+    };
+
+    return (
+        <div className="max-w-xs mx-auto bg-surface-50/25 dark:bg-surface-900/25 p-4 rounded-lg border border-surface">
+            <h2 className="font-bold mb-0.5">What are you interested in?</h2>
+            <p className="text-surface-500 mb-3 text-sm">You can select multiple answers.</p>
+            <div className="flex items-center justify-start flex-wrap gap-2.5">
+                {chips.map((chip) => {
+                    const isSelected = selectedIndex.includes(chips.indexOf(chip));
+
+                    return (
+                        <Chip.Root
+                            key={chip.label}
+                            onClick={() => onSelect(chips.indexOf(chip))}
+                            variant={isSelected ? undefined : 'outlined'}
+                            className="cursor-pointer"
+                        >
+                            <Chip.Start>
+                                {isSelected ? (
+                                    <span className="size-4.5 inline-flex items-center justify-center bg-surface-900 dark:bg-surface-50 text-surface-0 dark:text-surface-900 rounded-full">
+                                        <Check className="size-2.5!" />{' '}
+                                    </span>
+                                ) : (
+                                    chip.emoji
+                                )}
+                            </Chip.Start>
+                            <Chip.Label>{chip.label}</Chip.Label>
+                        </Chip.Root>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+const chips = [
+    { label: 'Music', emoji: '🎵' },
+    { label: 'Movies', emoji: '🎬' },
+    { label: 'Travel', emoji: '✈️' },
+    { label: 'Food', emoji: '🍔' },
+    { label: 'Sports', emoji: '⚽' },
+    { label: 'Gaming', emoji: '🎮' },
+    { label: 'Reading', emoji: '📚' },
+    { label: 'Photography', emoji: '📸' },
+    { label: 'Fitness', emoji: '💪' },
+    { label: 'Technology', emoji: '💻' },
+    { label: 'Art', emoji: '🎨' },
+    { label: 'Nature', emoji: '🌿' },
+    { label: 'Shopping', emoji: '🛍️' },
+    { label: 'Cooking', emoji: '👨‍🍳' },
+    { label: 'Pets', emoji: '🐶' },
+    { label: 'Cars', emoji: '🚗' },
+    { label: 'Fashion', emoji: '👕' },
+    { label: 'Science', emoji: '🔬' }
+];
+```
+
+## Usage
+
+```tsx
+import { Chip } from '@primereact/ui/chip';
+```
+
+```tsx
+<Chip.Root>
+    <Chip.Start />
+    <Chip.Label />
+    <Chip.End>
+        <Chip.Remove />
+    </Chip.End>
+</Chip.Root>
+```
+
+## Examples
+
+### Basic
+
+Displays compact information with an optional remove action.
+
+```tsx
+import { Github } from '@primeicons/react';
+import { Chip } from '@primereact/ui/chip';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <Chip.Root>
+                <Chip.Start>
+                    <Github />
+                </Chip.Start>
+                <Chip.Label>GitHub</Chip.Label>
+            </Chip.Root>
+        </div>
+    );
+}
+```
+
+### Start & End Elements
+
+```tsx
+import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
+import { Chip } from '@primereact/ui/chip';
+
+export default function StartEndDemo() {
+    return (
+        <div className="flex items-center justify-center flex-wrap gap-2">
+            <Chip.Root>
+                <Chip.Start>
+                    <Apple />
+                </Chip.Start>
+                <Chip.Label>Apple</Chip.Label>
+            </Chip.Root>
+            <Chip.Root>
+                <Chip.Start>
+                    <Facebook />
+                </Chip.Start>
+                <Chip.Label>Facebook</Chip.Label>
+            </Chip.Root>
+            <Chip.Root>
+                <Chip.Start>
+                    <Google />
+                </Chip.Start>
+                <Chip.Label>Google</Chip.Label>
+            </Chip.Root>
+            <Chip.Root>
+                <Chip.Start>
+                    <Microsoft />
+                </Chip.Start>
+                <Chip.Label>Microsoft</Chip.Label>
+            </Chip.Root>
+            <Chip.Root>
+                <Chip.Start>
+                    <Github />
+                </Chip.Start>
+                <Chip.Label>GitHub</Chip.Label>
+                <Chip.End>
+                    <Chip.Remove>
+                        <MinusCircle />
+                    </Chip.Remove>
+                </Chip.End>
+            </Chip.Root>
+        </div>
+    );
+}
+```
+
+### With Avatar
+
+```tsx
+import { TimesCircle } from '@primeicons/react';
+import { Avatar } from '@primereact/ui/avatar';
+import { Chip } from '@primereact/ui/chip';
+
+export default function WithAvatarDemo() {
+    return (
+        <div className="flex items-center justify-center flex-wrap gap-2">
+            <Chip.Root>
+                <Chip.Start>
+                    <Avatar.Root className="size-full" shape="circle">
+                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                        <Avatar.Fallback className="text-xs">AE</Avatar.Fallback>
+                    </Avatar.Root>
+                </Chip.Start>
+                <Chip.Label>Amy Elsner</Chip.Label>
+            </Chip.Root>
+            <Chip.Root>
+                <Chip.Start>
+                    <Avatar.Root className="size-full" shape="circle">
+                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+                        <Avatar.Fallback className="text-xs">AJ</Avatar.Fallback>
+                    </Avatar.Root>
+                </Chip.Start>
+                <Chip.Label>Asiya Javayant</Chip.Label>
+            </Chip.Root>
+            <Chip.Root>
+                <Chip.Label>Onyama Limba</Chip.Label>
+                <Chip.End>
+                    <Avatar.Root className="size-full" shape="circle">
+                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+                        <Avatar.Fallback className="text-xs">OL</Avatar.Fallback>
+                    </Avatar.Root>
+                </Chip.End>
+            </Chip.Root>
+            <Chip.Root>
+                <Chip.Start>
+                    <Avatar.Root className="size-full" shape="circle">
+                        <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
+                        <Avatar.Fallback className="text-xs">XF</Avatar.Fallback>
+                    </Avatar.Root>
+                </Chip.Start>
+                <Chip.Label>Xuxue Feng</Chip.Label>
+                <Chip.End>
+                    <Chip.Remove>
+                        <TimesCircle />
+                    </Chip.Remove>
+                </Chip.End>
+            </Chip.Root>
+        </div>
+    );
+}
+```
+
+### Template
+
+Chip also allows displaying custom content inside itself.
+
+```tsx
+import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
+import { Chip } from '@primereact/ui/chip';
+
+export default function TemplateDemo() {
+    return (
+        <div className="flex items-center justify-center flex-wrap gap-2">
+            <Chip.Root className="bg-neutral-900! dark:bg-neutral-50! **:text-neutral-50! dark:**:text-neutral-900!">
+                <Chip.Start>
+                    <Apple />
+                </Chip.Start>
+                <Chip.Label>Apple</Chip.Label>
+            </Chip.Root>
+            <Chip.Root className="bg-blue-50! dark:bg-blue-950! **:text-blue-700! dark:**:text-blue-300!">
+                <Chip.Start>
+                    <Facebook />
+                </Chip.Start>
+                <Chip.Label>Facebook</Chip.Label>
+            </Chip.Root>
+            <Chip.Root className="bg-red-50! dark:bg-red-950! **:text-red-700! dark:**:text-red-300!">
+                <Chip.Start>
+                    <Google />
+                </Chip.Start>
+                <Chip.Label>Google</Chip.Label>
+            </Chip.Root>
+            <Chip.Root className="bg-green-50! dark:bg-green-950! **:text-green-700! dark:**:text-green-300!">
+                <Chip.Start>
+                    <Microsoft />
+                </Chip.Start>
+                <Chip.Label>Microsoft</Chip.Label>
+            </Chip.Root>
+            <Chip.Root className="bg-purple-50! dark:bg-purple-950! **:text-purple-700! dark:**:text-purple-300!">
+                <Chip.Start>
+                    <Github />
+                </Chip.Start>
+                <Chip.Label>GitHub</Chip.Label>
+                <Chip.End>
+                    <Chip.Remove>
+                        <MinusCircle />
+                    </Chip.Remove>
+                </Chip.End>
+            </Chip.Root>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/chip#api) for `ChipRoot`, `ChipStart`, `ChipLabel`, `ChipEnd`, and `ChipRemove` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/chip#api) for `useChip` hook documentation.
+
+### Accessibility
+
+See [Chip Primitive](/docs/primitive/components/chip#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="Chip" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="Chip" category="token" />

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

@@ -0,0 +1,271 @@
+# Compare
+
+Compare two items side by side with a slider.
+
+```tsx
+import { Compare } from '@primereact/ui/compare';
+import { Code } from '@primeicons/react/code';
+
+export default function Preview() {
+    return (
+        <Compare.Root className="aspect-video max-w-lg mx-auto">
+            <Compare.Item position="before">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </Compare.Item>
+            <Compare.Item position="after">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </Compare.Item>
+            <Compare.Handle>
+                <Compare.Indicator className="group flex items-center justify-center">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </Compare.Indicator>
+            </Compare.Handle>
+        </Compare.Root>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { Compare } from '@primereact/ui/compare';
+```
+
+```tsx
+<Compare.Root>
+    <Compare.Item position="before"></Compare.Item>
+    <Compare.Item position="after"></Compare.Item>
+    <Compare.Handle>
+        <Compare.Indicator />
+    </Compare.Handle>
+</Compare.Root>
+```
+
+## Examples
+
+### Custom Handle
+
+The handle can be styled freely, give the indicator a rounded background, custom icon, and shadow for a more prominent look.
+
+```tsx
+import { Compare } from '@primereact/ui/compare';
+
+export default function HandleDemo() {
+    return (
+        <Compare.Root className="aspect-video max-w-lg mx-auto">
+            <Compare.Item position="before">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </Compare.Item>
+            <Compare.Item position="after">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </Compare.Item>
+            <Compare.Handle className="bg-transparent!">
+                <Compare.Indicator className="size-5 rounded-full! bg-white/50 transition-transform duration-200 hover:transform-[translate(-50%,-50%)_scale(1.5)]" />
+            </Compare.Handle>
+        </Compare.Root>
+    );
+}
+```
+
+### Hover
+
+```tsx
+import { Compare } from '@primereact/ui/compare';
+import { Code } from '@primeicons/react/code';
+
+export default function HoverDemo() {
+    return (
+        <Compare.Root className="aspect-video max-w-lg mx-auto" slideOnHover>
+            <Compare.Item position="before">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </Compare.Item>
+            <Compare.Item position="after">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </Compare.Item>
+            <Compare.Handle>
+                <Compare.Indicator className="group flex items-center justify-center">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </Compare.Indicator>
+            </Compare.Handle>
+        </Compare.Root>
+    );
+}
+```
+
+### Vertical
+
+```tsx
+import { Compare } from '@primereact/ui/compare';
+import { Code } from '@primeicons/react/code';
+
+export default function VerticalDemo() {
+    return (
+        <Compare.Root className="aspect-video max-w-lg mx-auto" orientation="vertical">
+            <Compare.Item position="before">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </Compare.Item>
+            <Compare.Item position="after">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </Compare.Item>
+            <Compare.Handle>
+                <Compare.Indicator className="group flex items-center justify-center">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </Compare.Indicator>
+            </Compare.Handle>
+        </Compare.Root>
+    );
+}
+```
+
+### With Chart
+
+```tsx
+'use client';
+import { Compare, type CompareRootValueChangeEvent } from '@primereact/ui/compare';
+import * as React from 'react';
+
+export default function ChartDemo() {
+    const [value, setValue] = React.useState(100);
+
+    return (
+        <Compare.Root
+            className="aspect-video max-w-lg mx-auto group"
+            slideOnHover
+            value={value}
+            onValueChange={(e: CompareRootValueChangeEvent) => setValue(e.value as number)}
+            onPointerLeave={() => setValue(100)}
+        >
+            <Compare.Item position="before" className="transition-[clip-path] not-group-hover:duration-500 group-hover:duration-[10ms]">
+                <svg className="absolute w-full h-full" viewBox="0 0 644 189" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g clipPath="url(#clip0_1381_2302)">
+                        <path
+                            d="M0.5 118.499C0.5 118.499 82 102.999 113.5 89.4989C145 75.9989 188.444 87.7869 235 77.4989C272.684 69.1719 293.654 62.4939 329 46.9989C409.332 11.7849 479.5 86.5 510.5 78C541.5 69.5 635.951 0.848863 644 1.49886"
+                            stroke="var(--p-primary-color)"
+                            strokeWidth="2"
+                        />
+                        <path
+                            d="M113.5 89.5006C82 103.001 0.5 118.501 0.5 118.501V188.501H644V1.50065C635.951 0.850647 541.5 69.5 510.5 78C479.5 86.5 409.332 11.7866 329 47.0006C293.654 62.4956 272.684 69.1736 235 77.5006C188.444 87.7886 145 76.0006 113.5 89.5006Z"
+                            fill="url(#paint0_linear_540_31)"
+                        />
+                    </g>
+                    <defs>
+                        <linearGradient id="paint0_linear_540_31" x1="322.25" x2="322.25" y1="1.477" y2="188.5" gradientUnits="userSpaceOnUse">
+                            <stop stopColor="var(--p-primary-color)" stopOpacity="0.4"></stop>
+                            <stop offset="1" stopColor="var(--p-primary-color)" stopOpacity="0"></stop>
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </Compare.Item>
+        </Compare.Root>
+    );
+}
+```
+
+### Template
+
+```tsx
+import { Avatar } from '@primereact/ui/avatar';
+import { Button } from '@primereact/ui/button';
+import { Compare } from '@primereact/ui/compare';
+import { ProgressBar } from '@primereact/ui/progressbar';
+import { Tag } from '@primereact/ui/tag';
+import { Code } from '@primeicons/react/code';
+
+export default function TemplateDemo() {
+    return (
+        <Compare.Root className="relative w-full max-w-md mx-auto h-[320px]">
+            <Compare.Item position="before">
+                <ThemePanel theme="purple" />
+            </Compare.Item>
+            <Compare.Item position="after">
+                <ThemePanel theme="primary" />
+            </Compare.Item>
+            <Compare.Handle>
+                <Compare.Indicator className="group flex items-center justify-center border border-surface">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </Compare.Indicator>
+            </Compare.Handle>
+        </Compare.Root>
+    );
+}
+
+function ThemePanel({ theme = 'purple' }: { theme: 'purple' | 'primary' }) {
+    const t = {
+        purple: {
+            bg: 'bg-purple-100 dark:bg-purple-900/50',
+            card: 'bg-white dark:bg-purple-900 border-purple-100 dark:border-purple-800',
+            text: 'text-purple-950 dark:text-purple-50',
+            muted: 'text-purple-600 dark:text-purple-400',
+            tag: 'bg-purple-100 dark:bg-purple-800 text-purple-700 dark:text-purple-200',
+            track: 'bg-purple-100 dark:bg-purple-800',
+            indicator: 'bg-purple-500',
+            avatar: 'filter hue-rotate-[260deg] saturate-150',
+            severity: 'help' as const
+        },
+        primary: {
+            bg: 'bg-primary-100 dark:bg-primary-900/50',
+            card: 'bg-white dark:bg-primary-900 border-primary-100 dark:border-primary-800',
+            text: 'text-primary-950 dark:text-primary-50',
+            muted: 'text-primary-600 dark:text-primary-400',
+            tag: 'bg-primary-100 dark:bg-primary-800 text-primary-700 dark:text-primary-200',
+            track: 'bg-primary-100 dark:bg-primary-800',
+            indicator: 'bg-primary',
+            severity: undefined
+        }
+    }[theme];
+
+    return (
+        <div className={`size-full ${t.bg} p-6 flex items-center justify-center`}>
+            <div className={`w-full max-w-xs rounded-xl border ${t.card} p-5 space-y-4`}>
+                <div className="flex items-start justify-between">
+                    <div className="flex items-center gap-3">
+                        <Avatar.Root shape="circle" className="w-10 h-10">
+                            <Avatar.Image className={t.avatar} src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                        </Avatar.Root>
+                        <div>
+                            <div className={`font-medium ${t.text}`}>Amy Elsner</div>
+                            <div className={`text-sm ${t.muted}`}>Developer</div>
+                        </div>
+                    </div>
+                    <Tag className={t.tag}>Pro</Tag>
+                </div>
+
+                <div className="space-y-2">
+                    <div className="flex justify-between text-sm">
+                        <span className={t.muted}>Storage</span>
+                        <span className={`${t.text}`}>7.2 GB / 10 GB</span>
+                    </div>
+                    <ProgressBar.Root value={72}>
+                        <ProgressBar.Track className={`h-2 ${t.track}`}>
+                            <ProgressBar.Indicator className={t.indicator} />
+                        </ProgressBar.Track>
+                    </ProgressBar.Root>
+                </div>
+
+                <div className="flex gap-2 pt-2">
+                    <Button severity={t.severity} className="flex-1">
+                        Upgrade
+                    </Button>
+                    <Button severity={t.severity} variant="outlined">
+                        Settings
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Compare Primitive](/docs/primitive/components/compare#api) for the sub-component API reference.
+
+### Hooks
+
+See [useCompare](/docs/headless/components/compare#api) for the headless hook API reference.
+
+### Accessibility
+
+See [Compare Primitive](/docs/primitive/components/compare#accessibility) for WAI-ARIA compliance details and keyboard support.