@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,179 @@
+# Checkbox
+
+Checkbox is an extension to standard checkbox element with theming.
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export default function Preview() {
+    return (
+        <div className="flex items-center justify-center">
+            <div className="flex items-center gap-2">
+                <Checkbox inputId="tw-preview-checkbox" />
+                <Label htmlFor="tw-preview-checkbox">
+                    I accept the <a className="font-semibold">Terms of Service</a>
+                </Label>
+            </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/checkbox.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/checkbox" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+```
+
+```tsx
+<Checkbox />
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+const BasicDemo = () => {
+    return (
+        <div className="flex items-center justify-center">
+            <div className="flex items-center gap-2">
+                <Checkbox inputId="basic-checkbox" />
+                <Label htmlFor="basic-checkbox">
+                    I accept the <a className="font-semibold">Terms of Service</a>
+                </Label>
+            </div>
+        </div>
+    );
+};
+
+export default BasicDemo;
+```
+
+### Indeterminate
+
+Use the `indeterminate` property to display an indeterminate state.
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export default function IndeterminateDemo() {
+    return (
+        <div className="flex items-center gap-2 justify-center">
+            <Checkbox indeterminate />
+            <Label htmlFor="indeterminate-checkbox">Email Notifications</Label>
+        </div>
+    );
+}
+```
+
+### Sizes
+
+Use the `size` property to change the size of a checkbox.
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export default function SizesDemo() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-4">
+            <div className="flex items-center gap-2">
+                <Checkbox inputId="small" size="small" />
+                <Label htmlFor="small">Small</Label>
+            </div>
+            <div className="flex items-center gap-2">
+                <Checkbox inputId="normal" size="normal" />
+                <Label htmlFor="normal">Normal</Label>
+            </div>
+            <div className="flex items-center gap-2">
+                <Checkbox inputId="large" size="large" />
+                <Label htmlFor="large">Large</Label>
+            </div>
+        </div>
+    );
+}
+```
+
+### Filled
+
+Specify the `filled` property to display the component with a higher visual emphasis than the default outlined style.
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export default function FilledDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <div className="flex items-center gap-2">
+                <Checkbox inputId="filled" variant="filled" />
+                <Label htmlFor="filled">Filled</Label>
+            </div>
+        </div>
+    );
+}
+```
+
+### Disabled
+
+Use the `disabled` property to disable a checkbox.
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+
+export default function DisabledDemo() {
+    return (
+        <div className="flex items-center justify-center gap-4">
+            <Checkbox inputId="disabled" disabled />
+            <Checkbox inputId="disabled" disabled checked />
+        </div>
+    );
+}
+```
+
+### Invalid
+
+Specify the `invalid` property to display the component with a red border.
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export default function InvalidDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <div className="flex items-center gap-2">
+                <Checkbox inputId="invalid" invalid />
+                <Label htmlFor="invalid" className="text-red-500 dark:text-red-400">
+                    Invalid
+                </Label>
+            </div>
+        </div>
+    );
+}
+```

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

@@ -0,0 +1,279 @@
+# CheckboxGroup
+
+Checkbox is an extension to standard checkbox element with theming.
+
+```tsx
+'use client';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CheckboxGroup } from '@/components/ui/checkboxgroup';
+
+const options = [
+    { label: 'Gemini', value: 'gemini' },
+    { label: 'Claude', value: 'claude' },
+    { label: 'ChatGPT', value: 'chatgpt' },
+    { label: 'Deepseek', value: 'deepseek' }
+];
+
+export default function Preview() {
+    return (
+        <div className="flex items-center justify-center">
+            <div className="p-1 rounded-2xl bg-surface-100 dark:bg-surface-900 max-w-3xs">
+                <div className="pl-4 pt-2 pb-2.5 text-sm font-semibold text-surface-500">Survey</div>
+                <div className="p-4 rounded-xl bg-surface-0 dark:bg-surface-950">
+                    <div className="mb-3 text-color">Which LLM provider should we integrate next?</div>
+                    <CheckboxGroup defaultValue={['claude']} className="flex-col gap-2">
+                        {options.map((option) => (
+                            <div key={option.value} className="flex items-center gap-3">
+                                <Checkbox inputId={`tw-${option.value}`} value={option.value} />
+                                <label htmlFor={`tw-${option.value}`} className="text-surface-500 dark:text-surface-400 font-normal text-base">
+                                    {option.label}
+                                </label>
+                            </div>
+                        ))}
+                    </CheckboxGroup>
+                </div>
+            </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/checkboxgroup.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/checkboxgroup" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+import { CheckboxGroup } from '@/components/ui/checkboxgroup';
+```
+
+```tsx
+<CheckboxGroup>
+    <Checkbox value="option1" />
+    <Checkbox value="option2" />
+</CheckboxGroup>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+'use client';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CheckboxGroup } from '@/components/ui/checkboxgroup';
+import { Label } from '@/components/ui/label';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <CheckboxGroup defaultValue={['Cheese']} className="gap-4 flex-wrap">
+                <div className="flex items-center gap-2">
+                    <Checkbox inputId="cheese" value="Cheese" />
+                    <Label htmlFor="cheese">Cheese</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Checkbox inputId="mushroom" value="Mushroom" />
+                    <Label htmlFor="mushroom">Mushroom</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Checkbox inputId="pepper" value="Pepper" />
+                    <Label htmlFor="pepper">Pepper</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Checkbox inputId="onion" value="Onion" />
+                    <Label htmlFor="onion">Onion</Label>
+                </div>
+            </CheckboxGroup>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+Drive the selection with `value` and `onValueChange` to keep it in your own state.
+
+```tsx
+'use client';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CheckboxGroup } from '@/components/ui/checkboxgroup';
+import type { CheckboxGroupChangeEvent } from 'primereact/checkboxgroup';
+import { Label } from '@/components/ui/label';
+import * as React from 'react';
+
+const ingredients = ['Cheese', 'Mushroom', 'Pepper', 'Onion'];
+
+export default function ControlledDemo() {
+    const [value, setValue] = React.useState<string[]>(['Cheese']);
+
+    return (
+        <div className="flex flex-col items-center">
+            <div className="text-center font-mono text-sm text-surface-500 mb-4">onValueChange: {JSON.stringify(value)}</div>
+            <CheckboxGroup value={value} onValueChange={(e: CheckboxGroupChangeEvent) => setValue(e.value as string[])} className="gap-4 flex-wrap">
+                {ingredients.map((ingredient) => (
+                    <div key={ingredient} className="flex items-center gap-2">
+                        <Checkbox inputId={ingredient} value={ingredient} />
+                        <Label htmlFor={ingredient}>{ingredient}</Label>
+                    </div>
+                ))}
+            </CheckboxGroup>
+        </div>
+    );
+}
+```
+
+### Dynamic
+
+Checkboxes can be generated using a list of values.
+
+```tsx
+'use client';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CheckboxGroup } from '@/components/ui/checkboxgroup';
+import { Label } from '@/components/ui/label';
+
+export default function DynamicDemo() {
+    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">
+            <CheckboxGroup className="flex-col gap-4">
+                {categories.map((category) => (
+                    <div key={category.key} className="flex items-center gap-2">
+                        <Checkbox inputId={category.key} value={category.key} />
+                        <Label htmlFor={category.key}>{category.name}</Label>
+                    </div>
+                ))}
+            </CheckboxGroup>
+        </div>
+    );
+}
+```
+
+### Card
+
+Checkboxes can be displayed in a card format.
+
+```tsx
+'use client';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CheckboxGroup } from '@/components/ui/checkboxgroup';
+
+const interests = [
+    {
+        id: 'tech',
+        title: '💻 Technology',
+        description: 'Latest updates in software, gadgets, and innovation.'
+    },
+    {
+        id: 'design',
+        title: '🎨 Design',
+        description: 'UI/UX trends, graphic design tips, and creativity.'
+    },
+    {
+        id: 'finance',
+        title: '💰 Finance',
+        description: 'Investing, saving, and crypto news.'
+    }
+];
+
+export default function CardDemo() {
+    return (
+        <div className="max-w-3xl mx-auto">
+            <h5 className="font-medium">Select your interests:</h5>
+            <CheckboxGroup className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
+                {interests.map((interest) => (
+                    <label
+                        key={interest.id}
+                        className="flex-1 select-none flex items-start gap-3 p-4 rounded-md border border-surface has-checked:border-primary hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors cursor-pointer"
+                    >
+                        <Checkbox key={interest.id} value={interest.id} />
+                        <div className="flex-1 flex flex-col gap-2">
+                            <h6 className="font-medium leading-none">{interest.title}</h6>
+                            <p className="text-sm text-surface-500">{interest.description}</p>
+                        </div>
+                    </label>
+                ))}
+            </CheckboxGroup>
+        </div>
+    );
+}
+```
+
+### Indeterminate
+
+Use the `indeterminate` property to display an indeterminate state.
+
+```tsx
+'use client';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CheckboxGroup } from '@/components/ui/checkboxgroup';
+import type { CheckboxRootChangeEvent } from 'primereact/checkbox';
+import type { CheckboxGroupChangeEvent } from 'primereact/checkboxgroup';
+import { Label } from '@/components/ui/label';
+import React from 'react';
+
+const categories = [
+    { name: 'Product updates', key: 'product-updates' },
+    { name: 'Weekly newsletter', key: 'weekly-newsletter' },
+    { name: 'Security alerts', key: 'security-alerts' }
+];
+
+export default function IndeterminateDemo() {
+    const [value, setValue] = React.useState<string[]>([]);
+
+    const isAllSelected = categories.every((category) => value.includes(category.key));
+    const indeterminate = categories.some((category) => value.includes(category.key)) && !isAllSelected;
+
+    return (
+        <div className="flex items-center justify-center">
+            <div className="flex flex-col gap-4">
+                <div className="flex items-center gap-2">
+                    <Checkbox
+                        inputId="indeterminate-checkbox"
+                        indeterminate={indeterminate}
+                        checked={isAllSelected}
+                        onCheckedChange={(e: CheckboxRootChangeEvent) => setValue(e.checked ? categories.map((category) => category.key) : [])}
+                    />
+                    <Label htmlFor="indeterminate-checkbox">Email Notifications</Label>
+                </div>
+                <CheckboxGroup
+                    value={value}
+                    onValueChange={(event: CheckboxGroupChangeEvent) => setValue(event.value as string[])}
+                    className="flex-col gap-4 pl-7"
+                >
+                    {categories.map((item) => (
+                        <div key={item.key} className="flex items-center gap-2">
+                            <Checkbox inputId={item.key} value={item.key} />
+                            <Label htmlFor={item.key}>{item.name}</Label>
+                        </div>
+                    ))}
+                </CheckboxGroup>
+            </div>
+        </div>
+    );
+}
+```