@primereact/mcp 11.0.0-rc.2

package/data/llms/styled/components/organizationchart.md

@@ -0,0 +1,791 @@
+# OrganizationChart
+
+OrganizationChart visualizes hierarchical organization data.
+
+```tsx
+'use client';
+import type { TreeNode } from '@primereact/ui/organizationchart';
+import { Avatar } from '@primereact/ui/avatar';
+import { OrganizationChart, type OrganizationChartNodeRow } from '@primereact/ui/organizationchart';
+
+interface PersonNode extends TreeNode {
+    name: string;
+    role: string;
+    avatar: string;
+    children?: PersonNode[];
+}
+
+const data: PersonNode[] = [
+    {
+        key: '0',
+        name: 'Amy Elsner',
+        role: 'Founder & CEO',
+        avatar: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png',
+        children: [
+            {
+                key: '0-0',
+                name: 'Asiya Javayant',
+                role: 'Product Lead',
+                avatar: 'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png',
+                children: [
+                    {
+                        key: '0-0-0',
+                        name: 'Anna Fali',
+                        role: 'UX Designer',
+                        avatar: 'https://primefaces.org/cdn/primevue/images/avatar/annafali.png'
+                    },
+                    {
+                        key: '0-0-1',
+                        name: 'Bernardo Dominic',
+                        role: 'Product Manager',
+                        avatar: 'https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png'
+                    }
+                ]
+            },
+            {
+                key: '0-1',
+                name: 'Onyama Limba',
+                role: 'Engineering Lead',
+                avatar: 'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png',
+                children: [
+                    {
+                        key: '0-1-0',
+                        name: 'Elwin Sharvill',
+                        role: 'Frontend Engineer',
+                        avatar: 'https://primefaces.org/cdn/primevue/images/avatar/elwinsharvill.png'
+                    },
+                    {
+                        key: '0-1-1',
+                        name: 'Stephen Shaw',
+                        role: 'Backend Engineer',
+                        avatar: 'https://primefaces.org/cdn/primevue/images/avatar/stephenshaw.png'
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default function Preview() {
+    return (
+        <div className="flex items-center justify-center">
+            <OrganizationChart.Root value={data}>
+                <OrganizationChart.Nodes>
+                    {({ node }: OrganizationChartNodeRow) => {
+                        const item = node as PersonNode;
+
+                        return (
+                            <OrganizationChart.Node uKey={node.key}>
+                                <OrganizationChart.Content>
+                                    <div className="flex items-center gap-2">
+                                        <Avatar.Root shape="circle" size="normal">
+                                            <Avatar.Image src={item.avatar} alt={item.name} />
+                                            <Avatar.Fallback>
+                                                {item.name
+                                                    .split(' ')
+                                                    .map((n) => n[0])
+                                                    .join('')}
+                                            </Avatar.Fallback>
+                                        </Avatar.Root>
+                                        <div className="flex flex-col items-start gap-0.5">
+                                            <div className="text-sm font-semibold leading-none">{item.name}</div>
+                                            <div className="text-xs leading-none opacity-75">{item.role}</div>
+                                        </div>
+                                    </div>
+                                </OrganizationChart.Content>
+                            </OrganizationChart.Node>
+                        );
+                    }}
+                </OrganizationChart.Nodes>
+            </OrganizationChart.Root>
+        </div>
+    );
+}
+```
+
+## Usage
+
+```tsx
+import { OrganizationChart } from '@primereact/ui/organizationchart';
+```
+
+_OrganizationChart.Nodes_ calls its render function once per node and builds the connectors and nesting for you, no recursion in your code. Each node is identified by _uKey_.
+
+```tsx
+<OrganizationChart.Root value={data}>
+    <OrganizationChart.Nodes>
+        {({ node }) => (
+            <OrganizationChart.Node uKey={node.key}>
+                <OrganizationChart.Content>
+                    <OrganizationChart.Label>{node.label}</OrganizationChart.Label>
+                </OrganizationChart.Content>
+            </OrganizationChart.Node>
+        )}
+    </OrganizationChart.Nodes>
+</OrganizationChart.Root>
+```
+
+## Examples
+
+### Basic
+
+A basic chart renders a collection of nodes from the _value_.
+
+```tsx
+'use client';
+import { OrganizationChart, type OrganizationChartNodeRow } from '@primereact/ui/organizationchart';
+
+const data = [
+    {
+        key: '0',
+        label: 'Founder',
+        children: [
+            {
+                key: '0-0',
+                label: 'Product Lead',
+                children: [
+                    { key: '0-0-0', label: 'UX/UI Designer' },
+                    { key: '0-0-1', label: 'Product Manager' }
+                ]
+            },
+            {
+                key: '0-1',
+                label: 'Engineering Lead',
+                children: [
+                    { key: '0-1-0', label: 'Frontend Developer' },
+                    { key: '0-1-1', label: 'Backend Developer' }
+                ]
+            }
+        ]
+    }
+];
+
+export default function BasicDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <OrganizationChart.Root value={data}>
+                <OrganizationChart.Nodes>
+                    {({ node }: OrganizationChartNodeRow) => (
+                        <OrganizationChart.Node uKey={node.key}>
+                            <OrganizationChart.Content>
+                                <OrganizationChart.Label>{node.label}</OrganizationChart.Label>
+                            </OrganizationChart.Content>
+                        </OrganizationChart.Node>
+                    )}
+                </OrganizationChart.Nodes>
+            </OrganizationChart.Root>
+        </div>
+    );
+}
+```
+
+### Collapsible
+
+Add _OrganizationChart.Toggle_ with _OrganizationChart.ToggleIndicator_ and its _match_ property of _expanded_ or _collapsed_ to let a node collapse its subtree. A node is collapsible when it has children.
+
+```tsx
+'use client';
+import { Minus } from '@primeicons/react/minus';
+import { Plus } from '@primeicons/react/plus';
+import { OrganizationChart, type OrganizationChartNodeRow } from '@primereact/ui/organizationchart';
+
+const data = [
+    {
+        key: '0',
+        label: 'Founder',
+        children: [
+            {
+                key: '0-0',
+                label: 'Product Lead',
+                children: [
+                    { key: '0-0-0', label: 'UX/UI Designer' },
+                    { key: '0-0-1', label: 'Product Manager' }
+                ]
+            },
+            {
+                key: '0-1',
+                label: 'Engineering Lead',
+                children: [
+                    { key: '0-1-0', label: 'Frontend Developer' },
+                    { key: '0-1-1', label: 'Backend Developer' }
+                ]
+            }
+        ]
+    }
+];
+
+export default function CollapsibleDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <OrganizationChart.Root value={data}>
+                <OrganizationChart.Nodes>
+                    {({ node }: OrganizationChartNodeRow) => (
+                        <OrganizationChart.Node uKey={node.key}>
+                            <OrganizationChart.Content>
+                                <OrganizationChart.Label>{node.label}</OrganizationChart.Label>
+                                <OrganizationChart.Toggle>
+                                    <OrganizationChart.ToggleIndicator match="expanded">
+                                        <Minus />
+                                    </OrganizationChart.ToggleIndicator>
+                                    <OrganizationChart.ToggleIndicator match="collapsed">
+                                        <Plus />
+                                    </OrganizationChart.ToggleIndicator>
+                                </OrganizationChart.Toggle>
+                            </OrganizationChart.Content>
+                        </OrganizationChart.Node>
+                    )}
+                </OrganizationChart.Nodes>
+            </OrganizationChart.Root>
+        </div>
+    );
+}
+```
+
+### Controlled
+
+Drive expansion programmatically with the _collapsedKeys_ and _onCollapsedChange_ properties. A key present with _true_ is collapsed; absent keys stay expanded.
+
+```tsx
+'use client';
+import { Minus } from '@primeicons/react/minus';
+import { Plus } from '@primeicons/react/plus';
+import type { OrganizationChartCollapsedKeys, OrganizationChartCollapsedChangeEvent } from '@primereact/ui/organizationchart';
+import { Button } from '@primereact/ui/button';
+import { OrganizationChart, type OrganizationChartNodeRow } from '@primereact/ui/organizationchart';
+import * as React from 'react';
+
+const data = [
+    {
+        key: '0',
+        label: 'Founder',
+        children: [
+            {
+                key: '0-0',
+                label: 'Product Lead',
+                children: [
+                    { key: '0-0-0', label: 'UX/UI Designer' },
+                    { key: '0-0-1', label: 'Product Manager' }
+                ]
+            },
+            {
+                key: '0-1',
+                label: 'Engineering Lead',
+                children: [
+                    { key: '0-1-0', label: 'Frontend Developer' },
+                    { key: '0-1-1', label: 'Backend Developer' }
+                ]
+            }
+        ]
+    }
+];
+
+export default function ControlledDemo() {
+    const [collapsedKeys, setCollapsedKeys] = React.useState<OrganizationChartCollapsedKeys>({});
+
+    return (
+        <div className="flex flex-col items-center gap-4">
+            <div className="flex gap-2">
+                <Button size="small" severity="secondary" onClick={() => setCollapsedKeys({})}>
+                    Expand all
+                </Button>
+                <Button size="small" severity="secondary" onClick={() => setCollapsedKeys({ '0': true })}>
+                    Collapse all
+                </Button>
+            </div>
+            <OrganizationChart.Root
+                value={data}
+                collapsedKeys={collapsedKeys}
+                onCollapsedChange={(e: OrganizationChartCollapsedChangeEvent) => setCollapsedKeys(e.value)}
+            >
+                <OrganizationChart.Nodes>
+                    {({ node }: OrganizationChartNodeRow) => (
+                        <OrganizationChart.Node uKey={node.key}>
+                            <OrganizationChart.Content>
+                                <OrganizationChart.Label>{node.label}</OrganizationChart.Label>
+                                <OrganizationChart.Toggle>
+                                    <OrganizationChart.ToggleIndicator match="expanded">
+                                        <Minus />
+                                    </OrganizationChart.ToggleIndicator>
+                                    <OrganizationChart.ToggleIndicator match="collapsed">
+                                        <Plus />
+                                    </OrganizationChart.ToggleIndicator>
+                                </OrganizationChart.Toggle>
+                            </OrganizationChart.Content>
+                        </OrganizationChart.Node>
+                    )}
+                </OrganizationChart.Nodes>
+            </OrganizationChart.Root>
+        </div>
+    );
+}
+```
+
+### Content
+
+Render anything inside _OrganizationChart.Content_; the node payload carries your own data fields.
+
+```tsx
+'use client';
+import { Bolt } from '@primeicons/react/bolt';
+import { Box } from '@primeicons/react/box';
+import { Cloud } from '@primeicons/react/cloud';
+import { Database } from '@primeicons/react/database';
+import { Globe } from '@primeicons/react/globe';
+import { Minus } from '@primeicons/react/minus';
+import { Plus } from '@primeicons/react/plus';
+import { Server } from '@primeicons/react/server';
+import { Shield } from '@primeicons/react/shield';
+import type { TreeNode } from '@primereact/ui/organizationchart';
+import { OrganizationChart, type OrganizationChartNodeRow } from '@primereact/ui/organizationchart';
+import * as React from 'react';
+
+interface ServiceNode extends TreeNode {
+    label: string;
+    description: string;
+    icon: React.ComponentType<{ className?: string }>;
+    accent: string;
+    children?: ServiceNode[];
+}
+
+const data: ServiceNode[] = [
+    {
+        key: '0',
+        label: 'AWS Cloud',
+        description: 'us-east-1',
+        icon: Cloud,
+        accent: 'bg-orange-500/10 text-orange-500',
+        children: [
+            {
+                key: '0_0',
+                label: 'Compute',
+                description: 'Workloads & runtime',
+                icon: Server,
+                accent: 'bg-sky-500/10 text-sky-500',
+                children: [
+                    { key: '0_0_0', label: 'EC2', description: 'Virtual servers', icon: Server, accent: 'bg-sky-500/10 text-sky-500' },
+                    { key: '0_0_1', label: 'Lambda', description: 'Serverless functions', icon: Bolt, accent: 'bg-sky-500/10 text-sky-500' }
+                ]
+            },
+            {
+                key: '0_1',
+                label: 'Storage',
+                description: 'Data persistence',
+                icon: Database,
+                accent: 'bg-emerald-500/10 text-emerald-500',
+                children: [
+                    { key: '0_1_0', label: 'S3', description: 'Object storage', icon: Box, accent: 'bg-emerald-500/10 text-emerald-500' },
+                    { key: '0_1_1', label: 'RDS', description: 'Managed databases', icon: Database, accent: 'bg-emerald-500/10 text-emerald-500' }
+                ]
+            },
+            {
+                key: '0_2',
+                label: 'Networking',
+                description: 'Edge & access',
+                icon: Globe,
+                accent: 'bg-violet-500/10 text-violet-500',
+                children: [
+                    { key: '0_2_0', label: 'CloudFront', description: 'Global CDN', icon: Globe, accent: 'bg-violet-500/10 text-violet-500' },
+                    { key: '0_2_1', label: 'IAM', description: 'Access policies', icon: Shield, accent: 'bg-violet-500/10 text-violet-500' }
+                ]
+            }
+        ]
+    }
+];
+
+export default function ContentDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <OrganizationChart.Root value={data}>
+                <OrganizationChart.Nodes>
+                    {({ node }: OrganizationChartNodeRow) => {
+                        const item = node as ServiceNode;
+                        const Icon = item.icon;
+
+                        return (
+                            <OrganizationChart.Node uKey={node.key}>
+                                <OrganizationChart.Content>
+                                    <div className="flex items-center gap-2">
+                                        <div className={`size-9 rounded-md flex items-center justify-center shrink-0 ${item.accent}`}>
+                                            <Icon className="size-4!" />
+                                        </div>
+                                        <div className="flex flex-col items-start gap-0.5">
+                                            <div className="text-sm font-semibold leading-none">{item.label}</div>
+                                            <div className="text-xs leading-none opacity-75">{item.description}</div>
+                                        </div>
+                                    </div>
+                                    <OrganizationChart.Toggle>
+                                        <OrganizationChart.ToggleIndicator match="expanded">
+                                            <Minus />
+                                        </OrganizationChart.ToggleIndicator>
+                                        <OrganizationChart.ToggleIndicator match="collapsed">
+                                            <Plus />
+                                        </OrganizationChart.ToggleIndicator>
+                                    </OrganizationChart.Toggle>
+                                </OrganizationChart.Content>
+                            </OrganizationChart.Node>
+                        );
+                    }}
+                </OrganizationChart.Nodes>
+            </OrganizationChart.Root>
+        </div>
+    );
+}
+```
+
+### Selection
+
+#### Single
+
+Set _selectionMode_ to _single_ to keep at most one node selected. Bind the selection with _selectionKeys_ and _onSelectionChange_.
+
+```tsx
+'use client';
+import type { OrganizationChartSelectionKeys, OrganizationChartSelectionChangeEvent } from '@primereact/ui/organizationchart';
+import { OrganizationChart, type OrganizationChartNodeRow } from '@primereact/ui/organizationchart';
+import * as React from 'react';
+
+const data = [
+    {
+        key: '0',
+        label: 'Founder',
+        children: [
+            {
+                key: '0-0',
+                label: 'Product Lead',
+                children: [
+                    { key: '0-0-0', label: 'UX/UI Designer' },
+                    { key: '0-0-1', label: 'Product Manager' }
+                ]
+            },
+            {
+                key: '0-1',
+                label: 'Engineering Lead',
+                children: [
+                    { key: '0-1-0', label: 'Frontend Developer' },
+                    { key: '0-1-1', label: 'Backend Developer' }
+                ]
+            }
+        ]
+    }
+];
+
+export default function SingleSelectionDemo() {
+    const [selectionKeys, setSelectionKeys] = React.useState<OrganizationChartSelectionKeys>({});
+
+    const selected = Object.keys(selectionKeys).filter((k) => selectionKeys[k]);
+
+    return (
+        <div className="flex flex-col items-center gap-4">
+            <span className="text-sm text-muted-color">
+                Selected: <span className="font-mono">{selected.length ? selected.join(', ') : '—'}</span>
+            </span>
+            <OrganizationChart.Root
+                value={data}
+                selectionMode="single"
+                selectionKeys={selectionKeys}
+                onSelectionChange={(e: OrganizationChartSelectionChangeEvent) => setSelectionKeys(e.value)}
+            >
+                <OrganizationChart.Nodes>
+                    {({ node }: OrganizationChartNodeRow) => (
+                        <OrganizationChart.Node uKey={node.key}>
+                            <OrganizationChart.Content>
+                                <OrganizationChart.Label>{node.label}</OrganizationChart.Label>
+                            </OrganizationChart.Content>
+                        </OrganizationChart.Node>
+                    )}
+                </OrganizationChart.Nodes>
+            </OrganizationChart.Root>
+        </div>
+    );
+}
+```
+
+#### Multiple
+
+With _multiple_, each node toggles independently.
+
+```tsx
+'use client';
+import type { OrganizationChartSelectionKeys, OrganizationChartSelectionChangeEvent } from '@primereact/ui/organizationchart';
+import { OrganizationChart, type OrganizationChartNodeRow } from '@primereact/ui/organizationchart';
+import * as React from 'react';
+
+const data = [
+    {
+        key: '0',
+        label: 'Founder',
+        children: [
+            {
+                key: '0-0',
+                label: 'Product Lead',
+                children: [
+                    { key: '0-0-0', label: 'UX/UI Designer' },
+                    { key: '0-0-1', label: 'Product Manager' }
+                ]
+            },
+            {
+                key: '0-1',
+                label: 'Engineering Lead',
+                children: [
+                    { key: '0-1-0', label: 'Frontend Developer' },
+                    { key: '0-1-1', label: 'Backend Developer' }
+                ]
+            }
+        ]
+    }
+];
+
+export default function MultipleSelectionDemo() {
+    const [selectionKeys, setSelectionKeys] = React.useState<OrganizationChartSelectionKeys>({});
+
+    const selected = Object.keys(selectionKeys).filter((k) => selectionKeys[k]);
+
+    return (
+        <div className="flex flex-col items-center gap-4">
+            <span className="text-sm text-muted-color">
+                Selected: <span className="font-mono">{selected.length ? selected.join(', ') : '—'}</span>
+            </span>
+            <OrganizationChart.Root
+                value={data}
+                selectionMode="multiple"
+                selectionKeys={selectionKeys}
+                onSelectionChange={(e: OrganizationChartSelectionChangeEvent) => setSelectionKeys(e.value)}
+            >
+                <OrganizationChart.Nodes>
+                    {({ node }: OrganizationChartNodeRow) => (
+                        <OrganizationChart.Node uKey={node.key}>
+                            <OrganizationChart.Content>
+                                <OrganizationChart.Label>{node.label}</OrganizationChart.Label>
+                            </OrganizationChart.Content>
+                        </OrganizationChart.Node>
+                    )}
+                </OrganizationChart.Nodes>
+            </OrganizationChart.Root>
+        </div>
+    );
+}
+```
+
+#### Checkbox
+
+In _checkbox_ mode, _OrganizationChart.Selection_ exposes _isSelected_, _isPartiallySelected_ and _toggle_. Selecting a node cascades to its descendants and reflects a partial state on its ancestors.
+
+```tsx
+'use client';
+import { Check } from '@primeicons/react/check';
+import { Minus } from '@primeicons/react/minus';
+import { Checkbox, type CheckboxRootChangeEvent } from '@primereact/ui/checkbox';
+import { OrganizationChart, type OrganizationChartNodeRow, type OrganizationChartSelectionInstance } from '@primereact/ui/organizationchart';
+
+const data = [
+    {
+        key: '0',
+        label: 'Founder',
+        children: [
+            {
+                key: '0-0',
+                label: 'Product Lead',
+                children: [
+                    { key: '0-0-0', label: 'UX/UI Designer' },
+                    { key: '0-0-1', label: 'Product Manager' }
+                ]
+            },
+            {
+                key: '0-1',
+                label: 'Engineering Lead',
+                children: [
+                    { key: '0-1-0', label: 'Frontend Developer' },
+                    { key: '0-1-1', label: 'Backend Developer' }
+                ]
+            }
+        ]
+    }
+];
+
+export default function CheckboxSelectionDemo() {
+    return (
+        <div className="flex items-center justify-center">
+            <OrganizationChart.Root value={data} selectionMode="checkbox">
+                <OrganizationChart.Nodes>
+                    {({ node }: OrganizationChartNodeRow) => (
+                        <OrganizationChart.Node uKey={node.key}>
+                            <OrganizationChart.Content className="flex items-center gap-2">
+                                <OrganizationChart.Selection>
+                                    {({ isSelected, isPartiallySelected, toggle }: OrganizationChartSelectionInstance) => (
+                                        <Checkbox.Root
+                                            checked={isSelected}
+                                            indeterminate={isPartiallySelected}
+                                            onCheckedChange={(e: CheckboxRootChangeEvent) => toggle(e.originalEvent)}
+                                            size="small"
+                                        >
+                                            <Checkbox.Box>
+                                                <Checkbox.Indicator match="checked">
+                                                    <Check />
+                                                </Checkbox.Indicator>
+                                                <Checkbox.Indicator match="indeterminate">
+                                                    <Minus />
+                                                </Checkbox.Indicator>
+                                            </Checkbox.Box>
+                                        </Checkbox.Root>
+                                    )}
+                                </OrganizationChart.Selection>
+                                <OrganizationChart.Label>{node.label}</OrganizationChart.Label>
+                            </OrganizationChart.Content>
+                        </OrganizationChart.Node>
+                    )}
+                </OrganizationChart.Nodes>
+            </OrganizationChart.Root>
+        </div>
+    );
+}
+```
+
+## Related
+
+### Sub-Components
+
+See the [Primitive API](/docs/primitive/components/organizationchart#api) for _OrganizationChart.Root_, _OrganizationChart.Nodes_, _OrganizationChart.Node_, _OrganizationChart.Content_, _OrganizationChart.Label_, _OrganizationChart.Toggle_, _OrganizationChart.ToggleIndicator_ and _OrganizationChart.Selection_.
+
+### Hooks
+
+See the [Headless API](/docs/headless/components/organizationchart#api) for _useOrganizationChart_.
+
+### Accessibility
+
+See [OrganizationChart Primitive](/docs/primitive/components/organizationchart#accessibility) for WAI-ARIA compliance details and keyboard support.
+
+
+# OrganizationChart API
+
+API documentation for OrganizationChart component
+
+## OrganizationChartRoot
+
+### Props
+
+<DocTable name="OrganizationChartRoot" category="api" type="props" />
+
+### State
+
+<DocTable name="OrganizationChartRoot" category="api" type="state" />
+
+### Exposes
+
+<DocTable name="OrganizationChartRoot" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="OrganizationChartRoot" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="OrganizationChartRoot" category="api" type="types" />
+
+## OrganizationChartNodes
+
+### Props
+
+<DocTable name="OrganizationChartNodes" category="api" type="props" />
+
+### Interfaces
+
+<DocTable name="OrganizationChartNodes" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="OrganizationChartNodes" category="api" type="types" />
+
+## OrganizationChartNode
+
+### Props
+
+<DocTable name="OrganizationChartNode" category="api" type="props" />
+
+### Exposes
+
+<DocTable name="OrganizationChartNode" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="OrganizationChartNode" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="OrganizationChartNode" category="api" type="types" />
+
+## OrganizationChartContent
+
+### Props
+
+<DocTable name="OrganizationChartContent" category="api" type="props" />
+
+### Interfaces
+
+<DocTable name="OrganizationChartContent" category="api" type="interfaces" />
+
+## OrganizationChartLabel
+
+### Props
+
+<DocTable name="OrganizationChartLabel" category="api" type="props" />
+
+### Interfaces
+
+<DocTable name="OrganizationChartLabel" category="api" type="interfaces" />
+
+## OrganizationChartToggle
+
+### Props
+
+<DocTable name="OrganizationChartToggle" category="api" type="props" />
+
+### Exposes
+
+<DocTable name="OrganizationChartToggle" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="OrganizationChartToggle" category="api" type="interfaces" />
+
+## OrganizationChartToggleIndicator
+
+### Props
+
+<DocTable name="OrganizationChartToggleIndicator" category="api" type="props" />
+
+### Interfaces
+
+<DocTable name="OrganizationChartToggleIndicator" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="OrganizationChartToggleIndicator" category="api" type="types" />
+
+## OrganizationChartSelection
+
+### Props
+
+<DocTable name="OrganizationChartSelection" category="api" type="props" />
+
+### Exposes
+
+<DocTable name="OrganizationChartSelection" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="OrganizationChartSelection" category="api" type="interfaces" />
+
+
+## Theming
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="OrganizationChart" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="OrganizationChart" category="token" />