[docs] Detailed type definitions

docs/data/translations/api-docs/dialog-backdrop/dialog-backdrop.json

@@ -1,5 +1,5 @@
 {
-  "componentDescription": "",
+  "componentDescription": "An overlay displayed beneath the popup. Renders a `<div>` element.",
   "propDescriptions": {
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."

docs/data/translations/api-docs/dialog-description/dialog-description.json

@@ -1,5 +1,5 @@
 {
-  "componentDescription": "",
+  "componentDescription": "A paragraph with additional information about the dialog. Renders a `<p>` element.",
   "propDescriptions": {
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."

docs/data/translations/api-docs/dialog-popup/dialog-popup.json

@@ -1,5 +1,5 @@
 {
-  "componentDescription": "",
+  "componentDescription": "A component that groups the dialog contents. Renders a `<div>` element.",
   "propDescriptions": {
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."

docs/data/translations/api-docs/dialog-root/dialog-root.json

@@ -1,5 +1,5 @@
 {
-  "componentDescription": "",
+  "componentDescription": "Groups all parts of the dialog. Doesn’t render its own HTML element.",
   "propDescriptions": {
     "animated": {
       "description": "If <code>true</code>, the dialog supports CSS-based animations and transitions. It is kept in the DOM until the animation completes."

docs/data/translations/api-docs/dialog-title/dialog-title.json

@@ -1,5 +1,5 @@
 {
-  "componentDescription": "",
+  "componentDescription": "A heading that labels the dialog. Renders an `<h2>` element.",
   "propDescriptions": {
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."

docs/data/translations/api-docs/dialog-trigger/dialog-trigger.json

@@ -1,5 +1,5 @@
 {
-  "componentDescription": "Renders a trigger element that opens the Dialog.",
+  "componentDescription": "A button that opens the dialog. Renders a `<button>` element.",
   "propDescriptions": {
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."

docs/next.config.mjs

@@ -5,34 +5,24 @@ import * as fs from 'fs';
 // eslint-disable-next-line no-restricted-imports
 import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js';
 import nextMdx from '@next/mdx';
-import rehypePrettyCode from 'rehype-pretty-code';
 import rehypeExtractToc from '@stefanprobst/rehype-extract-toc';
 import remarkGfm from 'remark-gfm';
+import { rehypeQuickNav } from 'docs/src/components/quick-nav/rehypeQuickNav.mjs';
+import { rehypeReference } from './src/components/reference/rehypeReference.mjs';
 import { rehypeDemos } from './src/components/demo/rehypeDemos.mjs';
-import { highlighter } from './src/syntax-highlighting/index.mjs';
-import { rehypeInlineCode } from './src/syntax-highlighting/rehype-inline-code.mjs';
-import { rehypeQuickNav } from './src/components/quick-nav/rehype-quick-nav.mjs';
-import { rehypeSlug } from './src/components/quick-nav/rehype-slug.mjs';
+import { rehypeSyntaxHighlighting } from './src/syntax-highlighting/index.mjs';
+import { rehypeSlug } from './src/components/quick-nav/rehypeSlug.mjs';
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 const workspaceRoot = path.resolve(currentDirectory, '../');
-const getHighlighter = () => highlighter;
 
 const withMdx = nextMdx({
   options: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [
       rehypeDemos,
-      [
-        rehypePrettyCode,
-        {
-          getHighlighter,
-          grid: false,
-          theme: 'base-ui',
-          defaultLang: 'jsx',
-        },
-      ],
-      rehypeInlineCode,
+      rehypeReference,
+      ...rehypeSyntaxHighlighting,
       rehypeSlug,
       rehypeExtractToc,
       rehypeQuickNav,

docs/package.json

@@ -39,6 +39,7 @@
     "clsx": "^2.1.1",
     "core-js": "^3.37.1",
     "cross-env": "^7.0.3",
+    "estree-util-value-to-estree": "^3.2.1",
     "fast-glob": "^3.3.2",
     "hast": "^1.0.0",
     "hast-util-heading-rank": "^3.0.0",
@@ -57,9 +58,12 @@
     "react-runner": "^1.0.5",
     "react-simple-code-editor": "^0.13.1",
     "rehype-pretty-code": "^0.14.0",
+    "remark": "^15.0.1",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^5.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
     "shiki": "^1.22.2",
     "to-vfile": "^8.0.0",
     "unist-util-visit": "^5.0.0",
@@ -89,6 +93,7 @@
     "rimraf": "^5.0.10",
     "serve": "^14.2.4",
     "tailwindcss": "4.0.0-alpha.30",
+    "unified": "^11.0.5",
     "webpack-bundle-analyzer": "^4.10.2",
     "yargs": "^17.7.2"
   }

docs/reference/generated/accordion-header.json

@@ -0,0 +1,14 @@
+{
+  "name": "AccordionHeader",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/accordion-item.json

@@ -0,0 +1,23 @@
+{
+  "name": "AccordionItem",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "If `true`, the component is disabled."
+    },
+    "onOpenChange": {
+      "type": "(open) => void",
+      "description": "Callback fired when the Collapsible is opened or closed."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/accordion-panel.json

@@ -0,0 +1,19 @@
+{
+  "name": "AccordionPanel",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "hiddenUntilFound": {
+      "type": "boolean",
+      "default": "false",
+      "description": "If `true`, sets `hidden=\"until-found\"` when closed.\nIf `false`, sets `hidden` when closed."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/accordion-root.json

@@ -0,0 +1,47 @@
+{
+  "name": "AccordionRoot",
+  "description": "",
+  "props": {
+    "animated": {
+      "type": "boolean",
+      "default": "true",
+      "description": "If `true`, the component supports CSS/JS-based animations and transitions."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "defaultValue": {
+      "type": "Array<number | string>",
+      "default": "0",
+      "description": "The default value representing the currently open `Accordion.Item`\nThis is the uncontrolled counterpart of `value`."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "If `true`, the component is disabled."
+    },
+    "loop": {
+      "type": "boolean",
+      "default": "true",
+      "description": "If `true`, focus will loop when moving focus between `Trigger`s using\nthe arrow keys."
+    },
+    "onValueChange": {
+      "type": "(value) => void",
+      "description": "Callback fired when an Accordion section is opened or closed.\nThe value representing the involved section is provided as an argument."
+    },
+    "openMultiple": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Whether multiple Accordion sections can be opened at the same time"
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    },
+    "value": {
+      "type": "Array<number | string>",
+      "description": "The value of the currently open `Accordion.Item`\nThis is the controlled counterpart of `defaultValue`."
+    }
+  }
+}

docs/reference/generated/accordion-trigger.json

@@ -0,0 +1,14 @@
+{
+  "name": "AccordionTrigger",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/alert-dialog-backdrop.json

@@ -0,0 +1,19 @@
+{
+  "name": "AlertDialogBackdrop",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "If `true`, the backdrop element is kept in the DOM when closed."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/alert-dialog-close.json

@@ -0,0 +1,14 @@
+{
+  "name": "AlertDialogClose",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/alert-dialog-description.json

@@ -0,0 +1,14 @@
+{
+  "name": "AlertDialogDescription",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/alert-dialog-popup.json

@@ -0,0 +1,31 @@
+{
+  "name": "AlertDialogPopup",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "The container element to which the popup is appended to."
+    },
+    "finalFocus": {
+      "type": "React.Ref",
+      "description": "Determines an element to focus after the dialog is closed.\nIf not provided, the focus returns to the trigger."
+    },
+    "initialFocus": {
+      "type": "React.Ref | (interactionType => HTMLElement | null)",
+      "description": "Determines an element to focus when the dialog is opened.\nIt can be either a ref to the element or a function that returns such a ref.\nIf not provided, the first focusable element is focused."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "If `true`, the dialog element is kept in the DOM when closed."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/alert-dialog-root.json

@@ -0,0 +1,23 @@
+{
+  "name": "AlertDialogRoot",
+  "description": "",
+  "props": {
+    "animated": {
+      "type": "boolean",
+      "default": "true",
+      "description": "If `true`, the dialog supports CSS-based animations and transitions.\nIt is kept in the DOM until the animation completes."
+    },
+    "defaultOpen": {
+      "type": "boolean",
+      "description": "Determines whether the dialog is initally open.\nThis is an uncontrolled equivalent of the `open` prop."
+    },
+    "onOpenChange": {
+      "type": "(open, event) => void",
+      "description": "Callback invoked when the dialog is being opened or closed."
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Determines whether the dialog is open."
+    }
+  }
+}

docs/reference/generated/alert-dialog-title.json

@@ -0,0 +1,14 @@
+{
+  "name": "AlertDialogTitle",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}

docs/reference/generated/alert-dialog-trigger.json

@@ -0,0 +1,14 @@
+{
+  "name": "AlertDialogTrigger",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}