@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,387 @@
+# Breadcrumb
+
+Breadcrumb provides contextual information about page hierarchy.
+
+```tsx
+import { Bolt, Home } from '@primeicons/react';
+import {
+    Breadcrumb,
+    BreadcrumbCurrent,
+    BreadcrumbEllipsis,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator
+} from '@/components/ui/breadcrumb';
+
+export default function Preview() {
+    return (
+        <div className="flex justify-center">
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="/">
+                            <Home />
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbEllipsis />
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Products</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">
+                            <Bolt /> Electronics
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Laptops</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbCurrent>Dell</BreadcrumbCurrent>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </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/breadcrumb.json
+```
+</DocTabsPanel>
+<DocTabsPanel value="Manual">
+Copy and paste the following code into your project
+<DocSourceViewer name="components/ui/breadcrumb" />
+Update the import paths to match your project setup.
+</DocTabsPanel>
+</DocTabs>
+
+## Usage
+
+```tsx
+import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+```
+
+```tsx
+<Breadcrumb>
+    <BreadcrumbList>
+        <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+            <BreadcrumbCurrent>Current Page</BreadcrumbCurrent>
+        </BreadcrumbItem>
+    </BreadcrumbList>
+</Breadcrumb>
+```
+
+## Examples
+
+### Basic
+
+```tsx
+import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex justify-center">
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Products</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Electronics</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Laptops</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbCurrent>Dell</BreadcrumbCurrent>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+}
+```
+
+### Route
+
+A breadcrumb can be used with routing libraries to navigate between pages.
+
+```tsx
+'use client';
+import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import * as React from 'react';
+
+const allPages = [
+    { label: 'Home' },
+    { label: 'Components' },
+    { label: 'Form' },
+    { label: 'Input' },
+    { label: 'InputText' },
+    { label: 'Variants' },
+    { label: 'Filled' },
+    { label: 'Outlined' }
+];
+
+export default function RouteDemo() {
+    const [pages, setPages] = React.useState(allPages);
+
+    const handleClick = (index: number) => {
+        setPages(pages.slice(0, index + 1));
+    };
+
+    return (
+        <div className="flex justify-center">
+            <Breadcrumb>
+                <BreadcrumbList>
+                    {pages.map((page, index) => (
+                        <React.Fragment key={page.label}>
+                            {index > 0 && <BreadcrumbSeparator />}
+                            <BreadcrumbItem>
+                                {index === pages.length - 1 ? (
+                                    <BreadcrumbCurrent>{page.label}</BreadcrumbCurrent>
+                                ) : (
+                                    <BreadcrumbLink href="#route" onClick={() => handleClick(index)}>
+                                        {page.label}
+                                    </BreadcrumbLink>
+                                )}
+                            </BreadcrumbItem>
+                        </React.Fragment>
+                    ))}
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+A breadcrumb can be controlled by managing the current page state.
+
+```tsx
+'use client';
+import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import * as React from 'react';
+
+export default function ControlledDemo() {
+    const [currentPage, setCurrentPage] = React.useState('reports');
+
+    const pages = [
+        { key: 'home', label: 'Home' },
+        { key: 'users', label: 'Users' },
+        { key: 'documents', label: 'Documents' },
+        { key: 'work', label: 'Work' },
+        { key: 'reports', label: 'Reports' }
+    ];
+
+    return (
+        <div className="flex justify-center">
+            <Breadcrumb>
+                <BreadcrumbList>
+                    {pages.map((page, index) => (
+                        <React.Fragment key={page.key}>
+                            {index > 0 && <BreadcrumbSeparator />}
+                            <BreadcrumbItem>
+                                {currentPage === page.key ? (
+                                    <BreadcrumbCurrent>{page.label}</BreadcrumbCurrent>
+                                ) : (
+                                    <BreadcrumbLink href="#controlled" onClick={() => setCurrentPage(page.key)}>
+                                        {page.label}
+                                    </BreadcrumbLink>
+                                )}
+                            </BreadcrumbItem>
+                        </React.Fragment>
+                    ))}
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+}
+```
+
+### Custom Separator
+
+A breadcrumb allows customization of the separator between items.
+
+```tsx
+import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+
+export default function CustomSeparatorDemo() {
+    return (
+        <div className="flex justify-center">
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator>/</BreadcrumbSeparator>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Products</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator>/</BreadcrumbSeparator>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Electronics</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator>/</BreadcrumbSeparator>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Laptops</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator>/</BreadcrumbSeparator>
+                    <BreadcrumbItem>
+                        <BreadcrumbCurrent>Dell</BreadcrumbCurrent>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+}
+```
+
+### Ellipsis
+
+```tsx
+import {
+    Breadcrumb,
+    BreadcrumbCurrent,
+    BreadcrumbEllipsis,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator
+} from '@/components/ui/breadcrumb';
+
+export default function EllipsisDemo() {
+    return (
+        <div className="flex justify-center">
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbEllipsis />
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Electronics</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Laptops</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbCurrent>Dell</BreadcrumbCurrent>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+}
+```
+
+### Custom Item
+
+A breadcrumb allows customization of the items.
+
+```tsx
+'use client';
+import { Badge } from '@/components/ui/badge';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import { Check, ChevronDown } from '@primeicons/react';
+import { Menu } from '@primereact/ui/menu';
+import * as React from 'react';
+
+export default function CustomItemDemo() {
+    const [selectedBrand, setSelectedBrand] = React.useState('Apple');
+
+    const brands = [{ label: 'Apple' }, { label: 'Dell' }, { label: 'HP' }, { label: 'Lenovo' }, { label: 'Asus' }];
+
+    return (
+        <div className="flex justify-center">
+            <Breadcrumb>
+                <BreadcrumbList>
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Home</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Products</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Electronics</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">Computers</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <BreadcrumbLink href="#">
+                            Laptops
+                            <Badge shape="circle">5</Badge>
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                        <Menu.Root>
+                            <Menu.Trigger variant="text" className="flex items-center gap-2 px-0">
+                                {selectedBrand}
+                                <ChevronDown className="text-xs" />
+                            </Menu.Trigger>
+
+                            <Menu.Portal>
+                                <Menu.Positioner>
+                                    <Menu.Popup>
+                                        <Menu.List>
+                                            <Menu.Label>Select Brand</Menu.Label>
+                                            {brands.map((brand) => (
+                                                <Menu.CheckboxItem
+                                                    key={brand.label}
+                                                    checked={selectedBrand === brand.label}
+                                                    onCheckedChange={() => setSelectedBrand(brand.label)}
+                                                >
+                                                    <Menu.CheckboxItemIndicator>
+                                                        <Check />
+                                                    </Menu.CheckboxItemIndicator>
+                                                    {brand.label}
+                                                </Menu.CheckboxItem>
+                                            ))}
+                                        </Menu.List>
+                                    </Menu.Popup>
+                                </Menu.Positioner>
+                            </Menu.Portal>
+                        </Menu.Root>
+                    </BreadcrumbItem>
+                </BreadcrumbList>
+            </Breadcrumb>
+        </div>
+    );
+}
+```

package/data/llms/tailwind/components/button/api.json

@@ -0,0 +1,246 @@
+[
+  {
+    "name": "Button",
+    "source": "apps/showcase/assets/apidoc/button.json",
+    "data": {
+      "description": "Button is an extension to standard input element with icons and theming.",
+      "interfaces": {
+        "ButtonPassThrough": {
+          "description": "Defines passthrough(pt) options of Button component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "ButtonPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "ButtonProps": {
+          "description": "Defines valid properties in Button component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<ButtonInstance, UseButtonProps, ButtonPassThrough>",
+          "props": [
+            {
+              "name": "ref",
+              "type": "Ref<unknown>",
+              "default": "",
+              "description": "The reference to the component instance."
+            },
+            {
+              "name": "pIf",
+              "type": "boolean",
+              "default": "true",
+              "description": "Whether the component should be rendered."
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | ((instance?: ButtonInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: ButtonInstance) => string)",
+              "default": "",
+              "description": "The class name to apply to the component."
+            },
+            {
+              "name": "as",
+              "type": "string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode>",
+              "default": "",
+              "description": "The component type to render."
+            },
+            {
+              "name": "asChild",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the component should be rendered as a child component."
+            },
+            {
+              "name": "instance",
+              "type": "ButtonInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<ButtonPassThrough>",
+              "default": "",
+              "description": "The pass-through props to pass to the component."
+            },
+            {
+              "name": "ptOptions",
+              "type": "PassThroughOptions",
+              "default": "",
+              "description": "The pass-through options to pass to the component."
+            },
+            {
+              "name": "unstyled",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether the component should be rendered without classes."
+            },
+            {
+              "name": "dt",
+              "type": "unknown",
+              "default": "",
+              "description": "The design token to use for the component."
+            },
+            {
+              "name": "styles",
+              "type": "StylesOptions<ComponentInstance>",
+              "default": "",
+              "description": "The styles to use for the component."
+            },
+            {
+              "name": "render",
+              "type": "(instance: ButtonInstance) => ReactNode",
+              "default": "",
+              "description": "The render function to render the component with instance access."
+            },
+            {
+              "name": "children",
+              "type": "any",
+              "default": "",
+              "description": "The children to render.\n\nAccepts  `React.ReactNode`  for static content or a render function  `(instance: I) => React.ReactNode`  for instance access.\nTyped as  `any`  to avoid JSX type errors when used directly in templates."
+            },
+            {
+              "name": "size",
+              "type": "\"small\" | \"large\" | \"normal\"",
+              "default": "",
+              "description": "Size of the Button."
+            },
+            {
+              "name": "severity",
+              "type": "string & {} | \"secondary\" | \"info\" | \"success\" | \"warn\" | \"danger\" | \"contrast\" | \"help\"",
+              "default": "",
+              "description": "Severity type of the Button."
+            },
+            {
+              "name": "variant",
+              "type": "\"link\" | \"text\" | \"outlined\"",
+              "default": "",
+              "description": "Variant of the Button."
+            },
+            {
+              "name": "plain",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether to show the Button with a plain style."
+            },
+            {
+              "name": "rounded",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether to show the Button with a rounded style."
+            },
+            {
+              "name": "raised",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether to show the Button with a raised style."
+            },
+            {
+              "name": "iconOnly",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether to show the Button with a borderless style."
+            },
+            {
+              "name": "fluid",
+              "type": "boolean",
+              "default": "",
+              "description": "Whether to show the Button with a fluid width."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "ButtonState": {
+          "description": "Defines valid state in Button component.",
+          "relatedProp": "",
+          "extendedTypes": "UseButtonState",
+          "props": [],
+          "methods": []
+        },
+        "ButtonExposes": {
+          "description": "Defines the methods and properties exposed by Button component.",
+          "relatedProp": "",
+          "extendedTypes": "UseButtonExposes",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseButtonRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "ButtonPassThroughType": {
+          "description": "Defines passthrough(pt) options type in Button component.",
+          "values": "PassThroughType<ButtonInstance, E>"
+        },
+        "ButtonClassNamesType": {
+          "description": "Type representing the CSS class names used in the Button component.",
+          "values": "typeof ButtonClassNames[keyof typeof ButtonClassNames]"
+        },
+        "ButtonInstance": {
+          "description": "Instance of Button component.",
+          "values": "ComponentInstance<ButtonProps, ButtonState, ButtonExposes>"
+        }
+      },
+      "variables": {
+        "ButtonClassNames": {
+          "description": "Defines the CSS class names used in the Button component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-button",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            },
+            {
+              "name": "loadingIcon",
+              "value": "p-button-loading-icon",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the loading icon element"
+            },
+            {
+              "name": "icon",
+              "value": "p-button-icon",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the icon element"
+            },
+            {
+              "name": "label",
+              "value": "p-button-label",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the label element"
+            }
+          ]
+        }
+      }
+    }
+  }
+]