@@ -178,7 +190,12 @@ export default function AnchorPositioning() {
Side
{(['top', 'bottom', 'left', 'right'] as const).map((s) => (
-
))}
@@ -266,7 +283,11 @@ export default function AnchorPositioning() {
-
@@ -280,7 +301,11 @@ export default function AnchorPositioning() {
-
diff --git a/docs/src/app/experiments/collapsible-accordion.tsx b/docs/src/app/experiments/collapsible-accordion.tsx
new file mode 100644
index 000000000..b9e048221
--- /dev/null
+++ b/docs/src/app/experiments/collapsible-accordion.tsx
@@ -0,0 +1,164 @@
+'use client';
+import * as React from 'react';
+import { Collapsible } from '@base_ui/react/Collapsible';
+
+const TRANSITION_DURATION = '350ms';
+
+function AccordionSection(props: {
+ index: number;
+ openIndex: number;
+ setOpen: (nextOpenIndex: number) => void;
+}) {
+ const { index, openIndex, setOpen } = props;
+ const isOpen = index === openIndex;
+ return (
+
setOpen(isOpen ? -1 : index)}
+ >
+
+
+
+
+
+ {isOpen ? 'Close' : 'Open'} Panel {index}
+
+
+ This is the collapsed content of Panel {index}
+ This is the second paragraph
+ This is the third paragraph
+
+
+ );
+}
+
+export default function CollapsibleAccordion() {
+ const [openIndex, setOpen] = React.useState(-1);
+ return (
+
+
+ A crude accordion where only 1 of the 3 {`
+ {[0, 1, 2].map((index) => (
+
+ ))}
+
+ );
+}
+
+const grey = {
+ 50: '#F3F6F9',
+ 100: '#E5EAF2',
+ 200: '#DAE2ED',
+ 300: '#C7D0DD',
+ 400: '#B0B8C4',
+ 500: '#9DA8B7',
+ 600: '#6B7A90',
+ 700: '#434D5B',
+ 800: '#303740',
+ 900: '#1C2025',
+};
+
+export function Styles() {
+ return (
+
+ );
+}
diff --git a/docs/app/experiments/collapsible-cls.tsx b/docs/src/app/experiments/collapsible-cls.tsx
similarity index 100%
rename from docs/app/experiments/collapsible-cls.tsx
rename to docs/src/app/experiments/collapsible-cls.tsx
diff --git a/docs/app/experiments/collapsible-framer.tsx b/docs/src/app/experiments/collapsible-framer.tsx
similarity index 96%
rename from docs/app/experiments/collapsible-framer.tsx
rename to docs/src/app/experiments/collapsible-framer.tsx
index c3b68da96..dbfd17c56 100644
--- a/docs/app/experiments/collapsible-framer.tsx
+++ b/docs/src/app/experiments/collapsible-framer.tsx
@@ -45,8 +45,8 @@ export default function CollapsibleFramer() {
>
This is the collapsed content
- Your Choice of Fried Chicken (Half), Chicken Sandwich, With Shredded cabbage & carrot
- with mustard mayonnaise And Potato Wedges
+ Your Choice of Fried Chicken (Half), Chicken Sandwich, With Shredded
+ cabbage & carrot with mustard mayonnaise And Potato Wedges
demo: https://codepen.io/aardrian/pen/QWjBNQG
https://adrianroselli.com/2020/05/disclosure-widgets.html
diff --git a/docs/app/experiments/collapsible-hidden-until-found.tsx b/docs/src/app/experiments/collapsible-hidden-until-found.tsx
similarity index 79%
rename from docs/app/experiments/collapsible-hidden-until-found.tsx
rename to docs/src/app/experiments/collapsible-hidden-until-found.tsx
index 558277c63..d42c30c7e 100644
--- a/docs/app/experiments/collapsible-hidden-until-found.tsx
+++ b/docs/src/app/experiments/collapsible-hidden-until-found.tsx
@@ -11,22 +11,23 @@ export default function CollapsibleHiddenUntilFound() {
return (
- All 3 Collapsibles contain the text "May the force be with you" but only the
- content in the 2nd and 3rd Collapsible will be revealed by the browser's in-page search
- (e.g. Ctrl/Cmd-F) in{' '}
+ All 3 Collapsibles contain the text "May the force be with you" but
+ only the content in the 2nd and 3rd Collapsible will be revealed by the
+ browser's in-page search (e.g. Ctrl/Cmd-F) in{' '}
supported browsers
@@ -34,7 +35,9 @@ export default function CollapsibleHiddenUntilFound() {
+
This is the collapsed content
May the force be with you
diff --git a/docs/app/experiments/collapsible.module.css b/docs/src/app/experiments/collapsible.module.css
similarity index 100%
rename from docs/app/experiments/collapsible.module.css
rename to docs/src/app/experiments/collapsible.module.css
diff --git a/docs/src/app/experiments/collapsible.tsx b/docs/src/app/experiments/collapsible.tsx
new file mode 100644
index 000000000..13edd2666
--- /dev/null
+++ b/docs/src/app/experiments/collapsible.tsx
@@ -0,0 +1,205 @@
+'use client';
+import * as React from 'react';
+import { Collapsible } from '@base_ui/react/Collapsible';
+
+const DURATION = '350ms';
+
+export default function CollapsibleDemo() {
+ return (
+
+
+
+
+
+
+
+
+ Trigger (CSS animation)
+
+
+ This is the collapsed content
+ This component is animated with CSS @keyframe animations
+ demo: https://codepen.io/aardrian/pen/QWjBNQG
+ https://adrianroselli.com/2020/05/disclosure-widgets.html
+
+
+
+
+
+
+
+
+
+
+
+ Trigger (CSS transition)
+
+
+ This is the collapsed content
+ This component is animated with CSS transitions
+ demo: https://codepen.io/aardrian/pen/QWjBNQG
+ https://adrianroselli.com/2020/05/disclosure-widgets.html
+
+
+
+
+
+
+
+
+
+
+ Trigger (root renders a span + CSS transition)
+
+
+ This is the collapsed content
+ This component is animated with CSS transitions
+ demo: https://codepen.io/aardrian/pen/QWjBNQG
+ https://adrianroselli.com/2020/05/disclosure-widgets.html
+
+
+
+
{title}
This is a sample dialog.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget sapien id dolor rutrum
- porta. Sed enim nulla, placerat eu tincidunt non, ultrices in lectus. Curabitur pellentesque
- diam nec ligula hendrerit dapibus.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget sapien id
+ dolor rutrum porta. Sed enim nulla, placerat eu tincidunt non, ultrices in
+ lectus. Curabitur pellentesque diam nec ligula hendrerit dapibus.
@@ -65,7 +69,9 @@ function CssTransitionDialogDemo({ keepMounted, modal, dismissible }: DemoProps)
return (
- Open with CSS transition
+
+ Open with CSS transition
+
- Open with CSS animation
+
+ Open with CSS animation
+
-
+
Open with React Spring transition
-
}) {
+function ReactSpringTransition(props: {
+ open: boolean;
+ children?: React.ReactElement;
+}) {
const { open, children } = props;
const api = useSpringRef();
@@ -194,8 +218,16 @@ export default function DialogExperiment() {
return (
Dialog
-
-
+
+
Options
diff --git a/docs/app/experiments/experiments.module.css b/docs/src/app/experiments/experiments.module.css
similarity index 100%
rename from docs/app/experiments/experiments.module.css
rename to docs/src/app/experiments/experiments.module.css
diff --git a/docs/app/experiments/layout.tsx b/docs/src/app/experiments/layout.tsx
similarity index 100%
rename from docs/app/experiments/layout.tsx
rename to docs/src/app/experiments/layout.tsx
diff --git a/docs/app/experiments/menu-anchor-el.tsx b/docs/src/app/experiments/menu-anchor-el.tsx
similarity index 66%
rename from docs/app/experiments/menu-anchor-el.tsx
rename to docs/src/app/experiments/menu-anchor-el.tsx
index bad4bdc47..a82f7e79f 100644
--- a/docs/app/experiments/menu-anchor-el.tsx
+++ b/docs/src/app/experiments/menu-anchor-el.tsx
@@ -14,16 +14,30 @@ export default function Page() {
Element passed to anchor
Trigger
-
+
- One
- Two
+
+ One
+
+
+ Two
+
Anchor
diff --git a/docs/app/experiments/menu-anchor-ref.tsx b/docs/src/app/experiments/menu-anchor-ref.tsx
similarity index 62%
rename from docs/app/experiments/menu-anchor-ref.tsx
rename to docs/src/app/experiments/menu-anchor-ref.tsx
index 68d67f7e8..f99677d66 100644
--- a/docs/app/experiments/menu-anchor-ref.tsx
+++ b/docs/src/app/experiments/menu-anchor-ref.tsx
@@ -11,16 +11,30 @@ export default function Page() {
Ref passed to anchor
Trigger
-
+
- One
- Two
+
+ One
+
+
+ Two
+
Anchor
diff --git a/docs/app/experiments/page.tsx b/docs/src/app/experiments/page.tsx
similarity index 91%
rename from docs/app/experiments/page.tsx
rename to docs/src/app/experiments/page.tsx
index 37af5d6f5..48f415424 100644
--- a/docs/app/experiments/page.tsx
+++ b/docs/src/app/experiments/page.tsx
@@ -6,7 +6,9 @@ import classes from './experiments.module.css';
export default async function Experiments() {
/* @ts-ignore */
- const allExperiments = (await readdir('app/experiments', { withFileTypes: true }))
+ const allExperiments = (
+ await readdir('src/app/experiments', { withFileTypes: true })
+ )
.filter(
(entry: Dirent) =>
entry.name.endsWith('.tsx') &&
diff --git a/docs/app/experiments/progress.tsx b/docs/src/app/experiments/progress.tsx
similarity index 92%
rename from docs/app/experiments/progress.tsx
rename to docs/src/app/experiments/progress.tsx
index 230fb3e45..c826f853b 100644
--- a/docs/app/experiments/progress.tsx
+++ b/docs/src/app/experiments/progress.tsx
@@ -25,7 +25,12 @@ export default function ProgressDemos() {
-
+
Progress (RTL)
@@ -34,7 +39,12 @@ export default function ProgressDemos() {
-
+
Indeterminate (RTL)
@@ -49,7 +59,9 @@ export default function ProgressDemos() {
className="MyProgress buffer"
aria-labelledby="Label5"
value={VAL1}
- getAriaValueText={(value) => `${value}% complete, ${CUSTOM_BUFFER_VAL}% buffered`}
+ getAriaValueText={(value) =>
+ `${value}% complete, ${CUSTOM_BUFFER_VAL}% buffered`
+ }
max={Math.min(100, CUSTOM_BUFFER_VAL)}
>
@@ -65,7 +77,9 @@ export default function ProgressDemos() {
className="MyProgress buffer"
aria-labelledby="Label6"
value={VAL1}
- getAriaValueText={(value) => `${value}% complete, ${CUSTOM_BUFFER_VAL}% buffered`}
+ getAriaValueText={(value) =>
+ `${value}% complete, ${CUSTOM_BUFFER_VAL}% buffered`
+ }
max={Math.min(100, CUSTOM_BUFFER_VAL)}
direction="rtl"
>
diff --git a/docs/app/experiments/scroll-lock.tsx b/docs/src/app/experiments/scroll-lock.tsx
similarity index 95%
rename from docs/app/experiments/scroll-lock.tsx
rename to docs/src/app/experiments/scroll-lock.tsx
index d35ea8e8b..b4568c1cb 100644
--- a/docs/app/experiments/scroll-lock.tsx
+++ b/docs/src/app/experiments/scroll-lock.tsx
@@ -1,6 +1,6 @@
'use client';
import * as React from 'react';
-import { useScrollLock } from '../../../packages/mui-base/src/utils/useScrollLock';
+import { useScrollLock } from '../../../../packages/mui-base/src/utils/useScrollLock';
export default function ScrollLock() {
const [enabled, setEnabled] = React.useState(false);
diff --git a/docs/app/experiments/slider-change-committed-lag.tsx b/docs/src/app/experiments/slider-change-committed-lag.tsx
similarity index 100%
rename from docs/app/experiments/slider-change-committed-lag.tsx
rename to docs/src/app/experiments/slider-change-committed-lag.tsx
diff --git a/docs/app/experiments/slider-marks.tsx b/docs/src/app/experiments/slider-marks.tsx
similarity index 96%
rename from docs/app/experiments/slider-marks.tsx
rename to docs/src/app/experiments/slider-marks.tsx
index 81cf3f6cd..fc5114d91 100644
--- a/docs/app/experiments/slider-marks.tsx
+++ b/docs/src/app/experiments/slider-marks.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import { Slider } from '@base_ui/react/Slider';
-import { useSliderRootContext } from '../../../packages/mui-base/src/Slider/Root/SliderRootContext';
+import { useSliderRootContext } from '../../../../packages/mui-base/src/Slider/Root/SliderRootContext';
const STOPS = [
{
@@ -31,7 +31,12 @@ 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 }) {
+function MarkWithLabel(props: {
+ index: number;
+ value: number;
+ label: string;
+ inverted?: boolean;
+}) {
const { index, value, label, inverted = false } = props;
const { direction, values } = useSliderRootContext();
const isRtl = direction === 'rtl';
diff --git a/docs/app/experiments/slider-tooltip.tsx b/docs/src/app/experiments/slider-tooltip.tsx
similarity index 93%
rename from docs/app/experiments/slider-tooltip.tsx
rename to docs/src/app/experiments/slider-tooltip.tsx
index 690be39d7..a80a6b50d 100644
--- a/docs/app/experiments/slider-tooltip.tsx
+++ b/docs/src/app/experiments/slider-tooltip.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
import { useTheme } from '@mui/system';
import { Slider } from '@base_ui/react/Slider';
import { Tooltip } from '@base_ui/react/Tooltip';
-import { useSliderRootContext } from '../../../packages/mui-base/src/Slider/Root/SliderRootContext';
+import { useSliderRootContext } from '../../../../packages/mui-base/src/Slider/Root/SliderRootContext';
function useIsDarkMode() {
const theme = useTheme();
@@ -51,14 +51,19 @@ export default function App() {
if (event.buttons !== 1) {
setValueLabelOpen(false);
} else {
- document.addEventListener('pointerup', handleGlobalPointerUp, { once: true });
+ document.addEventListener('pointerup', handleGlobalPointerUp, {
+ once: true,
+ });
}
}}
>
-
+
@@ -72,7 +77,10 @@ export default function App() {
);
}
-const SliderMark = React.forwardRef(function SliderMark(props: any, ref: React.ForwardedRef) {
+const SliderMark = React.forwardRef(function SliderMark(
+ props: any,
+ ref: React.ForwardedRef,
+) {
const { index, style, ...otherProps } = props;
const { percentageValues } = useSliderRootContext();
const isFilled = percentageValues[0] >= index * 10;
diff --git a/docs/app/experiments/slider.module.css b/docs/src/app/experiments/slider.module.css
similarity index 100%
rename from docs/app/experiments/slider.module.css
rename to docs/src/app/experiments/slider.module.css
diff --git a/docs/app/experiments/tabs.tsx b/docs/src/app/experiments/tabs.tsx
similarity index 97%
rename from docs/app/experiments/tabs.tsx
rename to docs/src/app/experiments/tabs.tsx
index 36c8271b5..fc8acc3d1 100644
--- a/docs/app/experiments/tabs.tsx
+++ b/docs/src/app/experiments/tabs.tsx
@@ -9,7 +9,9 @@ export default function UnstyledTabsIntroduction() {
return (
-
+
Tabs
Horizontal
sv(val)}>
diff --git a/docs/app/experiments/tooltip.tsx b/docs/src/app/experiments/tooltip.tsx
similarity index 96%
rename from docs/app/experiments/tooltip.tsx
rename to docs/src/app/experiments/tooltip.tsx
index 26d5b9126..b7fbf2602 100644
--- a/docs/app/experiments/tooltip.tsx
+++ b/docs/src/app/experiments/tooltip.tsx
@@ -208,7 +208,9 @@ export default function TooltipTransitionExperiment() {
Anchor
- Tooltip
+
+ Tooltip
+
@@ -222,13 +224,17 @@ export default function TooltipTransitionExperiment() {
Anchor
- Tooltip
+
+ Tooltip
+
Anchor
- Tooltip
+
+ Tooltip
+
@@ -247,13 +253,17 @@ export default function TooltipTransitionExperiment() {
Anchor
- Tooltip
+
+ Tooltip
+
Anchor
- Tooltip
+
+ Tooltip
+
@@ -262,7 +272,9 @@ export default function TooltipTransitionExperiment() {
Anchor
- Tooltip
+
+ Tooltip
+
diff --git a/docs/app/layout.tsx b/docs/src/app/layout.tsx
similarity index 80%
rename from docs/app/layout.tsx
rename to docs/src/app/layout.tsx
index 9bf30616a..92b954934 100644
--- a/docs/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
import { Metadata } from 'next';
-import { GoogleAnalytics } from 'docs-base/src/components/GoogleAnalytics';
+import { GoogleAnalytics } from 'docs/src/components/GoogleAnalytics';
import { DocsProviders } from './DocsProviders';
-import '../src/styles/style.css';
+import '../styles/style.css';
interface Props {
children: React.ReactNode;
@@ -15,7 +15,11 @@ export default function Layout({ children }: Props) {
diff --git a/docs/app/not-found.tsx b/docs/src/app/not-found.tsx
similarity index 66%
rename from docs/app/not-found.tsx
rename to docs/src/app/not-found.tsx
index fd8e66cc5..bf4be8e58 100644
--- a/docs/app/not-found.tsx
+++ b/docs/src/app/not-found.tsx
@@ -1,8 +1,8 @@
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 { AppBar } from 'docs/src/components/AppBar';
+import { Navigation } from 'docs/src/components/Navigation';
+import routes from 'docs/data/pages';
import classes from './(content)/styles.module.css';
export default function NotFound() {
diff --git a/docs/app/page.tsx b/docs/src/app/page.tsx
similarity index 78%
rename from docs/app/page.tsx
rename to docs/src/app/page.tsx
index b8eceb753..a4e151058 100644
--- a/docs/app/page.tsx
+++ b/docs/src/app/page.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import { Metadata } from 'next';
import Link from 'next/link';
-import { BaseUIIcon } from 'docs-base/src/icons/BaseUI';
+import { BaseUIIcon } from 'docs/src/icons/BaseUI';
export default function Home() {
return (
@@ -21,10 +21,10 @@ export default function Home() {
-
+
Unstyled UI components for building accessible web apps and design systems.
-
+
From the creators of Radix, Floating UI, and MUI.
-
-```bash
-curl https://codeload.github.com/mui/base-ui/tar.gz/master | tar -xz --strip=2 base-ui-master/examples/base-ui-cra
-cd base-ui-cra
-```
-
-Install it and run:
-
-```bash
-npm install
-npm start
-```
-
-or:
-
-
-
-[](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-cra)
-
-[](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-cra)
diff --git a/examples/base-ui-cra/package.json b/examples/base-ui-cra/package.json
deleted file mode 100644
index b7ceb5958..000000000
--- a/examples/base-ui-cra/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "name": "base-ui-cra",
- "version": "5.0.0",
- "private": true,
- "dependencies": {
- "@base_ui/react": "latest",
- "react": "latest",
- "react-dom": "latest",
- "react-scripts": "latest"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- },
- "devDependencies": {
- "@babel/plugin-proposal-private-property-in-object": "latest"
- }
-}
diff --git a/examples/base-ui-cra/public/favicon.ico b/examples/base-ui-cra/public/favicon.ico
deleted file mode 100644
index a11777cc4..000000000
Binary files a/examples/base-ui-cra/public/favicon.ico and /dev/null differ
diff --git a/examples/base-ui-cra/public/index.html b/examples/base-ui-cra/public/index.html
deleted file mode 100644
index 71fe1731a..000000000
--- a/examples/base-ui-cra/public/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
- CRA + Base UI
-
-
- You need to enable JavaScript to run this app.
-
-
-
diff --git a/examples/base-ui-cra/src/App.js b/examples/base-ui-cra/src/App.js
deleted file mode 100644
index 6c936be8a..000000000
--- a/examples/base-ui-cra/src/App.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import './index.css';
-
-export default function App() {
- return (
-
-
Base UI + Create React App scaffold (JavaScript)
-
-
Base UI is a library of unstyled React UI components
- and hooks.
-
-
-
Create React App is a framework for quickly
- creating a new React project without the need to configure complex build tools or
- development environments.
-
-
- Created with 💙 by MUI .
-
-
, ref: React.ForwardedRef) {
- const { ownerState, ...other } = props;
- return (
-
- {other.children}
-
-
-
- );
-});
-
-// the components exported from this file have function props which are non-serializable
-// therefore they are additionally wrapped with 'use client' here
-// https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#passing-props-from-server-to-client-components-serialization
-
-export function SelectOption(props: OptionProps) {
- const {
- slotProps = {
- root: {},
- },
- ...other
- } = props;
- return (
- ) => ({
- ...slotProps.root,
- className: clsx(
- 'list-none p-2 rounded-[1px] cursor-pointer last-of-type:border-b-0',
- ownerState.selected && 'bg-blue-100 text-blue-900',
- ownerState.highlighted && 'bg-gray-100 text-gray-900',
- ownerState.highlighted && ownerState.selected && 'bg-gray-700 text-gray-50',
- ownerState.disabled ? 'text-gray-400' : 'hover:bg-gray-100, hover:text-gray-300',
- ),
- }),
- }}
- {...other}
- />
- );
-}
-
-export const Select = React.forwardRef(function Select(
- props: SelectProps,
- ref: React.ForwardedRef,
-) {
- const {
- slotProps = {
- root: {},
- listbox: {},
- popper: {},
- },
- ...other
- } = props;
- return (
- ) => ({
- ...slotProps.root,
- className: clsx(
- 'text-gray-300 text-sm box-border min-width-[72px] py-2 px-3 rounded-sm text-left leading-normal bg-gray-900 border-[0] font-medium relative hover:bg-gray-400 hover:text-gray-900',
- ownerState.focusVisible &&
- 'border-blue-400 outline-[3px] outline-solid outline-blue-200',
- ),
- }),
- listbox: {
- ...slotProps.listbox,
- className:
- 'text-sm box-border p-0 mb-3 rounded-sm overflow-auto outline-0 bg-[rgb(14,20,27)] border border-solid border-gray-700 text-gray-300 shadow-[0_1px_2px_#a0aab4] max-h-[240px]',
- },
- popper: {
- ...slotProps.popper,
- className: 'z-[1]',
- },
- }}
- />
- );
-});
-
-export const Slider = React.forwardRef(function Slider(
- props: SliderProps,
- ref: React.ForwardedRef,
-) {
- const {
- slotProps = {
- root: {},
- rail: {},
- track: {},
- thumb: {},
- mark: {},
- markLabel: {},
- valueLabel: {},
- },
- ...other
- } = props;
- return (
- ({
- ...slotProps.root,
- className: clsx(
- 'text-blue-500 h-1.5 w-full py-4 inline-block relative cursor-pointer touch-none top-[-1px] hover:opacity-100',
- ownerState.disabled && 'pointer-events-none cursor-default text-gray-300 opacity-50',
- ),
- }),
- rail: {
- ...slotProps.rail,
- className: 'block absolute w-full h-1.5 rounded-full bg-gray-700 opacity-40',
- },
- track: {
- ...slotProps.track,
- className: 'block absolute h-1.5 rounded-full bg-current',
- },
- thumb: {
- ...slotProps.thumb,
- className:
- 'absolute w-5 h-5 ml-[-8px] mt-[-7.5px] box-border rounded-[50%] outline-0 bg-white',
- // TODO: add hover/focusVisible/active box-shadow
- },
- // TODO: where does markActive go?
- mark: {
- ...slotProps.mark,
- className: 'absolute w-1 h-1 rounded-sm bg-current top-2/4 opacity-0',
- },
- markLabel: {
- ...slotProps.markLabel,
- className:
- 'text-[10px] font-extrabold uppercase text-gray-300 absolute top-5 mt-2 data-[index="1"]:translate-x-[-100%]',
- },
- }}
- ref={ref}
- />
- );
-});
diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/favicon.ico b/examples/base-ui-nextjs-tailwind-ts/src/app/favicon.ico
deleted file mode 100644
index 718d6fea4..000000000
Binary files a/examples/base-ui-nextjs-tailwind-ts/src/app/favicon.ico and /dev/null differ
diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/globals.css b/examples/base-ui-nextjs-tailwind-ts/src/app/globals.css
deleted file mode 100644
index 7621a618a..000000000
--- a/examples/base-ui-nextjs-tailwind-ts/src/app/globals.css
+++ /dev/null
@@ -1,28 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
- /* This is an alternative to using function props and ownerState to style a component. The corresponding Switch component can be rendered in page.tsx without a use-client directive, but you cannot easily import the class names like in JS/TS.
-
- However this may not be a viable pattern since you'll typically pass other non-serializable props like event handers to components, which means you will have to add your own 'use-client' boundaries in your app anyway. */
- .switch {
- &.Mui-checked {
- .MuiSwitch-thumb {
- @apply left-[20px] top-[2.5px] bg-white;
- }
-
- .MuiSwitch-track {
- @apply bg-blue-400;
- }
- }
-
- &.Mui-focusVisible .MuiSwitch-thumb {
- @apply shadow-[0_0_1px_8px_rgba(0,0,0,0.25)];
- }
-
- &.Mui-disabled {
- @apply opacity-40 cursor-not-allowed;
- }
- }
-}
diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx b/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx
deleted file mode 100644
index 4a444c6d0..000000000
--- a/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { IBM_Plex_Sans } from 'next/font/google';
-import './globals.css';
-
-const font = IBM_Plex_Sans({
- weight: ['400', '500', '700'],
- subsets: ['latin'],
- display: 'swap',
-});
-
-export const metadata = {
- title: 'Create Next App',
- description: 'Generated by create next app',
-};
-
-export default function RootLayout(props: { children: React.ReactNode }) {
- return (
-
- {props.children}
-
- );
-}
diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/page.tsx b/examples/base-ui-nextjs-tailwind-ts/src/app/page.tsx
deleted file mode 100644
index 15e58c7e1..000000000
--- a/examples/base-ui-nextjs-tailwind-ts/src/app/page.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react';
-import { Switch } from '@base_ui/react/Switch';
-import { Select, SelectOption, Slider } from './components';
-
-function Heading(props: { children: React.ReactNode }) {
- return (
- {props.children}
- );
-}
-
-function Section(props: { children: React.ReactNode }) {
- return (
-
- {props.children}
-
- );
-}
-
-function Label(props: { children: React.ReactNode }) {
- return {props.children} ;
-}
-
-const HOURS = [
- '12AM',
- '1AM',
- '2AM',
- '3AM',
- '4AM',
- '5AM',
- '6AM',
- '7AM',
- '8AM',
- '9AM',
- '10AM',
- '11AM',
- '12PM',
- '1PM',
- '2PM',
- '3PM',
- '4PM',
- '5PM',
- '6PM',
- '7PM',
- '8PM',
- '9PM',
- '10PM',
- '11PM',
-];
-
-export default function Home() {
- return (
-
-
-
Night Mode
-
- Schedule Night Mode
-
-
- Auto-Enable Between
-
-
- {HOURS.map((hour) => (
-
- {hour}
-
- ))}
-
- and
-
- {HOURS.map((hour) => (
-
- {hour}
-
- ))}
-
-
-
-
- Night Mode Tint
-
-
-
-
- );
-}
diff --git a/examples/base-ui-nextjs-tailwind-ts/tailwind.config.js b/examples/base-ui-nextjs-tailwind-ts/tailwind.config.js
deleted file mode 100644
index 5464991fe..000000000
--- a/examples/base-ui-nextjs-tailwind-ts/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- content: ['./src/app/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}'],
- theme: {
- extend: {},
- },
- plugins: [],
-};
diff --git a/examples/base-ui-nextjs-tailwind-ts/tsconfig.json b/examples/base-ui-nextjs-tailwind-ts/tsconfig.json
deleted file mode 100644
index 0c7555fa7..000000000
--- a/examples/base-ui-nextjs-tailwind-ts/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "compilerOptions": {
- "target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
- "skipLibCheck": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "noEmit": true,
- "esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "jsx": "preserve",
- "incremental": true,
- "plugins": [
- {
- "name": "next"
- }
- ],
- "paths": {
- "@/*": ["./src/*"]
- }
- },
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
-}
diff --git a/examples/base-ui-vite-tailwind-ts/.gitignore b/examples/base-ui-vite-tailwind-ts/.gitignore
deleted file mode 100644
index a547bf36d..000000000
--- a/examples/base-ui-vite-tailwind-ts/.gitignore
+++ /dev/null
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/examples/base-ui-vite-tailwind-ts/README.md b/examples/base-ui-vite-tailwind-ts/README.md
deleted file mode 100644
index d95129649..000000000
--- a/examples/base-ui-vite-tailwind-ts/README.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Base UI - Vite.js example with Tailwind CSS in TypeScript
-
-[Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks.
-
-[Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects, consisting of a dev server and a build command
-
-[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level CSS classes that can be composed to build custom UI designs.
-
-## How to use
-
-Download the example [or clone the repo](https://github.com/mui/base-ui):
-
-```bash
-curl https://codeload.github.com/mui/base-ui/tar.gz/master | tar -xz --strip=2 base-ui-master/examples/base-ui-vite-tailwind-ts
-cd base-ui-vite-tailwind-ts
-```
-
-Install it and run:
-
-```bash
-npm install
-npm start
-```
-
-or:
-
-
-
-[](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts)
-
-[](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind-ts)
diff --git a/examples/base-ui-vite-tailwind-ts/index.html b/examples/base-ui-vite-tailwind-ts/index.html
deleted file mode 100644
index c23bc936b..000000000
--- a/examples/base-ui-vite-tailwind-ts/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
- Vite + React + TS
-
-
-
-
-
-
diff --git a/examples/base-ui-vite-tailwind-ts/package.json b/examples/base-ui-vite-tailwind-ts/package.json
deleted file mode 100644
index 2ebea365e..000000000
--- a/examples/base-ui-vite-tailwind-ts/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
- "name": "base-ui-vite-tailwind-ts",
- "private": true,
- "version": "5.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
- "preview": "vite preview"
- },
- "dependencies": {
- "@base_ui/react": "latest",
- "react": "latest",
- "react-dom": "latest"
- },
- "devDependencies": {
- "@types/react": "latest",
- "@types/react-dom": "latest",
- "@typescript-eslint/eslint-plugin": "latest",
- "@typescript-eslint/parser": "latest",
- "@vitejs/plugin-react": "latest",
- "autoprefixer": "latest",
- "eslint": "latest",
- "eslint-plugin-react-hooks": "latest",
- "eslint-plugin-react-refresh": "latest",
- "postcss": "latest",
- "tailwindcss": "latest",
- "typescript": "latest",
- "vite": "latest"
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- }
-}
diff --git a/examples/base-ui-vite-tailwind-ts/postcss.config.js b/examples/base-ui-vite-tailwind-ts/postcss.config.js
deleted file mode 100644
index 2aa7205d4..000000000
--- a/examples/base-ui-vite-tailwind-ts/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
- plugins: {
- tailwindcss: {},
- autoprefixer: {},
- },
-};
diff --git a/examples/base-ui-vite-tailwind-ts/public/vite.svg b/examples/base-ui-vite-tailwind-ts/public/vite.svg
deleted file mode 100644
index e7b8dfb1b..000000000
--- a/examples/base-ui-vite-tailwind-ts/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
- Base UI + Vite.js + Tailwind CSS in TypeScript
-
-
-
-
- Base UI
- {' '}
- is a library of unstyled React UI components and hooks.
-
-
-
- Vite
- {' '}
- is a build tool that aims to provide a faster and leaner development experience for modern
- web projects, consisting of a dev server and a build command.
-
-
-
- Tailwind CSS
- {' '}
- is a utility-first CSS framework that provides low-level CSS classes that can be composed
- to build custom UI designs.
-
-
-
- Created with 💙 by{' '}
-
- MUI
-
- .
-
-
- ,
-);
diff --git a/examples/base-ui-vite-tailwind-ts/src/vite-env.d.ts b/examples/base-ui-vite-tailwind-ts/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe2a..000000000
--- a/examples/base-ui-vite-tailwind-ts/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// Vite + Base UI + Tailwind CSS
-
-
-
-
-
-
diff --git a/examples/base-ui-vite-tailwind/package.json b/examples/base-ui-vite-tailwind/package.json
deleted file mode 100644
index 28fcd2ce5..000000000
--- a/examples/base-ui-vite-tailwind/package.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "name": "base-ui-vite-tailwind",
- "private": true,
- "version": "5.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "vite build",
- "preview": "vite preview"
- },
- "dependencies": {
- "@base_ui/react": "latest",
- "react": "latest",
- "react-dom": "latest"
- },
- "devDependencies": {
- "@types/react": "latest",
- "@types/react-dom": "latest",
- "@vitejs/plugin-react": "latest",
- "autoprefixer": "latest",
- "postcss": "latest",
- "tailwindcss": "latest",
- "vite": "latest"
- }
-}
diff --git a/examples/base-ui-vite-tailwind/postcss.config.js b/examples/base-ui-vite-tailwind/postcss.config.js
deleted file mode 100644
index 2aa7205d4..000000000
--- a/examples/base-ui-vite-tailwind/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
- plugins: {
- tailwindcss: {},
- autoprefixer: {},
- },
-};
diff --git a/examples/base-ui-vite-tailwind/public/vite.svg b/examples/base-ui-vite-tailwind/public/vite.svg
deleted file mode 100644
index e7b8dfb1b..000000000
--- a/examples/base-ui-vite-tailwind/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
-
Base UI + Vite.js + Tailwind CSS
-
-
-
- Base UI
- {' '}
- is a library of unstyled React UI components and hooks.
-
-
-
- Vite
- {' '}
- is a build tool that aims to provide a faster and leaner development experience for modern
- web projects, consisting of a dev server and a build command.
-
-
-
- Tailwind CSS
- {' '}
- is a utility-first CSS framework that provides low-level CSS classes that can be composed
- to build custom UI designs.
-
-
-
- Created with 💙 by{' '}
-
- MUI
-
- .
-
-
- ,
-);
diff --git a/examples/base-ui-vite-tailwind/src/styles.css b/examples/base-ui-vite-tailwind/src/styles.css
deleted file mode 100644
index 244d8f1fd..000000000
--- a/examples/base-ui-vite-tailwind/src/styles.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
- .card {
- @apply max-w-[70ch] rounded-lg border border-gray-400 p-6 mb-6;
- }
-
- .link {
- @apply border-b border-blue-700 text-blue-700 hover:border-b-2 hover:border-blue-400 hover:text-blue-500;
- }
-}
diff --git a/examples/base-ui-vite-tailwind/tailwind.config.js b/examples/base-ui-vite-tailwind/tailwind.config.js
deleted file mode 100644
index baf544060..000000000
--- a/examples/base-ui-vite-tailwind/tailwind.config.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
- content: ['./index.html', './src/**/*.{js,jsx}'],
- theme: {
- extend: {},
- },
- plugins: [],
-};
diff --git a/examples/base-ui-vite-tailwind/vite.config.js b/examples/base-ui-vite-tailwind/vite.config.js
deleted file mode 100644
index 4a5def4c3..000000000
--- a/examples/base-ui-vite-tailwind/vite.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// https://vite.dev/config/
-export default defineConfig({
- plugins: [react()],
-});
diff --git a/packages/mui-base/README.md b/packages/mui-base/README.md
index 3f4c5a879..e7fe267a1 100644
--- a/packages/mui-base/README.md
+++ b/packages/mui-base/README.md
@@ -26,10 +26,6 @@ Visit [https://mui.com/base-ui/](https://mui.com/base-ui/) to view the full docu
For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/base-ui) instead of GitHub issues.
Use the "base-ui" tag on Stack Overflow to make it easier for the community to find your question.
-## Examples
-
-Our documentation features [a collection of example projects using Base UI](https://github.com/mui/base-ui/tree/master/examples).
-
## Contributing
Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
diff --git a/renovate.json b/renovate.json
index 9f3c3927b..7eec8e0f1 100644
--- a/renovate.json
+++ b/renovate.json
@@ -78,8 +78,8 @@
"enabled": false
},
{
- "groupName": "examples",
- "matchPaths": ["examples/**/package.json"],
+ "groupName": "CodeSandbox template",
+ "matchPaths": [".codesandbox/template/package.json"],
"enabled": false
},
{
diff --git a/test/regressions/index.js b/test/regressions/index.js
index 5a174fdc6..c7f20b6c1 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -4,7 +4,7 @@ import * as ReactDOMClient from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import webfontloader from 'webfontloader';
import TestViewer from './TestViewer';
-import 'docs-base/src/styles/demo-colors.css';
+import 'docs/src/styles/demo-colors.css';
import './tailwind.css';
// Get all the fixtures specifically written for preventing visual regressions.
diff --git a/test/regressions/webpack.config.js b/test/regressions/webpack.config.js
index 6f1388768..f3245d169 100644
--- a/test/regressions/webpack.config.js
+++ b/test/regressions/webpack.config.js
@@ -95,10 +95,6 @@ module.exports = {
// Exclude polyfill and treat 'zlib' as an empty module since it is not required. next -> gzip-size relies on it.
zlib: false,
},
- alias: {
- ...webpackBaseConfig.resolve.alias,
- docs: false, // Disable this alias as it creates a circular resolution loop with the docs-base alias
- },
},
// TODO: 'browserslist:modern'
// See https://github.com/webpack/webpack/issues/14203
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 33aea3e45..e5a9ccaee 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -21,8 +21,7 @@
"@mui-internal/api-docs-builder/*": [
"./node_modules/@mui/monorepo/packages/api-docs-builder/*"
],
- "docs-base/*": ["./docs/*"],
- "docs/*": ["./node_modules/@mui/monorepo/docs/*"]
+ "docs/*": ["./docs/*"]
}
},
"exclude": ["**/.*/", "**/build", "**/build-tests", "**/node_modules", "docs/export"]
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 8a232d3a7..b515e049b 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -14,8 +14,7 @@ module.exports = {
__dirname,
'./node_modules/@mui/monorepo/packages/api-docs-builder',
),
- docs: path.resolve(__dirname, './node_modules/@mui/monorepo/docs'),
- 'docs-base': path.resolve(__dirname, './docs'),
+ docs: path.resolve(__dirname, './docs'),
},
extensions: ['.js', '.ts', '.tsx', '.d.ts'],
},
-
-
-
#### Use starter templates
You can use a starter React template to build a reproduction case with [JavaScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/github/stackblitz/starters/tree/main/react-ts).
diff --git a/docs/data/guides/next-js-app-router/next-js-app-router.mdx b/docs/data/guides/next-js-app-router/next-js-app-router.mdx
index 9ca2cf346..a588063b8 100644
--- a/docs/data/guides/next-js-app-router/next-js-app-router.mdx
+++ b/docs/data/guides/next-js-app-router/next-js-app-router.mdx
@@ -7,12 +7,6 @@ description: Learn how to use Base UI with the Next.js App Router.