@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,200 @@
+# Tabs
+
+An unstyled tab component with keyboard navigation and scrollable overflow support.
+
+<DocPrimitiveIntro description="Build fully custom tabbed interfaces with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { Tabs } from 'primereact/tabs';
+import styles from './basic-demo.module.css';
+
+const items = [
+    { value: 'tab1', title: 'Account Info', content: 'Update your personal information such as name, email address, and profile picture.' },
+    { value: 'tab2', title: 'Payment', content: 'Manage your subscription plan, view invoices, and update your payment method.' },
+    { value: 'tab3', title: 'Preferences', content: 'Customize how the application looks and behaves to match your personal preferences.' }
+];
+
+export default function BasicDemo() {
+    return (
+        <Tabs.Root defaultValue="tab1" className={styles.root}>
+            <Tabs.List className={styles.list}>
+                <Tabs.Content className={styles.content}>
+                    {items.map((item) => (
+                        <Tabs.Tab key={item.value} value={item.value} className={styles.tab}>
+                            {item.title}
+                        </Tabs.Tab>
+                    ))}
+                    <Tabs.Indicator className={styles.indicator} />
+                </Tabs.Content>
+            </Tabs.List>
+            <Tabs.Panels className={styles.panels}>
+                {items.map((item) => (
+                    <Tabs.Panel key={item.value} value={item.value}>
+                        <h2 className={styles.panelTitle}>{item.title}</h2>
+                        <p className={styles.panelText}>{item.content}</p>
+                    </Tabs.Panel>
+                ))}
+            </Tabs.Panels>
+        </Tabs.Root>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Tabs" />
+
+## Features
+
+- Compound component API with sub-components: `Root`, `List`, `Content`, `Tab`, `Indicator`, `Panels`, `Panel`, `Prev`, `Next`
+- Automatic keyboard focus cycling across tabs with arrow keys, Home, and End
+- Active bar indicator with CSS custom properties for animated positioning
+- Built-in scroll navigation with `Prev`/`Next` buttons for overflow tab lists
+- Configurable scroll strategy: nearest, center, disabled, or custom function
+
+## Usage
+
+```tsx
+import { Tabs } from 'primereact/tabs';
+```
+
+```tsx
+<Tabs.Root defaultValue="tab1">
+    <Tabs.List>
+        <Tabs.Prev></Tabs.Prev>
+        <Tabs.Content>
+            <Tabs.Tab value="tab1"></Tabs.Tab>
+            <Tabs.Indicator />
+        </Tabs.Content>
+        <Tabs.Next></Tabs.Next>
+    </Tabs.List>
+    <Tabs.Panels>
+        <Tabs.Panel value="tab1"></Tabs.Panel>
+    </Tabs.Panels>
+</Tabs.Root>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` on any sub-component to change the rendered HTML element.
+
+```tsx
+<Tabs.Root as="section">
+    <Tabs.List as="nav">...</Tabs.List>
+</Tabs.Root>
+```
+
+### Render Function Children
+
+Sub-components accept a render function as children, providing access to the component instance.
+
+```tsx
+<Tabs.Tab value="tab1">{(instance) => <span className={instance.active ? 'active' : ''}>{instance.props.value}</span>}</Tabs.Tab>
+```
+
+## Pass Through
+
+<DocPTViewer name="tabs-pt" components={['TabsRoot']} />
+
+## API
+
+### TabsRoot
+
+<DocTable name="TabsRoot" category="api" />
+
+<DocTable name="TabsRoot" category="pt" />
+
+### TabsList
+
+<DocTable name="TabsList" category="api" />
+
+<DocTable name="TabsList" category="pt" />
+
+### TabsContent
+
+<DocTable name="TabsContent" category="api" />
+
+<DocTable name="TabsContent" category="pt" />
+
+### TabsTab
+
+<DocTable name="TabsTab" category="api" />
+
+| Attribute       | Value                 |
+| --------------- | --------------------- |
+| `data-active`   | Present when active   |
+| `data-disabled` | Present when disabled |
+
+<DocTable name="TabsTab" category="pt" />
+
+### TabsIndicator
+
+<DocTable name="TabsIndicator" category="api" />
+
+**CSS Custom Properties**
+
+The indicator element exposes CSS custom properties for animated positioning relative to the active tab.
+
+| CSS Variable          | Description                        |
+| --------------------- | ---------------------------------- |
+| `--active-bar-width`  | Width of the active tab in pixels  |
+| `--active-bar-height` | Height of the active tab in pixels |
+| `--active-bar-left`   | Left offset of the active tab      |
+| `--active-bar-top`    | Top offset of the active tab       |
+
+<DocTable name="TabsIndicator" category="pt" />
+
+### TabsPanels
+
+<DocTable name="TabsPanels" category="api" />
+
+<DocTable name="TabsPanels" category="pt" />
+
+### TabsPanel
+
+<DocTable name="TabsPanel" category="api" />
+
+| Attribute     | Value               |
+| ------------- | ------------------- |
+| `data-active` | Present when active |
+
+<DocTable name="TabsPanel" category="pt" />
+
+### TabsPrev
+
+<DocTable name="TabsPrev" category="api" />
+
+| Attribute       | Value                 |
+| --------------- | --------------------- |
+| `data-disabled` | Present when disabled |
+
+<DocTable name="TabsPrev" category="pt" />
+
+### TabsNext
+
+<DocTable name="TabsNext" category="api" />
+
+| Attribute       | Value                 |
+| --------------- | --------------------- |
+| `data-disabled` | Present when disabled |
+
+<DocTable name="TabsNext" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Tabs uses `role="tablist"` on the tab container, `role="tab"` on each tab trigger, and `role="tabpanel"` on each panel. Active tabs set `aria-selected="true"`. Panels are linked to their tabs via `aria-controls` and `aria-labelledby`. Disabled tabs set `aria-disabled="true"`.
+
+### Keyboard Support
+
+| Key           | Function                                          |
+| ------------- | ------------------------------------------------- |
+| `tab`         | Moves focus into the tab list, then to the panel. |
+| `right arrow` | Moves focus to the next tab.                      |
+| `left arrow`  | Moves focus to the previous tab.                  |
+| `home`        | Moves focus to the first tab.                     |
+| `end`         | Moves focus to the last tab.                      |
+| `enter`       | Activates the focused tab.                        |
+| `space`       | Activates the focused tab.                        |

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

@@ -0,0 +1,189 @@
+[
+  {
+    "name": "Tag",
+    "source": "apps/showcase/assets/apidoc/tag.json",
+    "data": {
+      "description": "Tag component is used to categorize content.",
+      "interfaces": {
+        "TagPassThrough": {
+          "description": "Defines passthrough(pt) options of Tag component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "TagPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "TagProps": {
+          "description": "Defines valid properties in Tag component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<TagInstance, UseTagProps, TagPassThrough>",
+          "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?: TagInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: TagInstance) => 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": "TagInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<TagPassThrough>",
+              "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: TagInstance) => 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": "severity",
+              "type": "\"secondary\" | \"info\" | \"success\" | \"warn\" | \"danger\" | \"contrast\"",
+              "default": "",
+              "description": "Severity type of the tag."
+            },
+            {
+              "name": "rounded",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether the corners of the tag are rounded."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "TagState": {
+          "description": "Defines valid state in Tag component.",
+          "relatedProp": "",
+          "extendedTypes": "UseTagState",
+          "props": [],
+          "methods": []
+        },
+        "TagExposes": {
+          "description": "Defines the methods and properties exposed by Tag component.",
+          "relatedProp": "",
+          "extendedTypes": "UseTagExposes",
+          "props": [
+            {
+              "name": "rootProps",
+              "type": "UseTagRootProps",
+              "default": "",
+              "description": "Pre-built data attribute props for the root element."
+            }
+          ],
+          "methods": []
+        }
+      },
+      "types": {
+        "TagPassThroughType": {
+          "description": "Defines passthrough(pt) options type in Tag component.",
+          "values": "PassThroughType<TagInstance, E>"
+        },
+        "TagClassNamesType": {
+          "description": "Type representing the CSS class names used in the Tag component.",
+          "values": "typeof TagClassNames[keyof typeof TagClassNames]"
+        },
+        "TagInstance": {
+          "description": "Instance of Tag component.",
+          "values": "ComponentInstance<TagProps, TagState, TagExposes>"
+        }
+      },
+      "variables": {
+        "TagClassNames": {
+          "description": "Defines the CSS class names used in the Tag component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-tag",
+              "optional": false,
+              "readonly": true,
+              "description": "Class name of the root element"
+            }
+          ]
+        }
+      }
+    }
+  }
+]

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

@@ -0,0 +1,100 @@
+# Tag
+
+An unstyled, accessible tag component for categorizing content.
+
+<DocPrimitiveIntro description="Build fully custom categorization labels with complete control over layout and styling." />
+
+```tsx
+'use client';
+import { Check } from '@primeicons/react/check';
+import { ExclamationTriangle } from '@primeicons/react/exclamation-triangle';
+import { InfoCircle } from '@primeicons/react/info-circle';
+import { Tag } from 'primereact/tag';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    return (
+        <div className={styles.wrapper}>
+            <Tag className={`${styles.tag} ${styles.success}`}>
+                <Check className={styles.icon} />
+                Active
+            </Tag>
+            <Tag className={`${styles.tag} ${styles.info}`}>
+                <InfoCircle className={styles.icon} />
+                Info
+            </Tag>
+            <Tag className={`${styles.tag} ${styles.warn}`}>
+                <ExclamationTriangle className={styles.icon} />
+                Warning
+            </Tag>
+            <Tag className={`${styles.tag} ${styles.primary}`}>Default</Tag>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Tag" />
+
+## Features
+
+- Single component with children-based composition for label and icon content
+- Polymorphic rendering for interactive tags (`as="button"`)
+
+## Usage
+
+```tsx
+import { Tag } from 'primereact/tag';
+```
+
+```tsx
+<Tag></Tag>
+```
+
+## Behavior
+
+### Polymorphic Rendering
+
+Use `as` to change the rendered HTML element. Render as `"button"` for clickable tags.
+
+```tsx
+<Tag as="button" onClick={handleClick}>
+    Clickable
+</Tag>
+```
+
+Default element: `span`.
+
+### Render Function Children
+
+`Tag` accepts a render function as children, providing access to the component instance.
+
+```tsx
+<Tag>{(instance) => <span>{instance.props.children}</span>}</Tag>
+```
+
+## Pass Through
+
+<DocPTViewer name="tag-pt" components={['Tag']} />
+
+## API
+
+### Tag
+
+<DocTable name="Tag" category="api" />
+
+| Attribute    | Value    |
+| ------------ | -------- |
+| `data-scope` | `"tag"`  |
+| `data-part`  | `"root"` |
+
+<DocTable name="Tag" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic, aria-live may be utilized as well. In case badges need to be tabbable, tabindex can be added to implement custom key handlers.
+
+### Keyboard Support
+
+Component does not include any interactive elements.