├── .browserslistrc ├── .circleci └── config.yml ├── .codesandbox ├── ci.json └── template │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.tsx │ ├── index.css │ ├── index.tsx │ └── react-app-env.d.ts │ └── tsconfig.json ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── 1.bug.md │ ├── 2.feature-request.md │ ├── 3.get-help.md │ └── 4.docs-feedback.md ├── PULL_REQUEST_TEMPLATE.md ├── codeql │ └── codeql-config.yml ├── dependabot.yml └── workflows │ ├── check-if-pr-has-label.yml │ ├── ci.yml │ ├── codeql.yml │ ├── ensure-triage-label.yml │ ├── fixed-issue.yml │ ├── maintenance.yml │ ├── mark-duplicate.yml │ ├── new-issue-triage.yml │ ├── no-response.yml │ ├── scorecards.yml │ ├── support-stackoverflow.yml │ └── vale-action.yml ├── .gitignore ├── .markdownlint-cli2.cjs ├── .npmrc ├── .vale.ini ├── .vscode ├── extensions.json └── settings.json ├── CHANGELOG.md ├── CHANGELOG.old.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── babel.config.js ├── codecov.yml ├── dangerfile.js ├── docs ├── .env ├── .link-check-errors.txt ├── README.md ├── next-env.d.ts ├── next.config.mjs ├── package.json ├── postcss.config.js ├── public │ ├── _headers │ ├── _redirects │ ├── robots.txt │ └── static │ │ ├── apple-touch-icon.png │ │ ├── error-codes.json │ │ ├── favicon-dev.ico │ │ ├── favicon-dev.svg │ │ ├── favicon.ico │ │ ├── favicon.svg │ │ └── logo.svg ├── reference │ └── generated │ │ ├── accordion-header.json │ │ ├── accordion-item.json │ │ ├── accordion-panel.json │ │ ├── accordion-root.json │ │ ├── accordion-trigger.json │ │ ├── alert-dialog-backdrop.json │ │ ├── alert-dialog-close.json │ │ ├── alert-dialog-description.json │ │ ├── alert-dialog-popup.json │ │ ├── alert-dialog-portal.json │ │ ├── alert-dialog-root.json │ │ ├── alert-dialog-title.json │ │ ├── alert-dialog-trigger.json │ │ ├── avatar-fallback.json │ │ ├── avatar-image.json │ │ ├── avatar-root.json │ │ ├── checkbox-group.json │ │ ├── checkbox-indicator.json │ │ ├── checkbox-root.json │ │ ├── collapsible-panel.json │ │ ├── collapsible-root.json │ │ ├── collapsible-trigger.json │ │ ├── context-menu-root.json │ │ ├── context-menu-trigger.json │ │ ├── dialog-backdrop.json │ │ ├── dialog-close.json │ │ ├── dialog-description.json │ │ ├── dialog-popup.json │ │ ├── dialog-portal.json │ │ ├── dialog-root.json │ │ ├── dialog-title.json │ │ ├── dialog-trigger.json │ │ ├── direction-provider.json │ │ ├── field-control.json │ │ ├── field-description.json │ │ ├── field-error.json │ │ ├── field-label.json │ │ ├── field-root.json │ │ ├── field-validity.json │ │ ├── fieldset-legend.json │ │ ├── fieldset-root.json │ │ ├── form.json │ │ ├── input.json │ │ ├── menu-arrow.json │ │ ├── menu-backdrop.json │ │ ├── menu-checkbox-item-indicator.json │ │ ├── menu-checkbox-item.json │ │ ├── menu-group-label.json │ │ ├── menu-group.json │ │ ├── menu-item.json │ │ ├── menu-popup.json │ │ ├── menu-portal.json │ │ ├── menu-positioner.json │ │ ├── menu-radio-group.json │ │ ├── menu-radio-item-indicator.json │ │ ├── menu-radio-item.json │ │ ├── menu-root.json │ │ ├── menu-submenu-trigger.json │ │ ├── menu-trigger.json │ │ ├── menubar.json │ │ ├── meter-indicator.json │ │ ├── meter-label.json │ │ ├── meter-root.json │ │ ├── meter-track.json │ │ ├── meter-value.json │ │ ├── navigation-menu-arrow.json │ │ ├── navigation-menu-backdrop.json │ │ ├── navigation-menu-content.json │ │ ├── navigation-menu-icon.json │ │ ├── navigation-menu-item.json │ │ ├── navigation-menu-link.json │ │ ├── navigation-menu-list.json │ │ ├── navigation-menu-popup.json │ │ ├── navigation-menu-portal.json │ │ ├── navigation-menu-positioner.json │ │ ├── navigation-menu-root.json │ │ ├── navigation-menu-trigger.json │ │ ├── navigation-menu-viewport.json │ │ ├── no-ssr.json │ │ ├── number-field-decrement.json │ │ ├── number-field-group.json │ │ ├── number-field-increment.json │ │ ├── number-field-input.json │ │ ├── number-field-root.json │ │ ├── number-field-scrub-area-cursor.json │ │ ├── number-field-scrub-area.json │ │ ├── popover-arrow.json │ │ ├── popover-backdrop.json │ │ ├── popover-close.json │ │ ├── popover-description.json │ │ ├── popover-popup.json │ │ ├── popover-portal.json │ │ ├── popover-positioner.json │ │ ├── popover-root.json │ │ ├── popover-title.json │ │ ├── popover-trigger.json │ │ ├── preview-card-arrow.json │ │ ├── preview-card-backdrop.json │ │ ├── preview-card-popup.json │ │ ├── preview-card-portal.json │ │ ├── preview-card-positioner.json │ │ ├── preview-card-root.json │ │ ├── preview-card-trigger.json │ │ ├── progress-indicator.json │ │ ├── progress-label.json │ │ ├── progress-root.json │ │ ├── progress-track.json │ │ ├── progress-value.json │ │ ├── radio-group.json │ │ ├── radio-indicator.json │ │ ├── radio-root.json │ │ ├── scroll-area-content.json │ │ ├── scroll-area-corner.json │ │ ├── scroll-area-root.json │ │ ├── scroll-area-scrollbar.json │ │ ├── scroll-area-thumb.json │ │ ├── scroll-area-viewport.json │ │ ├── select-arrow.json │ │ ├── select-backdrop.json │ │ ├── select-group-label.json │ │ ├── select-group.json │ │ ├── select-icon.json │ │ ├── select-item-indicator.json │ │ ├── select-item-text.json │ │ ├── select-item.json │ │ ├── select-popup.json │ │ ├── select-portal.json │ │ ├── select-positioner.json │ │ ├── select-root.json │ │ ├── select-scroll-down-arrow.json │ │ ├── select-scroll-up-arrow.json │ │ ├── select-trigger.json │ │ ├── select-value.json │ │ ├── separator.json │ │ ├── slider-control.json │ │ ├── slider-indicator.json │ │ ├── slider-root.json │ │ ├── slider-thumb.json │ │ ├── slider-track.json │ │ ├── slider-value.json │ │ ├── switch-root.json │ │ ├── switch-thumb.json │ │ ├── tabs-indicator.json │ │ ├── tabs-list.json │ │ ├── tabs-panel.json │ │ ├── tabs-root.json │ │ ├── tabs-tab.json │ │ ├── toast-action.json │ │ ├── toast-close.json │ │ ├── toast-description.json │ │ ├── toast-portal.json │ │ ├── toast-provider.json │ │ ├── toast-root.json │ │ ├── toast-title.json │ │ ├── toast-viewport.json │ │ ├── toggle-group.json │ │ ├── toggle.json │ │ ├── toolbar-button.json │ │ ├── toolbar-group.json │ │ ├── toolbar-input.json │ │ ├── toolbar-link.json │ │ ├── toolbar-root.json │ │ ├── toolbar-separator.json │ │ ├── tooltip-arrow.json │ │ ├── tooltip-popup.json │ │ ├── tooltip-portal.json │ │ ├── tooltip-positioner.json │ │ ├── tooltip-provider.json │ │ ├── tooltip-root.json │ │ ├── tooltip-trigger.json │ │ └── use-render.json ├── scripts │ ├── playground.template.tsx │ ├── rehypeExtractLinkUrls.mts │ └── reportBrokenLinks.mts ├── src │ ├── app │ │ ├── (private) │ │ │ ├── experiments │ │ │ │ ├── [...slug] │ │ │ │ │ └── page.tsx │ │ │ │ ├── accordion │ │ │ │ │ ├── animations.module.css │ │ │ │ │ ├── animations.tsx │ │ │ │ │ ├── horizontal.module.css │ │ │ │ │ ├── horizontal.tsx │ │ │ │ │ ├── transitions.module.css │ │ │ │ │ └── transitions.tsx │ │ │ │ ├── anchor-positioning.module.css │ │ │ │ ├── anchor-positioning.tsx │ │ │ │ ├── anchor-side-animations.module.css │ │ │ │ ├── anchor-side-animations.tsx │ │ │ │ ├── collapsible │ │ │ │ │ ├── _icons.tsx │ │ │ │ │ ├── animate-presence.tsx │ │ │ │ │ ├── animations.module.css │ │ │ │ │ ├── animations.tsx │ │ │ │ │ ├── collapsible.module.css │ │ │ │ │ ├── motion.module.css │ │ │ │ │ ├── plain.tsx │ │ │ │ │ ├── transitions.module.css │ │ │ │ │ └── transitions.tsx │ │ │ │ ├── dialog.module.css │ │ │ │ ├── dialog.tsx │ │ │ │ ├── form.module.css │ │ │ │ ├── form.tsx │ │ │ │ ├── long-select.module.css │ │ │ │ ├── long-select.tsx │ │ │ │ ├── menu │ │ │ │ │ ├── menu-anchor-el.tsx │ │ │ │ │ ├── menu-anchor-ref.tsx │ │ │ │ │ ├── menu-fully-featured.tsx │ │ │ │ │ ├── menu-horizontal.tsx │ │ │ │ │ ├── menu-nested.tsx │ │ │ │ │ ├── menu-rtl.tsx │ │ │ │ │ └── menu.module.css │ │ │ │ ├── menubar.module.css │ │ │ │ ├── menubar.tsx │ │ │ │ ├── meter.module.css │ │ │ │ ├── meter.tsx │ │ │ │ ├── mobile-scroll-lock.module.css │ │ │ │ ├── mobile-scroll-lock.tsx │ │ │ │ ├── modality.tsx │ │ │ │ ├── motion.tsx │ │ │ │ ├── page.tsx │ │ │ │ ├── popups │ │ │ │ │ ├── popups-in-popups.tsx │ │ │ │ │ ├── popups-transform-origin.module.css │ │ │ │ │ └── popups-transform-origin.tsx │ │ │ │ ├── rtl.module.css │ │ │ │ ├── rtl.tsx │ │ │ │ ├── scroll-area │ │ │ │ │ ├── inside-select.module.css │ │ │ │ │ ├── inside-select.tsx │ │ │ │ │ ├── scroll-area-inset.module.css │ │ │ │ │ ├── scroll-area-inset.tsx │ │ │ │ │ ├── scroll-area-slight.module.css │ │ │ │ │ ├── scroll-area-slight.tsx │ │ │ │ │ └── scroll-area.tsx │ │ │ │ ├── scroll-lock.tsx │ │ │ │ ├── select-perf.module.css │ │ │ │ ├── select-perf.tsx │ │ │ │ ├── slider │ │ │ │ │ ├── form.tsx │ │ │ │ │ ├── slider.module.css │ │ │ │ │ ├── slider.tsx │ │ │ │ │ ├── small.module.css │ │ │ │ │ └── vertical.module.css │ │ │ │ ├── tabs.module.css │ │ │ │ ├── tabs.tsx │ │ │ │ ├── toast.module.css │ │ │ │ ├── toast.tsx │ │ │ │ ├── toggle-group.tsx │ │ │ │ ├── toggle.module.css │ │ │ │ ├── toolbar │ │ │ │ │ ├── _icons.tsx │ │ │ │ │ ├── basic.tsx │ │ │ │ │ ├── slider.module.css │ │ │ │ │ ├── text-editor.tsx │ │ │ │ │ ├── toolbar.module.css │ │ │ │ │ ├── triggers.module.css │ │ │ │ │ └── triggers.tsx │ │ │ │ └── tooltip.tsx │ │ │ ├── layout.css │ │ │ ├── layout.tsx │ │ │ └── playground │ │ │ │ └── [slug] │ │ │ │ └── page.tsx │ │ ├── (public) │ │ │ ├── (content) │ │ │ │ ├── layout.css │ │ │ │ ├── layout.tsx │ │ │ │ ├── react │ │ │ │ │ ├── components │ │ │ │ │ │ ├── accordion │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── alert-dialog │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── avatar │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── checkbox-group │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ ├── form │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ │ │ ├── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── nested │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ │ │ └── parent │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── checkbox │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── collapsible │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── context-menu │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ ├── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ └── submenu │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── dialog │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ ├── close-confirmation │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ └── nested │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── field │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── fieldset │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── form │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ ├── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ └── zod │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── input │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── menu │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ ├── checkbox-items │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── group-labels │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── open-on-hover │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── radio-items │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ └── submenu │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── menubar │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── meter │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── navigation-menu │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ ├── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ └── nested │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── number-field │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── popover │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── preview-card │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── progress │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── radio │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── scroll-area │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── select │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── separator │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── slider │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ ├── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ └── range-slider │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── switch │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── tabs │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── toast │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ ├── custom │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ │ │ ├── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── position │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── promise │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ │ │ └── undo │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── toggle-group │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── toggle │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── toolbar │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ └── tooltip │ │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── handbook │ │ │ │ │ │ ├── animation │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── composition │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ └── styling │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ ├── overview │ │ │ │ │ │ ├── about │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── accessibility │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ ├── quick-start │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ └── releases │ │ │ │ │ │ │ └── page.mdx │ │ │ │ │ └── utils │ │ │ │ │ │ ├── direction-provider │ │ │ │ │ │ ├── demos │ │ │ │ │ │ │ └── hero │ │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ │ │ └── tailwind │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ └── page.mdx │ │ │ │ │ │ └── use-render │ │ │ │ │ │ ├── demos │ │ │ │ │ │ ├── render-callback │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ └── render │ │ │ │ │ │ │ ├── css-modules │ │ │ │ │ │ │ ├── index.module.css │ │ │ │ │ │ │ └── index.tsx │ │ │ │ │ │ │ └── index.ts │ │ │ │ │ │ └── page.mdx │ │ │ │ └── test │ │ │ │ │ └── quick-nav │ │ │ │ │ └── page.mdx │ │ │ ├── careers │ │ │ │ └── design-engineer │ │ │ │ │ └── page.tsx │ │ │ ├── layout.css │ │ │ ├── layout.tsx │ │ │ ├── opengraph-image.png │ │ │ ├── page.css │ │ │ └── page.tsx │ │ ├── Favicons.tsx │ │ ├── layout.tsx │ │ ├── not-found.css │ │ └── not-found.tsx │ ├── blocks │ │ ├── Demo │ │ │ ├── DemoContext.ts │ │ │ ├── DemoPlayground.tsx │ │ │ ├── DemoRoot.tsx │ │ │ ├── DemoSourceBrowser.tsx │ │ │ ├── DemoSourceCopy.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── GoogleAnalytics.tsx │ │ ├── GoogleTagManager.tsx │ │ ├── PackageManagerSnippet │ │ │ ├── PackageManagerSnippetCode.tsx │ │ │ ├── PackageManagerSnippetProvider.tsx │ │ │ ├── PackageManagerSnippetRoot.tsx │ │ │ └── index.ts │ │ ├── README.txt │ │ └── createCodeSandbox │ │ │ ├── CreateReactApp.ts │ │ │ ├── addHiddenInput.ts │ │ │ ├── createCodeSandbox.ts │ │ │ ├── createStackBlitzProject.ts │ │ │ ├── flattenRelativeImports.ts │ │ │ ├── packDemo.test.ts │ │ │ └── packDemo.ts │ ├── breakpoints.css │ ├── components │ │ ├── Code.css │ │ ├── Code.tsx │ │ ├── CodeBlock.css │ │ ├── CodeBlock.tsx │ │ ├── Demo │ │ │ ├── CodeSandboxLink.tsx │ │ │ ├── Demo.css │ │ │ ├── Demo.tsx │ │ │ ├── DemoCodeBlock.tsx │ │ │ ├── DemoErrorFallback.tsx │ │ │ ├── DemoFileSelector.tsx │ │ │ ├── DemoLoader.tsx │ │ │ ├── DemoPlayground.tsx │ │ │ ├── DemoVariantSelector.tsx │ │ │ ├── DemoVariantSelectorProvider.tsx │ │ │ └── rehypeDemos.mjs │ │ ├── DocsProviders.tsx │ │ ├── Experiments │ │ │ ├── Button.module.css │ │ │ ├── Button.tsx │ │ │ ├── EditPanel.tsx │ │ │ ├── ExperimentRoot.module.css │ │ │ ├── ExperimentRoot.tsx │ │ │ ├── ExperimentsList.module.css │ │ │ ├── ExperimentsList.tsx │ │ │ ├── HideSidebar.tsx │ │ │ ├── Input.module.css │ │ │ ├── Input.tsx │ │ │ ├── SandboxLink.tsx │ │ │ ├── Select.module.css │ │ │ ├── Select.tsx │ │ │ ├── SettingsPanel.module.css │ │ │ ├── SettingsPanel.tsx │ │ │ ├── ShowSidebar.module.css │ │ │ ├── ShowSidebar.tsx │ │ │ ├── Sidebar.module.css │ │ │ ├── Sidebar.tsx │ │ │ ├── Switch.module.css │ │ │ ├── Switch.tsx │ │ │ ├── Tooltip.module.css │ │ │ └── Tooltip.tsx │ │ ├── GhostButton.css │ │ ├── GhostButton.tsx │ │ ├── GoogleAnalytics.tsx │ │ ├── Header.css │ │ ├── Header.tsx │ │ ├── HeadingLink.css │ │ ├── HeadingLink.tsx │ │ ├── Kbd │ │ │ ├── Kbd.css │ │ │ ├── Kbd.tsx │ │ │ └── rehypeKbd.mjs │ │ ├── Link.css │ │ ├── Link.tsx │ │ ├── Logo.tsx │ │ ├── MobileNav.css │ │ ├── MobileNav.tsx │ │ ├── Popup.css │ │ ├── Popup.tsx │ │ ├── QuickNav │ │ │ ├── QuickNav.css │ │ │ ├── QuickNav.tsx │ │ │ ├── rehypeQuickNav.mjs │ │ │ └── rehypeSlug.mjs │ │ ├── ReferenceTable │ │ │ ├── AttributesReferenceTable.tsx │ │ │ ├── CssVariablesReferenceTable.tsx │ │ │ ├── PropsReferenceTable.tsx │ │ │ ├── ReferenceTablePopover.tsx │ │ │ ├── rehypeReference.mjs │ │ │ └── types.ts │ │ ├── ScrollArea.css │ │ ├── ScrollArea.tsx │ │ ├── Select.css │ │ ├── Select.tsx │ │ ├── SideNav.css │ │ ├── SideNav.tsx │ │ ├── SkipNav.css │ │ ├── SkipNav.tsx │ │ ├── Subtitle │ │ │ ├── Subtitle.css │ │ │ ├── Subtitle.tsx │ │ │ └── rehypeSubtitle.mjs │ │ ├── Table.css │ │ ├── Table.tsx │ │ └── TableCode.tsx │ ├── demo-theme.css │ ├── fonts │ │ ├── bold.woff2 │ │ ├── index.css │ │ ├── medium.woff2 │ │ └── regular.woff2 │ ├── icons │ │ ├── ArrowRightIcon.tsx │ │ ├── CheckIcon.tsx │ │ ├── ChevronDownIcon.tsx │ │ ├── CopyIcon.tsx │ │ ├── ExternalLinkIcon.tsx │ │ ├── GitHubIcon.tsx │ │ ├── NpmIcon.tsx │ │ └── ThickCheckIcon.tsx │ ├── mdx-components.tsx │ ├── mdx │ │ ├── createHast.mjs │ │ ├── createMdxComponent.ts │ │ └── createMdxElement.mjs │ ├── nav.ts │ ├── styles.css │ ├── syntax-highlighting │ │ ├── index.css │ │ ├── index.mjs │ │ ├── index.ts │ │ ├── rehypeEmptyLines.mjs │ │ ├── rehypeInlineCode.mjs │ │ ├── rehypeJsxExpressions.mjs │ │ └── rehypePrettierIgnore.mjs │ └── utils │ │ ├── camelToSentenceCase.ts │ │ └── getChildrenText.ts ├── tsconfig.json ├── types.d.ts └── vitest.config.mts ├── lerna.json ├── netlify.toml ├── netlify └── functions │ └── deploy-succeeded.js ├── nx.json ├── package.json ├── packages ├── eslint-plugin-material-ui │ ├── package.json │ └── src │ │ └── index.js └── react │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── scripts │ └── createPackageManifest.mts │ ├── src │ ├── accordion │ │ ├── header │ │ │ ├── AccordionHeader.test.tsx │ │ │ ├── AccordionHeader.tsx │ │ │ └── AccordionHeaderDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── item │ │ │ ├── AccordionItem.test.tsx │ │ │ ├── AccordionItem.tsx │ │ │ ├── AccordionItemContext.ts │ │ │ ├── AccordionItemDataAttributes.ts │ │ │ └── styleHooks.ts │ │ ├── panel │ │ │ ├── AccordionPanel.test.tsx │ │ │ ├── AccordionPanel.tsx │ │ │ ├── AccordionPanelCssVars.ts │ │ │ └── AccordionPanelDataAttributes.ts │ │ ├── root │ │ │ ├── AccordionRoot.test.tsx │ │ │ ├── AccordionRoot.tsx │ │ │ ├── AccordionRootContext.ts │ │ │ └── AccordionRootDataAttributes.ts │ │ └── trigger │ │ │ ├── AccordionTrigger.test.tsx │ │ │ ├── AccordionTrigger.tsx │ │ │ └── AccordionTriggerDataAttributes.ts │ ├── alert-dialog │ │ ├── backdrop │ │ │ ├── AlertDialogBackdrop.test.tsx │ │ │ ├── AlertDialogBackdrop.tsx │ │ │ └── AlertDialogBackdropDataAttributes.ts │ │ ├── close │ │ │ ├── AlertDialogClose.test.tsx │ │ │ ├── AlertDialogClose.tsx │ │ │ └── AlertDialogCloseDataAttributes.ts │ │ ├── description │ │ │ ├── AlertDialogDescription.test.tsx │ │ │ └── AlertDialogDescription.tsx │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── popup │ │ │ ├── AlertDialogPopup.test.tsx │ │ │ ├── AlertDialogPopup.tsx │ │ │ ├── AlertDialogPopupCssVars.ts │ │ │ └── AlertDialogPopupDataAttributes.ts │ │ ├── portal │ │ │ ├── AlertDialogPortal.tsx │ │ │ └── AlertDialogPortalContext.ts │ │ ├── root │ │ │ ├── AlertDialogRoot.test.tsx │ │ │ ├── AlertDialogRoot.tsx │ │ │ └── AlertDialogRootContext.ts │ │ ├── title │ │ │ ├── AlertDialogTitle.test.tsx │ │ │ └── AlertDialogTitle.tsx │ │ └── trigger │ │ │ ├── AlertDialogTrigger.test.tsx │ │ │ ├── AlertDialogTrigger.tsx │ │ │ └── AlertDialogTriggerDataAttributes.ts │ ├── avatar │ │ ├── fallback │ │ │ ├── AvatarFallback.test.tsx │ │ │ └── AvatarFallback.tsx │ │ ├── image │ │ │ ├── AvatarImage.test.tsx │ │ │ ├── AvatarImage.tsx │ │ │ └── useImageLoadingStatus.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ └── root │ │ │ ├── AvatarRoot.test.tsx │ │ │ ├── AvatarRoot.tsx │ │ │ ├── AvatarRootContext.ts │ │ │ └── styleHooks.ts │ ├── checkbox-group │ │ ├── CheckboxGroup.test.tsx │ │ ├── CheckboxGroup.tsx │ │ ├── CheckboxGroupContext.ts │ │ ├── CheckboxGroupDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── useCheckboxGroupParent.test.tsx │ │ └── useCheckboxGroupParent.ts │ ├── checkbox │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── indicator │ │ │ ├── CheckboxIndicator.test.tsx │ │ │ ├── CheckboxIndicator.tsx │ │ │ └── CheckboxIndicatorDataAttributes.ts │ │ ├── root │ │ │ ├── CheckboxRoot.test.tsx │ │ │ ├── CheckboxRoot.tsx │ │ │ ├── CheckboxRootContext.ts │ │ │ └── CheckboxRootDataAttributes.ts │ │ └── utils │ │ │ └── useCustomStyleHookMapping.ts │ ├── collapsible │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── panel │ │ │ ├── CollapsiblePanel.test.tsx │ │ │ ├── CollapsiblePanel.tsx │ │ │ ├── CollapsiblePanelCssVars.ts │ │ │ ├── CollapsiblePanelDataAttributes.ts │ │ │ └── useCollapsiblePanel.ts │ │ ├── root │ │ │ ├── CollapsibleRoot.test.tsx │ │ │ ├── CollapsibleRoot.tsx │ │ │ ├── CollapsibleRootContext.ts │ │ │ ├── styleHooks.ts │ │ │ └── useCollapsibleRoot.ts │ │ └── trigger │ │ │ ├── CollapsibleTrigger.test.tsx │ │ │ ├── CollapsibleTrigger.tsx │ │ │ └── CollapsibleTriggerDataAttributes.ts │ ├── composite │ │ ├── composite.ts │ │ ├── constants.ts │ │ ├── item │ │ │ ├── CompositeItem.tsx │ │ │ └── useCompositeItem.ts │ │ ├── list │ │ │ ├── CompositeList.tsx │ │ │ ├── CompositeListContext.ts │ │ │ └── useCompositeListItem.ts │ │ └── root │ │ │ ├── CompositeRoot.test.tsx │ │ │ ├── CompositeRoot.tsx │ │ │ ├── CompositeRootContext.ts │ │ │ └── useCompositeRoot.ts │ ├── context-menu │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── root │ │ │ ├── ContextMenuRoot.tsx │ │ │ └── ContextMenuRootContext.ts │ │ └── trigger │ │ │ ├── ContextMenuTrigger.test.tsx │ │ │ └── ContextMenuTrigger.tsx │ ├── dialog │ │ ├── backdrop │ │ │ ├── DialogBackdrop.test.tsx │ │ │ ├── DialogBackdrop.tsx │ │ │ └── DialogBackdropDataAttributes.ts │ │ ├── close │ │ │ ├── DialogClose.test.tsx │ │ │ ├── DialogClose.tsx │ │ │ ├── DialogCloseDataAttributes.ts │ │ │ └── useDialogClose.ts │ │ ├── description │ │ │ ├── DialogDescription.test.tsx │ │ │ └── DialogDescription.tsx │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── popup │ │ │ ├── DialogPopup.test.tsx │ │ │ ├── DialogPopup.tsx │ │ │ ├── DialogPopupCssVars.ts │ │ │ ├── DialogPopupDataAttributes.ts │ │ │ └── useDialogPopup.tsx │ │ ├── portal │ │ │ ├── DialogPortal.tsx │ │ │ └── DialogPortalContext.ts │ │ ├── root │ │ │ ├── DialogRoot.test.tsx │ │ │ ├── DialogRoot.tsx │ │ │ ├── DialogRootContext.ts │ │ │ └── useDialogRoot.ts │ │ ├── title │ │ │ ├── DialogTitle.test.tsx │ │ │ └── DialogTitle.tsx │ │ ├── trigger │ │ │ ├── DialogTrigger.test.tsx │ │ │ ├── DialogTrigger.tsx │ │ │ └── DialogTriggerDataAttributes.ts │ │ └── utils │ │ │ └── DialogContext.ts │ ├── direction-provider │ │ ├── DirectionContext.tsx │ │ ├── DirectionProvider.tsx │ │ ├── index.parts.ts │ │ └── index.ts │ ├── field │ │ ├── control │ │ │ ├── FieldControl.test.tsx │ │ │ ├── FieldControl.tsx │ │ │ ├── FieldControlDataAttributes.ts │ │ │ └── useFieldControlValidation.ts │ │ ├── description │ │ │ ├── FieldDescription.test.tsx │ │ │ ├── FieldDescription.tsx │ │ │ └── FieldDescriptionDataAttributes.ts │ │ ├── error │ │ │ ├── FieldError.test.tsx │ │ │ ├── FieldError.tsx │ │ │ └── FieldErrorDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── label │ │ │ ├── FieldLabel.test.tsx │ │ │ ├── FieldLabel.tsx │ │ │ └── FieldLabelDataAttributes.ts │ │ ├── root │ │ │ ├── FieldRoot.test.tsx │ │ │ ├── FieldRoot.tsx │ │ │ ├── FieldRootContext.ts │ │ │ └── FieldRootDataAttributes.ts │ │ ├── useField.ts │ │ ├── utils │ │ │ ├── constants.ts │ │ │ └── getCombinedFieldValidityData.ts │ │ └── validity │ │ │ ├── FieldValidity.test.tsx │ │ │ └── FieldValidity.tsx │ ├── fieldset │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── legend │ │ │ ├── FieldsetLegend.test.tsx │ │ │ ├── FieldsetLegend.tsx │ │ │ └── useFieldsetLegend.ts │ │ └── root │ │ │ ├── FieldsetRoot.test.tsx │ │ │ ├── FieldsetRoot.tsx │ │ │ └── FieldsetRootContext.ts │ ├── form │ │ ├── Form.test.tsx │ │ ├── Form.tsx │ │ ├── FormContext.ts │ │ └── index.ts │ ├── global.d.ts │ ├── index.test.ts │ ├── index.ts │ ├── input │ │ ├── Input.test.tsx │ │ ├── Input.tsx │ │ ├── InputDataAttributes.ts │ │ └── index.ts │ ├── menu │ │ ├── arrow │ │ │ ├── MenuArrow.test.tsx │ │ │ ├── MenuArrow.tsx │ │ │ └── MenuArrowDataAttributes.ts │ │ ├── backdrop │ │ │ ├── MenuBackdrop.test.tsx │ │ │ ├── MenuBackdrop.tsx │ │ │ └── MenuBackdropDataAttributes.ts │ │ ├── checkbox-item-indicator │ │ │ ├── MenuCheckboxItemIndicator.test.tsx │ │ │ ├── MenuCheckboxItemIndicator.tsx │ │ │ └── MenuCheckboxItemIndicatorDataAttributes.ts │ │ ├── checkbox-item │ │ │ ├── MenuCheckboxItem.test.tsx │ │ │ ├── MenuCheckboxItem.tsx │ │ │ ├── MenuCheckboxItemContext.ts │ │ │ └── MenuCheckboxItemDataAttributes.ts │ │ ├── group-label │ │ │ ├── MenuGroupLabel.test.tsx │ │ │ └── MenuGroupLabel.tsx │ │ ├── group │ │ │ ├── MenuGroup.test.tsx │ │ │ ├── MenuGroup.tsx │ │ │ └── MenuGroupContext.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── item │ │ │ ├── MenuItem.test.tsx │ │ │ ├── MenuItem.tsx │ │ │ ├── MenuItemDataAttributes.ts │ │ │ └── useMenuItem.ts │ │ ├── popup │ │ │ ├── MenuPopup.test.tsx │ │ │ ├── MenuPopup.tsx │ │ │ └── MenuPopupDataAttributes.ts │ │ ├── portal │ │ │ ├── MenuPortal.tsx │ │ │ └── MenuPortalContext.ts │ │ ├── positioner │ │ │ ├── MenuPositioner.spec.tsx │ │ │ ├── MenuPositioner.test.tsx │ │ │ ├── MenuPositioner.tsx │ │ │ ├── MenuPositionerContext.ts │ │ │ ├── MenuPositionerCssVars.ts │ │ │ └── MenuPositionerDataAttributes.ts │ │ ├── radio-group │ │ │ ├── MenuRadioGroup.test.tsx │ │ │ ├── MenuRadioGroup.tsx │ │ │ └── MenuRadioGroupContext.ts │ │ ├── radio-item-indicator │ │ │ ├── MenuRadioItemIndicator.test.tsx │ │ │ ├── MenuRadioItemIndicator.tsx │ │ │ └── MenuRadioItemIndicatorDataAttributes.ts │ │ ├── radio-item │ │ │ ├── MenuRadioItem.test.tsx │ │ │ ├── MenuRadioItem.tsx │ │ │ ├── MenuRadioItemContext.ts │ │ │ └── MenuRadioItemDataAttributes.ts │ │ ├── root │ │ │ ├── MenuRoot.test.tsx │ │ │ ├── MenuRoot.tsx │ │ │ └── MenuRootContext.ts │ │ ├── submenu-trigger │ │ │ ├── MenuSubmenuTrigger.test.tsx │ │ │ ├── MenuSubmenuTrigger.tsx │ │ │ └── MenuSubmenuTriggerDataAttributes.ts │ │ ├── trigger │ │ │ ├── MenuTrigger.test.tsx │ │ │ ├── MenuTrigger.tsx │ │ │ └── MenuTriggerDataAttributes.ts │ │ └── utils │ │ │ └── styleHookMapping.ts │ ├── menubar │ │ ├── Menubar.test.tsx │ │ ├── Menubar.tsx │ │ ├── MenubarContext.ts │ │ ├── MenubarDataAttributes.ts │ │ └── index.ts │ ├── merge-props │ │ ├── index.ts │ │ ├── mergeProps.test.ts │ │ └── mergeProps.ts │ ├── meter │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── indicator │ │ │ ├── MeterIndicator.test.tsx │ │ │ └── MeterIndicator.tsx │ │ ├── label │ │ │ ├── MeterLabel.test.tsx │ │ │ └── MeterLabel.tsx │ │ ├── root │ │ │ ├── MeterRoot.test.tsx │ │ │ ├── MeterRoot.tsx │ │ │ └── MeterRootContext.ts │ │ ├── track │ │ │ ├── MeterTrack.test.tsx │ │ │ └── MeterTrack.tsx │ │ └── value │ │ │ ├── MeterValue.test.tsx │ │ │ └── MeterValue.tsx │ ├── navigation-menu │ │ ├── arrow │ │ │ ├── NavigationMenuArrow.test.tsx │ │ │ ├── NavigationMenuArrow.tsx │ │ │ └── NavigationMenuArrowDataAttributes.ts │ │ ├── backdrop │ │ │ ├── NavigationMenuBackdrop.test.tsx │ │ │ ├── NavigationMenuBackdrop.tsx │ │ │ └── NavigationMenuBackdropDataAttributes.ts │ │ ├── content │ │ │ ├── NavigationMenuContent.test.tsx │ │ │ ├── NavigationMenuContent.tsx │ │ │ └── NavigationMenuContentDataAttributes.ts │ │ ├── icon │ │ │ ├── NavigationMenuIcon.test.tsx │ │ │ └── NavigationMenuIcon.tsx │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── item │ │ │ ├── NavigationMenuItem.test.tsx │ │ │ ├── NavigationMenuItem.tsx │ │ │ └── NavigationMenuItemContext.ts │ │ ├── link │ │ │ ├── NavigationMenuLink.test.tsx │ │ │ └── NavigationMenuLink.tsx │ │ ├── list │ │ │ ├── NavigationMenuList.test.tsx │ │ │ └── NavigationMenuList.tsx │ │ ├── popup │ │ │ ├── NavigationMenuPopup.test.tsx │ │ │ ├── NavigationMenuPopup.tsx │ │ │ ├── NavigationMenuPopupCssVars.ts │ │ │ └── NavigationMenuPopupDataAttributes.ts │ │ ├── portal │ │ │ ├── NavigationMenuPortal.tsx │ │ │ └── NavigationMenuPortalContext.ts │ │ ├── positioner │ │ │ ├── NavigationMenuPositioner.test.tsx │ │ │ ├── NavigationMenuPositioner.tsx │ │ │ ├── NavigationMenuPositionerContext.ts │ │ │ ├── NavigationMenuPositionerCssVars.ts │ │ │ └── NavigationPositionerDataAttributes.ts │ │ ├── root │ │ │ ├── NavigationMenuRoot.test.tsx │ │ │ ├── NavigationMenuRoot.tsx │ │ │ └── NavigationMenuRootContext.ts │ │ ├── trigger │ │ │ ├── NavigationMenuTrigger.test.tsx │ │ │ ├── NavigationMenuTrigger.tsx │ │ │ └── NavigationMenuTriggerDataAttributes.ts │ │ ├── utils │ │ │ ├── constants.ts │ │ │ └── isOutsideMenuEvent.ts │ │ └── viewport │ │ │ ├── NavigationMenuViewport.test.tsx │ │ │ └── NavigationMenuViewport.tsx │ ├── number-field │ │ ├── decrement │ │ │ ├── NumberFieldDecrement.test.tsx │ │ │ ├── NumberFieldDecrement.tsx │ │ │ └── NumberFieldDecrementDataAttributes.ts │ │ ├── group │ │ │ ├── NumberFieldGroup.test.tsx │ │ │ ├── NumberFieldGroup.tsx │ │ │ └── NumberFieldGroupDataAttributes.ts │ │ ├── increment │ │ │ ├── NumberFieldIncrement.test.tsx │ │ │ ├── NumberFieldIncrement.tsx │ │ │ └── NumberFieldIncrementDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── input │ │ │ ├── NumberFieldInput.test.tsx │ │ │ ├── NumberFieldInput.tsx │ │ │ └── NumberFieldInputDataAttributes.ts │ │ ├── root │ │ │ ├── NumberFieldRoot.test.tsx │ │ │ ├── NumberFieldRoot.tsx │ │ │ ├── NumberFieldRootContext.ts │ │ │ ├── NumberFieldRootDataAttributes.ts │ │ │ └── useNumberFieldButton.ts │ │ ├── scrub-area-cursor │ │ │ ├── NumberFieldScrubAreaCursor.test.tsx │ │ │ ├── NumberFieldScrubAreaCursor.tsx │ │ │ └── NumberFieldScrubAreaCursorDataAttributes.ts │ │ ├── scrub-area │ │ │ ├── NumberFieldScrubArea.test.tsx │ │ │ ├── NumberFieldScrubArea.tsx │ │ │ ├── NumberFieldScrubAreaContext.ts │ │ │ └── NumberFieldScrubAreaDataAttributes.ts │ │ └── utils │ │ │ ├── constants.ts │ │ │ ├── getViewportRect.ts │ │ │ ├── parse.test.ts │ │ │ ├── parse.ts │ │ │ ├── styleHooks.ts │ │ │ ├── subscribeToVisualViewportResize.ts │ │ │ ├── types.ts │ │ │ ├── validate.test.ts │ │ │ └── validate.ts │ ├── popover │ │ ├── arrow │ │ │ ├── PopoverArrow.test.tsx │ │ │ ├── PopoverArrow.tsx │ │ │ └── PopoverArrowDataAttributes.ts │ │ ├── backdrop │ │ │ ├── PopoverBackdrop.test.tsx │ │ │ ├── PopoverBackdrop.tsx │ │ │ └── PopoverBackdropDataAttributes.ts │ │ ├── close │ │ │ ├── PopoverClose.test.tsx │ │ │ └── PopoverClose.tsx │ │ ├── description │ │ │ ├── PopoverDescription.test.tsx │ │ │ └── PopoverDescription.tsx │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── popup │ │ │ ├── PopoverPopup.test.tsx │ │ │ ├── PopoverPopup.tsx │ │ │ ├── PopoverPopupDataAttributes.ts │ │ │ └── usePopoverPopup.ts │ │ ├── portal │ │ │ ├── PopoverPortal.tsx │ │ │ └── PopoverPortalContext.ts │ │ ├── positioner │ │ │ ├── PopoverPositioner.spec.tsx │ │ │ ├── PopoverPositioner.test.tsx │ │ │ ├── PopoverPositioner.tsx │ │ │ ├── PopoverPositionerContext.ts │ │ │ ├── PopoverPositionerCssVars.ts │ │ │ ├── PopoverPositionerDataAttributes.ts │ │ │ └── usePopoverPositioner.tsx │ │ ├── root │ │ │ ├── PopoverRoot.test.tsx │ │ │ ├── PopoverRoot.tsx │ │ │ └── PopoverRootContext.ts │ │ ├── title │ │ │ ├── PopoverTitle.test.tsx │ │ │ ├── PopoverTitle.tsx │ │ │ └── usePopoverTitle.ts │ │ ├── trigger │ │ │ ├── PopoverTrigger.test.tsx │ │ │ ├── PopoverTrigger.tsx │ │ │ └── PopoverTriggerDataAttributes.ts │ │ └── utils │ │ │ └── constants.ts │ ├── preview-card │ │ ├── arrow │ │ │ ├── PreviewCardArrow.test.tsx │ │ │ ├── PreviewCardArrow.tsx │ │ │ └── PreviewCardArrowDataAttributes.ts │ │ ├── backdrop │ │ │ ├── PreviewCardBackdrop.test.tsx │ │ │ ├── PreviewCardBackdrop.tsx │ │ │ └── PreviewCardBackdropDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── popup │ │ │ ├── PreviewCardPopup.test.tsx │ │ │ ├── PreviewCardPopup.tsx │ │ │ ├── PreviewCardPopupDataAttributes.ts │ │ │ └── usePreviewCardPopup.ts │ │ ├── portal │ │ │ ├── PreviewCardPortal.tsx │ │ │ └── PreviewCardPortalContext.ts │ │ ├── positioner │ │ │ ├── PreviewCardPositioner.spec.tsx │ │ │ ├── PreviewCardPositioner.test.tsx │ │ │ ├── PreviewCardPositioner.tsx │ │ │ ├── PreviewCardPositionerContext.ts │ │ │ ├── PreviewCardPositionerCssVars.ts │ │ │ ├── PreviewCardPositionerDataAttributes.ts │ │ │ └── usePreviewCardPositioner.ts │ │ ├── root │ │ │ ├── PreviewCardContext.ts │ │ │ ├── PreviewCardRoot.test.tsx │ │ │ ├── PreviewCardRoot.tsx │ │ │ └── usePreviewCardRoot.ts │ │ ├── trigger │ │ │ ├── PreviewCardTrigger.test.tsx │ │ │ ├── PreviewCardTrigger.tsx │ │ │ └── PreviewCardTriggerDataAttributes.ts │ │ └── utils │ │ │ └── constants.ts │ ├── progress │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── indicator │ │ │ ├── ProgressIndicator.test.tsx │ │ │ ├── ProgressIndicator.tsx │ │ │ └── ProgressIndicatorDataAttributes.ts │ │ ├── label │ │ │ ├── ProgressLabel.test.tsx │ │ │ ├── ProgressLabel.tsx │ │ │ └── ProgressLabelDataAttributes.ts │ │ ├── root │ │ │ ├── ProgressRoot.test.tsx │ │ │ ├── ProgressRoot.tsx │ │ │ ├── ProgressRootContext.tsx │ │ │ ├── ProgressRootDataAttributes.ts │ │ │ └── styleHooks.ts │ │ ├── track │ │ │ ├── ProgressTrack.test.tsx │ │ │ ├── ProgressTrack.tsx │ │ │ └── ProgressTrackDataAttributes.ts │ │ └── value │ │ │ ├── ProgressValue.test.tsx │ │ │ ├── ProgressValue.tsx │ │ │ └── ProgressValueDataAttributes.ts │ ├── radio-group │ │ ├── RadioGroup.test.tsx │ │ ├── RadioGroup.tsx │ │ ├── RadioGroupContext.ts │ │ ├── RadioGroupDataAttributes.ts │ │ ├── index.ts │ │ └── useRadioGroup.ts │ ├── radio │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── indicator │ │ │ ├── RadioIndicator.test.tsx │ │ │ ├── RadioIndicator.tsx │ │ │ └── RadioIndicatorDataAttributes.ts │ │ ├── root │ │ │ ├── RadioRoot.test.tsx │ │ │ ├── RadioRoot.tsx │ │ │ ├── RadioRootContext.ts │ │ │ └── RadioRootDataAttributes.ts │ │ └── utils │ │ │ └── customStyleHookMapping.ts │ ├── scroll-area │ │ ├── constants.ts │ │ ├── content │ │ │ ├── ScrollAreaContent.test.tsx │ │ │ └── ScrollAreaContent.tsx │ │ ├── corner │ │ │ ├── ScrollAreaCorner.test.tsx │ │ │ └── ScrollAreaCorner.tsx │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── root │ │ │ ├── ScrollAreaRoot.test.tsx │ │ │ ├── ScrollAreaRoot.tsx │ │ │ ├── ScrollAreaRootContext.ts │ │ │ └── ScrollAreaRootCssVars.ts │ │ ├── scrollbar │ │ │ ├── ScrollAreaScrollbar.test.tsx │ │ │ ├── ScrollAreaScrollbar.tsx │ │ │ ├── ScrollAreaScrollbarContext.ts │ │ │ ├── ScrollAreaScrollbarCssVars.ts │ │ │ └── ScrollAreaScrollbarDataAttributes.ts │ │ ├── thumb │ │ │ ├── ScrollAreaThumb.test.tsx │ │ │ ├── ScrollAreaThumb.tsx │ │ │ └── ScrollAreaThumbDataAttributes.ts │ │ ├── utils │ │ │ ├── getOffset.ts │ │ │ └── onVisible.ts │ │ └── viewport │ │ │ ├── ScrollAreaViewport.test.tsx │ │ │ ├── ScrollAreaViewport.tsx │ │ │ └── ScrollAreaViewportContext.ts │ ├── select │ │ ├── arrow │ │ │ ├── SelectArrow.test.tsx │ │ │ ├── SelectArrow.tsx │ │ │ └── SelectArrowDataAttributes.ts │ │ ├── backdrop │ │ │ ├── SelectBackdrop.test.tsx │ │ │ ├── SelectBackdrop.tsx │ │ │ └── SelectBackdropDataAttributes.ts │ │ ├── group-label │ │ │ ├── SelectGroupLabel.test.tsx │ │ │ └── SelectGroupLabel.tsx │ │ ├── group │ │ │ ├── SelectGroup.test.tsx │ │ │ ├── SelectGroup.tsx │ │ │ └── SelectGroupContext.ts │ │ ├── icon │ │ │ ├── SelectIcon.test.tsx │ │ │ └── SelectIcon.tsx │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── item-indicator │ │ │ ├── SelectItemIndicator.test.tsx │ │ │ └── SelectItemIndicator.tsx │ │ ├── item-text │ │ │ ├── SelectItemText.test.tsx │ │ │ └── SelectItemText.tsx │ │ ├── item │ │ │ ├── SelectItem.test.tsx │ │ │ ├── SelectItem.tsx │ │ │ ├── SelectItemContext.ts │ │ │ ├── SelectItemDataAttributes.ts │ │ │ └── useSelectItem.ts │ │ ├── popup │ │ │ ├── SelectPopup.test.tsx │ │ │ ├── SelectPopup.tsx │ │ │ ├── SelectPopupDataAttributes.ts │ │ │ ├── useSelectPopup.ts │ │ │ └── utils.ts │ │ ├── portal │ │ │ ├── SelectPortal.tsx │ │ │ └── SelectPortalContext.ts │ │ ├── positioner │ │ │ ├── SelectPositioner.spec.tsx │ │ │ ├── SelectPositioner.test.tsx │ │ │ ├── SelectPositioner.tsx │ │ │ ├── SelectPositionerContext.ts │ │ │ ├── SelectPositionerCssVars.ts │ │ │ ├── SelectPositionerDataAttributes.ts │ │ │ └── useSelectPositioner.ts │ │ ├── root │ │ │ ├── SelectIndexContext.ts │ │ │ ├── SelectRoot.test.tsx │ │ │ ├── SelectRoot.tsx │ │ │ ├── SelectRootContext.ts │ │ │ └── useSelectRoot.ts │ │ ├── scroll-arrow │ │ │ └── SelectScrollArrow.tsx │ │ ├── scroll-down-arrow │ │ │ ├── SelectScrollDownArrow.test.tsx │ │ │ ├── SelectScrollDownArrow.tsx │ │ │ └── SelectScrollDownArrowDataAttributes.ts │ │ ├── scroll-up-arrow │ │ │ ├── SelectScrollUpArrow.test.tsx │ │ │ ├── SelectScrollUpArrow.tsx │ │ │ └── SelectScrollUpArrowDataAttributes.ts │ │ ├── trigger │ │ │ ├── SelectTrigger.test.tsx │ │ │ ├── SelectTrigger.tsx │ │ │ ├── SelectTriggerDataAttributes.ts │ │ │ └── useSelectTrigger.ts │ │ └── value │ │ │ ├── SelectValue.test.tsx │ │ │ └── SelectValue.tsx │ ├── separator │ │ ├── Separator.test.tsx │ │ ├── Separator.tsx │ │ └── index.ts │ ├── slider │ │ ├── control │ │ │ ├── SliderControl.test.tsx │ │ │ ├── SliderControl.tsx │ │ │ └── SliderControlDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── indicator │ │ │ ├── SliderIndicator.test.tsx │ │ │ ├── SliderIndicator.tsx │ │ │ └── SliderIndicatorDataAttributes.ts │ │ ├── root │ │ │ ├── SliderRoot.spec.tsx │ │ │ ├── SliderRoot.test.tsx │ │ │ ├── SliderRoot.tsx │ │ │ ├── SliderRootContext.ts │ │ │ ├── SliderRootDataAttributes.ts │ │ │ └── styleHooks.ts │ │ ├── thumb │ │ │ ├── SliderThumb.test.tsx │ │ │ ├── SliderThumb.tsx │ │ │ └── SliderThumbDataAttributes.ts │ │ ├── track │ │ │ ├── SliderTrack.test.tsx │ │ │ ├── SliderTrack.tsx │ │ │ └── SliderTrackDataAttributes.ts │ │ ├── utils │ │ │ ├── asc.ts │ │ │ ├── getSliderValue.ts │ │ │ ├── replaceArrayItemAtIndex.ts │ │ │ ├── roundValueToStep.ts │ │ │ ├── validateMinimumDistance.ts │ │ │ └── valueArrayToPercentages.ts │ │ └── value │ │ │ ├── SliderValue.test.tsx │ │ │ ├── SliderValue.tsx │ │ │ └── SliderValueDataAttributes.ts │ ├── switch │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── root │ │ │ ├── SwitchRoot.test.tsx │ │ │ ├── SwitchRoot.tsx │ │ │ ├── SwitchRootContext.ts │ │ │ └── SwitchRootDataAttributes.ts │ │ ├── styleHooks.ts │ │ └── thumb │ │ │ ├── SwitchThumb.test.tsx │ │ │ ├── SwitchThumb.tsx │ │ │ └── SwitchThumbDataAttributes.ts │ ├── tabs │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── indicator │ │ │ ├── TabsIndicator.test.tsx │ │ │ ├── TabsIndicator.tsx │ │ │ ├── TabsIndicatorCssVars.ts │ │ │ ├── TabsIndicatorDataAttributes.ts │ │ │ ├── prehydrationScript.min.ts │ │ │ └── prehydrationScript.template.js │ │ ├── list │ │ │ ├── TabsList.test.tsx │ │ │ ├── TabsList.tsx │ │ │ ├── TabsListContext.ts │ │ │ └── TabsListDataAttributes.ts │ │ ├── panel │ │ │ ├── TabsPanel.test.tsx │ │ │ ├── TabsPanel.tsx │ │ │ └── TabsPanelDataAttributes.ts │ │ ├── root │ │ │ ├── TabsRoot.test.tsx │ │ │ ├── TabsRoot.tsx │ │ │ ├── TabsRootContext.ts │ │ │ ├── TabsRootDataAttributes.ts │ │ │ └── styleHooks.ts │ │ └── tab │ │ │ ├── TabsTab.test.tsx │ │ │ ├── TabsTab.tsx │ │ │ └── TabsTabDataAttributes.ts │ ├── toast │ │ ├── action │ │ │ ├── ToastAction.test.tsx │ │ │ ├── ToastAction.tsx │ │ │ └── ToastActionDataAttributes.ts │ │ ├── close │ │ │ ├── ToastClose.test.tsx │ │ │ ├── ToastClose.tsx │ │ │ └── ToastCloseDataAttributes.ts │ │ ├── createToastManager.test.tsx │ │ ├── createToastManager.ts │ │ ├── description │ │ │ ├── ToastDescription.test.tsx │ │ │ ├── ToastDescription.tsx │ │ │ └── ToastDescriptionDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── portal │ │ │ └── ToastPortal.tsx │ │ ├── provider │ │ │ ├── ToastProvider.tsx │ │ │ └── ToastProviderContext.ts │ │ ├── root │ │ │ ├── ToastRoot.test.tsx │ │ │ ├── ToastRoot.tsx │ │ │ ├── ToastRootContext.ts │ │ │ ├── ToastRootCssVars.ts │ │ │ └── ToastRootDataAttributes.ts │ │ ├── title │ │ │ ├── ToastTitle.test.tsx │ │ │ ├── ToastTitle.tsx │ │ │ └── ToastTitleDataAttributes.ts │ │ ├── useToastManager.test.tsx │ │ ├── useToastManager.ts │ │ ├── utils │ │ │ ├── focusVisible.ts │ │ │ ├── resolvePromiseOptions.ts │ │ │ └── test-utils.tsx │ │ └── viewport │ │ │ ├── FocusGuard.tsx │ │ │ ├── ToastViewport.test.tsx │ │ │ ├── ToastViewport.tsx │ │ │ ├── ToastViewportContext.ts │ │ │ └── ToastViewportDataAttributes.ts │ ├── toggle-group │ │ ├── ToggleGroup.test.tsx │ │ ├── ToggleGroup.tsx │ │ ├── ToggleGroupContext.ts │ │ ├── ToggleGroupDataAttributes.ts │ │ └── index.ts │ ├── toggle │ │ ├── Toggle.test.tsx │ │ ├── Toggle.tsx │ │ ├── ToggleDataAttributes.ts │ │ └── index.ts │ ├── toolbar │ │ ├── button │ │ │ ├── ToolbarButton.test.tsx │ │ │ ├── ToolbarButton.tsx │ │ │ └── ToolbarButtonDataAttributes.ts │ │ ├── group │ │ │ ├── ToolbarGroup.test.tsx │ │ │ ├── ToolbarGroup.tsx │ │ │ ├── ToolbarGroupContext.ts │ │ │ └── ToolbarGroupDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── input │ │ │ ├── ToolbarInput.test.tsx │ │ │ ├── ToolbarInput.tsx │ │ │ └── ToolbarInputDataAttributes.ts │ │ ├── link │ │ │ ├── ToolbarLink.test.tsx │ │ │ ├── ToolbarLink.tsx │ │ │ └── ToolbarLinkDataAttributes.ts │ │ ├── root │ │ │ ├── ToolbarRoot.test.tsx │ │ │ ├── ToolbarRoot.tsx │ │ │ ├── ToolbarRootContext.ts │ │ │ └── ToolbarRootDataAttributes.ts │ │ └── separator │ │ │ ├── ToolbarSeparator.tsx │ │ │ └── ToolbarSeparatorDataAttributes.ts │ ├── tooltip │ │ ├── arrow │ │ │ ├── TooltipArrow.test.tsx │ │ │ ├── TooltipArrow.tsx │ │ │ └── TooltipArrowDataAttributes.ts │ │ ├── index.parts.ts │ │ ├── index.ts │ │ ├── popup │ │ │ ├── TooltipPopup.test.tsx │ │ │ ├── TooltipPopup.tsx │ │ │ └── TooltipPopupDataAttributes.ts │ │ ├── portal │ │ │ ├── TooltipPortal.tsx │ │ │ └── TooltipPortalContext.ts │ │ ├── positioner │ │ │ ├── TooltipPositioner.spec.tsx │ │ │ ├── TooltipPositioner.test.tsx │ │ │ ├── TooltipPositioner.tsx │ │ │ ├── TooltipPositionerContext.ts │ │ │ ├── TooltipPositionerCssVars.ts │ │ │ ├── TooltipPositionerDataAttributes.ts │ │ │ └── useTooltipPositioner.ts │ │ ├── provider │ │ │ ├── TooltipProvider.test.tsx │ │ │ ├── TooltipProvider.tsx │ │ │ └── TooltipProviderContext.ts │ │ ├── root │ │ │ ├── TooltipRoot.test.tsx │ │ │ ├── TooltipRoot.tsx │ │ │ ├── TooltipRootContext.ts │ │ │ └── useTooltipRoot.ts │ │ ├── trigger │ │ │ ├── TooltipTrigger.spec.tsx │ │ │ ├── TooltipTrigger.test.tsx │ │ │ ├── TooltipTrigger.tsx │ │ │ └── TooltipTriggerDataAttributes.ts │ │ └── utils │ │ │ └── constants.ts │ ├── unstable-no-ssr │ │ ├── NoSsr.test.tsx │ │ ├── NoSsr.tsx │ │ ├── NoSsr.types.ts │ │ └── index.ts │ ├── unstable-use-media-query │ │ └── index.ts │ ├── use-button │ │ ├── index.ts │ │ ├── useButton.test.tsx │ │ └── useButton.ts │ ├── use-render │ │ ├── index.ts │ │ ├── useRender.spec.tsx │ │ ├── useRender.test.tsx │ │ └── useRender.ts │ └── utils │ │ ├── FloatingPortalLite.tsx │ │ ├── InternalBackdrop.tsx │ │ ├── areArraysEqual.ts │ │ ├── clamp.test.ts │ │ ├── clamp.ts │ │ ├── collapsibleOpenStateMapping.ts │ │ ├── constants.ts │ │ ├── detectBrowser.ts │ │ ├── fastObjectShallowCompare.ts │ │ ├── floating-ui │ │ ├── useClick.ts │ │ └── useFocusWithDelay.ts │ │ ├── formatNumber.test.ts │ │ ├── formatNumber.ts │ │ ├── generateId.ts │ │ ├── getPseudoElementBounds.ts │ │ ├── getReactElementRef.test.tsx │ │ ├── getReactElementRef.ts │ │ ├── getStyleHookProps.test.ts │ │ ├── getStyleHookProps.ts │ │ ├── hasComputedStyleMapSupport.ts │ │ ├── highlighted.ts │ │ ├── index.ts │ │ ├── inertValue.ts │ │ ├── isElementDisabled.ts │ │ ├── isMouseWithinBounds.ts │ │ ├── mergeObjects.ts │ │ ├── noop.ts │ │ ├── owner.ts │ │ ├── popupStateMapping.ts │ │ ├── reactVersion.ts │ │ ├── resolveClassName.ts │ │ ├── styleHookMapping.ts │ │ ├── translateOpenChangeReason.ts │ │ ├── types.ts │ │ ├── useAnchorPositioning.ts │ │ ├── useAnimationFrame.ts │ │ ├── useAnimationsFinished.ts │ │ ├── useBaseUiId.ts │ │ ├── useComponentRenderer.test.tsx │ │ ├── useComponentRenderer.ts │ │ ├── useControlled.test.tsx │ │ ├── useControlled.ts │ │ ├── useEnhancedClickHandler.ts │ │ ├── useEventCallback.ts │ │ ├── useForcedRerendering.ts │ │ ├── useForkRef.test.tsx │ │ ├── useForkRef.ts │ │ ├── useId.test.tsx │ │ ├── useId.ts │ │ ├── useInterval.ts │ │ ├── useLatestRef.ts │ │ ├── useLazyRef.ts │ │ ├── useModernLayoutEffect.ts │ │ ├── useOnMount.ts │ │ ├── useOpenChangeComplete.tsx │ │ ├── useOpenInteractionType.ts │ │ ├── usePanelResize.ts │ │ ├── useRenderElement.spec.tsx │ │ ├── useRenderElement.tsx │ │ ├── useRootElementName.ts │ │ ├── useScrollLock.ts │ │ ├── useTimeout.ts │ │ ├── useTransitionStatus.ts │ │ ├── valueToPercent.ts │ │ ├── visuallyHidden.ts │ │ └── warn.ts │ ├── test │ ├── conformanceTests │ │ ├── className.tsx │ │ ├── propForwarding.tsx │ │ ├── refForwarding.tsx │ │ ├── renderProp.tsx │ │ └── utils.ts │ ├── createRenderer.ts │ ├── describeConformance.tsx │ ├── index.ts │ ├── popupConformanceTests.tsx │ └── utils.ts │ ├── tsconfig.build.json │ ├── tsconfig.json │ ├── tsconfig.test.json │ └── vitest.config.mts ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── prettier.config.js ├── renovate.json ├── scripts ├── README.md ├── api-docs-builder │ ├── package.json │ └── src │ │ ├── componentHandler.ts │ │ ├── formatter.ts │ │ ├── hookHandler.ts │ │ ├── index.ts │ │ └── order.json ├── build.mjs ├── buildTypes.mts ├── copyFiles.mjs ├── dangerFileContent.ts ├── inlineScripts.mts ├── jsonlint.mjs ├── pushArgos.mjs ├── releaseChangelog.mts ├── releaseTag.mjs ├── testBuiltTypes.mjs ├── useReactVersion.mjs └── validateTypescriptDeclarations.mts ├── stylelint.config.mjs ├── test ├── README.md ├── assets │ ├── fake.png │ └── fake2.png ├── bundle-size │ ├── base-entry.js │ ├── bundle-size-checker.config.mjs │ └── package.json ├── docs-regressions-before.png ├── docs-regressions-diff.png ├── e2e │ ├── README.md │ ├── TestViewer.tsx │ ├── fixtures │ │ ├── .gitkeep │ │ └── Radio.tsx │ ├── index.html │ ├── index.test.ts │ ├── main.tsx │ ├── postcss.config.js │ ├── serve.json │ ├── vite.config.mjs │ └── vitest.config.mts ├── node-resolution │ ├── index.mjs │ └── package.json ├── package.json ├── regressions │ ├── README.md │ ├── TestViewer.tsx │ ├── fixtures │ │ └── .gitkeep │ ├── index.html │ ├── index.test.ts │ ├── main.tsx │ ├── manual │ │ └── README.md │ ├── postcss.config.js │ ├── serve.json │ ├── vite.config.mjs │ └── vitest.config.mts ├── setupVitest.ts ├── tsconfig.json ├── vite.d.ts └── vite.shared.config.mjs ├── tsconfig.base.json ├── tsconfig.json ├── vitest.config.mts └── vitest.shared.mts /.codesandbox/ci.json: -------------------------------------------------------------------------------- 1 | { 2 | "buildCommand": "build:codesandbox", 3 | "installCommand": "install:codesandbox", 4 | "node": "18", 5 | "packages": ["packages/react"], 6 | "publishDirectory": { 7 | "@base-ui-components/react": "packages/react/build" 8 | }, 9 | "sandboxes": ["/.codesandbox/template"], 10 | "silent": true 11 | } 12 | -------------------------------------------------------------------------------- /.codesandbox/template/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mui/base-ui/aba256ecccaaedb16bd723574c03eb83397ee3b5/.codesandbox/template/public/favicon.ico -------------------------------------------------------------------------------- /.codesandbox/template/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CRA + Base UI + TS 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /.codesandbox/template/src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import './index.css'; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |

Base UI + Create React App

8 |
9 | Base UI is a library of unstyled UI components for 10 | building accessible web apps and design systems. 11 |
12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /.codesandbox/template/src/index.css: -------------------------------------------------------------------------------- 1 | .item { 2 | border: 1px solid #000000; 3 | padding: 20px; 4 | border-radius: 4px; 5 | margin-bottom: 20px; 6 | } 7 | 8 | .box { 9 | flex-grow: 1; 10 | max-width: 800px; 11 | margin: auto; 12 | padding: 15px; 13 | font-family: sans-serif; 14 | line-height: 1.5; 15 | } 16 | -------------------------------------------------------------------------------- /.codesandbox/template/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const rootElement = document.getElementById('root'); 6 | const root = ReactDOM.createRoot(rootElement!); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /.codesandbox/template/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.codesandbox/template/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://editorconfig.org/ 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | trim_trailing_whitespace = true 9 | indent_style = space 10 | indent_size = 2 11 | end_of_line = lf 12 | charset = utf-8 13 | insert_final_newline = true 14 | max_line_length = 100 15 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .git 2 | /coverage 3 | /docs/.next 4 | /docs/export 5 | /docs/src/app/(private)/playground/ 6 | /packages/react/**/*.min.* 7 | build 8 | build-tests 9 | node_modules 10 | pnpm-lock.yaml 11 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto eol=lf 3 | 4 | # Undo the GitHub's default 5 | # https://github.com/github/linguist/blob/96ad1185828f44bb9b774328a584551ee57ed264/lib/linguist/vendor.yml#L177 6 | packages/**/*.d.ts -linguist-vendored 7 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @atomiks @michaldudak 2 | /docs/src/ @atomiks @colmtuite @michaldudak 3 | /packages/react/ @atomiks @colmtuite @michaldudak 4 | /scripts/ @michaldudak 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/2.feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Feature request' 3 | about: 'Suggest a new component or an enhancement for an existing component.' 4 | labels: ['status: waiting for maintainer'] 5 | --- 6 | 7 | # Feature request 8 | 9 | ## Summary 10 | 11 | 12 | 13 | ## Examples in other libraries 14 | 15 | 16 | 17 | ## Motivation 18 | 19 | 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/3.get-help.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Get help' 3 | about: 'Ask a question.' 4 | labels: ['status: waiting for maintainer'] 5 | --- 6 | 7 | # Get help 8 | 9 | ## Ask a question 10 | 11 | Before opening an issue, please consider starting a [GitHub Discussion](https://github.com/mui/base-ui/discussions) or asking the community for help in our [Discord](https://base-ui.com/r/discord). 12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/4.docs-feedback.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Docs feedback' 3 | about: 'Help us improve Base UI documentation.' 4 | labels: ['status: waiting for maintainer'] 5 | --- 6 | 7 | # Docs feedback 8 | 9 | ## How can we improve Base UI documentation? 10 | 11 | Provide a clear and concise description of the issue you're experiencing. If applicable, provide screenshots and/or videos. 12 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | - [ ] I have followed (at least) the [PR section of the contributing guide](https://github.com/mui/base-ui/blob/HEAD/CONTRIBUTING.md#sending-a-pull-request). 4 | -------------------------------------------------------------------------------- /.github/codeql/codeql-config.yml: -------------------------------------------------------------------------------- 1 | name: CodeQL configuration 2 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | # Enable version updates for npm 4 | - package-ecosystem: npm 5 | # Look for `package.json` and `lock` files in the `root` directory 6 | directory: / 7 | schedule: 8 | interval: yearly 9 | # https://stackoverflow.com/questions/64047526/how-to-get-dependabot-to-trigger-for-security-updates-only 10 | open-pull-requests-limit: 0 11 | labels: 12 | - dependencies 13 | - security 14 | -------------------------------------------------------------------------------- /.github/workflows/check-if-pr-has-label.yml: -------------------------------------------------------------------------------- 1 | name: Check if PR has label 2 | 3 | on: 4 | pull_request: 5 | types: [opened, reopened, labeled, unlabeled] 6 | 7 | permissions: {} 8 | 9 | jobs: 10 | test-label-applied: 11 | # Tests that label is added on the PR 12 | runs-on: ubuntu-latest 13 | permissions: 14 | contents: read 15 | steps: 16 | - uses: mnajdova/github-action-required-labels@ca0df9249827e43aa4b4a0d25d9fe3e9b19b0705 # v2.1.0 17 | with: 18 | mode: minimum 19 | count: 1 20 | labels: '' 21 | -------------------------------------------------------------------------------- /.github/workflows/mark-duplicate.yml: -------------------------------------------------------------------------------- 1 | name: Mark duplicate 2 | 3 | on: 4 | issue_comment: 5 | types: [created] 6 | 7 | permissions: {} 8 | 9 | jobs: 10 | mark-duplicate: 11 | runs-on: ubuntu-latest 12 | permissions: 13 | contents: read 14 | issues: write 15 | steps: 16 | - name: mark-duplicate 17 | uses: actions-cool/issues-helper@a610082f8ac0cf03e357eb8dd0d5e2ba075e017e # v3.6.0 18 | with: 19 | actions: 'mark-duplicate' 20 | token: ${{ secrets.GITHUB_TOKEN }} 21 | duplicate-labels: 'duplicate' 22 | remove-labels: 'status: incomplete,status: waiting for maintainer' 23 | close-issue: true 24 | -------------------------------------------------------------------------------- /.github/workflows/new-issue-triage.yml: -------------------------------------------------------------------------------- 1 | name: New issue triage 2 | on: 3 | issues: 4 | types: 5 | - opened 6 | 7 | permissions: {} 8 | 9 | jobs: 10 | issue_cleanup: 11 | name: Clean issue body 12 | uses: mui/mui-public/.github/workflows/issues_body-cleanup.yml@master 13 | permissions: 14 | contents: read 15 | issues: write 16 | -------------------------------------------------------------------------------- /.markdownlint-cli2.cjs: -------------------------------------------------------------------------------- 1 | const baseline = require('@mui/monorepo/.markdownlint-cli2.cjs'); 2 | 3 | module.exports = baseline; 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | enable-pre-post-scripts = true 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | // Formating 4 | "esbenp.prettier-vscode", // Prettier 5 | "editorconfig.editorconfig", // EditorConfig 6 | 7 | // Highlighting 8 | "bradlc.vscode-tailwindcss", // Tailwind CSS 9 | "unifiedjs.vscode-mdx", // MDX 10 | "styled-components.vscode-styled-components", // styled() 11 | 12 | // Lint 13 | "dbaeumer.vscode-eslint", // ESLint 14 | "yoavbls.pretty-ts-errors", // TypeScript 15 | "stylelint.vscode-stylelint", // Stylelint 16 | "davidanson.vscode-markdownlint" // markdownlint 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "files.trimTrailingWhitespace": true, 4 | 5 | // Root workspace only 6 | "grammarly.selectors": [ 7 | { 8 | "language": "markdown", 9 | "scheme": "file" 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security policy 2 | 3 | ## Supported versions 4 | 5 | The versions of the project that are currently supported with security updates. 6 | 7 | | Base UI version | Release | Supported | 8 | | --------------: | :--------- | :----------------- | 9 | | <1.0.0 | 2024-12-17 | :white_check_mark: | 10 | 11 | ## Reporting a vulnerability 12 | 13 | You can report a vulnerability by contacting us via email at [security@mui.com](mailto:security@mui.com). 14 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | coverage: 2 | status: 3 | project: 4 | default: 5 | target: auto 6 | threshold: 1% 7 | patch: off 8 | comment: false 9 | -------------------------------------------------------------------------------- /dangerfile.js: -------------------------------------------------------------------------------- 1 | const tsx = require('tsx/cjs/api'); 2 | 3 | // danger uses babelify under the hood. The implementation is buggy and fails on our 4 | // custom plugins in our codebase. We'll just disable it and do our own compilation. 5 | // Danger must always be run with envirnonent variable `DANGER_DISABLE_TRANSPILATION="true"`. 6 | tsx.require('./scripts/dangerFileContent', __filename); 7 | -------------------------------------------------------------------------------- /docs/.env: -------------------------------------------------------------------------------- 1 | FEEDBACK_URL=https://hgvi836wi8.execute-api.us-east-1.amazonaws.com -------------------------------------------------------------------------------- /docs/.link-check-errors.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mui/base-ui/aba256ecccaaedb16bd723574c03eb83397ee3b5/docs/.link-check-errors.txt -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Docs 2 | 3 | This is the documentation of Base UI. 4 | 5 | To start the docs site in development mode, from the project root, run: 6 | 7 | ```bash 8 | pnpm start 9 | ``` 10 | 11 | If you do not have pnpm installed, select your OS and follow the instructions on the [pnpm website](https://pnpm.io/installation). 12 | 13 | Package managers other than pnpm (like npm or Yarn) are not supported and will not work. 14 | 15 | ## How can I add a new demo to the documentation? 16 | 17 | [You can follow this guide](https://github.com/mui/base-ui/blob/HEAD/CONTRIBUTING.md) 18 | on how to get started contributing to Base UI. 19 | -------------------------------------------------------------------------------- /docs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. 6 | -------------------------------------------------------------------------------- /docs/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-import': {}, 4 | '@tailwindcss/postcss': {}, 5 | 'postcss-custom-media': {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /docs/public/_redirects: -------------------------------------------------------------------------------- 1 | # Link used in the demos, avoid 404 2 | /drafts / 301 3 | /inbox* / 301 4 | /trash / 301 5 | 6 | # For links that we can't edit later on, for example hosted in the code published on npm 7 | /r/discord https://discord.com/invite/g6C3hUtuxz 302 8 | 9 | # Legacy redirection 10 | # Added in chronological order (the last line is the most recent one) 11 | # To be removed 3+ years after being introduced 12 | # 2024 13 | -------------------------------------------------------------------------------- /docs/public/robots.txt: -------------------------------------------------------------------------------- 1 | # Algolia-Crawler-Verif: 98C49CAFF7AEED76 2 | 3 | User-agent: * 4 | Allow: / 5 | -------------------------------------------------------------------------------- /docs/public/static/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mui/base-ui/aba256ecccaaedb16bd723574c03eb83397ee3b5/docs/public/static/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/public/static/error-codes.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /docs/public/static/favicon-dev.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mui/base-ui/aba256ecccaaedb16bd723574c03eb83397ee3b5/docs/public/static/favicon-dev.ico -------------------------------------------------------------------------------- /docs/public/static/favicon-dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/public/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mui/base-ui/aba256ecccaaedb16bd723574c03eb83397ee3b5/docs/public/static/favicon.ico -------------------------------------------------------------------------------- /docs/public/static/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/public/static/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/reference/generated/direction-provider.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DirectionProvider", 3 | "description": "Enables RTL behavior for Base UI components.", 4 | "props": { 5 | "direction": { 6 | "type": "TextDirection", 7 | "default": "'ltr'", 8 | "description": "The reading direction of the text" 9 | }, 10 | "children": { 11 | "type": "ReactNode" 12 | } 13 | }, 14 | "dataAttributes": {}, 15 | "cssVariables": {} 16 | } 17 | -------------------------------------------------------------------------------- /docs/reference/generated/field-validity.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "FieldValidity", 3 | "description": "Used to display a custom message based on the field’s validity.\nRequires `children` to be a function that accepts field validity state as an argument.", 4 | "props": { 5 | "children": { 6 | "type": "((state: FieldValidityState) => ReactNode)", 7 | "required": true, 8 | "description": "A function that accepts the field validity state as an argument.\n\n```jsx\n\n {(validity) => {\n return
...
\n }}\n\n```" 9 | } 10 | }, 11 | "dataAttributes": {}, 12 | "cssVariables": {} 13 | } 14 | -------------------------------------------------------------------------------- /docs/reference/generated/select-portal.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SelectPortal", 3 | "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to ``.", 4 | "props": { 5 | "container": { 6 | "type": "HTMLElement | RefObject | null", 7 | "description": "A parent element to render the portal element into." 8 | }, 9 | "children": { 10 | "type": "ReactNode" 11 | } 12 | }, 13 | "dataAttributes": {}, 14 | "cssVariables": {} 15 | } 16 | -------------------------------------------------------------------------------- /docs/reference/generated/toast-portal.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ToastPortal", 3 | "description": "A portal element that moves the viewport to a different part of the DOM.\nBy default, the portal element is appended to ``.", 4 | "props": { 5 | "container": { 6 | "type": "HTMLElement | RefObject | null", 7 | "description": "A parent element to render the portal element into." 8 | }, 9 | "children": { 10 | "type": "ReactNode" 11 | } 12 | }, 13 | "dataAttributes": {}, 14 | "cssVariables": {} 15 | } 16 | -------------------------------------------------------------------------------- /docs/scripts/playground.template.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export default function Playground() { 4 | return ( 5 |
A playground for a fast iteration development cycle in isolation outside of git.
6 | ); 7 | } 8 | -------------------------------------------------------------------------------- /docs/src/app/(private)/experiments/anchor-positioning.module.css: -------------------------------------------------------------------------------- 1 | .controls { 2 | fieldset { 3 | display: flex; 4 | gap: 5px; 5 | } 6 | 7 | label { 8 | display: flex; 9 | align-items: center; 10 | gap: 5px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /docs/src/app/(private)/experiments/collapsible/_icons.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import * as React from 'react'; 3 | 4 | export default function Nothing() { 5 | return
This is just a dummy file to hold icons
; 6 | } 7 | 8 | export function ChevronIcon(props: React.ComponentProps<'svg'>) { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /docs/src/app/(private)/experiments/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import clsx from 'clsx'; 3 | import { Sidebar } from 'docs/src/components/Experiments/Sidebar'; 4 | import classes from 'docs/src/components/Experiments/ExperimentRoot.module.css'; 5 | 6 | export default async function Experiments() { 7 | return ( 8 |
9 | 10 |
11 |

Base UI experiments

12 |

← Choose an experiment from the list

13 |
14 |
15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /docs/src/app/(private)/experiments/scroll-area/scroll-area-slight.module.css: -------------------------------------------------------------------------------- 1 | .ScrollArea { 2 | width: 340px; 3 | height: 100px; 4 | background: rgb(0 0 0 / 0.1); 5 | } 6 | 7 | .Viewport { 8 | height: 100%; 9 | } 10 | 11 | .Scrollbar { 12 | display: flex; 13 | background: rgb(0 0 0 / 0.1); 14 | 15 | &[data-orientation='vertical'] { 16 | margin-block: 20px; 17 | width: 8px; 18 | } 19 | 20 | &[data-orientation='horizontal'] { 21 | flex-direction: column; 22 | height: 8px; 23 | margin-inline: 20px; 24 | } 25 | } 26 | 27 | .Thumb { 28 | background: rgb(0 0 0 / 0.5); 29 | flex: 1; 30 | } 31 | -------------------------------------------------------------------------------- /docs/src/app/(private)/layout.css: -------------------------------------------------------------------------------- 1 | html { 2 | --color-background: var(--color-gray-50); 3 | --color-foreground: var(--color-gray-900); 4 | 5 | @media (prefers-color-scheme: dark) { 6 | --color-background: black; 7 | --color-foreground: oklch(90% 2% 264deg); 8 | } 9 | 10 | color-scheme: light dark; 11 | background-color: var(--color-gray-50); 12 | } 13 | 14 | body { 15 | font-family: system-ui; 16 | -webkit-font-smoothing: antialiased; 17 | -moz-osx-font-smoothing: grayscale; 18 | background-color: var(--color-background); 19 | min-height: 100vh; 20 | } 21 | 22 | html, 23 | body { 24 | padding: 0; 25 | margin: 0; 26 | } 27 | -------------------------------------------------------------------------------- /docs/src/app/(private)/layout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import 'docs/src/styles.css'; 3 | import './layout.css'; 4 | 5 | export default function Layout({ children }: React.PropsWithChildren) { 6 | return children; 7 | } 8 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/accordion/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/alert-dialog/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/avatar/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/avatar/page.mdx: -------------------------------------------------------------------------------- 1 | # Avatar 2 | 3 | An easily stylable avatar component. 4 | 8 | 9 | 10 | 11 | ## Anatomy 12 | 13 | Import the component and assemble its parts: 14 | 15 | ```jsx title="Anatomy" 16 | import { Avatar } from '@base-ui-components/react/avatar'; 17 | 18 | 19 | 20 | LT 21 | ; 22 | ``` 23 | 24 | ## API reference 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/checkbox-group/demos/form/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/checkbox-group/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/checkbox-group/demos/nested/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/checkbox-group/demos/parent/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/checkbox/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/checkbox/page.mdx: -------------------------------------------------------------------------------- 1 | # Checkbox 2 | 3 | An easily stylable checkbox component. 4 | 8 | 9 | 10 | 11 | ## Anatomy 12 | 13 | Import the component and assemble its parts: 14 | 15 | ```jsx title="Anatomy" 16 | import { Checkbox } from '@base-ui-components/react/checkbox'; 17 | 18 | 19 | 20 | ; 21 | ``` 22 | 23 | ## API reference 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/collapsible/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/context-menu/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/context-menu/demos/submenu/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/dialog/demos/close-confirmation/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/dialog/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/dialog/demos/nested/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/field/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/fieldset/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/fieldset/page.mdx: -------------------------------------------------------------------------------- 1 | # Fieldset 2 | 3 | A native fieldset element with an easily stylable legend. 4 | 5 | 9 | 10 | 11 | 12 | ## Anatomy 13 | 14 | Import the component and assemble its parts: 15 | 16 | ```jsx title="Anatomy" 17 | import { Fieldset } from '@base-ui-components/react/fieldset'; 18 | 19 | 20 | 21 | ; 22 | ``` 23 | 24 | ## API reference 25 | 26 | 27 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/form/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/form/demos/zod/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/input/demos/hero/css-modules/index.module.css: -------------------------------------------------------------------------------- 1 | .Input { 2 | box-sizing: border-box; 3 | padding-left: 0.875rem; 4 | margin: 0; 5 | border: 1px solid var(--color-gray-200); 6 | width: 100%; 7 | max-width: 16rem; 8 | height: 2.5rem; 9 | border-radius: 0.375rem; 10 | font-family: inherit; 11 | font-size: 1rem; 12 | font-weight: normal; 13 | background-color: transparent; 14 | color: var(--color-gray-900); 15 | 16 | &:focus { 17 | outline: 2px solid var(--color-blue); 18 | outline-offset: -1px; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/input/demos/hero/css-modules/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Input } from '@base-ui-components/react/input'; 3 | import styles from './index.module.css'; 4 | 5 | export default function ExampleInput() { 6 | return ; 7 | } 8 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/input/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/input/demos/hero/tailwind/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Input } from '@base-ui-components/react/input'; 3 | 4 | export default function ExampleInput() { 5 | return ( 6 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/input/page.mdx: -------------------------------------------------------------------------------- 1 | # Input 2 | 3 | 4 | A native input element that automatically works with [Field](/react/components/field). 5 | 6 | 7 | 8 | 9 | 10 | 11 | ## Anatomy 12 | 13 | Import the component and use it as a single part: 14 | 15 | ```jsx title="Anatomy" 16 | import { Input } from '@base-ui-components/react/input'; 17 | 18 | ; 19 | ``` 20 | 21 | ## API reference 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/menu/demos/checkbox-items/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/menu/demos/group-labels/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/menu/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/menu/demos/open-on-hover/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/menu/demos/radio-items/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/menu/demos/submenu/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/menubar/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/meter/demos/hero/css-modules/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Meter } from '@base-ui-components/react/meter'; 3 | import styles from './index.module.css'; 4 | 5 | export default function ExampleMeter() { 6 | return ( 7 | 8 | Storage Used 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/meter/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/navigation-menu/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/navigation-menu/demos/nested/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/number-field/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/popover/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/preview-card/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/progress/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/radio/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/scroll-area/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/select/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/separator/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/separator/page.mdx: -------------------------------------------------------------------------------- 1 | # Separator 2 | 3 | A separator element accessible to screen readers. 4 | 5 | 9 | 10 | 11 | 12 | ## Anatomy 13 | 14 | Import the component and use it as a single part: 15 | 16 | ```jsx title="Anatomy" 17 | import { Separator } from '@base-ui-components/react/separator'; 18 | 19 | ; 20 | ``` 21 | 22 | ## API reference 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/slider/demos/hero/css-modules/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Slider } from '@base-ui-components/react/slider'; 3 | import styles from './index.module.css'; 4 | 5 | export default function ExampleSlider() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/slider/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/css-modules/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Slider } from '@base-ui-components/react/slider'; 3 | import styles from './index.module.css'; 4 | 5 | export default function ExampleSlider() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/slider/demos/range-slider/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/switch/demos/hero/css-modules/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Switch } from '@base-ui-components/react/switch'; 3 | import styles from './index.module.css'; 4 | 5 | export default function ExampleSwitch() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/switch/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/switch/page.mdx: -------------------------------------------------------------------------------- 1 | # Switch 2 | 3 | A control that indicates whether a setting is on or off. 4 | 8 | 9 | 10 | 11 | ## Anatomy 12 | 13 | Import the component and assemble its parts: 14 | 15 | ```jsx title="Anatomy" 16 | import { Switch } from '@base-ui-components/react/switch'; 17 | 18 | 19 | 20 | ; 21 | ``` 22 | 23 | ## API reference 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/tabs/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toast/demos/custom/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toast/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toast/demos/position/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toast/demos/promise/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toast/demos/undo/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toggle-group/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toggle-group/page.mdx: -------------------------------------------------------------------------------- 1 | # Toggle Group 2 | 3 | Provides a shared state to a series of toggle buttons. 4 | 8 | 9 | 10 | 11 | ## Anatomy 12 | 13 | Import the component and use it as a single part: 14 | 15 | ```jsx title="Anatomy" 16 | import { ToggleGroup } from '@base-ui-components/react/toggle-group'; 17 | 18 | ; 19 | ``` 20 | 21 | ## API reference 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toggle/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toggle/page.mdx: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | A two-state button that can be on or off. 4 | 8 | 9 | 10 | 11 | ## Anatomy 12 | 13 | Import the component and use it as a single part: 14 | 15 | ```jsx title="Anatomy" 16 | import { Toggle } from '@base-ui-components/react/toggle'; 17 | 18 | ; 19 | ``` 20 | 21 | ## API reference 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/toolbar/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/components/tooltip/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/utils/direction-provider/demos/hero/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | export { default as Tailwind } from './tailwind'; 4 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/utils/use-render/demos/render-callback/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/utils/use-render/demos/render/css-modules/index.module.css: -------------------------------------------------------------------------------- 1 | .Text { 2 | font-size: 0.875rem; 3 | line-height: 1rem; 4 | color: var(--color-gray-900); 5 | 6 | strong& { 7 | font-weight: 500; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /docs/src/app/(public)/(content)/react/utils/use-render/demos/render/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { default as CssModules } from './css-modules'; 3 | -------------------------------------------------------------------------------- /docs/src/app/(public)/opengraph-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mui/base-ui/aba256ecccaaedb16bd723574c03eb83397ee3b5/docs/src/app/(public)/opengraph-image.png -------------------------------------------------------------------------------- /docs/src/blocks/Demo/index.ts: -------------------------------------------------------------------------------- 1 | export { DemoRoot as Root } from './DemoRoot'; 2 | export { DemoPlayground as Playground } from './DemoPlayground'; 3 | export { DemoSourceBrowser as SourceBrowser } from './DemoSourceBrowser'; 4 | export { DemoSourceCopy as SourceCopy } from './DemoSourceCopy'; 5 | 6 | export { DemoContext } from './DemoContext'; 7 | export type * from './types'; 8 | -------------------------------------------------------------------------------- /docs/src/blocks/GoogleTagManager.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Script from 'next/script'; 3 | 4 | interface GoogleTagManagerProps { 5 | id: string; 6 | } 7 | 8 | export function GoogleTagManager(props: React.PropsWithChildren) { 9 | const { id } = props; 10 | return ( 11 | /** 12 | * A better alternative to 16 | 17 | 18 | -------------------------------------------------------------------------------- /test/e2e/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-import': {}, 4 | '@tailwindcss/postcss': {}, 5 | 'postcss-custom-media': {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /test/e2e/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "public": "build", 3 | "rewrites": [{ "source": "**", "destination": "/index.html" }] 4 | } 5 | -------------------------------------------------------------------------------- /test/e2e/vite.config.mjs: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | import { defineConfig, mergeConfig } from 'vite'; 3 | import sharedConfig from '../vite.shared.config.mjs'; 4 | 5 | export default mergeConfig( 6 | sharedConfig, 7 | defineConfig({ 8 | root: path.join(process.cwd(), 'test/e2e'), 9 | }), 10 | ); 11 | -------------------------------------------------------------------------------- /test/e2e/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { mergeConfig, defineProject } from 'vitest/config'; 2 | import sharedConfig from '../../vitest.shared.mts'; 3 | 4 | export default mergeConfig( 5 | sharedConfig, 6 | defineProject({ 7 | test: { 8 | environment: 'node', 9 | testTimeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000, // Circle CI has low-performance CPUs. 10 | browser: { 11 | provider: 'playwright', 12 | enabled: false, 13 | name: 'node', 14 | }, 15 | env: { 16 | VITEST_ENV: 'node', 17 | }, 18 | }, 19 | }), 20 | ); 21 | -------------------------------------------------------------------------------- /test/node-resolution/index.mjs: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | import * as base from '@base-ui-components/react'; 3 | import { Accordion } from '@base-ui-components/react/accordion'; 4 | 5 | console.assert(base, 'base'); 6 | console.assert(Accordion, 'Accordion'); 7 | -------------------------------------------------------------------------------- /test/node-resolution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@base-ui/test-node-resolution", 3 | "private": true, 4 | "scripts": { 5 | "test": "node ./index.mjs" 6 | }, 7 | "dependencies": { 8 | "@base-ui-components/react": "workspace:*" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /test/regressions/fixtures/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mui/base-ui/aba256ecccaaedb16bd723574c03eb83397ee3b5/test/regressions/fixtures/.gitkeep -------------------------------------------------------------------------------- /test/regressions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Visual regression tests 5 | 6 | 7 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /test/regressions/manual/README.md: -------------------------------------------------------------------------------- 1 | # manual visual regression tests 2 | 3 | These are expensive tests that should only be consulted if you suspect that something changed. 4 | Move the test you want to check inside a temporary folder in `../test` and run the visual regression test suite to get a screenshot. 5 | -------------------------------------------------------------------------------- /test/regressions/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-import': {}, 4 | '@tailwindcss/postcss': {}, 5 | 'postcss-custom-media': {}, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /test/regressions/serve.json: -------------------------------------------------------------------------------- 1 | { 2 | "public": "build", 3 | "rewrites": [{ "source": "**", "destination": "/index.html" }] 4 | } 5 | -------------------------------------------------------------------------------- /test/regressions/vite.config.mjs: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | import { defineConfig, mergeConfig } from 'vite'; 3 | import sharedConfig from '../vite.shared.config.mjs'; 4 | 5 | export default mergeConfig( 6 | sharedConfig, 7 | defineConfig({ 8 | root: path.join(process.cwd(), 'test/regressions'), 9 | }), 10 | ); 11 | -------------------------------------------------------------------------------- /test/regressions/vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { mergeConfig, defineProject } from 'vitest/config'; 2 | import sharedConfig from '../../vitest.shared.mts'; 3 | 4 | export default mergeConfig( 5 | sharedConfig, 6 | defineProject({ 7 | test: { 8 | environment: 'node', 9 | testTimeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000, // Circle CI has low-performance CPUs. 10 | browser: { 11 | provider: 'playwright', 12 | enabled: false, 13 | name: 'node', 14 | }, 15 | env: { 16 | VITEST_ENV: 'node', 17 | }, 18 | }, 19 | }), 20 | ); 21 | -------------------------------------------------------------------------------- /test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "module": "es2022", 5 | "moduleResolution": "bundler", 6 | "types": ["vite/client", "vitest/globals"] 7 | }, 8 | "include": ["e2e/**/*", "regressions/**/*", "./*.ts"], 9 | "exclude": ["node_modules", "build"] 10 | } 11 | -------------------------------------------------------------------------------- /test/vite.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /test/vite.shared.config.mjs: -------------------------------------------------------------------------------- 1 | import * as path from 'path'; 2 | import { defineConfig } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | 5 | export default defineConfig({ 6 | mode: process.env.NODE_ENV || 'development', 7 | plugins: [react()], 8 | resolve: { 9 | alias: { 10 | '@base-ui-components/react': path.join(process.cwd(), 'packages/react/src'), 11 | './fonts': path.join(process.cwd(), '/docs/src/fonts'), 12 | docs: path.join(process.cwd(), '/docs'), 13 | stream: null, 14 | zlib: null, 15 | }, 16 | }, 17 | build: { outDir: 'build', chunkSizeWarningLimit: 9999 }, 18 | }); 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "docs/tsconfig.json" 8 | }, 9 | { 10 | "path": "packages/react/tsconfig.json" 11 | } 12 | ] 13 | } 14 | --------------------------------------------------------------------------------