Merge remote-tracking branch 'upstream/master' into consistent-context

.gitignore

@@ -14,7 +14,8 @@
 /coverage
 /docs/.env.local
 /docs/export
-/docs/pages/playground/
+/docs/app/playground/*
+!/docs/app/playground/\[slug\]
 /docs/public/feed/
 /examples/**/.cache
 /test/bundling/fixtures/*/yarn.lock

docs/app/DocsProviders.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { DemoVariantSelectorProvider } from 'docs-base/src/components/demo/DemoVariantSelectorProvider';
 import { PackageManagerSnippetProvider } from 'docs-base/src/blocks/PackageManagerSnippet/PackageManagerSnippetProvider';
 

docs/app/experiments/collapsible-accordion.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const TRANSITION_DURATION = '350ms';
 

docs/app/experiments/collapsible-framer.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 import { motion } from 'framer-motion';
 
 export default function CollapsibleFramer() {

docs/app/experiments/collapsible-hidden-until-found.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 

docs/app/experiments/collapsible.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Collapsible from '@base_ui/react/Collapsible';
+import { Collapsible } from '@base_ui/react/Collapsible';
 
 const DURATION = '350ms';
 

docs/app/experiments/dialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import clsx from 'clsx';
-import * as Dialog from '@base_ui/react/Dialog';
+import { Dialog } from '@base_ui/react/Dialog';
 // eslint-disable-next-line no-restricted-imports
 import { useTransitionStatus } from '@base_ui/react/utils/useTransitionStatus';
 import { animated as springAnimated, useSpring, useSpringRef } from '@react-spring/web';

docs/app/experiments/menu-anchor-el.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const [anchorEl, setAnchor] = React.useState<HTMLDivElement | null>(null);

docs/app/experiments/menu-anchor-ref.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import * as Menu from '@base_ui/react/Menu';
+import { Menu } from '@base_ui/react/Menu';
 
 export default function Page() {
   const anchor = React.useRef<HTMLDivElement>(null);

docs/app/experiments/progress.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Progress from '@base_ui/react/Progress';
+import { Progress } from '@base_ui/react/Progress';
 
 const VAL1 = 33;
 

docs/app/experiments/slider-change-committed-lag.tsx

@@ -2,7 +2,7 @@
 // https://github.com/mui/material-ui/issues/41739
 // to cross check whether this issue would still occur in the new API
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {

docs/app/experiments/slider-marks.tsx

@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 const STOPS = [
   {
@@ -33,7 +32,7 @@ function getSliderThumbAriaValueText(value: number) {
 // for "inverted track", the track/rail can be styled with CSS but a prop is needed to flip the "mark active" state
 function MarkWithLabel(props: { index: number; value: number; label: string; inverted?: boolean }) {
   const { index, value, label, inverted = false } = props;
-  const { direction, values } = useSliderContext();
+  const { direction, values } = Slider.useSliderContext();
   const isRtl = direction === 'rtl';
   const isFilled = inverted ? value >= values[0] : values[0] >= value;
   return (

docs/app/experiments/slider-template.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Slider from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 import { Styles } from './slider';
 
 export default function App() {

docs/app/experiments/slider-tooltip.tsx

@@ -1,8 +1,8 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Slider } from '@base_ui/react/Slider';
+import { Tooltip } from '@base_ui/react/Tooltip';
 
 function useIsDarkMode() {
   const theme = useTheme();

docs/app/experiments/slider.tsx

@@ -1,8 +1,7 @@
 'use client';
 import * as React from 'react';
 import { useTheme } from '@mui/system';
-import * as Slider from '@base_ui/react/Slider';
-import { useSliderContext } from '@base_ui/react/Slider';
+import { Slider } from '@base_ui/react/Slider';
 
 export default function App() {
   const [val1, setVal1] = React.useState(50);
@@ -233,7 +232,7 @@ function Label(props: any) {
   const defaultId = React.useId();
   const labelId = idProp ?? defaultId;
 
-  const { subitems } = useSliderContext();
+  const { subitems } = Slider.useSliderContext();
 
   const htmlFor = Array.from(subitems.values())
     .reduce((acc, item) => {

docs/app/experiments/tabs.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
 import { css, styled } from '@mui/system';
-import * as BaseTabs from '@base_ui/react/Tabs';
+import { Tabs as BaseTabs } from '@base_ui/react/Tabs';
 
 export default function UnstyledTabsIntroduction() {
   const [v, sv] = React.useState<string | number | null>(0);

docs/app/experiments/tooltip.tsx

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import * as Tooltip from '@base_ui/react/Tooltip';
+import { Tooltip } from '@base_ui/react/Tooltip';
 import { styled, keyframes } from '@mui/system';
 import { motion, AnimatePresence } from 'framer-motion';
 

docs/app/not-found.tsx

@@ -1,5 +1,18 @@
 import * as React from 'react';
 
+import { AppBar } from 'docs-base/src/components/AppBar';
+import { Navigation } from 'docs-base/src/components/Navigation';
+import routes from 'docs-base/data/pages';
+import classes from './(content)/styles.module.css';
+
 export default function NotFound() {
-  return <h1>Page not found</h1>;
+  return (
+    <React.Fragment>
+      <AppBar />
+      <Navigation routes={routes} />
+      <main className={classes.content}>
+        <h1>Page not found</h1>
+      </main>
+    </React.Fragment>
+  );
 }

docs/app/playground/[slug]/page.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { type Dirent } from 'node:fs';
+import { basename, extname } from 'node:path';
+import { readdir } from 'node:fs/promises';
+
+interface Props {
+  params: {
+    slug: string;
+  };
+}
+
+const DUMMY_SLUG = '_';
+
+export default async function Page(props: Props) {
+  const {
+    params: { slug },
+  } = props;
+
+  if (slug === DUMMY_SLUG) {
+    notFound();
+  }
+
+  try {
+    const Playground = (await import(`../${slug}.tsx`)).default;
+    return <Playground />;
+  } catch (error) {
+    notFound();
+  }
+}
+
+export async function generateStaticParams() {
+  const routes = (await readdir('app/playground', { withFileTypes: true }))
+    .filter(
+      (entry: Dirent) => entry.name.endsWith('.tsx') && entry.name !== 'page.tsx' && entry.isFile(),
+    )
+    .map((entry: Dirent) => ({ slug: basename(entry.name, extname(entry.name)) }));
+
+  if (routes.length === 0) {
+    return [{ slug: DUMMY_SLUG }];
+  }
+
+  return routes;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = params;
+
+  return {
+    title: `${slug} - Playground`,
+  };
+}

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

@@ -6,7 +6,7 @@
   },
   "name": "AlertDialogBackdrop",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogBackdrop = AlertDialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/alert-dialog-close.json

@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogClose",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogClose = AlertDialog.Close;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogClose = AlertDialog.Close;"
   ],
   "classes": [],
   "spread": true,

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

@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogDescription",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogDescription = AlertDialog.Description;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogDescription = AlertDialog.Description;"
   ],
   "classes": [],
   "spread": true,

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

@@ -7,7 +7,7 @@
   },
   "name": "AlertDialogPopup",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogPopup = AlertDialog.Popup;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogPopup = AlertDialog.Popup;"
   ],
   "classes": [],
   "spread": true,

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

@@ -7,7 +7,7 @@
   },
   "name": "AlertDialogRoot",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogRoot = AlertDialog.Root;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogRoot = AlertDialog.Root;"
   ],
   "classes": [],
   "spread": true,

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

@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogTitle",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogTitle = AlertDialog.Title;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogTitle = AlertDialog.Title;"
   ],
   "classes": [],
   "spread": true,

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

@@ -5,7 +5,7 @@
   },
   "name": "AlertDialogTrigger",
   "imports": [
-    "import * as AlertDialog from '@base_ui/react/AlertDialog';\nconst AlertDialogTrigger = AlertDialog.Trigger;"
+    "import { AlertDialog } from '@base_ui/react/AlertDialog';\nconst AlertDialogTrigger = AlertDialog.Trigger;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/checkbox-group-root.json

@@ -11,7 +11,7 @@
   },
   "name": "CheckboxGroupRoot",
   "imports": [
-    "import * as CheckboxGroup from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
+    "import { CheckboxGroup } from '@base_ui/react/CheckboxGroup';\nconst CheckboxGroupRoot = CheckboxGroup.Root;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/checkbox-indicator.json

@@ -6,7 +6,7 @@
   },
   "name": "CheckboxIndicator",
   "imports": [
-    "import * as Checkbox from '@base_ui/react/Checkbox';\nconst CheckboxIndicator = Checkbox.Indicator;"
+    "import { Checkbox } from '@base_ui/react/Checkbox';\nconst CheckboxIndicator = Checkbox.Indicator;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/checkbox-root.json

@@ -23,7 +23,7 @@
   },
   "name": "CheckboxRoot",
   "imports": [
-    "import * as Checkbox from '@base_ui/react/Checkbox';\nconst CheckboxRoot = Checkbox.Root;"
+    "import { Checkbox } from '@base_ui/react/Checkbox';\nconst CheckboxRoot = Checkbox.Root;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/collapsible-content.json

@@ -9,7 +9,7 @@
   },
   "name": "CollapsibleContent",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleContent = Collapsible.Content;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/collapsible-root.json

@@ -10,7 +10,7 @@
   },
   "name": "CollapsibleRoot",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleRoot = Collapsible.Root;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/collapsible-trigger.json

@@ -5,7 +5,7 @@
   },
   "name": "CollapsibleTrigger",
   "imports": [
-    "import * as Collapsible from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
+    "import { Collapsible } from '@base_ui/react/Collapsible';\nconst CollapsibleTrigger = Collapsible.Trigger;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/dialog-backdrop.json

@@ -6,7 +6,7 @@
   },
   "name": "DialogBackdrop",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogBackdrop = Dialog.Backdrop;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogBackdrop = Dialog.Backdrop;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/dialog-close.json

@@ -4,9 +4,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogClose",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogClose = Dialog.Close;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogClose = Dialog.Close;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

docs/data/api/dialog-description.json

@@ -5,7 +5,7 @@
   },
   "name": "DialogDescription",
   "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogDescription = Dialog.Description;"
+    "import { Dialog } from '@base_ui/react/Dialog';\nconst DialogDescription = Dialog.Description;"
   ],
   "classes": [],
   "spread": true,

docs/data/api/dialog-popup.json

@@ -6,9 +6,7 @@
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },
   "name": "DialogPopup",
-  "imports": [
-    "import * as Dialog from '@base_ui/react/Dialog';\nconst DialogPopup = Dialog.Popup;"
-  ],
+  "imports": ["import { Dialog } from '@base_ui/react/Dialog';\nconst DialogPopup = Dialog.Popup;"],
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,