@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,292 @@
+# Tree
+
+Unstyled, accessible tree primitive with a compound API.
+
+<DocPrimitiveIntro description="Unstyled compound primitive for rendering hierarchical data with full control over markup." />
+
+```tsx
+'use client';
+import { NodeService } from '@/shared/services/node.service';
+import { ChevronDown } from '@primeicons/react/chevron-down';
+import { ChevronRight } from '@primeicons/react/chevron-right';
+import { Tree, type TreeNodeData } from 'primereact/tree';
+import * as React from 'react';
+import styles from './basic-demo.module.css';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = React.useState<TreeNodeData[]>([]);
+
+    React.useEffect(() => {
+        NodeService.getTreeNodes().then(setNodes);
+    }, []);
+
+    return (
+        <Tree.Root value={nodes} defaultExpandedKeys={{ '0': true }} selectionMode="single" className={styles.root}>
+            <Tree.Nodes>
+                {({ node }) => (
+                    <Tree.Node uKey={node.key}>
+                        <Tree.Content>
+                            <Tree.Toggle>
+                                <Tree.ToggleIndicator match="expanded">
+                                    <ChevronDown />
+                                </Tree.ToggleIndicator>
+                                <Tree.ToggleIndicator match="collapsed">
+                                    <ChevronRight />
+                                </Tree.ToggleIndicator>
+                            </Tree.Toggle>
+                            <Tree.Label>{node.label}</Tree.Label>
+                        </Tree.Content>
+                    </Tree.Node>
+                )}
+            </Tree.Nodes>
+        </Tree.Root>
+    );
+}
+```
+
+<DocPrimitiveLinks name="Tree" />
+
+## Features
+
+- Compound parts: _Root_, _Nodes_, _Node_, _Content_, _Toggle_, _ToggleIndicator_, _Selection_, _DropIndicator_, _Label_, _Filter_, _Header_, _Footer_, _Empty_, _Loading_
+- Flat DOM with a single `<ul role="tree">` containing one `<li role="treeitem">` per visible row
+- Selection modes _single_, _multiple_ and _checkbox_ with tri-state cascade
+- Drag-and-drop with a single _onMove_ event; _validateMove_ can be sync or async
+
+## Usage
+
+```tsx
+import { Tree } from 'primereact/tree';
+```
+
+```tsx
+<Tree.Root value={nodes}>
+    <Tree.Header>
+        <Tree.Filter />
+    </Tree.Header>
+    <Tree.Nodes>
+        {({ node }) => (
+            <Tree.Node uKey={node.key}>
+                <Tree.Content>
+                    <Tree.Toggle>
+                        <Tree.ToggleIndicator match="expanded">▼</Tree.ToggleIndicator>
+                        <Tree.ToggleIndicator match="collapsed">▶</Tree.ToggleIndicator>
+                    </Tree.Toggle>
+                    <Tree.Label>{node.label}</Tree.Label>
+                </Tree.Content>
+            </Tree.Node>
+        )}
+    </Tree.Nodes>
+    <Tree.Footer />
+    <Tree.Empty />
+</Tree.Root>
+```
+
+## Behavior
+
+### Flat Render
+
+_Tree.Nodes_ walks the data top-down and calls its render function once per visible row. _Tree.Node_ looks the data up by _uKey_. Each `<li>` carries its depth in the `--px-tree-node-level` CSS variable (1-based); combine it with your own indent unit for indentation:
+
+```css
+[data-part='content'] {
+    margin-inline-start: calc((var(--px-tree-node-level, 1) - 1) * var(--p-tree-indent, 1rem));
+}
+```
+
+### Toggle Indicator
+
+_Tree.Toggle_ renders no icon on its own. Add _Tree.ToggleIndicator_ with _match="expanded"_, _match="collapsed"_ or _match="always"_ inside to render per-state content. For leaf rows the toggle is replaced by `<span data-part="toggle-spacer">` so the indentation stays aligned.
+
+### Selection
+
+_Tree.Selection_ is render-prop based. Inside _Tree.Node_ it exposes _isSelected_, _isPartiallySelected_ and _toggle_. Inside _Tree.Header_ it exposes _isAllSelected_, _isSomeSelected_ and _toggleAll_. Pass _mode="radio" | "checkbox" | "single"_ to force a specific toggle behavior.
+
+### Polymorphism
+
+Every sub-component takes an `as` prop. Pass another element or component to swap the rendered tag.
+
+Defaults: `Root`=`div`, `Nodes`=`ul`, `Node`=`li`, `Content`=`div`, `Toggle`=`button`, `ToggleIndicator`=`span`, `Selection`=`Fragment`, `DropIndicator`=`div`, `Label`=`span`, `Filter`=`input`, `Header`=`div`, `Footer`=`div`, `Empty`=`div`, `Loading`=`div`.
+
+## Pass Through
+
+<DocPTViewer name="tree-pt" components={['TreeRoot']} />
+
+## API
+
+### TreeRoot
+
+<DocTable name="TreeRoot" category="api" />
+
+| Attribute       | Value                                                 |
+| --------------- | ----------------------------------------------------- |
+| `data-scope`    | `"tree"`                                              |
+| `data-part`     | `"root"`                                              |
+| `data-dragover` | Present while a compatible drag is over the container |
+
+<DocTable name="TreeRoot" category="pt" />
+
+### TreeNodes
+
+<DocTable name="TreeNodes" category="api" />
+
+| Attribute    | Value     |
+| ------------ | --------- |
+| `data-scope` | `"tree"`  |
+| `data-part`  | `"nodes"` |
+| `role`       | `"tree"`  |
+
+<DocTable name="TreeNodes" category="pt" />
+
+### TreeNode
+
+<DocTable name="TreeNode" category="api" />
+
+| Attribute        | Value                             |
+| ---------------- | --------------------------------- |
+| `data-scope`     | `"tree"`                          |
+| `data-part`      | `"node"`                          |
+| `data-node-key`  | Node key                          |
+| `data-expanded`  | Present when expanded (non-leaf)  |
+| `data-collapsed` | Present when collapsed (non-leaf) |
+| `data-selected`  | Present when selected             |
+| `data-leaf`      | Present when leaf                 |
+| `data-disabled`  | Present when disabled             |
+| `data-focused`   | Present on the focused row        |
+
+<DocTable name="TreeNode" category="pt" />
+
+### TreeContent
+
+<DocTable name="TreeContent" category="api" />
+
+| Attribute              | Value                                      |
+| ---------------------- | ------------------------------------------ |
+| `data-scope`           | `"tree"`                                   |
+| `data-part`            | `"content"`                                |
+| `data-selected`        | Present when selected or checked           |
+| `data-selectable`      | Present when selectable                    |
+| `data-expanded`        | Present when expanded (non-leaf)           |
+| `data-collapsed`       | Present when collapsed (non-leaf)          |
+| `data-leaf`            | Present when leaf                          |
+| `data-checked`         | Present when checked (checkbox mode)       |
+| `data-partial-checked` | Present when partially checked             |
+| `data-disabled`        | Present when disabled                      |
+| `data-dragover`        | Present while a compatible drag is over it |
+
+<DocTable name="TreeContent" category="pt" />
+
+### TreeToggle
+
+<DocTable name="TreeToggle" category="api" />
+
+| Attribute        | Value                  |
+| ---------------- | ---------------------- |
+| `data-scope`     | `"tree"`               |
+| `data-part`      | `"toggle"`             |
+| `data-expanded`  | Present when expanded  |
+| `data-collapsed` | Present when collapsed |
+
+For leaf nodes the toggle is replaced by `<span data-part="toggle-spacer" aria-hidden>`.
+
+<DocTable name="TreeToggle" category="pt" />
+
+### TreeToggleIndicator
+
+<DocTable name="TreeToggleIndicator" category="api" />
+
+| Attribute    | Value                |
+| ------------ | -------------------- |
+| `data-scope` | `"tree"`             |
+| `data-part`  | `"toggle-indicator"` |
+
+<DocTable name="TreeToggleIndicator" category="pt" />
+
+### TreeSelection
+
+<DocTable name="TreeSelection" category="api" />
+
+Render-prop only; no DOM attributes of its own.
+
+<DocTable name="TreeSelection" category="pt" />
+
+### TreeDropIndicator
+
+<DocTable name="TreeDropIndicator" category="api" />
+
+Renders only while the matching drop point is hovered. Use one with `position="before"` and one with `position="after"` per `Tree.Node`.
+
+| Attribute    | Value          |
+| ------------ | -------------- |
+| `data-scope` | `"tree"`       |
+| `data-part`  | `"drop-point"` |
+
+<DocTable name="TreeDropIndicator" category="pt" />
+
+### TreeLabel
+
+<DocTable name="TreeLabel" category="api" />
+
+<DocTable name="TreeLabel" category="pt" />
+
+### TreeFilter
+
+<DocTable name="TreeFilter" category="api" />
+
+| Attribute    | Value      |
+| ------------ | ---------- |
+| `data-scope` | `"tree"`   |
+| `data-part`  | `"filter"` |
+
+<DocTable name="TreeFilter" category="pt" />
+
+### TreeHeader
+
+<DocTable name="TreeHeader" category="api" />
+
+<DocTable name="TreeHeader" category="pt" />
+
+### TreeFooter
+
+<DocTable name="TreeFooter" category="api" />
+
+<DocTable name="TreeFooter" category="pt" />
+
+### TreeEmpty
+
+<DocTable name="TreeEmpty" category="api" />
+
+<DocTable name="TreeEmpty" category="pt" />
+
+### TreeLoading
+
+<DocTable name="TreeLoading" category="api" />
+
+Renders only while `Tree.Root.loading` is true. Use it as a sibling of `Tree.Nodes`.
+
+| Attribute    | Value       |
+| ------------ | ----------- |
+| `data-scope` | `"tree"`    |
+| `data-part`  | `"loading"` |
+| `role`       | `"status"`  |
+
+<DocTable name="TreeLoading" category="pt" />
+
+## Accessibility
+
+### Screen Reader
+
+The flat `<ul role="tree">` contains one `<li role="treeitem">` per visible row. Each row carries `aria-level`, `aria-posinset` and `aria-setsize`. Non-leaf rows set `aria-expanded`. In `selectionMode="checkbox"`, `aria-checked` is `true`, `false` or `"mixed"`.
+
+### Keyboard Support
+
+| Key                     | Function                                               |
+| ----------------------- | ------------------------------------------------------ |
+| `tab` / `shift` + `tab` | Enter / leave the tree.                                |
+| `enter` / `space`       | Toggle selection on the focused node.                  |
+| `down arrow`            | Move focus to the next visible row.                    |
+| `up arrow`              | Move focus to the previous visible row.                |
+| `right arrow`           | Expand the focused node, or step into its first child. |
+| `left arrow`            | Collapse the focused node, or step out to its parent.  |
+| `home` / `end`          | Jump to the first / last visible row.                  |
+| Printable characters    | Type-ahead by label (500 ms reset).                    |

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

@@ -0,0 +1,187 @@
+# TreeTable
+
+An unstyled hierarchical data table built on DataTable with treeMode enabled, sort, filter, paginate, select, expand, and edit tree-shaped data.
+
+<DocPrimitiveIntro description="Compose a fully custom tree table with the same compound API as DataTable. Tree mode is a single prop on Root, every other feature (sort, filter, paginate, select, edit, reorder, export) works the same way." />
+
+```tsx
+'use client';
+import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
+import { DataTable } from 'primereact/datatable';
+import type { DataTableExpansionEvent } from 'primereact/datatable';
+import * as React from 'react';
+
+const cellStyle: React.CSSProperties = { padding: '0.5rem 0.75rem' };
+const headStyle: React.CSSProperties = { ...cellStyle, textAlign: 'left', fontWeight: 600, borderBottom: '1px solid var(--p-content-border-color)' };
+const rowStyle: React.CSSProperties = { borderBottom: '1px solid var(--p-content-border-color)' };
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = React.useState<TreeTableNode[]>([]);
+    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });
+
+    React.useEffect(() => {
+        setNodes(NodeService.getTreeTableNodesData().slice(0, 5));
+    }, []);
+
+    return (
+        <div style={{ width: '100%' }}>
+            <DataTable.Root
+                data={nodes}
+                dataKey="key"
+                treeMode
+                expandedKeys={expandedKeys}
+                onExpandedChange={(e: DataTableExpansionEvent) => setExpandedKeys(e.value)}
+            >
+                <DataTable.TableContainer>
+                    <DataTable.Table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                        <DataTable.THead>
+                            <DataTable.THeadRow>
+                                <DataTable.THeadCell style={headStyle}>Name</DataTable.THeadCell>
+                                <DataTable.THeadCell style={headStyle}>Size</DataTable.THeadCell>
+                                <DataTable.THeadCell style={headStyle}>Type</DataTable.THeadCell>
+                            </DataTable.THeadRow>
+                        </DataTable.THead>
+                        <DataTable.TBody>
+                            {({ item }: { item: Record<string, unknown> }) => (
+                                <DataTable.Row style={rowStyle}>
+                                    <DataTable.Cell style={cellStyle}>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                                            <DataTable.RowToggle>
+                                                <DataTable.RowToggleIndicator match="expanded">▼</DataTable.RowToggleIndicator>
+                                                <DataTable.RowToggleIndicator match="collapsed">▶</DataTable.RowToggleIndicator>
+                                            </DataTable.RowToggle>
+                                            <span>{String(item.name)}</span>
+                                        </div>
+                                    </DataTable.Cell>
+                                    <DataTable.Cell style={cellStyle}>{String(item.size)}</DataTable.Cell>
+                                    <DataTable.Cell style={cellStyle}>{String(item.type)}</DataTable.Cell>
+                                </DataTable.Row>
+                            )}
+                        </DataTable.TBody>
+                    </DataTable.Table>
+                </DataTable.TableContainer>
+            </DataTable.Root>
+        </div>
+    );
+}
+```
+
+<DocPrimitiveLinks name="TreeTable" />
+
+## Features
+
+- Same compound component API as [DataTable](/docs/primitive/components/datatable)
+- `treeMode` flips `role="table"` to `role="treegrid"` and stamps `aria-level`, `aria-expanded`, `aria-posinset`, `aria-setsize` on each row automatically
+- `DataTable.RowToggle` renders an expander when a node has children and a leaf-spacer when it does not, so indentation stays aligned
+- All editing, filter, sort, pagination, selection, reorder, resize, and export features compose with hierarchical data
+
+## Usage
+
+There is no separate `TreeTable` import, pass `treeMode` and `dataKey="key"` to `DataTable.Root` and feed it nodes shaped as `{ key, data, children? }`.
+
+```tsx
+import { DataTable } from 'primereact/datatable';
+```
+
+```tsx
+<DataTable.Root data={nodes} dataKey="key" treeMode>
+    <DataTable.TableContainer>
+        <DataTable.Table>
+            <DataTable.THead>
+                <DataTable.THeadRow>
+                    <DataTable.THeadCell>Name</DataTable.THeadCell>
+                    <DataTable.THeadCell>Size</DataTable.THeadCell>
+                </DataTable.THeadRow>
+            </DataTable.THead>
+            <DataTable.TBody>
+                {({ item }) => (
+                    <DataTable.Row>
+                        <DataTable.Cell>
+                            <DataTable.RowToggle>
+                                <DataTable.RowToggleIndicator match="expanded">▼</DataTable.RowToggleIndicator>
+                                <DataTable.RowToggleIndicator match="collapsed">▶</DataTable.RowToggleIndicator>
+                            </DataTable.RowToggle>
+                            <span>{item.name}</span>
+                        </DataTable.Cell>
+                        <DataTable.Cell>{item.size}</DataTable.Cell>
+                    </DataTable.Row>
+                )}
+            </DataTable.TBody>
+        </DataTable.Table>
+    </DataTable.TableContainer>
+</DataTable.Root>
+```
+
+## Behavior
+
+### Controlled Expansion
+
+Pass `expandedKeys` and `onExpandedChange` to drive expansion from outside state.
+
+```tsx
+const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });
+
+<DataTable.Root data={nodes} dataKey="key" treeMode expandedKeys={expandedKeys} onExpandedChange={(e) => setExpandedKeys(e.value)}>
+    {/* … */}
+</DataTable.Root>;
+```
+
+### Filter, Sort, Paginate
+
+Use the same `filters` / `globalFilter` / `sortField` / `paginator` props as on a flat table, the underlying hook re-runs them tree-aware.
+
+```tsx
+<DataTable.Root
+    data={nodes}
+    dataKey="key"
+    treeMode
+    paginator
+    rows={10}
+    filters={filters}
+    onFilter={(e) => setFilters(e.filters)}
+    globalFilter={search}
+    globalFilterFields={['name', 'type']}
+    sortField={sortField}
+    sortOrder={sortOrder}
+    onSortChange={(e) => {
+        setSortField(e.field);
+        setSortOrder(e.order);
+    }}
+>
+    {/* same THead / TBody markup as a flat DataTable */}
+</DataTable.Root>
+```
+
+### Selection
+
+Selection cascades through descendants in tree mode. Use `Selection.isPartiallySelected` from the slot context to render an indeterminate state on parent nodes that have only some children selected.
+
+```tsx
+<DataTable.Selection>{({ isSelected, isPartiallySelected, toggle }) => <Checkbox checked={isSelected} indeterminate={isPartiallySelected} onCheckedChange={toggle} />}</DataTable.Selection>
+```
+
+### Editing
+
+Cell and row editing both work in tree mode without changes. The cell editor pins to the underlying row by `key`, so edits stay attached to the correct node when sort, filter, or expand/collapse reshuffles the flat order.
+
+## Components
+
+`TreeTable` renders the same compound component surface as `DataTable`. See the full [DataTable component reference](/docs/primitive/components/datatable#api) for every available sub-component, data attribute, and pass-through.
+
+## Accessibility
+
+### Screen Reader
+
+When `treeMode` is enabled, `DataTable.Table` applies `role="treegrid"`. Each row exposes `aria-level` (one-based depth), `aria-expanded` when it has children, and `aria-posinset` / `aria-setsize` for screen-reader navigation between siblings. Expander buttons emit `aria-expanded` and a descriptive `aria-label` (`"Expand row"` / `"Collapse row"`).
+
+### Keyboard Support
+
+| Key                       | Function                                                                                    |
+| ------------------------- | ------------------------------------------------------------------------------------------- |
+| `tab`                     | Moves focus through interactive elements (sort triggers, filter inputs, rows).              |
+| `arrow up` / `arrow down` | Moves focus between rows when a row is focused.                                             |
+| `arrow left`              | Collapses the focused row, or moves focus to its parent if already collapsed.               |
+| `arrow right`             | Expands the focused row, or moves focus to its first child if already expanded.             |
+| `home` / `end`            | Moves focus to the first / last visible row.                                                |
+| `space`                   | Toggles selection on the focused row.                                                       |
+| `enter`                   | Toggles expansion on the focused row, or opens the first editable cell in `cell` edit mode. |

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

@@ -0,0 +1,186 @@
+[
+  {
+    "name": "VisuallyHidden",
+    "source": "apps/showcase/assets/apidoc/visuallyhidden.json",
+    "data": {
+      "description": "VisuallyHidden component hides content visually while keeping it accessible to screen readers.",
+      "interfaces": {
+        "VisuallyHiddenOwnProps": {
+          "description": "Defines valid properties in VisuallyHidden component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "focusable",
+              "type": "boolean",
+              "default": "false",
+              "description": "When enabled, the element can receive focus via keyboard navigation."
+            }
+          ],
+          "methods": []
+        },
+        "VisuallyHiddenPassThrough": {
+          "description": "Defines passthrough(pt) options of VisuallyHidden component.",
+          "relatedProp": "",
+          "props": [
+            {
+              "name": "root",
+              "type": "VisuallyHiddenPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+              "default": "",
+              "description": "Used to pass attributes to the root's DOM element."
+            }
+          ],
+          "methods": []
+        },
+        "VisuallyHiddenProps": {
+          "description": "Defines valid properties in VisuallyHidden component.",
+          "relatedProp": "",
+          "extendedTypes": "BaseComponentProps<VisuallyHiddenInstance, VisuallyHiddenOwnProps, VisuallyHiddenPassThrough>",
+          "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?: VisuallyHiddenInstance) => CSSProperties)",
+              "default": "",
+              "description": "The style to apply to the component."
+            },
+            {
+              "name": "className",
+              "type": "string | ((instance?: VisuallyHiddenInstance) => 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": "VisuallyHiddenInstance",
+              "default": "",
+              "description": "The instance to pass to the component."
+            },
+            {
+              "name": "pt",
+              "type": "SafeRecord<VisuallyHiddenPassThrough>",
+              "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: VisuallyHiddenInstance) => 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": "focusable",
+              "type": "boolean",
+              "default": "false",
+              "description": "When enabled, the element can receive focus via keyboard navigation."
+            },
+            {
+              "name": "[key: string]",
+              "type": "any",
+              "description": ""
+            },
+            {
+              "name": "pt-{optionName}-*",
+              "type": "-",
+              "default": "",
+              "description": "Pass through attributes for customizing component parts.",
+              "deprecated": false
+            }
+          ],
+          "methods": []
+        },
+        "VisuallyHiddenState": {
+          "description": "Defines valid state in VisuallyHidden component.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        },
+        "VisuallyHiddenExposes": {
+          "description": "Defines the methods and properties exposed by VisuallyHidden component.",
+          "relatedProp": "",
+          "props": [],
+          "methods": []
+        }
+      },
+      "types": {
+        "VisuallyHiddenPassThroughType": {
+          "description": "Defines passthrough(pt) options type in VisuallyHidden component.",
+          "values": "PassThroughType<VisuallyHiddenInstance, E>"
+        },
+        "VisuallyHiddenClassNamesType": {
+          "description": "Type representing the CSS class names used in the VisuallyHidden component.",
+          "values": "typeof VisuallyHiddenClassNames[keyof typeof VisuallyHiddenClassNames]"
+        },
+        "VisuallyHiddenInstance": {
+          "description": "Instance of VisuallyHidden component.",
+          "values": "ComponentInstance<VisuallyHiddenProps, VisuallyHiddenState, VisuallyHiddenExposes>"
+        }
+      },
+      "variables": {
+        "VisuallyHiddenClassNames": {
+          "description": "Defines the CSS class names used in the VisuallyHidden component.",
+          "variables": [
+            {
+              "name": "root",
+              "value": "p-visuallyhidden",
+              "optional": false,
+              "readonly": true
+            }
+          ]
+        }
+      }
+    }
+  }
+]