@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,304 @@
+# Chip
+
+Chip represents entities using icons, labels and images.
+
+```tsx
+'use client';
+import { Check } from '@primeicons/react';
+import { Chip, ChipLabel, ChipStart } from '@/components/ui/chip';
+import * as React from 'react';
+
+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: '🔬' }
+];
+
+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, index) => {
+                    const isSelected = selectedIndex.includes(index);
+
+                    return (
+                        <Chip
+                            key={chip.label}
+                            onClick={() => onSelect(index)}
+                            variant={isSelected ? undefined : 'outlined'}
+                            className="cursor-pointer"
+                        >
+                            <ChipStart>
+                                {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
+                                )}
+                            </ChipStart>
+                            <ChipLabel>{chip.label}</ChipLabel>
+                        </Chip>
+                    );
+                })}
+            </div>
+        </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/chip.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/chip" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Chip, ChipLabel, ChipStart, ChipEnd, ChipRemove } from '@/components/ui/chip';
+```
+
+```tsx
+<Chip>
+    <ChipStart />
+    <ChipLabel>Label</ChipLabel>
+    <ChipEnd>
+        <ChipRemove />
+    </ChipEnd>
+</Chip>
+```
+
+## Examples
+
+### Basic
+
+Displays compact information with an optional remove action.
+
+```tsx
+import { Github } from '@primeicons/react';
+import { Chip, ChipLabel, ChipStart } from '@/components/ui/chip';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <Chip>
+                <ChipStart>
+                    <Github />
+                </ChipStart>
+                <ChipLabel>GitHub</ChipLabel>
+            </Chip>
+        </div>
+    );
+}
+```
+
+### Start & End Elements
+
+```tsx
+import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
+import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';
+
+export default function StartEndDemo() {
+    return (
+        <div className="flex items-center justify-center flex-wrap gap-2">
+            <Chip>
+                <ChipStart>
+                    <Apple />
+                </ChipStart>
+                <ChipLabel>Apple</ChipLabel>
+            </Chip>
+            <Chip>
+                <ChipStart>
+                    <Facebook />
+                </ChipStart>
+                <ChipLabel>Facebook</ChipLabel>
+            </Chip>
+            <Chip>
+                <ChipStart>
+                    <Google />
+                </ChipStart>
+                <ChipLabel>Google</ChipLabel>
+            </Chip>
+            <Chip>
+                <ChipStart>
+                    <Microsoft />
+                </ChipStart>
+                <ChipLabel>Microsoft</ChipLabel>
+            </Chip>
+            <Chip>
+                <ChipStart>
+                    <Github />
+                </ChipStart>
+                <ChipLabel>GitHub</ChipLabel>
+                <ChipEnd>
+                    <ChipRemove>
+                        <MinusCircle />
+                    </ChipRemove>
+                </ChipEnd>
+            </Chip>
+        </div>
+    );
+}
+```
+
+### With Avatar
+
+```tsx
+import { TimesCircle } from '@primeicons/react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';
+
+export default function WithAvatarDemo() {
+    return (
+        <div className="flex items-center justify-center flex-wrap gap-2">
+            <Chip>
+                <ChipStart>
+                    <Avatar className="size-full" shape="circle">
+                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                        <AvatarFallback className="text-xs">AE</AvatarFallback>
+                    </Avatar>
+                </ChipStart>
+                <ChipLabel>Amy Elsner</ChipLabel>
+            </Chip>
+            <Chip>
+                <ChipStart>
+                    <Avatar className="size-full" shape="circle">
+                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
+                        <AvatarFallback className="text-xs">AJ</AvatarFallback>
+                    </Avatar>
+                </ChipStart>
+                <ChipLabel>Asiya Javayant</ChipLabel>
+            </Chip>
+            <Chip>
+                <ChipLabel>Onyama Limba</ChipLabel>
+                <ChipEnd>
+                    <Avatar className="size-full" shape="circle">
+                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
+                        <AvatarFallback className="text-xs">OL</AvatarFallback>
+                    </Avatar>
+                </ChipEnd>
+            </Chip>
+            <Chip>
+                <ChipStart>
+                    <Avatar className="size-full" shape="circle">
+                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
+                        <AvatarFallback className="text-xs">XF</AvatarFallback>
+                    </Avatar>
+                </ChipStart>
+                <ChipLabel>Xuxue Feng</ChipLabel>
+                <ChipEnd>
+                    <ChipRemove>
+                        <TimesCircle />
+                    </ChipRemove>
+                </ChipEnd>
+            </Chip>
+        </div>
+    );
+}
+```
+
+### Template
+
+Chip also allows displaying custom content inside itself.
+
+```tsx
+import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
+import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';
+
+export default function TemplateDemo() {
+    return (
+        <div className="flex items-center justify-center flex-wrap gap-2">
+            <Chip className="bg-neutral-900 dark:bg-neutral-50 **:text-neutral-50 dark:**:text-neutral-900">
+                <ChipStart>
+                    <Apple />
+                </ChipStart>
+                <ChipLabel>Apple</ChipLabel>
+            </Chip>
+            <Chip className="bg-blue-50 dark:bg-blue-950 **:text-blue-700 dark:**:text-blue-300">
+                <ChipStart>
+                    <Facebook />
+                </ChipStart>
+                <ChipLabel>Facebook</ChipLabel>
+            </Chip>
+            <Chip className="bg-red-50 dark:bg-red-950 **:text-red-700 dark:**:text-red-300">
+                <ChipStart>
+                    <Google />
+                </ChipStart>
+                <ChipLabel>Google</ChipLabel>
+            </Chip>
+            <Chip className="bg-green-50 dark:bg-green-950 **:text-green-700 dark:**:text-green-300">
+                <ChipStart>
+                    <Microsoft />
+                </ChipStart>
+                <ChipLabel>Microsoft</ChipLabel>
+            </Chip>
+            <Chip className="bg-purple-50 dark:bg-purple-950 **:text-purple-700 dark:**:text-purple-300">
+                <ChipStart>
+                    <Github />
+                </ChipStart>
+                <ChipLabel>GitHub</ChipLabel>
+                <ChipEnd>
+                    <ChipRemove>
+                        <MinusCircle />
+                    </ChipRemove>
+                </ChipEnd>
+            </Chip>
+        </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.

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

@@ -0,0 +1,295 @@
+# Compare
+
+Compare is a component to compare two images with a slider.
+
+```tsx
+import { Code } from '@primeicons/react';
+import { Compare, CompareHandle, CompareIndicator, CompareItem } from '@/components/ui/compare';
+
+export default function Preview() {
+    return (
+        <Compare className="aspect-video max-w-lg mx-auto">
+            <CompareItem position="before">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </CompareItem>
+            <CompareItem position="after">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </CompareItem>
+            <CompareHandle>
+                <CompareIndicator className="group flex items-center justify-center">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </CompareIndicator>
+            </CompareHandle>
+        </Compare>
+    );
+}
+```
+
+## 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/compare.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/compare" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Compare, CompareHandle, CompareIndicator, CompareItem } from '@/components/ui/compare';
+```
+
+```tsx
+<Compare>
+    <CompareItem position="before">
+        <img src="/before.jpg" />
+    </CompareItem>
+    <CompareItem position="after">
+        <img src="/after.jpg" />
+    </CompareItem>
+    <CompareHandle>
+        <CompareIndicator />
+    </CompareHandle>
+</Compare>
+```
+
+## Examples
+
+### Basic
+
+Compare two items side by side with a slider.
+
+```tsx
+import { Code } from '@primeicons/react';
+import { Compare, CompareHandle, CompareIndicator, CompareItem } from '@/components/ui/compare';
+
+export default function BasicDemo() {
+    return (
+        <Compare className="aspect-video max-w-lg mx-auto">
+            <CompareItem position="before">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </CompareItem>
+            <CompareItem position="after">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </CompareItem>
+            <CompareHandle>
+                <CompareIndicator className="group flex items-center justify-center">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </CompareIndicator>
+            </CompareHandle>
+        </Compare>
+    );
+}
+```
+
+### Hover
+
+```tsx
+import { Code } from '@primeicons/react';
+import { Compare, CompareHandle, CompareIndicator, CompareItem } from '@/components/ui/compare';
+
+export default function HoverDemo() {
+    return (
+        <Compare className="aspect-video max-w-lg mx-auto" slideOnHover>
+            <CompareItem position="before">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </CompareItem>
+            <CompareItem position="after">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </CompareItem>
+            <CompareHandle>
+                <CompareIndicator className="group flex items-center justify-center">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </CompareIndicator>
+            </CompareHandle>
+        </Compare>
+    );
+}
+```
+
+### Vertical
+
+```tsx
+import { Code } from '@primeicons/react';
+import { Compare, CompareHandle, CompareIndicator, CompareItem } from '@/components/ui/compare';
+
+export default function VerticalDemo() {
+    return (
+        <Compare className="aspect-video max-w-lg mx-auto" orientation="vertical">
+            <CompareItem position="before">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </CompareItem>
+            <CompareItem position="after">
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </CompareItem>
+            <CompareHandle>
+                <CompareIndicator className="group flex items-center justify-center">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </CompareIndicator>
+            </CompareHandle>
+        </Compare>
+    );
+}
+```
+
+### With Chart
+
+```tsx
+'use client';
+import { Compare, CompareItem } from '@/components/ui/compare';
+import type { CompareRootValueChangeEvent } from 'primereact/compare';
+import * as React from 'react';
+
+export default function ChartDemo() {
+    const [value, setValue] = React.useState(50);
+
+    return (
+        <Compare
+            className="aspect-video max-w-lg mx-auto"
+            slideOnHover
+            value={value}
+            onValueChange={(e: CompareRootValueChangeEvent) => setValue(e.value as number)}
+            onPointerLeave={() => setValue(100)}
+        >
+            <CompareItem position="before">
+                <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>
+            </CompareItem>
+        </Compare>
+    );
+}
+```
+
+### Template
+
+```tsx
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Compare, CompareHandle, CompareIndicator, CompareItem } from '@/components/ui/compare';
+import { ProgressBar } from '@/components/ui/progressbar';
+import { Tag } from '@/components/ui/tag';
+import { Code } from '@primeicons/react';
+
+export default function TemplateDemo() {
+    return (
+        <Compare className="relative w-full max-w-md mx-auto h-[320px]">
+            <CompareItem position="before">
+                <ThemePanel theme="purple" />
+            </CompareItem>
+            <CompareItem position="after">
+                <ThemePanel theme="primary" />
+            </CompareItem>
+            <CompareHandle>
+                <CompareIndicator className="group flex items-center justify-center border border-surface">
+                    <Code className="group-data-[orientation=vertical]:rotate-90" />
+                </CompareIndicator>
+            </CompareHandle>
+        </Compare>
+    );
+}
+
+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 shape="circle" className="w-10 h-10">
+                            <AvatarImage className={t.avatar} src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
+                        </Avatar>
+                        <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 value={72} />
+                </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>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+Compare component uses a hidden range input for keyboard accessibility. Use `ariaLabel` to provide a descriptive label.
+
+### Keyboard Support
+
+| Key           | Function                                          |
+| ------------- | ------------------------------------------------- |
+| `left arrow`  | Moves the comparison slider to the left.          |
+| `right arrow` | Moves the comparison slider to the right.         |
+| `home`        | Moves the comparison slider to the minimum value. |
+| `end`         | Moves the comparison slider to the maximum value. |