@primereact/mcp 11.0.0-rc.2

package/data/llms/primitive/components/sidebar.md

@@ -0,0 +1,444 @@
+# Sidebar
+
+An unstyled layout component for building application navigation with collapsible panels, multi-variant styling, and composable menu structures.
+
+<DocPrimitiveIntro description="Build fully custom application sidebars with compound components for layout, menus, and collapsible sections." />
+
+```tsx
+'use client';
+import { Bell, Calendar, ChartBar, CreditCard, EllipsisV, Folder, Home, Inbox, Search, ShoppingCart, Star, Users } from '@primeicons/react';
+import { Sidebar } from 'primereact/sidebar';
+
+type NavItem = {
+    icon: React.FC<any>;
+    label: string;
+    isActive?: boolean;
+    badge?: string;
+    subItems?: { label: string; isActive?: boolean }[];
+};
+
+const navGroups: { label: string; items: NavItem[] }[] = [
+    {
+        label: 'Navigation',
+        items: [
+            { icon: Home, label: 'Home', isActive: true },
+            { icon: Inbox, label: 'Inbox', badge: '12' },
+            { icon: Search, label: 'Search' },
+            { icon: Bell, label: 'Notifications', badge: '3' }
+        ]
+    },
+    {
+        label: 'Projects',
+        items: [
+            {
+                icon: ChartBar,
+                label: 'Analytics',
+                subItems: [{ label: 'Overview', isActive: true }, { label: 'Reports' }, { label: 'Real-time' }]
+            },
+            { icon: Users, label: 'Team' },
+            { icon: Calendar, label: 'Calendar' },
+            {
+                icon: Folder,
+                label: 'Documents',
+                subItems: [{ label: 'Shared' }, { label: 'Private' }, { label: 'Archived' }]
+            }
+        ]
+    },
+    {
+        label: 'Billing',
+        items: [
+            { icon: CreditCard, label: 'Payments' },
+            { icon: ShoppingCart, label: 'Orders' },
+            { icon: Star, label: 'Subscriptions' }
+        ]
+    }
+];
+
+export default function BasicDemo() {
+    return (
+        <div className="relative max-w-3xl w-full mx-auto border border-surface-200 dark:border-surface-700 rounded-lg overflow-hidden">
+            <Sidebar.Layout className="min-h-[50vh]">
+                <Sidebar.Root id="demo" className="h-[50vh]" collapsible="icon">
+                    <Sidebar.Spacer />
+                    <Sidebar.Aside>
+                        <Sidebar.Panel>
+                            <Sidebar.Header>
+                                <Sidebar.Menu>
+                                    <Sidebar.MenuItem>
+                                        <Sidebar.MenuButton tooltip="Acme Inc" className="h-auto! p-1 group-data-[collapsible=icon]:p-1!">
+                                            <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-linear-to-br from-violet-500 to-indigo-600 text-white text-xs font-bold leading-none">
+                                                A
+                                            </div>
+                                            <span className="font-semibold text-sm">Acme Inc</span>
+                                        </Sidebar.MenuButton>
+                                    </Sidebar.MenuItem>
+                                </Sidebar.Menu>
+                            </Sidebar.Header>
+
+                            <Sidebar.Content>
+                                {navGroups.map((group) => (
+                                    <Sidebar.Group key={group.label}>
+                                        <Sidebar.GroupLabel>{group.label}</Sidebar.GroupLabel>
+                                        <Sidebar.GroupContent>
+                                            <Sidebar.Menu>
+                                                {group.items.map((item) => (
+                                                    <Sidebar.MenuItem
+                                                        key={item.label}
+                                                        collapsible={!!item.subItems}
+                                                        defaultOpen={item.subItems?.some((s) => s.isActive)}
+                                                    >
+                                                        <Sidebar.MenuButton isActive={item.isActive} tooltip={item.label}>
+                                                            <item.icon />
+                                                            <span>{item.label}</span>
+                                                        </Sidebar.MenuButton>
+                                                        {item.badge && <Sidebar.MenuBadge>{item.badge}</Sidebar.MenuBadge>}
+                                                        {item.subItems ? (
+                                                            <Sidebar.MenuSub>
+                                                                {item.subItems.map((sub) => (
+                                                                    <Sidebar.MenuSubItem key={sub.label}>
+                                                                        <Sidebar.MenuSubButton isActive={sub.isActive}>
+                                                                            <span>{sub.label}</span>
+                                                                        </Sidebar.MenuSubButton>
+                                                                    </Sidebar.MenuSubItem>
+                                                                ))}
+                                                            </Sidebar.MenuSub>
+                                                        ) : (
+                                                            <Sidebar.MenuAction showOnHover>
+                                                                <EllipsisV />
+                                                            </Sidebar.MenuAction>
+                                                        )}
+                                                    </Sidebar.MenuItem>
+                                                ))}
+                                            </Sidebar.Menu>
+                                        </Sidebar.GroupContent>
+                                    </Sidebar.Group>
+                                ))}
+                            </Sidebar.Content>
+
+                            <Sidebar.Footer>
+                                <Sidebar.Menu>
+                                    <Sidebar.MenuItem>
+                                        <Sidebar.MenuButton tooltip="John Doe" className="h-auto! p-1 group-data-[collapsible=icon]:p-1!">
+                                            <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-surface-200 dark:bg-surface-800 text-xs font-medium">
+                                                JD
+                                            </div>
+                                            <span>John Doe</span>
+                                        </Sidebar.MenuButton>
+                                        <Sidebar.MenuAction showOnHover>
+                                            <EllipsisV />
+                                        </Sidebar.MenuAction>
+                                    </Sidebar.MenuItem>
+                                </Sidebar.Menu>
+                            </Sidebar.Footer>
+                            <Sidebar.Rail />
+                        </Sidebar.Panel>
+                    </Sidebar.Aside>
+                </Sidebar.Root>
+
+                <Sidebar.Main>
+                    <header className="flex h-12 items-center gap-2 border-b border-surface-200 dark:border-surface-700 px-4">
+                        <Sidebar.Trigger />
+                        <span className="text-sm font-medium">Dashboard</span>
+                    </header>
+                    <div className="flex-1 p-6">
+                        <h1 className="text-2xl font-bold mb-4">Welcome back, John</h1>
+                        <p className="text-muted-color">Select an item from the sidebar to get started.</p>
+                    </div>
+                </Sidebar.Main>
+            </Sidebar.Layout>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Sidebar" />
+
+## Features
+
+- Compound component API with sub-components: `Layout`, `Root`, `Spacer`, `Panel`, `Body`, `Header`, `Content`, `Footer`, `Group`, `GroupLabel`, `GroupContent`, `Menu`, `MenuItem`, `MenuButton`, `MenuAction`, `MenuBadge`, `MenuSub`, `MenuSubItem`, `MenuSubButton`, `Trigger`, `Rail`, `Inset`, `Backdrop`
+- Three visual variants: `sidebar`, `floating`, `inset`
+- Three collapsible modes: `icon`, `offcanvas`, `none`
+- Left and right side positioning
+- Multi-sidebar support with `Layout` + `id`/`target`
+- Collapsible menu items with animated expand/collapse via `useMotion`
+- Hover-to-open with configurable delays
+- Overlay mode with animated [Backdrop](/docs/primitive/components/backdrop)
+- Controlled and uncontrolled open state
+
+## Usage
+
+```tsx
+import { Sidebar } from 'primereact/sidebar';
+```
+
+```tsx
+<Sidebar.Layout>
+    <Sidebar.Root id="main" collapsible="icon">
+        <Sidebar.Spacer />
+        <Sidebar.Aside>
+            <Sidebar.Panel>
+                <Sidebar.Header>...</Sidebar.Header>
+                <Sidebar.Content>
+                    <Sidebar.Group>
+                        <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
+                        <Sidebar.GroupContent>
+                            <Sidebar.Menu>
+                                <Sidebar.MenuItem>
+                                    <Sidebar.MenuButton isActive>
+                                        <HomeIcon />
+                                        <span>Home</span>
+                                    </Sidebar.MenuButton>
+                                </Sidebar.MenuItem>
+                            </Sidebar.Menu>
+                        </Sidebar.GroupContent>
+                    </Sidebar.Group>
+                </Sidebar.Content>
+                <Sidebar.Footer>...</Sidebar.Footer>
+                <Sidebar.Rail />
+            </Sidebar.Panel>
+        </Sidebar.Aside>
+    </Sidebar.Root>
+    <Sidebar.Main>
+        <Sidebar.Trigger />
+        <main>Content</main>
+    </Sidebar.Main>
+</Sidebar.Layout>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element.
+
+```tsx
+<Sidebar.Trigger as="div">...</Sidebar.Trigger>
+```
+
+### Render Function Children
+
+Sub-components accept a render function as children, providing access to the component instance.
+
+```tsx
+<Sidebar.Content>{(instance) => <div>{instance.sidebar?.state.open ? 'Open' : 'Closed'}</div>}</Sidebar.Content>
+```
+
+### Collapsible Menu Items
+
+Add `collapsible` prop to `MenuItem` for animated expandable submenus.
+
+```tsx
+<Sidebar.MenuItem collapsible defaultOpen={false}>
+    <Sidebar.MenuButton>
+        <FolderIcon />
+        <span>Documents</span>
+    </Sidebar.MenuButton>
+    <Sidebar.MenuSub>
+        <Sidebar.MenuSubItem>
+            <Sidebar.MenuSubButton>Shared</Sidebar.MenuSubButton>
+        </Sidebar.MenuSubItem>
+    </Sidebar.MenuSub>
+</Sidebar.MenuItem>
+```
+
+### Multi-Sidebar
+
+Use `Layout` with `id` and `target` props for multiple independent sidebars.
+
+```tsx
+<Sidebar.Layout>
+    <Sidebar.Root side="left" id="nav">
+        ...
+    </Sidebar.Root>
+    <Sidebar.Main>
+        <Sidebar.Trigger target="nav" />
+        <Sidebar.Trigger target="tools" />
+    </Sidebar.Main>
+    <Sidebar.Root side="right" id="tools">
+        ...
+    </Sidebar.Root>
+</Sidebar.Layout>
+```
+
+## Pass Through
+
+<DocPTViewer name="sidebar-pt" components={['SidebarRoot']} />
+
+## API
+
+### SidebarLayout
+
+<DocTable name="SidebarLayout" category="api" />
+
+<DocTable name="SidebarLayout" category="pt" />
+
+### SidebarRoot
+
+<DocTable name="SidebarRoot" category="api" />
+
+| Attribute               | Value                                                   |
+| ----------------------- | ------------------------------------------------------- |
+| `data-state`            | `"expanded"` \| `"collapsed"`                           |
+| `data-variant`          | `"sidebar"` \| `"floating"` \| `"inset"`                |
+| `data-collapsible`      | `"offcanvas"` \| `"icon"` \| `""` (empty when expanded) |
+| `data-collapsible-mode` | `"offcanvas"` \| `"icon"` \| `"none"` (always present)  |
+| `data-side`             | `"left"` \| `"right"`                                   |
+| `data-overlay`          | Present when overlay is true                            |
+
+<DocTable name="SidebarRoot" category="pt" />
+
+### SidebarSpacer
+
+<DocTable name="SidebarSpacer" category="api" />
+
+<DocTable name="SidebarSpacer" category="pt" />
+
+### SidebarAside
+
+<DocTable name="SidebarAside" category="api" />
+
+<DocTable name="SidebarAside" category="pt" />
+
+### SidebarPanel
+
+<DocTable name="SidebarPanel" category="api" />
+
+<DocTable name="SidebarPanel" category="pt" />
+
+### SidebarHeader
+
+<DocTable name="SidebarHeader" category="api" />
+
+<DocTable name="SidebarHeader" category="pt" />
+
+### SidebarContent
+
+<DocTable name="SidebarContent" category="api" />
+
+<DocTable name="SidebarContent" category="pt" />
+
+### SidebarFooter
+
+<DocTable name="SidebarFooter" category="api" />
+
+<DocTable name="SidebarFooter" category="pt" />
+
+### SidebarGroup
+
+<DocTable name="SidebarGroup" category="api" />
+
+<DocTable name="SidebarGroup" category="pt" />
+
+### SidebarGroupLabel
+
+<DocTable name="SidebarGroupLabel" category="api" />
+
+<DocTable name="SidebarGroupLabel" category="pt" />
+
+### SidebarGroupContent
+
+<DocTable name="SidebarGroupContent" category="api" />
+
+<DocTable name="SidebarGroupContent" category="pt" />
+
+### SidebarMenu
+
+<DocTable name="SidebarMenu" category="api" />
+
+<DocTable name="SidebarMenu" category="pt" />
+
+### SidebarMenuItem
+
+<DocTable name="SidebarMenuItem" category="api" />
+
+| Attribute   | Value                                  |
+| ----------- | -------------------------------------- |
+| `data-open` | Present when the menu item is expanded |
+
+<DocTable name="SidebarMenuItem" category="pt" />
+
+### SidebarMenuButton
+
+<DocTable name="SidebarMenuButton" category="api" />
+
+| Attribute     | Value                              |
+| ------------- | ---------------------------------- |
+| `data-active` | `"true"` when the button is active |
+
+<DocTable name="SidebarMenuButton" category="pt" />
+
+### SidebarMenuAction
+
+<DocTable name="SidebarMenuAction" category="api" />
+
+<DocTable name="SidebarMenuAction" category="pt" />
+
+### SidebarMenuBadge
+
+<DocTable name="SidebarMenuBadge" category="api" />
+
+<DocTable name="SidebarMenuBadge" category="pt" />
+
+### SidebarMenuSub
+
+<DocTable name="SidebarMenuSub" category="api" />
+
+<DocTable name="SidebarMenuSub" category="pt" />
+
+### SidebarMenuSubItem
+
+<DocTable name="SidebarMenuSubItem" category="api" />
+
+<DocTable name="SidebarMenuSubItem" category="pt" />
+
+### SidebarMenuSubButton
+
+<DocTable name="SidebarMenuSubButton" category="api" />
+
+| Attribute     | Value                              |
+| ------------- | ---------------------------------- |
+| `data-active` | `"true"` when the button is active |
+| `data-size`   | `"sm"` when small size is set      |
+
+<DocTable name="SidebarMenuSubButton" category="pt" />
+
+### SidebarTrigger
+
+<DocTable name="SidebarTrigger" category="api" />
+
+<DocTable name="SidebarTrigger" category="pt" />
+
+### SidebarRail
+
+<DocTable name="SidebarRail" category="api" />
+
+<DocTable name="SidebarRail" category="pt" />
+
+### SidebarMain
+
+<DocTable name="SidebarMain" category="api" />
+
+<DocTable name="SidebarMain" category="pt" />
+
+### SidebarBackdrop
+
+<DocTable name="SidebarBackdrop" category="api" />
+
+Uses the [Backdrop](/docs/primitive/components/backdrop) component internally for animated overlay rendering.
+
+<DocTable name="SidebarBackdrop" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Sidebar uses `navigation` landmark role by default. The `Trigger` element toggles the sidebar open state. Each `MenuItem` uses `button` role for interactive menu items.
+
+### Keyboard Support
+
+| Key           | Function                                       |
+| ------------- | ---------------------------------------------- |
+| `tab`         | Moves focus to the next focusable element.     |
+| `shift + tab` | Moves focus to the previous focusable element. |
+| `enter`       | Activates the focused menu button or trigger.  |
+| `space`       | Activates the focused menu button or trigger.  |

package/data/llms/primitive/components/skeleton/api.json

@@ -0,0 +1,213 @@
+[
+  {
+    "name": "Skeleton",
+    "source": "apps/showcase/assets/apidoc/skeleton.json",
+    "data": {
+      "description": "Skeleton is a placeholder to display instead of the actual content.",
+      "interfaces": {
+        "SkeletonPassThrough": {
+          "description": "Defines passthrough(pt) options of Skeleton component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "SkeletonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "SkeletonProps": {
+          "description": "Defines valid properties in Skeleton component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<SkeletonInstance, UseSkeletonProps, SkeletonPassThrough>",
+          "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?: SkeletonInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: SkeletonInstance) => 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": "SkeletonInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<SkeletonPassThrough>",
+              "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: SkeletonInstance) => 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": "shape",
+              "type": "\"circle\" | \"rectangle\"",
+              "default": "rectangle",
+              "description": "Shape of the element."
+            },
+            {
+              "name": "size",
+              "type": "string",
+              "default": "",
+              "description": "Size of the Circle or Square."
+            },
+            {
+              "name": "width",
+              "type": "string",
+              "default": "100%",
+              "description": "Width of the element."
+            },
+            {
+              "name": "height",
+              "type": "string",
+              "default": "1rem",
+              "description": "Height of the element."
+            },
+            {
+              "name": "borderRadius",
+              "type": "string",
+              "default": "",
+              "description": "Border radius of the element, defaults to value from theme."
+            },
+            {
+              "name": "animation",
+              "type": "\"none\" | \"wave\"",
+              "default": "wave",
+              "description": "Type of the animation."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "SkeletonState": {
+          "description": "Defines valid state in Skeleton component.",
+          "relatedProp": "",
+          "extendedTypes": "UseSkeletonState",
+          "props": [],
+          "methods": []
+        },
+        "SkeletonExposes": {
+          "description": "Defines the methods and properties exposed by Skeleton component.",
+          "relatedProp": "",
+          "extendedTypes": "UseSkeletonExposes",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseSkeletonRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "SkeletonPassThroughType": {
+          "description": "Defines passthrough(pt) options type in Skeleton component.",
+          "values": "PassThroughType<SkeletonInstance, E>"
+        },
+        "SkeletonClassNamesType": {
+          "description": "Type representing the CSS class names used in the Skeleton component.",
+          "values": "typeof SkeletonClassNames[keyof typeof SkeletonClassNames]"
+        },
+        "SkeletonInstance": {
+          "description": "Instance of Skeleton component.",
+          "values": "ComponentInstance<SkeletonProps, SkeletonState, SkeletonExposes>"
+        }
+      },
+      "variables": {
+        "SkeletonClassNames": {
+          "description": "Defines the CSS class names used in the Skeleton component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-skeleton",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            }
+          ]
+        }
+      }
+    }
+  }
+]