From 397ff6893ddadca268d27bd6c2ef3ccda52b7251 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Wed, 17 Jul 2024 17:24:24 +0800
Subject: [PATCH] Add Collapsible components and hooks

---
 .../components/collapsible/collapsible.md     |  56 +++++++++
 docs/data/base/pages.ts                       |   1 +
 docs/data/base/pagesApi.js                    |  24 ++++
 .../base-ui/api/collapsible-content.json      |  19 +++
 docs/pages/base-ui/api/collapsible-root.json  |  20 +++
 .../base-ui/api/collapsible-trigger.json      |  19 +++
 .../base-ui/api/use-collapsible-content.json  |   8 ++
 .../base-ui/api/use-collapsible-root.json     |   8 ++
 .../base-ui/api/use-collapsible-trigger.json  |   8 ++
 .../react-collapsible/[docsTab]/index.js      |  96 ++++++++++++++
 docs/pages/base-ui/react-collapsible/index.js |  13 ++
 docs/pages/experiments/collapsible.tsx        | 119 ++++++++++++++++++
 .../collapsible-content.json                  |  10 ++
 .../collapsible-root/collapsible-root.json    |  14 +++
 .../collapsible-trigger.json                  |  10 ++
 .../use-collapsible-content.json              |   1 +
 .../use-collapsible-root.json                 |   1 +
 .../use-collapsible-trigger.json              |   1 +
 docs/translations/translations.json           |   1 +
 .../Content/CollapsibleContent.test.tsx       |  34 +++++
 .../Content/CollapsibleContent.tsx            |  56 +++++++++
 .../Content/CollapsibleContent.types.ts       |  20 +++
 .../Content/useCollapsibleContent.ts          |  48 +++++++
 .../Collapsible/Root/CollapsibleContext.tsx   |  22 ++++
 .../Collapsible/Root/CollapsibleRoot.test.tsx | 100 +++++++++++++++
 .../src/Collapsible/Root/CollapsibleRoot.tsx  |  60 +++++++++
 .../Collapsible/Root/CollapsibleRoot.types.ts |  46 +++++++
 .../src/Collapsible/Root/styleHooks.ts        |   8 ++
 .../Collapsible/Root/useCollapsibleRoot.ts    |  47 +++++++
 .../Trigger/CollapsibleTrigger.test.tsx       |  34 +++++
 .../Trigger/CollapsibleTrigger.tsx            |  56 +++++++++
 .../Trigger/CollapsibleTrigger.types.ts       |  23 ++++
 .../Trigger/useCollapsibleTrigger.ts          |  41 ++++++
 .../mui-base/src/Collapsible/index.barrel.ts  |  20 +++
 packages/mui-base/src/Collapsible/index.ts    |  26 ++++
 35 files changed, 1070 insertions(+)
 create mode 100644 docs/data/base/components/collapsible/collapsible.md
 create mode 100644 docs/pages/base-ui/api/collapsible-content.json
 create mode 100644 docs/pages/base-ui/api/collapsible-root.json
 create mode 100644 docs/pages/base-ui/api/collapsible-trigger.json
 create mode 100644 docs/pages/base-ui/api/use-collapsible-content.json
 create mode 100644 docs/pages/base-ui/api/use-collapsible-root.json
 create mode 100644 docs/pages/base-ui/api/use-collapsible-trigger.json
 create mode 100644 docs/pages/base-ui/react-collapsible/[docsTab]/index.js
 create mode 100644 docs/pages/base-ui/react-collapsible/index.js
 create mode 100644 docs/pages/experiments/collapsible.tsx
 create mode 100644 docs/translations/api-docs/collapsible-content/collapsible-content.json
 create mode 100644 docs/translations/api-docs/collapsible-root/collapsible-root.json
 create mode 100644 docs/translations/api-docs/collapsible-trigger/collapsible-trigger.json
 create mode 100644 docs/translations/api-docs/use-collapsible-content/use-collapsible-content.json
 create mode 100644 docs/translations/api-docs/use-collapsible-root/use-collapsible-root.json
 create mode 100644 docs/translations/api-docs/use-collapsible-trigger/use-collapsible-trigger.json
 create mode 100644 packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
 create mode 100644 packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
 create mode 100644 packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts
 create mode 100644 packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
 create mode 100644 packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx
 create mode 100644 packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
 create mode 100644 packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx
 create mode 100644 packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts
 create mode 100644 packages/mui-base/src/Collapsible/Root/styleHooks.ts
 create mode 100644 packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts
 create mode 100644 packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
 create mode 100644 packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx
 create mode 100644 packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.types.ts
 create mode 100644 packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts
 create mode 100644 packages/mui-base/src/Collapsible/index.barrel.ts
 create mode 100644 packages/mui-base/src/Collapsible/index.ts

diff --git a/docs/data/base/components/collapsible/collapsible.md b/docs/data/base/components/collapsible/collapsible.md
new file mode 100644
index 0000000000..806953818c
--- /dev/null
+++ b/docs/data/base/components/collapsible/collapsible.md
@@ -0,0 +1,56 @@
+---
+productId: base-ui
+title: React Collapsible components
+components: CollapsibleRoot, CollapsibleTrigger, CollapsibleContent
+hooks: useCollapsibleRoot, useCollapsibleTrigger, useCollapsibleContent
+githubLabel: 'component: collapsible'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+packageName: '@base_ui/react'
+---
+
+# Collapsible
+
+<p class="description">Collapsible is a component that shows or hides content.</p>
+
+{{"component": "@mui/docs/ComponentLinkHeader", "design": false}}
+
+{{"component": "modules/components/ComponentPageTabs.js"}}
+
+## Installation
+
+Base UI components are all available as a single package.
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install @base_ui/react
+```
+
+```bash yarn
+yarn add @base_ui/react
+```
+
+```bash pnpm
+pnpm add @base_ui/react
+```
+
+</codeblock>
+
+Once you have the package installed, import the component.
+
+```ts
+import * as Collapsible from '@base_ui/react/Collapsible';
+```
+
+## Anatomy
+
+- `<Collapsible.Root />` is a top-level component that facilitates communication between other components. It does not render to the DOM.
+- `<Collapsible.Trigger />` is the trigger element, a `<button>` by default, that toggles the open/closed state of the content
+- `<Collapsible.Content />` is component that contains the Collapsible's content
+
+```tsx
+<Collapsible.Root>
+  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
+  <Collapsible.Content>This is the content</Collapsible.Content>
+</Collapsible.Root>
+```
diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts
index 0ce753a28b..ce62afb1fe 100644
--- a/docs/data/base/pages.ts
+++ b/docs/data/base/pages.ts
@@ -39,6 +39,7 @@ const pages: readonly MuiPage[] = [
         pathname: '/base-ui/components/data-display',
         subheader: 'data-display',
         children: [
+          { pathname: '/base-ui/react-collapsible', title: 'Collapsible' },
           { pathname: '/base-ui/react-popover', title: 'Popover' },
           { pathname: '/base-ui/react-tooltip', title: 'Tooltip' },
         ],
diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js
index d9d16fe2e6..94cfe5c0f3 100644
--- a/docs/data/base/pagesApi.js
+++ b/docs/data/base/pagesApi.js
@@ -42,6 +42,18 @@ module.exports = [
       '/base-ui/react-click-away-listener/components-api/#click-away-listener',
     title: 'ClickAwayListener',
   },
+  {
+    pathname: '/base-ui/react-collapsible/components-api/#collapsible-content',
+    title: 'CollapsibleContent',
+  },
+  {
+    pathname: '/base-ui/react-collapsible/components-api/#collapsible-root',
+    title: 'CollapsibleRoot',
+  },
+  {
+    pathname: '/base-ui/react-collapsible/components-api/#collapsible-trigger',
+    title: 'CollapsibleTrigger',
+  },
   {
     pathname: '/base-ui/react-transitions/components-api/#css-animation',
     title: 'CssAnimation',
@@ -256,6 +268,18 @@ module.exports = [
     pathname: '/base-ui/react-checkbox/hooks-api/#use-checkbox-root',
     title: 'useCheckboxRoot',
   },
+  {
+    pathname: '/base-ui/react-collapsible/hooks-api/#use-collapsible-content',
+    title: 'useCollapsibleContent',
+  },
+  {
+    pathname: '/base-ui/react-collapsible/hooks-api/#use-collapsible-root',
+    title: 'useCollapsibleRoot',
+  },
+  {
+    pathname: '/base-ui/react-collapsible/hooks-api/#use-collapsible-trigger',
+    title: 'useCollapsibleTrigger',
+  },
   {
     pathname: '/base-ui/react-dialog/hooks-api/#use-dialog-close',
     title: 'useDialogClose',
diff --git a/docs/pages/base-ui/api/collapsible-content.json b/docs/pages/base-ui/api/collapsible-content.json
new file mode 100644
index 0000000000..779c8c6153
--- /dev/null
+++ b/docs/pages/base-ui/api/collapsible-content.json
@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "CollapsibleContent",
+  "imports": [
+    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "CollapsibleContent",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/\">Collapsible</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/base-ui/api/collapsible-root.json b/docs/pages/base-ui/api/collapsible-root.json
new file mode 100644
index 0000000000..7447809e42
--- /dev/null
+++ b/docs/pages/base-ui/api/collapsible-root.json
@@ -0,0 +1,20 @@
+{
+  "props": {
+    "defaultOpen": { "type": { "name": "bool" }, "default": "true" },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "onOpenChange": { "type": { "name": "func" } },
+    "open": { "type": { "name": "bool" } }
+  },
+  "name": "CollapsibleRoot",
+  "imports": [
+    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "CollapsibleRoot",
+  "filename": "/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/\">Collapsible</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/base-ui/api/collapsible-trigger.json b/docs/pages/base-ui/api/collapsible-trigger.json
new file mode 100644
index 0000000000..589540e0ee
--- /dev/null
+++ b/docs/pages/base-ui/api/collapsible-trigger.json
@@ -0,0 +1,19 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "CollapsibleTrigger",
+  "imports": [
+    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "CollapsibleTrigger",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/\">Collapsible</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/pages/base-ui/api/use-collapsible-content.json b/docs/pages/base-ui/api/use-collapsible-content.json
new file mode 100644
index 0000000000..0b55112ea7
--- /dev/null
+++ b/docs/pages/base-ui/api/use-collapsible-content.json
@@ -0,0 +1,8 @@
+{
+  "parameters": {},
+  "returnValue": {},
+  "name": "useCollapsibleContent",
+  "filename": "/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts",
+  "imports": ["import { useCollapsibleContent } from '@base_ui/react/Collapsible';"],
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/#hooks\">Collapsible</a></li></ul>"
+}
diff --git a/docs/pages/base-ui/api/use-collapsible-root.json b/docs/pages/base-ui/api/use-collapsible-root.json
new file mode 100644
index 0000000000..05006c027f
--- /dev/null
+++ b/docs/pages/base-ui/api/use-collapsible-root.json
@@ -0,0 +1,8 @@
+{
+  "parameters": {},
+  "returnValue": {},
+  "name": "useCollapsibleRoot",
+  "filename": "/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts",
+  "imports": ["import { useCollapsibleRoot } from '@base_ui/react/Collapsible';"],
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/#hooks\">Collapsible</a></li></ul>"
+}
diff --git a/docs/pages/base-ui/api/use-collapsible-trigger.json b/docs/pages/base-ui/api/use-collapsible-trigger.json
new file mode 100644
index 0000000000..4ba8a78578
--- /dev/null
+++ b/docs/pages/base-ui/api/use-collapsible-trigger.json
@@ -0,0 +1,8 @@
+{
+  "parameters": {},
+  "returnValue": {},
+  "name": "useCollapsibleTrigger",
+  "filename": "/packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts",
+  "imports": ["import { useCollapsibleTrigger } from '@base_ui/react/Collapsible';"],
+  "demos": "<ul><li><a href=\"/base-ui/react-collapsible/#hooks\">Collapsible</a></li></ul>"
+}
diff --git a/docs/pages/base-ui/react-collapsible/[docsTab]/index.js b/docs/pages/base-ui/react-collapsible/[docsTab]/index.js
new file mode 100644
index 0000000000..8e5d534772
--- /dev/null
+++ b/docs/pages/base-ui/react-collapsible/[docsTab]/index.js
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/components/collapsible/collapsible.md?@mui/markdown';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import CollapsibleContentApiJsonPageContent from '../../api/collapsible-content.json';
+import CollapsibleRootApiJsonPageContent from '../../api/collapsible-root.json';
+import CollapsibleTriggerApiJsonPageContent from '../../api/collapsible-trigger.json';
+import useCollapsibleContentApiJsonPageContent from '../../api/use-collapsible-content.json';
+import useCollapsibleRootApiJsonPageContent from '../../api/use-collapsible-root.json';
+import useCollapsibleTriggerApiJsonPageContent from '../../api/use-collapsible-trigger.json';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
+
+export const getStaticPaths = () => {
+  return {
+    paths: [{ params: { docsTab: 'components-api' } }, { params: { docsTab: 'hooks-api' } }],
+    fallback: false, // can also be true or 'blocking'
+  };
+};
+
+export const getStaticProps = () => {
+  const CollapsibleContentApiReq = require.context(
+    'docs-base/translations/api-docs/collapsible-content',
+    false,
+    /\.\/collapsible-content.*.json$/,
+  );
+  const CollapsibleContentApiDescriptions = mapApiPageTranslations(CollapsibleContentApiReq);
+
+  const CollapsibleRootApiReq = require.context(
+    'docs-base/translations/api-docs/collapsible-root',
+    false,
+    /\.\/collapsible-root.*.json$/,
+  );
+  const CollapsibleRootApiDescriptions = mapApiPageTranslations(CollapsibleRootApiReq);
+
+  const CollapsibleTriggerApiReq = require.context(
+    'docs-base/translations/api-docs/collapsible-trigger',
+    false,
+    /\.\/collapsible-trigger.*.json$/,
+  );
+  const CollapsibleTriggerApiDescriptions = mapApiPageTranslations(CollapsibleTriggerApiReq);
+
+  const useCollapsibleContentApiReq = require.context(
+    'docs-base/translations/api-docs/use-collapsible-content',
+    false,
+    /\.\/use-collapsible-content.*.json$/,
+  );
+  const useCollapsibleContentApiDescriptions = mapApiPageTranslations(useCollapsibleContentApiReq);
+
+  const useCollapsibleRootApiReq = require.context(
+    'docs-base/translations/api-docs/use-collapsible-root',
+    false,
+    /\.\/use-collapsible-root.*.json$/,
+  );
+  const useCollapsibleRootApiDescriptions = mapApiPageTranslations(useCollapsibleRootApiReq);
+
+  const useCollapsibleTriggerApiReq = require.context(
+    'docs-base/translations/api-docs/use-collapsible-trigger',
+    false,
+    /\.\/use-collapsible-trigger.*.json$/,
+  );
+  const useCollapsibleTriggerApiDescriptions = mapApiPageTranslations(useCollapsibleTriggerApiReq);
+
+  return {
+    props: {
+      componentsApiDescriptions: {
+        CollapsibleContent: CollapsibleContentApiDescriptions,
+        CollapsibleRoot: CollapsibleRootApiDescriptions,
+        CollapsibleTrigger: CollapsibleTriggerApiDescriptions,
+      },
+      componentsApiPageContents: {
+        CollapsibleContent: CollapsibleContentApiJsonPageContent,
+        CollapsibleRoot: CollapsibleRootApiJsonPageContent,
+        CollapsibleTrigger: CollapsibleTriggerApiJsonPageContent,
+      },
+      hooksApiDescriptions: {
+        useCollapsibleContent: useCollapsibleContentApiDescriptions,
+        useCollapsibleRoot: useCollapsibleRootApiDescriptions,
+        useCollapsibleTrigger: useCollapsibleTriggerApiDescriptions,
+      },
+      hooksApiPageContents: {
+        useCollapsibleContent: useCollapsibleContentApiJsonPageContent,
+        useCollapsibleRoot: useCollapsibleRootApiJsonPageContent,
+        useCollapsibleTrigger: useCollapsibleTriggerApiJsonPageContent,
+      },
+    },
+  };
+};
diff --git a/docs/pages/base-ui/react-collapsible/index.js b/docs/pages/base-ui/react-collapsible/index.js
new file mode 100644
index 0000000000..3755cb91b0
--- /dev/null
+++ b/docs/pages/base-ui/react-collapsible/index.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs-base/data/base/components/collapsible/collapsible.md?@mui/markdown';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};
diff --git a/docs/pages/experiments/collapsible.tsx b/docs/pages/experiments/collapsible.tsx
new file mode 100644
index 0000000000..173063cc72
--- /dev/null
+++ b/docs/pages/experiments/collapsible.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import * as Collapsible from '@base_ui/react/Collapsible';
+
+export default function CollapsibleDemo() {
+  return (
+    <div className="CollapsibleDemo">
+      <Collapsible.Root>
+        <Collapsible.Trigger className="MyCollapsible-trigger">
+          <span className="icon">
+            <svg xmlns='\http://www.w3.org/2000/svg"' viewBox="0 0 80 80" focusable="false">
+              <path d="M70.3 13.8L40 66.3 9.7 13.8z" />
+            </svg>
+          </span>
+          Trigger
+        </Collapsible.Trigger>
+        <Collapsible.Content className="MyCollapsible-content">
+          <p>This is the collapsed content</p>
+        </Collapsible.Content>
+      </Collapsible.Root>
+      <Styles />
+    </div>
+  );
+}
+
+const grey = {
+  50: '#F3F6F9',
+  100: '#E5EAF2',
+  200: '#DAE2ED',
+  300: '#C7D0DD',
+  400: '#B0B8C4',
+  500: '#9DA8B7',
+  600: '#6B7A90',
+  700: '#434D5B',
+  800: '#303740',
+  900: '#1C2025',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+export function Styles() {
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style suppressHydrationWarning>{`
+    .CollapsibleDemo {
+      font-family: system-ui, sans-serif;
+      line-height: 1.4;
+    }
+
+    .CollapsibleDemo h3 {
+      color: ${isDarkMode ? 'cyan' : 'blue'};
+    }
+
+    .MyCollapsible-trigger {
+      border: .1em solid #ccc;
+      padding: .5em 1em .5em .5em;
+      font: inherit;
+      background-color: ${grey[50]};
+      border-radius: .5em .5em 0 0;
+    }
+
+    .MyCollapsible-trigger .icon {
+      display: inline-block;
+      font-size: 60%;
+      color: #000;
+      background-color: #00f;
+      padding: 0.3em 0.2em 0 0.2em;
+      border: 0.2em solid #00f;
+      border-radius: 50%;
+      line-height: 1;
+      text-align: center;
+      text-indent: 0;
+      transform: rotate(270deg);
+      margin-right: 0.6em;
+    }
+
+    .MyCollapsible-trigger svg {
+      width: 1.25em;
+      height: 1.25em;
+      fill: #fff;
+      transition: transform 0.2s ease-in;
+      transform-origin: center 45%;
+    }
+
+    .MyCollapsible-trigger:hover,
+    .MyCollapsible-trigger:focus-visible {
+      background-color: #666;
+      color: #fff;
+      outline: none;
+      border-color: #666;
+    }
+
+    .MyCollapsible-trigger:hover .icon,
+    .MyCollapsible-trigger:focus-visible .icon {
+      background-color: #fff;
+      outline: none;
+    }
+
+    .MyCollapsible-trigger:hover svg,
+    .MyCollapsible-trigger:focus-visible svg {
+      fill: #00f;
+    }
+
+    .MyCollapsible-trigger[data-state='open'] svg {
+      transform: rotate(90deg);
+    }
+
+    .MyCollapsible-content {
+      padding: .25em .75em;
+      border: .1em solid #ddd;
+      background-color: #fff;
+      margin-top: -.1em;
+    }
+    `}</style>
+  );
+}
diff --git a/docs/translations/api-docs/collapsible-content/collapsible-content.json b/docs/translations/api-docs/collapsible-content/collapsible-content.json
new file mode 100644
index 0000000000..4bc12cf1e0
--- /dev/null
+++ b/docs/translations/api-docs/collapsible-content/collapsible-content.json
@@ -0,0 +1,10 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "render": { "description": "A function to customize rendering of the component." }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/collapsible-root/collapsible-root.json b/docs/translations/api-docs/collapsible-root/collapsible-root.json
new file mode 100644
index 0000000000..fbfc79e653
--- /dev/null
+++ b/docs/translations/api-docs/collapsible-root/collapsible-root.json
@@ -0,0 +1,14 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "defaultOpen": {
+      "description": "If <code>true</code>, the Collapsible is initially open. This is the uncontrolled counterpart of <code>open</code>."
+    },
+    "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "onOpenChange": { "description": "Callback fired when the Collapsible is opened or closed." },
+    "open": {
+      "description": "If <code>true</code>, the Collapsible is initially open. This is the controlled counterpart of <code>defaultOpen</code>."
+    }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/collapsible-trigger/collapsible-trigger.json b/docs/translations/api-docs/collapsible-trigger/collapsible-trigger.json
new file mode 100644
index 0000000000..4bc12cf1e0
--- /dev/null
+++ b/docs/translations/api-docs/collapsible-trigger/collapsible-trigger.json
@@ -0,0 +1,10 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "render": { "description": "A function to customize rendering of the component." }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/translations/api-docs/use-collapsible-content/use-collapsible-content.json b/docs/translations/api-docs/use-collapsible-content/use-collapsible-content.json
new file mode 100644
index 0000000000..e3eb65c6e4
--- /dev/null
+++ b/docs/translations/api-docs/use-collapsible-content/use-collapsible-content.json
@@ -0,0 +1 @@
+{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
diff --git a/docs/translations/api-docs/use-collapsible-root/use-collapsible-root.json b/docs/translations/api-docs/use-collapsible-root/use-collapsible-root.json
new file mode 100644
index 0000000000..e3eb65c6e4
--- /dev/null
+++ b/docs/translations/api-docs/use-collapsible-root/use-collapsible-root.json
@@ -0,0 +1 @@
+{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
diff --git a/docs/translations/api-docs/use-collapsible-trigger/use-collapsible-trigger.json b/docs/translations/api-docs/use-collapsible-trigger/use-collapsible-trigger.json
new file mode 100644
index 0000000000..e3eb65c6e4
--- /dev/null
+++ b/docs/translations/api-docs/use-collapsible-trigger/use-collapsible-trigger.json
@@ -0,0 +1 @@
+{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 7be5cd967b..a99c168b8b 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -225,6 +225,7 @@
     "/base-ui/react-slider": "Slider",
     "/base-ui/react-switch": "Switch",
     "data-display": "Data display",
+    "/base-ui/react-collapsible": "Collapsible",
     "/base-ui/react-popover": "Popover",
     "/base-ui/react-tooltip": "Tooltip",
     "feedback": "Feedback",
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
new file mode 100644
index 0000000000..f8730ecbf7
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.test.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as Collapsible from '@base_ui/react/Collapsible';
+import { CollapsibleContext } from '@base_ui/react/Collapsible';
+import { describeConformance } from '../../../test/describeConformance';
+import type { CollapsibleContextValue } from '../Root/CollapsibleRoot.types';
+
+const contextValue: CollapsibleContextValue = {
+  contentId: 'ContentId',
+  disabled: false,
+  open: true,
+  setContentId() {},
+  setOpen() {},
+  ownerState: {
+    open: true,
+    disabled: false,
+  },
+};
+
+describe('<Collapsible.Content />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Collapsible.Content />, () => ({
+    inheritComponent: 'div',
+    render: (node) => {
+      const { container, ...other } = render(
+        <CollapsibleContext.Provider value={contextValue}>{node}</CollapsibleContext.Provider>,
+      );
+
+      return { container, ...other };
+    },
+    refInstanceof: window.HTMLDivElement,
+  }));
+});
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
new file mode 100644
index 0000000000..bb44181404
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.tsx
@@ -0,0 +1,56 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useCollapsibleContext } from '../Root/CollapsibleContext';
+import { collapsibleStyleHookMapping } from '../Root/styleHooks';
+import { useCollapsibleContent } from './useCollapsibleContent';
+import { CollapsibleContentProps } from './CollapsibleContent.types';
+
+const CollapsibleContent = React.forwardRef(function CollapsibleContent(
+  props: CollapsibleContentProps,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { className, render, ...otherProps } = props;
+
+  const { open, contentId, setContentId, ownerState } = useCollapsibleContext();
+
+  const { getRootProps } = useCollapsibleContent({
+    id: contentId,
+    open,
+    setContentId,
+  });
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getRootProps,
+    render: render ?? 'div',
+    ownerState,
+    className,
+    ref: forwardedRef,
+    extraProps: otherProps,
+    customStyleHookMapping: collapsibleStyleHookMapping,
+  });
+
+  return renderElement();
+});
+
+CollapsibleContent.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { CollapsibleContent };
diff --git a/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts
new file mode 100644
index 0000000000..6c7d72beed
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Content/CollapsibleContent.types.ts
@@ -0,0 +1,20 @@
+import { BaseUIComponentProps } from '../../utils/types';
+import { CollapsibleRootOwnerState } from '../Root/CollapsibleRoot.types';
+
+export interface CollapsibleContentProps
+  extends BaseUIComponentProps<'div', CollapsibleRootOwnerState> {}
+
+export interface UseCollapsibleContentParameters {
+  id?: React.HTMLAttributes<Element>['id'];
+  /**
+   * The open state of the Collapsible
+   */
+  open: boolean;
+  setContentId: (id: string | undefined) => void;
+}
+
+export interface UseCollapsibleContentReturnValue {
+  getRootProps: (
+    externalProps?: React.ComponentPropsWithRef<'button'>,
+  ) => React.ComponentPropsWithRef<'button'>;
+}
diff --git a/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts b/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
new file mode 100644
index 0000000000..e521ca0002
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Content/useCollapsibleContent.ts
@@ -0,0 +1,48 @@
+'use client';
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
+import { useId } from '../../utils/useId';
+import {
+  UseCollapsibleContentParameters,
+  UseCollapsibleContentReturnValue,
+} from './CollapsibleContent.types';
+/**
+ *
+ * Demos:
+ *
+ * - [Collapsible](https://mui.com/base-ui/react-collapsible/#hooks)
+ *
+ * API:
+ *
+ * - [useCollapsibleContent API](https://mui.com/base-ui/react-collapsible/hooks-api/#use-collapsible-content)
+ */
+function useCollapsibleContent(
+  parameters: UseCollapsibleContentParameters,
+): UseCollapsibleContentReturnValue {
+  const { id: idParam, open, setContentId } = parameters;
+
+  const id = useId(idParam);
+
+  useEnhancedEffect(() => {
+    setContentId(id);
+    return () => {
+      setContentId(undefined);
+    };
+  }, [id, setContentId]);
+
+  const getRootProps: UseCollapsibleContentReturnValue['getRootProps'] = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps(externalProps, {
+        id,
+        hidden: open ? undefined : 'hidden',
+      }),
+    [id, open],
+  );
+
+  return {
+    getRootProps,
+  };
+}
+
+export { useCollapsibleContent };
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx
new file mode 100644
index 0000000000..44cff8ac7a
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleContext.tsx
@@ -0,0 +1,22 @@
+'use client';
+import * as React from 'react';
+import { CollapsibleContextValue } from './CollapsibleRoot.types';
+
+/**
+ * @ignore - internal component.
+ */
+export const CollapsibleContext = React.createContext<CollapsibleContextValue | undefined>(
+  undefined,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  CollapsibleContext.displayName = 'CollapsibleContext';
+}
+
+export function useCollapsibleContext() {
+  const context = React.useContext(CollapsibleContext);
+  if (context === undefined) {
+    throw new Error('useCollapsibleContext must be used inside a Collapsible component');
+  }
+  return context;
+}
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
new file mode 100644
index 0000000000..88cf7143ce
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.test.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as Collapsible from '@base_ui/react/Collapsible';
+
+describe('<Collapsible.Root />', () => {
+  const { render } = createRenderer();
+
+  describe('ARIA attributes', () => {
+    it('sets ARIA attributes', async () => {
+      const { getByTestId, getByRole } = await render(
+        <Collapsible.Root>
+          <Collapsible.Trigger />
+          <Collapsible.Content data-testid="content" />
+        </Collapsible.Root>,
+      );
+
+      const trigger = getByRole('button');
+      const content = getByTestId('content');
+
+      expect(trigger).to.have.attribute('aria-expanded');
+
+      expect(trigger.getAttribute('aria-controls')).to.equal(content.getAttribute('id'));
+    });
+  });
+
+  describe('open state', () => {
+    it('controlled mode', async () => {
+      const { getByTestId, getByRole, setProps } = await render(
+        <Collapsible.Root open={false}>
+          <Collapsible.Trigger />
+          <Collapsible.Content data-testid="content" />
+        </Collapsible.Root>,
+      );
+
+      const trigger = getByRole('button');
+      const content = getByTestId('content');
+
+      expect(trigger).to.have.attribute('aria-expanded', 'false');
+      expect(content).to.have.attribute('hidden');
+      expect(content).to.have.attribute('data-state', 'closed');
+
+      setProps({ open: true });
+
+      expect(trigger).to.have.attribute('aria-expanded', 'true');
+      expect(content).to.not.have.attribute('hidden');
+      expect(content).to.have.attribute('data-state', 'open');
+    });
+
+    it('uncontrolled mode', async () => {
+      const { getByTestId, getByRole, user } = await render(
+        <Collapsible.Root>
+          <Collapsible.Trigger />
+          <Collapsible.Content data-testid="content" />
+        </Collapsible.Root>,
+      );
+
+      const trigger = getByRole('button');
+      const content = getByTestId('content');
+
+      expect(trigger).to.have.attribute('aria-expanded', 'true');
+      expect(content).to.not.have.attribute('hidden');
+      expect(content).to.have.attribute('data-state', 'open');
+
+      await user.pointer({ keys: '[MouseLeft]', target: trigger });
+
+      expect(trigger).to.have.attribute('aria-expanded', 'false');
+      expect(content).to.have.attribute('hidden');
+      expect(content).to.have.attribute('data-state', 'closed');
+    });
+  });
+
+  describe('keyboard interactions', () => {
+    ['Enter'].forEach((key) => {
+      it(`key: ${key} should toggle the Collapsible`, async () => {
+        const { getByTestId, getByRole, user } = await render(
+          <Collapsible.Root>
+            <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+            <Collapsible.Content data-testid="content" />
+          </Collapsible.Root>,
+        );
+
+        const trigger = getByRole('button');
+        const content = getByTestId('content');
+
+        expect(trigger).to.have.attribute('aria-expanded', 'true');
+        expect(content).to.not.have.attribute('hidden');
+        expect(content).to.have.attribute('data-state', 'open');
+
+        await user.keyboard('[Tab]');
+        expect(trigger).toHaveFocus();
+        await user.keyboard(`[${key}]`);
+
+        expect(trigger).to.have.attribute('aria-expanded', 'false');
+        expect(content).to.have.attribute('hidden');
+        expect(content).to.have.attribute('data-state', 'closed');
+      });
+    });
+  });
+});
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx
new file mode 100644
index 0000000000..3a4320c792
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.tsx
@@ -0,0 +1,60 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useCollapsibleRoot } from './useCollapsibleRoot';
+import { CollapsibleContext } from './CollapsibleContext';
+import { CollapsibleContextValue, CollapsibleRootProps } from './CollapsibleRoot.types';
+
+function CollapsibleRoot(props: CollapsibleRootProps) {
+  const { open, defaultOpen, onOpenChange, disabled, children } = props;
+
+  const collapsible = useCollapsibleRoot({
+    open,
+    defaultOpen,
+    onOpenChange,
+    disabled,
+  });
+
+  const contextValue: CollapsibleContextValue = React.useMemo(
+    () => ({
+      ...collapsible,
+      ownerState: { open: collapsible.open, disabled: collapsible.disabled },
+    }),
+    [collapsible],
+  );
+
+  return <CollapsibleContext.Provider value={contextValue}>{children}</CollapsibleContext.Provider>;
+}
+
+CollapsibleRoot.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * If `true`, the Collapsible is initially open.
+   * This is the uncontrolled counterpart of `open`.
+   * @default true
+   */
+  defaultOpen: PropTypes.bool,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Callback fired when the Collapsible is opened or closed.
+   */
+  onOpenChange: PropTypes.func,
+  /**
+   * If `true`, the Collapsible is initially open.
+   * This is the controlled counterpart of `defaultOpen`.
+   */
+  open: PropTypes.bool,
+} as any;
+
+export { CollapsibleRoot };
diff --git a/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts
new file mode 100644
index 0000000000..1e56238880
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Root/CollapsibleRoot.types.ts
@@ -0,0 +1,46 @@
+export interface CollapsibleContextValue extends UseCollapsibleRootReturnValue {
+  ownerState: Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled'>;
+}
+
+export type CollapsibleRootOwnerState = Pick<CollapsibleContextValue, 'open' | 'disabled'>;
+
+export interface CollapsibleRootProps extends UseCollapsibleRootParameters {
+  children: React.ReactNode;
+}
+
+export interface UseCollapsibleRootParameters {
+  /**
+   * If `true`, the Collapsible is initially open.
+   * This is the controlled counterpart of `defaultOpen`.
+   */
+  open?: boolean;
+  /**
+   * If `true`, the Collapsible is initially open.
+   * This is the uncontrolled counterpart of `open`.
+   * @default true
+   */
+  defaultOpen?: boolean;
+  /**
+   * Callback fired when the Collapsible is opened or closed.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+export interface UseCollapsibleRootReturnValue {
+  contentId: React.HTMLAttributes<Element>['id'];
+  /**
+   * The disabled state of the Collapsible
+   */
+  disabled: boolean;
+  /**
+   * The open state of the Collapsible
+   */
+  open: boolean;
+  setContentId: (id: string | undefined) => void;
+  setOpen: (open: boolean) => void;
+}
diff --git a/packages/mui-base/src/Collapsible/Root/styleHooks.ts b/packages/mui-base/src/Collapsible/Root/styleHooks.ts
new file mode 100644
index 0000000000..29af054402
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Root/styleHooks.ts
@@ -0,0 +1,8 @@
+import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
+import type { CollapsibleRootOwnerState } from './CollapsibleRoot.types';
+
+export const collapsibleStyleHookMapping: CustomStyleHookMapping<CollapsibleRootOwnerState> = {
+  open: (value) => {
+    return value ? { 'data-state': 'open' } : { 'data-state': 'closed' };
+  },
+};
diff --git a/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts b/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts
new file mode 100644
index 0000000000..bf6767fd3d
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Root/useCollapsibleRoot.ts
@@ -0,0 +1,47 @@
+'use client';
+import * as React from 'react';
+import { useControlled } from '../../utils/useControlled';
+import { useId } from '../../utils/useId';
+import {
+  UseCollapsibleRootParameters,
+  UseCollapsibleRootReturnValue,
+} from './CollapsibleRoot.types';
+/**
+ *
+ * Demos:
+ *
+ * - [Collapsible](https://mui.com/base-ui/react-collapsible/#hooks)
+ *
+ * API:
+ *
+ * - [useCollapsibleRoot API](https://mui.com/base-ui/react-collapsible/hooks-api/#use-collapsible-root)
+ */
+function useCollapsibleRoot(
+  parameters: UseCollapsibleRootParameters,
+): UseCollapsibleRootReturnValue {
+  const { open: openParam, defaultOpen = true, onOpenChange, disabled = false } = parameters;
+
+  const [open, setOpen] = useControlled({
+    controlled: openParam,
+    default: defaultOpen,
+    name: 'CollapsibleRoot',
+  });
+
+  const [contentId, setContentId] = React.useState<string | undefined>(useId());
+
+  React.useEffect(() => {
+    if (onOpenChange) {
+      onOpenChange(open);
+    }
+  }, [onOpenChange, open]);
+
+  return {
+    contentId,
+    disabled,
+    open,
+    setContentId,
+    setOpen,
+  };
+}
+
+export { useCollapsibleRoot };
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
new file mode 100644
index 0000000000..f722bcae1a
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.test.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { createRenderer } from '@mui/internal-test-utils';
+import * as Collapsible from '@base_ui/react/Collapsible';
+import { CollapsibleContext } from '@base_ui/react/Collapsible';
+import { describeConformance } from '../../../test/describeConformance';
+import type { CollapsibleContextValue } from '../Root/CollapsibleRoot.types';
+
+const contextValue: CollapsibleContextValue = {
+  contentId: 'ContentId',
+  disabled: false,
+  open: true,
+  setContentId() {},
+  setOpen() {},
+  ownerState: {
+    open: true,
+    disabled: false,
+  },
+};
+
+describe('<Collapsible.Trigger />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Collapsible.Trigger />, () => ({
+    inheritComponent: 'button',
+    render: (node) => {
+      const { container, ...other } = render(
+        <CollapsibleContext.Provider value={contextValue}>{node}</CollapsibleContext.Provider>,
+      );
+
+      return { container, ...other };
+    },
+    refInstanceof: window.HTMLButtonElement,
+  }));
+});
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx
new file mode 100644
index 0000000000..7ff4b86458
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.tsx
@@ -0,0 +1,56 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { useCollapsibleContext } from '../Root/CollapsibleContext';
+import { collapsibleStyleHookMapping } from '../Root/styleHooks';
+import { useCollapsibleTrigger } from './useCollapsibleTrigger';
+import { CollapsibleTriggerProps } from './CollapsibleTrigger.types';
+
+const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger(
+  props: CollapsibleTriggerProps,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const { className, render, ...otherProps } = props;
+
+  const { contentId, open, setOpen, ownerState } = useCollapsibleContext();
+
+  const { getRootProps } = useCollapsibleTrigger({
+    contentId,
+    open,
+    setOpen,
+  });
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getRootProps,
+    render: render ?? 'button',
+    ownerState,
+    className,
+    ref: forwardedRef,
+    extraProps: otherProps,
+    customStyleHookMapping: collapsibleStyleHookMapping,
+  });
+
+  return renderElement();
+});
+
+CollapsibleTrigger.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { CollapsibleTrigger };
diff --git a/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.types.ts b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.types.ts
new file mode 100644
index 0000000000..072a5478c9
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Trigger/CollapsibleTrigger.types.ts
@@ -0,0 +1,23 @@
+import { BaseUIComponentProps } from '../../utils/types';
+import { CollapsibleRootOwnerState } from '../Root/CollapsibleRoot.types';
+
+export interface CollapsibleTriggerProps
+  extends BaseUIComponentProps<'button', CollapsibleRootOwnerState> {}
+
+export interface UseCollapsibleTriggerParameters {
+  contentId: React.HTMLAttributes<Element>['id'];
+  /**
+   * The open state of the Collapsible
+   */
+  open: boolean;
+  /**
+   * A state setter that toggles the open state of the Collapsiblew
+   */
+  setOpen: (open: boolean) => void;
+}
+
+export interface UseCollapsibleTriggerReturnValue {
+  getRootProps: (
+    externalProps?: React.ComponentPropsWithRef<'button'>,
+  ) => React.ComponentPropsWithRef<'button'>;
+}
diff --git a/packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts b/packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts
new file mode 100644
index 0000000000..7e5aa72e40
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/Trigger/useCollapsibleTrigger.ts
@@ -0,0 +1,41 @@
+'use client';
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import {
+  UseCollapsibleTriggerParameters,
+  UseCollapsibleTriggerReturnValue,
+} from './CollapsibleTrigger.types';
+/**
+ *
+ * Demos:
+ *
+ * - [Collapsible](https://mui.com/base-ui/react-collapsible/#hooks)
+ *
+ * API:
+ *
+ * - [useCollapsibleTrigger API](https://mui.com/base-ui/react-collapsible/hooks-api/#use-collapsible-trigger)
+ */
+function useCollapsibleTrigger(
+  parameters: UseCollapsibleTriggerParameters,
+): UseCollapsibleTriggerReturnValue {
+  const { contentId, open, setOpen } = parameters;
+
+  const getRootProps: UseCollapsibleTriggerReturnValue['getRootProps'] = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps<'button'>(externalProps, {
+        type: 'button',
+        'aria-controls': contentId,
+        'aria-expanded': open,
+        onClick() {
+          setOpen(!open);
+        },
+      }),
+    [contentId, open, setOpen],
+  );
+
+  return {
+    getRootProps,
+  };
+}
+
+export { useCollapsibleTrigger };
diff --git a/packages/mui-base/src/Collapsible/index.barrel.ts b/packages/mui-base/src/Collapsible/index.barrel.ts
new file mode 100644
index 0000000000..de6c88d343
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/index.barrel.ts
@@ -0,0 +1,20 @@
+export { CollapsibleRoot } from './Root/CollapsibleRoot';
+export type * from './Root/CollapsibleRoot.types';
+export { useCollapsibleRoot } from './Root/useCollapsibleRoot';
+export * from './Root/CollapsibleContext';
+
+export { CollapsibleTrigger } from './Trigger/CollapsibleTrigger';
+export type {
+  CollapsibleTriggerProps as TriggerProps,
+  UseCollapsibleTriggerParameters,
+  UseCollapsibleTriggerReturnValue,
+} from './Trigger/CollapsibleTrigger.types';
+export { useCollapsibleTrigger } from './Trigger/useCollapsibleTrigger';
+
+export { CollapsibleContent } from './Content/CollapsibleContent';
+export type {
+  CollapsibleContentProps as ContentProps,
+  UseCollapsibleContentParameters,
+  UseCollapsibleContentReturnValue,
+} from './Content/CollapsibleContent.types';
+export { useCollapsibleContent } from './Content/useCollapsibleContent';
diff --git a/packages/mui-base/src/Collapsible/index.ts b/packages/mui-base/src/Collapsible/index.ts
new file mode 100644
index 0000000000..5cb2830bf4
--- /dev/null
+++ b/packages/mui-base/src/Collapsible/index.ts
@@ -0,0 +1,26 @@
+export { CollapsibleRoot as Root } from './Root/CollapsibleRoot';
+export {
+  CollapsibleRootOwnerState as CollapsibleOwnerState,
+  CollapsibleRootProps as RootProps,
+  UseCollapsibleRootParameters,
+  UseCollapsibleRootReturnValue,
+  CollapsibleContextValue,
+} from './Root/CollapsibleRoot.types';
+export { useCollapsibleRoot } from './Root/useCollapsibleRoot';
+export * from './Root/CollapsibleContext';
+
+export { CollapsibleTrigger as Trigger } from './Trigger/CollapsibleTrigger';
+export type {
+  CollapsibleTriggerProps as TriggerProps,
+  UseCollapsibleTriggerParameters,
+  UseCollapsibleTriggerReturnValue,
+} from './Trigger/CollapsibleTrigger.types';
+export { useCollapsibleTrigger } from './Trigger/useCollapsibleTrigger';
+
+export { CollapsibleContent as Content } from './Content/CollapsibleContent';
+export type {
+  CollapsibleContentProps as ContentProps,
+  UseCollapsibleContentParameters,
+  UseCollapsibleContentReturnValue,
+} from './Content/CollapsibleContent.types';
+export { useCollapsibleContent } from './Content/useCollapsibleContent';