diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 026b36212a..011db5547a 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -38,4 +38,4 @@ jobs: - run: pnpm validate-declarations - name: Publish to pkg-pr-new if: matrix.os == 'ubuntu-latest' - run: pnpm dlx pkg-pr-new publish './packages/react' --compact --pnpm --peerDeps + run: pnpm dlx pkg-pr-new publish './packages/react' --compact --pnpm --peerDeps --template './examples/*' diff --git a/eslint.config.mjs b/eslint.config.mjs index d7b2123798..dc9c4d7983 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -6,7 +6,7 @@ import { EXTENSION_TEST_FILE, EXTENSION_TS, } from '@mui/internal-code-infra/eslint'; -import { defineConfig } from 'eslint/config'; +import { defineConfig, globalIgnores } from 'eslint/config'; import * as path from 'node:path'; import { fileURLToPath } from 'url'; @@ -31,6 +31,7 @@ const NO_RESTRICTED_IMPORTS_PATHS_TOP_LEVEL_PACKAGES = [ ]; export default defineConfig( + globalIgnores(['./examples']), { name: 'Base Config', extends: createBaseConfig({ diff --git a/examples/vite-css/.gitignore b/examples/vite-css/.gitignore new file mode 100644 index 0000000000..a547bf36d8 --- /dev/null +++ b/examples/vite-css/.gitignore @@ -0,0 +1,24 @@ +# 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/vite-css/README.md b/examples/vite-css/README.md new file mode 100644 index 0000000000..80482bab9c --- /dev/null +++ b/examples/vite-css/README.md @@ -0,0 +1,46 @@ +# React + TypeScript + Vite + +This template provides a minimal setup to get React + Base UI (styled with plain CSS) working in Vite with HMR and some ESLint rules. + +## Getting Started + +### Prerequisites + +- [Node.js](https://nodejs.org/) (version 20.19+ or 22.12+ is required) +- [pnpm](https://pnpm.io/) (or use npm/yarn if preferred) + +### Install dependencies + +```bash +pnpm install +``` + +### Run the development server + +```bash +pnpm dev +``` + +This will start the Vite development server. Open [http://localhost:5173](http://localhost:5173) to view the app in your browser. + +### Build for production + +```bash +pnpm build +``` + +### Preview the production build + +```bash +pnpm preview +``` + +Make sure to build the project for production with `pnpm build` first. + +## Linting + +To run ESLint: + +```bash +pnpm lint +``` diff --git a/examples/vite-css/eslint.config.js b/examples/vite-css/eslint.config.js new file mode 100644 index 0000000000..cfd81c9345 --- /dev/null +++ b/examples/vite-css/eslint.config.js @@ -0,0 +1,25 @@ +import js from '@eslint/js'; +import globals from 'globals'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRefresh from 'eslint-plugin-react-refresh'; +import tseslint from 'typescript-eslint'; + +export default tseslint.config( + { ignores: ['dist'] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], + }, + }, +); diff --git a/examples/vite-css/index.html b/examples/vite-css/index.html new file mode 100644 index 0000000000..840befb24c --- /dev/null +++ b/examples/vite-css/index.html @@ -0,0 +1,14 @@ + + + + + + + Vite + React + Base UI + TS + + + +
+ + + diff --git a/examples/vite-css/package.json b/examples/vite-css/package.json new file mode 100644 index 0000000000..e11caa5d6e --- /dev/null +++ b/examples/vite-css/package.json @@ -0,0 +1,31 @@ +{ + "name": "vite-css-base-ui-example", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc -b && vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@base-ui-components/react": "latest", + "clsx": "^2.1.1", + "react": "^19.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@eslint/js": "^9.30.1", + "@types/react": "^19.1.8", + "@types/react-dom": "^19.1.6", + "@vitejs/plugin-react": "^4.6.0", + "eslint": "^9.30.1", + "eslint-plugin-react-hooks": "^5.2.0", + "eslint-plugin-react-refresh": "^0.4.20", + "globals": "^16.3.0", + "typescript": "^5.8.3", + "typescript-eslint": "^8.35.1", + "vite": "^7.0.0" + } +} diff --git a/examples/vite-css/src/App.css b/examples/vite-css/src/App.css new file mode 100644 index 0000000000..85165f014c --- /dev/null +++ b/examples/vite-css/src/App.css @@ -0,0 +1,52 @@ +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} + +.logo.vite:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} + +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +.logo.base-ui:hover { + filter: drop-shadow(0 0 2em #626262aa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + .logo.react { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 2em; + display: flex; + flex-direction: column; + align-items: center; +} + +.read-the-docs { + color: #888; +} diff --git a/examples/vite-css/src/App.tsx b/examples/vite-css/src/App.tsx new file mode 100644 index 0000000000..e344479580 --- /dev/null +++ b/examples/vite-css/src/App.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import reactLogo from './assets/react.svg'; +import viteLogo from './assets/vite.svg'; +import baseUILogo from './assets/base-ui.svg'; +import { Switch } from './widgets/Switch'; +import './App.css'; + +function App() { + const [count, setCount] = React.useState(0); + + return ( + +
+ + Vite logo + + + React logo + + + Base UI logo + +
+

Vite + React + Base UI

+
+ setCount((c) => c + 1)} /> +

+ Flicked the Switch {count} time{count !== 1 ? 's' : ''}. +

+

+ Edit src/App.tsx and save to test HMR. +

+
+

Click on the Vite, React, and Base UI logos to learn more.

+ + ); +} + +export default App; diff --git a/examples/vite-css/src/assets/base-ui.svg b/examples/vite-css/src/assets/base-ui.svg new file mode 100644 index 0000000000..435f4b52d0 --- /dev/null +++ b/examples/vite-css/src/assets/base-ui.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/examples/vite-css/src/assets/react.svg b/examples/vite-css/src/assets/react.svg new file mode 100644 index 0000000000..6c87de9bb3 --- /dev/null +++ b/examples/vite-css/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/vite-css/src/assets/vite.svg b/examples/vite-css/src/assets/vite.svg new file mode 100644 index 0000000000..e7b8dfb1b2 --- /dev/null +++ b/examples/vite-css/src/assets/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/vite-css/src/index.css b/examples/vite-css/src/index.css new file mode 100644 index 0000000000..4fedd715c8 --- /dev/null +++ b/examples/vite-css/src/index.css @@ -0,0 +1,105 @@ +:root { + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgb(255 255 255 / 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + --color-blue: oklch(45% 50% 264deg); + --color-red: oklch(50% 55% 31deg); + + --color-gray-50: oklch(98.42% 0.0034 247.86deg); + --color-gray-100: oklch(12% 9.5% 264deg / 5%); + --color-gray-200: oklch(12% 9% 264deg / 8%); + --color-gray-300: oklch(12% 8.5% 264deg / 17%); + --color-gray-400: oklch(12% 8% 264deg / 38%); + --color-gray-500: oklch(12% 7.5% 264deg / 50%); + --color-gray-600: oklch(12% 7% 264deg / 67%); + --color-gray-700: oklch(12% 6% 264deg / 77%); + --color-gray-800: oklch(12% 5% 264deg / 85%); + --color-gray-900: oklch(12% 5% 264deg / 90%); + --color-gray-950: oklch(12% 5% 264deg / 95%); + + @media (prefers-color-scheme: dark) { + --color-blue: oklch(69% 50% 264deg); + --color-red: oklch(80% 55% 31deg); + + --color-gray-50: oklch(17% 1% 264deg); + --color-gray-100: oklch(28% 3% 264deg / 65%); + --color-gray-200: oklch(31% 3% 264deg / 80%); + --color-gray-300: oklch(35% 3% 264deg / 80%); + --color-gray-400: oklch(47% 3.5% 264deg / 80%); + --color-gray-500: oklch(64% 4% 264deg / 80%); + --color-gray-600: oklch(82% 4% 264deg / 80%); + --color-gray-700: oklch(92% 4.5% 264deg / 80%); + --color-gray-800: oklch(93% 3.5% 264deg / 85%); + --color-gray-900: oklch(95% 2% 264deg / 90%); + --color-gray-950: oklch(94% 1.5% 264deg / 95%); + } +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} + +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} + +button:hover { + border-color: #646cff; +} + +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + + a:hover { + color: #747bff; + } + + button { + background-color: #f9f9f9; + } +} diff --git a/examples/vite-css/src/main.tsx b/examples/vite-css/src/main.tsx new file mode 100644 index 0000000000..1812e7407b --- /dev/null +++ b/examples/vite-css/src/main.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom/client'; +import App from './App.tsx'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/examples/vite-css/src/vite-env.d.ts b/examples/vite-css/src/vite-env.d.ts new file mode 100644 index 0000000000..11f02fe2a0 --- /dev/null +++ b/examples/vite-css/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/vite-css/src/widgets/Switch.module.css b/examples/vite-css/src/widgets/Switch.module.css new file mode 100644 index 0000000000..2cd8e97689 --- /dev/null +++ b/examples/vite-css/src/widgets/Switch.module.css @@ -0,0 +1,89 @@ +.Switch { + position: relative; + display: flex; + appearance: none; + border: 0; + margin: 0; + padding: 1px; + width: 2.5rem; + height: 1.5rem; + border-radius: 1.5rem; + outline: 1px solid; + outline-offset: -1px; + background-color: transparent; + background-image: linear-gradient(to right, var(--color-gray-700) 35%, var(--color-gray-200) 65%); + background-size: 6.5rem 100%; + background-position-x: 100%; + background-repeat: no-repeat; + transition-property: background-position, box-shadow; + transition-timing-function: cubic-bezier(0.26, 0.75, 0.38, 0.45); + transition-duration: 125ms; + + &:active { + background-color: var(--color-gray-100); + } + + &[data-checked] { + background-position-x: 0%; + } + + &[data-checked]:active { + background-color: var(--color-gray-500); + } + + @media (prefers-color-scheme: light) { + box-shadow: var(--color-gray-200) 0 1.5px 2px inset; + outline-color: var(--color-gray-200); + } + + @media (prefers-color-scheme: dark) { + box-shadow: rgb(0 0 0 / 75%) 0 1.5px 2px inset; + outline-color: rgb(255 255 255 / 15%); + background-image: linear-gradient( + to right, + var(--color-gray-500) 35%, + var(--color-gray-200) 65% + ); + + &[data-checked] { + box-shadow: none; + } + } + + &:focus-visible { + &::before { + content: ''; + inset: 0; + position: absolute; + border-radius: inherit; + outline: 2px solid var(--color-blue); + outline-offset: 2px; + } + } +} + +.Thumb { + aspect-ratio: 1 / 1; + height: 100%; + border-radius: 100%; + background-color: white; + transition: translate 150ms ease; + + &[data-checked] { + translate: 1rem 0; + } + + @media (prefers-color-scheme: light) { + box-shadow: + 0 0 1px 1px var(--color-gray-100), + 0 1px 1px var(--color-gray-100), + 1px 2px 4px -1px var(--color-gray-100); + } + + @media (prefers-color-scheme: dark) { + box-shadow: + 0 0 1px 1px rgb(0 0 0 / 25%), + 0 1px 1px rgb(0 0 0 / 25%), + 1px 2px 4px -1px rgb(0 0 0 / 25%); + } +} diff --git a/examples/vite-css/src/widgets/Switch.tsx b/examples/vite-css/src/widgets/Switch.tsx new file mode 100644 index 0000000000..540b441f07 --- /dev/null +++ b/examples/vite-css/src/widgets/Switch.tsx @@ -0,0 +1,13 @@ +import { Switch as BaseSwitch } from '@base-ui-components/react/switch'; +import clsx from 'clsx'; +import styles from './Switch.module.css'; + +export function Switch(props: SwitchProps) { + return ( + + + + ); +} + +export type SwitchProps = BaseSwitch.Root.Props; diff --git a/examples/vite-css/tsconfig.app.json b/examples/vite-css/tsconfig.app.json new file mode 100644 index 0000000000..c9ccbd4c59 --- /dev/null +++ b/examples/vite-css/tsconfig.app.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["src"] +} diff --git a/examples/vite-css/tsconfig.json b/examples/vite-css/tsconfig.json new file mode 100644 index 0000000000..d32ff68200 --- /dev/null +++ b/examples/vite-css/tsconfig.json @@ -0,0 +1,4 @@ +{ + "files": [], + "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }] +} diff --git a/examples/vite-css/tsconfig.node.json b/examples/vite-css/tsconfig.node.json new file mode 100644 index 0000000000..9728af2d81 --- /dev/null +++ b/examples/vite-css/tsconfig.node.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedSideEffectImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/vite-css/vite.config.ts b/examples/vite-css/vite.config.ts new file mode 100644 index 0000000000..4a5def4c3d --- /dev/null +++ b/examples/vite-css/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +}); diff --git a/package.json b/package.json index 460dc39720..47e1a4e9d3 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,8 @@ "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --concurrency 1 build:stable", "install:codesandbox": "pnpm install --no-frozen-lockfile", "jsonlint": "code-infra jsonlint", - "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", - "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", + "eslint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0 && pnpm -r lint", + "eslint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0 && pnpm -r lint", "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables \"docs/**/*.{js,ts,tsx}\" \"**/*.css\" --ignore-path .gitignore", "markdownlint": "markdownlint-cli2 \"**/*.{md,mdx}\"", "valelint": "pnpm vale sync && git ls-files | grep -h \".md$\" | xargs pnpm vale --filter='.Level==\"error\"'", diff --git a/packages/react-utils/src/index.ts b/packages/react-utils/src/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1338f77856..18bdac7f2a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,7 +60,7 @@ importers: version: 1.0.9-canary.3(@types/node@18.19.115)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.40.1)(terser@5.39.0)(tsx@4.19.4)(webpack-cli@6.0.1(webpack-bundle-analyzer@4.10.2)(webpack@5.99.9))(yaml@2.7.1) '@mui/internal-code-infra': specifier: ^0.0.2-canary.13 - version: 0.0.2-canary.13(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.30.1(jiti@2.4.2))(prettier@3.5.3)(typescript@5.8.3) + version: 0.0.2-canary.13(eslint@9.30.1(jiti@2.4.2))(prettier@3.5.3)(typescript@5.8.3) '@mui/internal-docs-utils': specifier: ^2.0.1 version: 2.0.1 @@ -495,6 +495,55 @@ importers: specifier: ^3.24.3 version: 3.24.3 + examples/vite-css: + dependencies: + '@base-ui-components/react': + specifier: latest + version: 1.0.0-beta.1(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + clsx: + specifier: ^2.1.1 + version: 2.1.1 + react: + specifier: ^19.1.0 + version: 19.1.0 + react-dom: + specifier: ^19.1.0 + version: 19.1.0(react@19.1.0) + devDependencies: + '@eslint/js': + specifier: ^9.30.1 + version: 9.30.1 + '@types/react': + specifier: ^19.1.8 + version: 19.1.8 + '@types/react-dom': + specifier: ^19.1.6 + version: 19.1.6(@types/react@19.1.8) + '@vitejs/plugin-react': + specifier: ^4.6.0 + version: 4.6.0(vite@7.0.0(@types/node@18.19.115)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1)) + eslint: + specifier: ^9.30.1 + version: 9.30.1(jiti@2.4.2) + eslint-plugin-react-hooks: + specifier: ^5.2.0 + version: 5.2.0(eslint@9.30.1(jiti@2.4.2)) + eslint-plugin-react-refresh: + specifier: ^0.4.20 + version: 0.4.20(eslint@9.30.1(jiti@2.4.2)) + globals: + specifier: ^16.3.0 + version: 16.3.0 + typescript: + specifier: ^5.8.3 + version: 5.8.3 + typescript-eslint: + specifier: ^8.35.1 + version: 8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3) + vite: + specifier: ^7.0.0 + version: 7.0.0(@types/node@18.19.115)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1) + packages/react: dependencies: '@babel/runtime': @@ -1497,6 +1546,17 @@ packages: resolution: {integrity: sha512-jYnje+JyZG5YThjHiF28oT4SIZLnYOcSBb6+SDaFIyzDVSkXQmQQYclJ2R+YxcdmK0AX6x1E5OQNtuh3jHDrUg==} engines: {node: '>=6.9.0'} + '@base-ui-components/react@1.0.0-beta.1': + resolution: {integrity: sha512-7zmGiz4/+HKnv99lWftItoSMqnj2PdSvt2krh0/GP+Rj0xK0NMnFI/gIVvP7CB2G+k0JPUrRWXjXa3y08oiakg==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^19.1.8 + react: ^17 || ^18 || ^19 + react-dom: ^17 || ^18 || ^19 + peerDependenciesMeta: + '@types/react': + optional: true + '@bcoe/v8-coverage@0.2.3': resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} @@ -1829,6 +1889,10 @@ packages: resolution: {integrity: sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@eslint/core@0.15.1': + resolution: {integrity: sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@eslint/eslintrc@3.3.1': resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} @@ -1841,8 +1905,8 @@ packages: resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@eslint/plugin-kit@0.3.1': - resolution: {integrity: sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==} + '@eslint/plugin-kit@0.3.3': + resolution: {integrity: sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} '@fastify/busboy@3.1.1': @@ -6094,12 +6158,23 @@ packages: peerDependencies: eslint: '>=7' + eslint-plugin-react-hooks@5.2.0: + resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==} + engines: {node: '>=10'} + peerDependencies: + eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 + eslint-plugin-react-hooks@6.0.0-rc1: resolution: {integrity: sha512-I4ntWyjqgGemGtOU85FUdVo00h0i0Y5xvQ7a8EVxyzjOZsxXaxvkKBcYoXbP97QDvDjMzY/nGIvfdB/WRLTGxQ==} engines: {node: '>=18'} peerDependencies: eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 + eslint-plugin-react-refresh@0.4.20: + resolution: {integrity: sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==} + peerDependencies: + eslint: '>=8.40' + eslint-plugin-react@7.37.5: resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==} engines: {node: '>=4'} @@ -6308,8 +6383,8 @@ packages: fd-slicer@1.1.0: resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==} - fdir@6.4.4: - resolution: {integrity: sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==} + fdir@6.4.6: + resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==} peerDependencies: picomatch: ^3 || ^4 peerDependenciesMeta: @@ -10558,6 +10633,46 @@ packages: yaml: optional: true + vite@7.0.0: + resolution: {integrity: sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==} + engines: {node: ^20.19.0 || >=22.12.0} + hasBin: true + peerDependencies: + '@types/node': ^18.19.115 + jiti: '>=1.21.0' + less: ^4.0.0 + lightningcss: ^1.21.0 + sass: ^1.70.0 + sass-embedded: ^1.70.0 + stylus: '>=0.54.8' + sugarss: ^5.0.0 + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + '@types/node': + optional: true + jiti: + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: + optional: true + vitest-browser-react@1.0.0: resolution: {integrity: sha512-d8oHuCOxG6KL6j2LOgUbU5Jh5ljPIqGoy38Pey1Fzw7BTWxYNsztNFmxbGNrBVSMcRcctDZXBSsgPIl9PLcD8Q==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} @@ -12295,6 +12410,19 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.27.1 + '@base-ui-components/react@1.0.0-beta.1(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': + dependencies: + '@babel/runtime': 7.27.6 + '@floating-ui/react-dom': 2.1.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@floating-ui/utils': 0.2.10 + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + reselect: 5.1.1 + tabbable: 6.2.0 + use-sync-external-store: 1.5.0(react@19.1.0) + optionalDependencies: + '@types/react': 19.1.8 + '@bcoe/v8-coverage@0.2.3': {} '@braidai/lang@1.1.1': {} @@ -12558,6 +12686,10 @@ snapshots: dependencies: '@types/json-schema': 7.0.15 + '@eslint/core@0.15.1': + dependencies: + '@types/json-schema': 7.0.15 + '@eslint/eslintrc@3.3.1': dependencies: ajv: 6.12.6 @@ -12576,9 +12708,9 @@ snapshots: '@eslint/object-schema@2.1.6': {} - '@eslint/plugin-kit@0.3.1': + '@eslint/plugin-kit@0.3.3': dependencies: - '@eslint/core': 0.14.0 + '@eslint/core': 0.15.1 levn: 0.4.1 '@fastify/busboy@3.1.1': {} @@ -13047,7 +13179,7 @@ snapshots: - webpack-cli - yaml - '@mui/internal-code-infra@0.0.2-canary.13(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint@9.30.1(jiti@2.4.2))(prettier@3.5.3)(typescript@5.8.3)': + '@mui/internal-code-infra@0.0.2-canary.13(eslint@9.30.1(jiti@2.4.2))(prettier@3.5.3)(typescript@5.8.3)': dependencies: '@argos-ci/core': 3.2.0 '@eslint/compat': 1.3.1(eslint@9.30.1(jiti@2.4.2)) @@ -13055,12 +13187,12 @@ snapshots: '@octokit/rest': 22.0.0 chalk: 5.4.1 eslint: 9.30.1(jiti@2.4.2) - eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.32.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-react-hooks@6.0.0-rc1(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-react@7.37.5(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.32.0)(eslint@9.30.1(jiti@2.4.2)) + eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-jsx-a11y@6.10.2(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-react-hooks@6.0.0-rc1(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-react@7.37.5(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) + eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) eslint-config-prettier: 10.1.5(eslint@9.30.1(jiti@2.4.2)) - eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0)(eslint@9.30.1(jiti@2.4.2)) - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4)(eslint@9.30.1(jiti@2.4.2)) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.30.1(jiti@2.4.2)) + eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) + eslint-module-utils: 2.12.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) + eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) eslint-plugin-jsx-a11y: 6.10.2(eslint@9.30.1(jiti@2.4.2)) eslint-plugin-mocha: 11.1.0(eslint@9.30.1(jiti@2.4.2)) eslint-plugin-react: 7.37.5(eslint@9.30.1(jiti@2.4.2)) @@ -15679,6 +15811,18 @@ snapshots: transitivePeerDependencies: - supports-color + '@vitejs/plugin-react@4.6.0(vite@7.0.0(@types/node@18.19.115)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))': + dependencies: + '@babel/core': 7.28.0 + '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0) + '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.0) + '@rolldown/pluginutils': 1.0.0-beta.19 + '@types/babel__core': 7.20.5 + react-refresh: 0.17.0 + vite: 7.0.0(@types/node@18.19.115)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1) + transitivePeerDependencies: + - supports-color + '@vitest/browser@3.1.4(playwright@1.53.2)(vite@6.3.5(@types/node@18.19.115)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1))(vitest@3.1.4)': dependencies: '@testing-library/dom': 10.4.0 @@ -17482,20 +17626,20 @@ snapshots: optionalDependencies: source-map: 0.6.1 - eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.32.0)(eslint@9.30.1(jiti@2.4.2)): + eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)): dependencies: confusing-browser-globals: 1.0.11 eslint: 9.30.1(jiti@2.4.2) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.30.1(jiti@2.4.2)) + eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) object.assign: 4.1.7 object.entries: 1.1.9 semver: 6.3.1 - eslint-config-airbnb@19.0.4(eslint-plugin-import@2.32.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-react-hooks@6.0.0-rc1(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-react@7.37.5(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)): + eslint-config-airbnb@19.0.4(eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-jsx-a11y@6.10.2(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-react-hooks@6.0.0-rc1(eslint@9.30.1(jiti@2.4.2)))(eslint-plugin-react@7.37.5(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)): dependencies: eslint: 9.30.1(jiti@2.4.2) - eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.32.0)(eslint@9.30.1(jiti@2.4.2)) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.30.1(jiti@2.4.2)) + eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) + eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) eslint-plugin-jsx-a11y: 6.10.2(eslint@9.30.1(jiti@2.4.2)) eslint-plugin-react: 7.37.5(eslint@9.30.1(jiti@2.4.2)) eslint-plugin-react-hooks: 6.0.0-rc1(eslint@9.30.1(jiti@2.4.2)) @@ -17521,7 +17665,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0)(eslint@9.30.1(jiti@2.4.2)): + eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)): dependencies: debug: 4.4.1(supports-color@8.1.1) eslint: 9.30.1(jiti@2.4.2) @@ -17532,22 +17676,21 @@ snapshots: tinyglobby: 0.2.14 unrs-resolver: 1.9.2 optionalDependencies: - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.30.1(jiti@2.4.2)) + eslint-plugin-import: 2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4)(eslint@9.30.1(jiti@2.4.2)): + eslint-module-utils@2.12.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)): dependencies: debug: 3.2.7 optionalDependencies: - '@typescript-eslint/parser': 8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3) eslint: 9.30.1(jiti@2.4.2) eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0)(eslint@9.30.1(jiti@2.4.2)) + eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) transitivePeerDependencies: - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.30.1(jiti@2.4.2)): + eslint-plugin-import@2.32.0(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -17558,7 +17701,7 @@ snapshots: doctrine: 2.1.0 eslint: 9.30.1(jiti@2.4.2) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4)(eslint@9.30.1(jiti@2.4.2)) + eslint-module-utils: 2.12.1(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)))(eslint@9.30.1(jiti@2.4.2)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -17569,8 +17712,6 @@ snapshots: semver: 6.3.1 string.prototype.trimend: 1.0.9 tsconfig-paths: 3.15.0 - optionalDependencies: - '@typescript-eslint/parser': 8.35.1(eslint@9.30.1(jiti@2.4.2))(typescript@5.8.3) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack @@ -17613,6 +17754,10 @@ snapshots: transitivePeerDependencies: - supports-color + eslint-plugin-react-hooks@5.2.0(eslint@9.30.1(jiti@2.4.2)): + dependencies: + eslint: 9.30.1(jiti@2.4.2) + eslint-plugin-react-hooks@6.0.0-rc1(eslint@9.30.1(jiti@2.4.2)): dependencies: '@babel/core': 7.28.0 @@ -17625,6 +17770,10 @@ snapshots: transitivePeerDependencies: - supports-color + eslint-plugin-react-refresh@0.4.20(eslint@9.30.1(jiti@2.4.2)): + dependencies: + eslint: 9.30.1(jiti@2.4.2) + eslint-plugin-react@7.37.5(eslint@9.30.1(jiti@2.4.2)): dependencies: array-includes: 3.1.9 @@ -17679,7 +17828,7 @@ snapshots: '@eslint/core': 0.14.0 '@eslint/eslintrc': 3.3.1 '@eslint/js': 9.30.1 - '@eslint/plugin-kit': 0.3.1 + '@eslint/plugin-kit': 0.3.3 '@humanfs/node': 0.16.6 '@humanwhocodes/module-importer': 1.0.1 '@humanwhocodes/retry': 0.4.3 @@ -17958,7 +18107,7 @@ snapshots: dependencies: pend: 1.2.0 - fdir@6.4.4(picomatch@4.0.2): + fdir@6.4.6(picomatch@4.0.2): optionalDependencies: picomatch: 4.0.2 @@ -22650,12 +22799,12 @@ snapshots: tinyglobby@0.2.12: dependencies: - fdir: 6.4.4(picomatch@4.0.2) + fdir: 6.4.6(picomatch@4.0.2) picomatch: 4.0.2 tinyglobby@0.2.14: dependencies: - fdir: 6.4.4(picomatch@4.0.2) + fdir: 6.4.6(picomatch@4.0.2) picomatch: 4.0.2 tinypool@1.0.2: {} @@ -23094,7 +23243,24 @@ snapshots: vite@6.3.5(@types/node@18.19.115)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1): dependencies: esbuild: 0.25.4 - fdir: 6.4.4(picomatch@4.0.2) + fdir: 6.4.6(picomatch@4.0.2) + picomatch: 4.0.2 + postcss: 8.5.6 + rollup: 4.40.1 + tinyglobby: 0.2.14 + optionalDependencies: + '@types/node': 18.19.115 + fsevents: 2.3.3 + jiti: 2.4.2 + lightningcss: 1.30.1 + terser: 5.39.0 + tsx: 4.19.4 + yaml: 2.7.1 + + vite@7.0.0(@types/node@18.19.115)(jiti@2.4.2)(lightningcss@1.30.1)(terser@5.39.0)(tsx@4.19.4)(yaml@2.7.1): + dependencies: + esbuild: 0.25.4 + fdir: 6.4.6(picomatch@4.0.2) picomatch: 4.0.2 postcss: 8.5.6 rollup: 4.40.1 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index ace604d717..63b050e417 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -4,6 +4,8 @@ packages: - test - test/* - scripts/* + - examples/* + onlyBuiltDependencies: - '@mui/internal-babel-plugin-display-name' - '@mui/monorepo'