@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,224 @@
+# Card
+
+Card is a flexible container component.
+
+```tsx
+import { Button } from '@/components/ui/button';
+import { Card, CardBody, CardCaption, CardContent, CardFooter, CardSubTitle, CardTitle } from '@/components/ui/card';
+
+export default function Preview() {
+    return (
+        <Card className="max-w-sm mx-auto">
+            <CardBody className="space-y-4">
+                <CardCaption>
+                    <CardTitle>Pro Subscription</CardTitle>
+                    <CardSubTitle>Everything you need to scale your workflow</CardSubTitle>
+                </CardCaption>
+                <CardContent>
+                    <p>Get unlimited access to all features, priority support, and advanced analytics to help your team grow faster.</p>
+                </CardContent>
+                <CardFooter className="flex flex-col gap-4">
+                    <span className="text-lg font-medium">$29 / month</span>
+                    <Button className="w-full">Upgrade</Button>
+                </CardFooter>
+            </CardBody>
+        </Card>
+    );
+}
+```
+
+## 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/card.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/card" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Card, CardBody, CardCaption, CardContent, CardFooter, CardSubTitle, CardTitle } from '@/components/ui/card';
+```
+
+```tsx
+<Card>
+    <CardBody>
+        <CardCaption>
+            <CardTitle>Title</CardTitle>
+            <CardSubTitle>Subtitle</CardSubTitle>
+        </CardCaption>
+        <CardContent />
+        <CardFooter />
+    </CardBody>
+</Card>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Card, CardBody, CardCaption, CardContent, CardFooter, CardSubTitle, CardTitle } from '@/components/ui/card';
+
+export default function BasicDemo() {
+    return (
+        <Card className="max-w-sm mx-auto">
+            <CardBody className="space-y-4">
+                <CardCaption>
+                    <CardTitle>Starter Plan</CardTitle>
+                    <CardSubTitle>For personal projects</CardSubTitle>
+                </CardCaption>
+
+                <CardContent>
+                    <p className="m-0">Includes essential features, basic analytics and access to community support.</p>
+                </CardContent>
+                <CardFooter className="text-sm text-surface-500 dark:text-surface-400">Cancel anytime. No credit card required.</CardFooter>
+            </CardBody>
+        </Card>
+    );
+}
+```
+
+### With Form
+
+Use `Card`, `Card.Body`, `Card.Caption`, `Card.Title`, `Card.Subtitle`, `Card.Content`, `Card.Footer`, to create a simple card.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { Card, CardBody, CardCaption, CardContent, CardFooter, CardSubTitle, CardTitle } from '@/components/ui/card';
+import { InputText } from '@/components/ui/inputtext';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
+export default function WithFormDemo() {
+    return (
+        <Card className="max-w-sm mx-auto">
+            <CardBody className="space-y-4">
+                <CardCaption>
+                    <CardTitle>Welcome back</CardTitle>
+                    <CardSubTitle>Sign in with your email to continue.</CardSubTitle>
+                </CardCaption>
+                <CardContent>
+                    <form className="space-y-6">
+                        <div className="flex flex-col gap-2">
+                            <Label htmlFor="email">Email</Label>
+                            <InputText id="email" type="email" />
+                        </div>
+                        <div className="flex flex-col gap-2">
+                            <div className="flex items-center justify-between">
+                                <Label htmlFor="password" className="flex-1">
+                                    Password
+                                </Label>
+                                <Button as={Link} href="/forgot-password" variant="link" className="p-0">
+                                    Forgot password?
+                                </Button>
+                            </div>
+                            <InputText id="password" type="password" />
+                        </div>
+                    </form>
+                </CardContent>
+                <CardFooter className="flex flex-col gap-4">
+                    <Button>Login</Button>
+                    <Button severity="secondary" variant="outlined">
+                        Login with Google
+                    </Button>
+                    <div className="mt-2 text-center text-surface-500 text-sm">
+                        Don't have an account?{' '}
+                        <Button as={Link} href="/signup" variant="link" className="p-0">
+                            Sign up
+                        </Button>
+                    </div>
+                </CardFooter>
+            </CardBody>
+        </Card>
+    );
+}
+```
+
+### Advanced
+
+Use `Card.Header` to place an image, avatar or other content in the header.
+
+```tsx
+import { Globe, MapMarker, Phone, StarFill } from '@primeicons/react';
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardBody, CardCaption, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tag } from '@/components/ui/tag';
+
+export default function AdvancedDemo() {
+    return (
+        <Card className="max-w-sm mx-auto overflow-hidden">
+            <CardHeader className="relative">
+                <img
+                    className="w-full max-h-42 object-cover"
+                    alt="user header"
+                    src="https://images.unsplash.com/photo-1513649718256-1a7162666bad?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                />
+                <Avatar shape="circle" className="w-24 h-24 border-3 border-surface-0 dark:border-surface-900 absolute -bottom-12 left-4">
+                    <AvatarImage src="https://images.unsplash.com/photo-1722495178488-c8056c4ec2c0?q=80&w=2081&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+                </Avatar>
+            </CardHeader>
+            <CardBody className="pt-16">
+                <CardCaption>
+                    <CardTitle className="font-bold text-xl">Sakura Fresh Market</CardTitle>
+                    <div className="flex items-center gap-2">
+                        <Tag className="w-fit" severity="info">
+                            Daily
+                        </Tag>
+                        <Tag className="w-fit" severity="info">
+                            Premium
+                        </Tag>
+                    </div>
+                </CardCaption>
+                <CardContent className="space-y-4">
+                    <p>Sakura Fresh Market is your go-to store for fresh local produce, Japanese snacks, and daily essentials — all in one place!</p>
+                    <div className="flex items-center gap-2">
+                        <StarFill className="text-yellow-500"></StarFill>
+                        <span>
+                            <b>4.6</b> (200+ reviews)
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <MapMarker />
+                        <span>Tokyo, Shibuya-ku</span>
+                    </div>
+                </CardContent>
+                <CardFooter className="flex items-center gap-2 mt-4">
+                    <Button className="flex-1" severity="secondary" variant="outlined">
+                        <Phone />
+                        Call Us
+                    </Button>
+                    <Button className="flex-1">
+                        <Globe />
+                        Visit Site
+                    </Button>
+                </CardFooter>
+            </CardBody>
+        </Card>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+`Card` is a structural container. If the card represents a standalone content region, provide an accessible name using `aria-label` or `aria-labelledby` on `Card.Root`.
+
+### Keyboard Support
+
+`Card` does not include built-in keyboard interaction. Keyboard behavior depends on interactive elements placed inside the card (for example buttons, links, or form controls).

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

@@ -0,0 +1,329 @@
+# Carousel
+
+Carousel is a content slider featuring various customization options.
+
+```tsx
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrev } from '@/components/ui/carousel';
+
+const albums = [
+    {
+        title: 'Velvet Haze',
+        artist: 'Aurora Skies',
+        img: 'https://plus.unsplash.com/premium_photo-1721310985165-4e6e63d5e7a1?w=200&h=200&fit=crop&auto=format'
+    },
+    {
+        title: 'Dissolve',
+        artist: 'Phantom Echo',
+        img: 'https://images.unsplash.com/photo-1711054824441-064a99073a0b?w=200&h=200&fit=crop&auto=format'
+    },
+    {
+        title: 'Still Life',
+        artist: 'Glass Animals',
+        img: 'https://images.unsplash.com/photo-1651443039959-582bbea6be6a?w=200&h=200&fit=crop&auto=format'
+    },
+    {
+        title: 'Bloom',
+        artist: 'Petal Storm',
+        img: 'https://plus.unsplash.com/premium_photo-1748180936767-e1ce9b2374fa?w=200&h=200&fit=crop&auto=format'
+    },
+    {
+        title: 'Refraction',
+        artist: 'Prism Collective',
+        img: 'https://images.unsplash.com/photo-1651443146979-4cf9a27dcade?w=200&h=200&fit=crop&auto=format'
+    },
+    { title: 'Ivory', artist: 'Soft Landing', img: 'https://images.unsplash.com/photo-1531777992189-ad52457fbe93?w=200&h=200&fit=crop&auto=format' }
+];
+
+export default function Preview() {
+    return (
+        <Carousel className="max-w-sm mx-auto" slidesPerPage={2.45} spacing={20}>
+            <div className="flex items-center justify-between mb-4">
+                <div className="font-bold">Last Played</div>
+                <div className="flex items-center gap-2">
+                    <CarouselPrev />
+                    <CarouselNext />
+                </div>
+            </div>
+            <CarouselContent>
+                {albums.map((album) => (
+                    <CarouselItem key={album.title} className="w-full relative">
+                        <div className="relative">
+                            <img draggable={false} src={album.img} alt={album.title} className="rounded-xl object-cover w-full aspect-square" />
+                        </div>
+                        <div className="mt-2">
+                            <div className="font-semibold">{album.title}</div>
+                            <div className="text-sm text-muted-color">{album.artist}</div>
+                        </div>
+                    </CarouselItem>
+                ))}
+            </CarouselContent>
+        </Carousel>
+    );
+}
+```
+
+## 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/carousel.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/carousel" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Carousel, CarouselContent, CarouselIndicators, CarouselItem, CarouselNext, CarouselPrev } from '@/components/ui/carousel';
+```
+
+```tsx
+<Carousel>
+    <CarouselContent>
+        <CarouselItem>...</CarouselItem>
+    </CarouselContent>
+    <CarouselIndicators />
+    <CarouselPrev />
+    <CarouselNext />
+</Carousel>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Carousel, CarouselContent, CarouselItem, CarouselIndicators, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
+
+function BasicDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel className="max-w-xl mx-auto" align="center">
+                <CarouselContent className="h-[240px]">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <CarouselItem key={i}>
+                            <div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-900 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </CarouselItem>
+                    ))}
+                </CarouselContent>
+                <div className="flex mt-4 gap-4">
+                    <CarouselIndicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <CarouselPrev />
+                        <CarouselNext />
+                    </div>
+                </div>
+            </Carousel>
+        </div>
+    );
+}
+
+export default BasicDemo;
+```
+
+### Alignment
+
+Use the `align` property to align the carousel items. `slidesPerPage` property is used to control the number of slides visible per page.
+
+```tsx
+import { Carousel, CarouselContent, CarouselItem, CarouselIndicators, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
+
+function AlignmentDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel className="max-w-xl mx-auto" align="start" slidesPerPage={1.5}>
+                <CarouselContent className="h-[240px]">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <CarouselItem key={i}>
+                            <div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </CarouselItem>
+                    ))}
+                </CarouselContent>
+                <div className="flex mt-4 gap-4">
+                    <CarouselIndicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <CarouselPrev />
+                        <CarouselNext />
+                    </div>
+                </div>
+            </Carousel>
+        </div>
+    );
+}
+
+export default AlignmentDemo;
+```
+
+### Orientation
+
+Use the `orientation` property to change the orientation of the carousel.
+
+```tsx
+import { Carousel, CarouselContent, CarouselItem, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
+
+function SizeDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel className="max-w-sm mx-auto flex flex-col gap-8 items-center" orientation="vertical" slidesPerPage={1.3}>
+                <CarouselPrev />
+                <CarouselContent className="h-[240px] w-full">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <CarouselItem key={i}>
+                            <div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </CarouselItem>
+                    ))}
+                </CarouselContent>
+                <CarouselNext />
+            </Carousel>
+        </div>
+    );
+}
+
+export default SizeDemo;
+```
+
+### Loop
+
+Use the `loop` property to enable loop mode.
+
+```tsx
+import { Carousel, CarouselContent, CarouselItem, CarouselIndicators, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
+
+function LoopDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel className="max-w-xl mx-auto" align="center" loop slidesPerPage={1.75}>
+                <CarouselContent className="h-[240px]">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                        <CarouselItem key={i}>
+                            <div className="h-full text-5xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-xl border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </CarouselItem>
+                    ))}
+                </CarouselContent>
+                <div className="flex mt-4 gap-4">
+                    <CarouselIndicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <CarouselPrev />
+                        <CarouselNext />
+                    </div>
+                </div>
+            </Carousel>
+        </div>
+    );
+}
+
+export default LoopDemo;
+```
+
+### Variable Size
+
+Use the `autoSize` property to enable auto size mode and set the width of the carousel items.
+
+```tsx
+import { Carousel, CarouselContent, CarouselItem, CarouselIndicators, CarouselPrev, CarouselNext } from '@/components/ui/carousel';
+
+const items = ['120px', '80px', '200px', '160px', '220px', '180px', '280px', '100px'];
+
+function VariableSizeDemo() {
+    return (
+        <div className="mt-8 mb-16">
+            <Carousel className="max-w-xl mx-auto" align="center" autoSize>
+                <CarouselContent className="h-[140px]">
+                    {items.map((width, i) => (
+                        <CarouselItem key={i} style={{ width }}>
+                            <div className="h-full text-4xl font-semibold bg-surface-50 dark:bg-surface-950 text-surface-950 dark:text-surface-0 flex flex-col items-center justify-center gap-6 rounded-lg border border-surface">
+                                <span>{i + 1}</span>
+                            </div>
+                        </CarouselItem>
+                    ))}
+                </CarouselContent>
+                <div className="flex mt-4 gap-4">
+                    <CarouselIndicators />
+                    <div className="flex items-center justify-end gap-2 flex-1">
+                        <CarouselPrev />
+                        <CarouselNext />
+                    </div>
+                </div>
+            </Carousel>
+        </div>
+    );
+}
+
+export default VariableSizeDemo;
+```
+
+### Gallery
+
+Gallery demo shows how to use the `slide` property to scroll to a specific slide by index.
+
+```tsx
+'use client';
+import { Carousel, CarouselContent, CarouselItem } from '@/components/ui/carousel';
+import type { CarouselRootChangeEvent } from 'primereact/carousel';
+import * as React from 'react';
+
+const images = [
+    'https://images.unsplash.com/photo-1589656966895-2f33e7653819?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1518717758536-85ae29035b6d?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1704905832963-37d6f12654b7?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1470130623320-9583a8d06241?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1678841446310-d045487ef299?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1497752531616-c3afd9760a11?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1511885663737-eea53f6d6187?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1598439210625-5067c578f3f6?q=80&w=1472&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1638255402906-e838358069ab?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+];
+
+function GalleryDemo() {
+    const [selectedImage, setSelectedImage] = React.useState(0);
+
+    return (
+        <div className="mt-8 mb-16">
+            <div className="max-w-2xl mx-auto">
+                <Carousel slide={selectedImage} onSlideChange={(e: CarouselRootChangeEvent) => setSelectedImage(Number(e.value ?? 0))} align="center">
+                    <CarouselContent className="h-[396px]">
+                        {images.map((_, i) => (
+                            <CarouselItem key={i} className="basis-full! ">
+                                <img draggable={false} src={images[i]} alt={`Image ${i + 1}`} className="h-full w-full object-cover select-none" />
+                            </CarouselItem>
+                        ))}
+                    </CarouselContent>
+                </Carousel>
+                <Carousel className="mt-3" spacing={8} align="center" slide={selectedImage}>
+                    <CarouselContent className="h-[90px]">
+                        {images.map((_, i) => (
+                            <CarouselItem
+                                key={i}
+                                onClick={() => setSelectedImage(i)}
+                                className={`cursor-pointer basis-1/4! transition-opacity ${selectedImage === i ? '' : 'opacity-60 hover:opacity-40'}`}
+                            >
+                                <img draggable={false} src={images[i]} alt={`Image ${i + 1}`} className="h-full w-full object-cover select-none" />
+                            </CarouselItem>
+                        ))}
+                    </CarouselContent>
+                </Carousel>
+            </div>
+        </div>
+    );
+}
+
+export default GalleryDemo;
+```