@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,313 @@
+# ProgressBar
+
+ProgressBar is a process status indicator.
+
+```tsx
+'use client';
+import { Send } from '@primeicons/react';
+import { ProgressBar } from '@/components/ui/progressbar';
+import * as React from 'react';
+
+export default function Preview() {
+    const [value, setValue] = React.useState(75);
+
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setValue((prev) => {
+                if (prev >= 100) {
+                    clearInterval(interval);
+
+                    return 100;
+                }
+
+                return Math.min(100, prev + 1);
+            });
+        }, 500);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const totalMinutes = 8 * 60 + 15;
+    const remaining = Math.max(0, Math.round(totalMinutes * (1 - value / 100)));
+    const h = Math.floor(remaining / 60);
+    const m = remaining % 60;
+
+    return (
+        <div className="max-w-xs mx-auto space-y-3">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-1.5 text-sm">
+                    <span className="text-color font-medium">British Airways</span>
+                    <span className="text-muted-color">·</span>
+                    <span className="text-muted-color tabular-nums">BA 178</span>
+                </div>
+                <span className="text-emerald-500 font-medium uppercase text-xs tracking-wide">On Time</span>
+            </div>
+            <div className="flex items-end justify-between">
+                <div className="flex flex-col">
+                    <span className="text-2xl font-bold tracking-tight">LHR</span>
+                    <span className="text-muted-color text-sm tabular-nums">14:30</span>
+                </div>
+                <div className="flex flex-col items-end">
+                    <span className="text-2xl font-bold tracking-tight">JFK</span>
+                    <span className="text-muted-color text-sm tabular-nums">18:45</span>
+                </div>
+            </div>
+            <ProgressBar value={value} />
+            <div className="flex items-center gap-2 text-sm text-color">
+                <Send className="size-3.5! text-primary" />
+                <span className="tabular-nums ">{value >= 100 ? 'Arrived' : `${h}h ${m.toString().padStart(2, '0')}m remaining`}</span>
+            </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/progressbar.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/progressbar" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { ProgressBar } from '@/components/ui/progressbar';
+```
+
+```tsx
+<ProgressBar value={50} />
+```
+
+## Examples
+
+### Basic
+
+Reflects the completion percentage of an ongoing process.
+
+```tsx
+import { ProgressBar } from '@/components/ui/progressbar';
+
+export default function BasicDemo() {
+    const value = 50;
+
+    return (
+        <div className="max-w-sm mx-auto">
+            <ProgressBar value={value} />
+        </div>
+    );
+}
+```
+
+### Dynamic
+
+Value is reactive so updating it dynamically changes the bar as well.
+
+```tsx
+'use client';
+import { ProgressBar } from '@/components/ui/progressbar';
+import * as React from 'react';
+
+export default function DynamicDemo() {
+    const [value, setValue] = React.useState(0);
+    const interval = React.useRef<NodeJS.Timeout | undefined>(undefined);
+
+    React.useEffect(() => {
+        interval.current = setInterval(() => {
+            setValue((prevValue) => {
+                const newValue = prevValue + Math.random() * 40 + 1;
+
+                if (newValue >= 100) {
+                    clearInterval(interval.current);
+
+                    return 100;
+                }
+
+                return newValue;
+            });
+        }, 2000);
+
+        return () => {
+            if (interval.current) {
+                clearInterval(interval.current);
+                interval.current = undefined;
+            }
+        };
+    }, []);
+
+    return (
+        <div className="max-w-sm mx-auto">
+            <div className="text-color font-medium text-sm mb-2">Uploading Files</div>
+            <ProgressBar value={value} />
+        </div>
+    );
+}
+```
+
+### Formatter
+
+Custom formatter function to format the display value.
+
+```tsx
+'use client';
+import { ProgressBar } from '@/components/ui/progressbar';
+
+export default function FormatterDemo() {
+    return (
+        <div className="max-w-sm mx-auto">
+            <ProgressBar value={50} formatter={(value: number) => `${value}/100`} />
+        </div>
+    );
+}
+```
+
+### Template
+
+Place `ProgressBar.Value` where the progress value should be displayed inside the `ProgressBar` and customize `formatter` prop to display in different format.
+
+```tsx
+'use client';
+import { ProgressBar } from '@/components/ui/progressbar';
+import * as React from 'react';
+
+export default function TemplateDemo() {
+    const [uploadedFileSize, setUploadedFileSize] = React.useState(0);
+    const maxFileSize = 5000;
+
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            setUploadedFileSize((prevValue) => {
+                const newValue = prevValue + Math.floor(Math.random() * 200) + 1;
+
+                return newValue >= maxFileSize ? maxFileSize : newValue;
+            });
+        }, 500);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const formatFileSize = (bytes: number) => {
+        if (bytes < 1024) return bytes.toFixed(2) + ' B';
+        else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB';
+        else return (bytes / 1048576).toFixed(2) + ' MB';
+    };
+
+    return (
+        <div>
+            <div className="max-w-sm mx-auto space-y-8">
+                <ProgressBar value={uploadedFileSize} max={maxFileSize} formatter={(value: number) => `${value.toFixed(1)}%`} />
+
+                <ProgressBar
+                    value={uploadedFileSize}
+                    max={maxFileSize}
+                    formatter={(value: number) => {
+                        const currentSize = (value / 100) * maxFileSize;
+
+                        return `${formatFileSize(currentSize)} / ${formatFileSize(maxFileSize)}`;
+                    }}
+                />
+
+                <ProgressBar
+                    value={uploadedFileSize}
+                    max={maxFileSize}
+                    formatter={(value: number) => {
+                        const remaining = ((maxFileSize - uploadedFileSize) / 200).toFixed(0);
+
+                        return `${value.toFixed(0)}% (${remaining}s remaining)`;
+                    }}
+                />
+
+                <ProgressBar
+                    value={uploadedFileSize}
+                    max={maxFileSize}
+                    formatter={(value: number) => {
+                        if (value < 40) return 'Preparing file...';
+                        else if (value < 60) return 'Uploading file...';
+                        else if (value < 99) return 'Finalizing...';
+                        else return 'Upload complete';
+                    }}
+                />
+            </div>
+        </div>
+    );
+}
+```
+
+### Indeterminate
+
+For progresses with no value to track, set the `mode` property to `indeterminate`.
+
+```tsx
+import { ProgressBar } from '@/components/ui/progressbar';
+
+export default function IndeterminateDemo() {
+    return (
+        <div className="max-w-sm mx-auto">
+            <ProgressBar mode="indeterminate" className="h-1.5" />
+        </div>
+    );
+}
+```
+
+### As Steps
+
+Steps are used to display a progress with multiple steps.
+
+```tsx
+'use client';
+import { Button } from '@/components/ui/button';
+import { ProgressBar } from '@/components/ui/progressbar';
+import * as React from 'react';
+
+const orderProgress = ['Place Order', 'Order Placed', 'Processing', 'Shipped', 'Delivered'];
+
+export default function StepsDemo() {
+    const [step, setStep] = React.useState(1);
+    const nextStep = () => setStep((prev) => Math.min(prev + 1, orderProgress.length - 1));
+    const prevStep = () => setStep((prev) => Math.max(prev - 1, 0));
+
+    return (
+        <div>
+            <div className="max-w-sm mx-auto">
+                <div className="mb-3 font-medium text-sm">{orderProgress[step]}</div>
+                <ProgressBar value={step} min={0} max={orderProgress.length - 1} />
+
+                <div className="flex items-center justify-between mt-6">
+                    <Button onClick={prevStep} disabled={step === 0} rounded variant="text" severity="contrast">
+                        Previous
+                    </Button>
+                    <Button onClick={nextStep} disabled={step === orderProgress.length - 1} rounded variant="text" severity="contrast">
+                        Next
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See [Primitive API](/docs/primitive/components/progressbar#api) for `ProgressBarRoot`, `ProgressBarTrack`, `ProgressBarIndicator`, `ProgressBarLabel`, `ProgressBarValue` component documentation.
+
+### Hooks
+
+See [Headless API](/docs/headless/components/progressbar#api) for `useProgressBar` hook documentation.
+
+### Accessibility
+
+See [ProgressBar Primitive](/docs/primitive/components/progressbar#accessibility) for WAI-ARIA compliance details and keyboard support.

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

@@ -0,0 +1,366 @@
+# RadioButton
+
+RadioButton is an extension to standard radio button element with theming.
+
+```tsx
+'use client';
+import { RadioButton, RadioButtonGroup } from '@/components/ui/radiobutton';
+
+const workspaceEnvironments = [
+    {
+        id: '1',
+        name: 'US East — Virginia',
+        description: 'Low latency, auto-scaling enabled.',
+        tag: 'Faster',
+        flagClass: 'flag-us'
+    },
+    {
+        id: '2',
+        name: 'EU West — Frankfurt',
+        description: 'CI/CD pipeline, daily backups.',
+        tag: null,
+        flagClass: 'flag-de'
+    },
+    {
+        id: '3',
+        name: 'EU East — Poland',
+        description: 'GDPR compliant, secure.',
+        tag: null,
+        flagClass: 'flag-pl'
+    }
+];
+
+export default function Preview() {
+    return (
+        <div className="max-w-xs mx-auto">
+            <h5 className="font-medium">Select a deployment environment:</h5>
+            <RadioButtonGroup defaultValue="1" className="mt-2 flex flex-col gap-3">
+                {workspaceEnvironments.map((card) => (
+                    <label
+                        key={card.id}
+                        htmlFor={`tw-preview-${card.id}`}
+                        className="flex-1 flex items-start gap-2 p-4 rounded-lg border border-surface has-checked:border-primary hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors cursor-pointer"
+                    >
+                        <div className="flex-1 flex flex-col gap-2">
+                            <div className="inline-flex items-center gap-2">
+                                <span className={`flag w-5! h-auto! aspect-15/10 ${card.flagClass}`} />
+                                <h5 className="font-medium leading-none">{card.name}</h5>
+                            </div>
+                            <p className="text-sm text-surface-500">{card.description}</p>
+                        </div>
+
+                        <RadioButton inputId={`tw-preview-${card.id}`} name="tw-preview-card" value={card.id} />
+                    </label>
+                ))}
+            </RadioButtonGroup>
+        </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/radiobutton.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+<DocStepper>
+<DocStep>
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/radiobutton" />
+</DocStep>
+<DocStep>
+Update the import paths to match your project setup.
+</DocStep>
+</DocStepper>
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { RadioButton, RadioButtonGroup } from '@/components/ui/radiobutton';
+```
+
+```tsx
+<RadioButtonGroup>
+    <RadioButton />
+</RadioButtonGroup>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+'use client';
+import { Label } from '@/components/ui/label';
+import { RadioButton, RadioButtonGroup } from '@/components/ui/radiobutton';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <RadioButtonGroup orientation="vertical">
+                <div className="flex items-center gap-3">
+                    <RadioButton inputId="ingredient-strawberry" name="fruit" />
+                    <Label htmlFor="ingredient-strawberry">🍓 Strawberry</Label>
+                </div>
+
+                <div className="flex items-center gap-3">
+                    <RadioButton inputId="ingredient-banana" name="fruit" />
+                    <Label htmlFor="ingredient-banana">🍌 Banana</Label>
+                </div>
+
+                <div className="flex items-center gap-3">
+                    <RadioButton inputId="ingredient-watermelon" name="fruit" />
+                    <Label htmlFor="ingredient-watermelon">🍉 Watermelon</Label>
+                </div>
+            </RadioButtonGroup>
+        </div>
+    );
+}
+```
+
+### Group
+
+Use the `RadioButton.Group` component with `value` and `onValueChange` props to control the selected state of radio buttons.
+
+```tsx
+'use client';
+import { Label } from '@/components/ui/label';
+import { RadioButton, RadioButtonGroup } from '@/components/ui/radiobutton';
+
+export default function GroupDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <RadioButtonGroup defaultValue="cheese">
+                <div className="flex items-center gap-2">
+                    <RadioButton inputId="ingredient1" name="pizza" value="cheese" />
+                    <Label htmlFor="ingredient1">Cheese</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <RadioButton inputId="ingredient2" name="pizza" value="mushroom" />
+                    <Label htmlFor="ingredient2">Mushroom</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <RadioButton inputId="ingredient3" name="pizza" value="pepper" />
+                    <Label htmlFor="ingredient3">Pepper</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <RadioButton inputId="ingredient4" name="pizza" value="onion" />
+                    <Label htmlFor="ingredient4">Onion</Label>
+                </div>
+            </RadioButtonGroup>
+        </div>
+    );
+}
+```
+
+### Dynamic
+
+RadioButtons can be generated using a list of values.
+
+```tsx
+'use client';
+import { RadioButton, RadioButtonGroup } from '@/components/ui/radiobutton';
+import type { RadioButtonGroupValueChangeEvent } from 'primereact/radiobuttongroup';
+import { Label } from '@/components/ui/label';
+import * as React from 'react';
+
+export default function DynamicDemo() {
+    const [ingredient, setIngredient] = React.useState<string | undefined>();
+    const categories = [
+        { name: 'Accounting', key: 'A' },
+        { name: 'Marketing', key: 'M' },
+        { name: 'Production', key: 'P' },
+        { name: 'Research', key: 'R' }
+    ];
+
+    return (
+        <div className="flex items-center justify-center">
+            <RadioButtonGroup value={ingredient} onValueChange={(e: RadioButtonGroupValueChangeEvent) => setIngredient(e.value as string)}>
+                {categories.map((item) => (
+                    <div key={item.key} className="flex items-center gap-2">
+                        <RadioButton inputId={item.key} name="category" value={item.key} />
+                        <Label htmlFor={item.key}>{item.name}</Label>
+                    </div>
+                ))}
+            </RadioButtonGroup>
+        </div>
+    );
+}
+```
+
+### Card
+
+RadioButtons can be displayed in a card style.
+
+```tsx
+'use client';
+import { Label } from '@/components/ui/label';
+import { RadioButton, RadioButtonGroup } from '@/components/ui/radiobutton';
+
+const CardDemo = () => {
+    const cards = [
+        { id: 'card1', name: '💳 Credit Card', description: 'Pay with Visa, Mastercard, or AMEX.' },
+        { id: 'card2', name: '💸 PayPal', description: 'Connect your PayPal account' },
+        { id: 'card3', name: '🪙 Crypto', description: 'Pay with Bitcoin or Ethereum.' }
+    ];
+
+    return (
+        <div className="max-w-xs mx-auto">
+            <h5 className="font-medium mb-4">Select a payment method:</h5>
+            <RadioButtonGroup orientation="vertical" defaultValue="card1">
+                {cards.map((card) => (
+                    <Label
+                        key={card.id}
+                        htmlFor={card.id}
+                        className="flex-1 flex items-start gap-2 p-4 rounded-lg border border-surface has-checked:border-primary hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors cursor-pointer"
+                    >
+                        <div className="flex-1 flex flex-col gap-2">
+                            <h5 className="font-medium leading-none">{card.name}</h5>
+                            <p className="text-sm text-surface-500">{card.description}</p>
+                        </div>
+
+                        <RadioButton inputId={card.id} name="card" value={card.id} />
+                    </Label>
+                ))}
+            </RadioButtonGroup>
+        </div>
+    );
+};
+
+export default CardDemo;
+```
+
+### Sizes
+
+Use the `size` property to change the size of a radio button.
+
+```tsx
+'use client';
+import { RadioButton } from '@/components/ui/radiobutton';
+import { Label } from '@/components/ui/label';
+import * as React from 'react';
+
+export default function SizesDemo() {
+    const [value, setValue] = React.useState<string>('size_normal');
+
+    return (
+        <div className="flex justify-center">
+            <div className="flex flex-wrap gap-4">
+                <div className="flex items-center gap-2">
+                    <RadioButton
+                        inputId="tw-size_small"
+                        checked={value === 'size_small'}
+                        onChange={() => setValue('size_small')}
+                        name="tw-size"
+                        size="small"
+                    />
+                    <Label htmlFor="tw-size_small" className="text-sm">
+                        Small
+                    </Label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <RadioButton inputId="tw-size_normal" checked={value === 'size_normal'} onChange={() => setValue('size_normal')} name="tw-size" />
+                    <Label htmlFor="tw-size_normal">Normal</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <RadioButton
+                        inputId="tw-size_large"
+                        checked={value === 'size_large'}
+                        onChange={() => setValue('size_large')}
+                        name="tw-size"
+                        size="large"
+                    />
+                    <Label htmlFor="tw-size_large" className="text-lg">
+                        Large
+                    </Label>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+### Filled
+
+Specify the `filled` property to display the component with a higher visual emphasis than the default outlined style.
+
+```tsx
+'use client';
+import { RadioButton } from '@/components/ui/radiobutton';
+import * as React from 'react';
+
+export default function FilledDemo() {
+    const [checked, setChecked] = React.useState(false);
+
+    return (
+        <div className="flex items-center justify-center">
+            <RadioButton variant="filled" checked={checked} onClick={() => setChecked((prev) => !prev)} />
+        </div>
+    );
+}
+```
+
+### Disabled
+
+When the `disabled` property is present, the element cannot be edited and focused.
+
+```tsx
+import { RadioButton, RadioButtonGroup } from '@/components/ui/radiobutton';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex justify-center">
+            <RadioButtonGroup value="2">
+                <RadioButton disabled />
+                <RadioButton value="2" disabled />
+            </RadioButtonGroup>
+        </div>
+    );
+}
+```
+
+### Invalid
+
+Invalid state is displayed using the `invalid` property to indicate a failed validation. You can use this style when integrating with form validation libraries.
+
+```tsx
+'use client';
+import { RadioButton } from '@/components/ui/radiobutton';
+import * as React from 'react';
+
+export default function InvalidDemo() {
+    const [checked, setChecked] = React.useState(false);
+
+    return (
+        <div className="flex justify-center">
+            <RadioButton invalid checked={checked} onClick={() => setChecked((prev) => !prev)} />
+        </div>
+    );
+}
+```
+
+## Accessibility
+
+### Screen Reader
+
+RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.
+
+```tsx
+<label htmlFor="rb1">One</label>
+<RadioButton inputId="rb1" />
+
+<span id="rb2">Two</span>
+<RadioButton aria-labelledby="rb2" />
+
+<RadioButton aria-label="Three" />
+```