Showing preview only (2,039K chars total). Download the full file or copy to clipboard to get everything.
Repository: radix-ui/primitives
Branch: main
Commit: 22473d16404b
Files: 649
Total size: 1.8 MB
Directory structure:
gitextract_7xaf4qlh/
├── .changeset/
│ ├── README.md
│ ├── changelog.cjs
│ ├── config.json
│ ├── silent-turkeys-fly.md
│ └── ten-pumas-agree.md
├── .editorconfig
├── .github/
│ ├── CODEOWNERS
│ ├── CONTRIBUTING.md
│ ├── ISSUE_TEMPLATE/
│ │ ├── Bug_report.md
│ │ ├── Documentation.md
│ │ ├── Feature_request.md
│ │ └── Question.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ ├── build.yml
│ ├── chromatic.yml
│ ├── publish-snapshot.yml
│ └── publish-stable.yml
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── apps/
│ ├── ssr-testing/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── accessible-icon/
│ │ │ │ └── page.tsx
│ │ │ ├── accordion/
│ │ │ │ └── page.tsx
│ │ │ ├── alert-dialog/
│ │ │ │ └── page.tsx
│ │ │ ├── avatar/
│ │ │ │ └── page.tsx
│ │ │ ├── checkbox/
│ │ │ │ └── page.tsx
│ │ │ ├── collapsible/
│ │ │ │ └── page.tsx
│ │ │ ├── context-menu/
│ │ │ │ └── page.tsx
│ │ │ ├── dialog/
│ │ │ │ └── page.tsx
│ │ │ ├── dropdown-menu/
│ │ │ │ └── page.tsx
│ │ │ ├── form/
│ │ │ │ └── page.tsx
│ │ │ ├── hover-card/
│ │ │ │ └── page.tsx
│ │ │ ├── label/
│ │ │ │ └── page.tsx
│ │ │ ├── layout.tsx
│ │ │ ├── menubar/
│ │ │ │ └── page.tsx
│ │ │ ├── navigation-menu/
│ │ │ │ └── page.tsx
│ │ │ ├── one-time-password-field/
│ │ │ │ └── page.tsx
│ │ │ ├── page.tsx
│ │ │ ├── password-toggle-field/
│ │ │ │ └── page.tsx
│ │ │ ├── popover/
│ │ │ │ └── page.tsx
│ │ │ ├── portal/
│ │ │ │ ├── conditional-portal.tsx
│ │ │ │ ├── custom-portal-container.tsx
│ │ │ │ └── page.tsx
│ │ │ ├── progress/
│ │ │ │ └── page.tsx
│ │ │ ├── radio-group/
│ │ │ │ └── page.tsx
│ │ │ ├── roving-focus-group/
│ │ │ │ ├── page.tsx
│ │ │ │ └── roving-focus.client.tsx
│ │ │ ├── scroll-area/
│ │ │ │ └── page.tsx
│ │ │ ├── select/
│ │ │ │ └── page.tsx
│ │ │ ├── separator/
│ │ │ │ └── page.tsx
│ │ │ ├── slider/
│ │ │ │ └── page.tsx
│ │ │ ├── slot/
│ │ │ │ └── page.tsx
│ │ │ ├── switch/
│ │ │ │ └── page.tsx
│ │ │ ├── tabs/
│ │ │ │ └── page.tsx
│ │ │ ├── toast/
│ │ │ │ └── page.tsx
│ │ │ ├── toggle-group/
│ │ │ │ └── page.tsx
│ │ │ ├── toolbar/
│ │ │ │ └── page.tsx
│ │ │ ├── tooltip/
│ │ │ │ └── page.tsx
│ │ │ └── visually-hidden/
│ │ │ └── page.tsx
│ │ ├── next-env.d.ts
│ │ ├── next.config.js
│ │ ├── package.json
│ │ └── tsconfig.json
│ └── storybook/
│ ├── .gitignore
│ ├── .storybook/
│ │ ├── main.ts
│ │ ├── manager-head.html
│ │ ├── manager.ts
│ │ ├── preview.css
│ │ └── preview.ts
│ ├── eslint.config.js
│ ├── index.d.ts
│ ├── package.json
│ ├── stories/
│ │ ├── accessible-icon.stories.tsx
│ │ ├── accordion.stories.module.css
│ │ ├── accordion.stories.tsx
│ │ ├── alert-dialog.stories.module.css
│ │ ├── alert-dialog.stories.tsx
│ │ ├── arrow.stories.tsx
│ │ ├── aspect-ratio.stories.module.css
│ │ ├── aspect-ratio.stories.tsx
│ │ ├── avatar.stories.module.css
│ │ ├── avatar.stories.tsx
│ │ ├── checkbox.stories.module.css
│ │ ├── checkbox.stories.tsx
│ │ ├── collapsible.stories.module.css
│ │ ├── collapsible.stories.tsx
│ │ ├── collection.stories.tsx
│ │ ├── context-menu.stories.module.css
│ │ ├── context-menu.stories.tsx
│ │ ├── dialog.stories.module.css
│ │ ├── dialog.stories.tsx
│ │ ├── dismissable-layer.stories.tsx
│ │ ├── dropdown-menu.stories.module.css
│ │ ├── dropdown-menu.stories.tsx
│ │ ├── focus-scope.stories.tsx
│ │ ├── form.stories.module.css
│ │ ├── form.stories.tsx
│ │ ├── hover-card.stories.module.css
│ │ ├── hover-card.stories.tsx
│ │ ├── label.stories.module.css
│ │ ├── label.stories.tsx
│ │ ├── menu.stories.module.css
│ │ ├── menu.stories.tsx
│ │ ├── menubar.stories.module.css
│ │ ├── menubar.stories.tsx
│ │ ├── navigation-menu.stories.module.css
│ │ ├── navigation-menu.stories.tsx
│ │ ├── one-time-password-field.stories.module.css
│ │ ├── one-time-password-field.stories.tsx
│ │ ├── password-toggle-field.stories.module.css
│ │ ├── password-toggle-field.stories.tsx
│ │ ├── popover.stories.module.css
│ │ ├── popover.stories.tsx
│ │ ├── popper.stories.module.css
│ │ ├── popper.stories.tsx
│ │ ├── portal.stories.tsx
│ │ ├── presence.stories.module.css
│ │ ├── presence.stories.tsx
│ │ ├── progress.stories.module.css
│ │ ├── progress.stories.tsx
│ │ ├── radio-group.stories.module.css
│ │ ├── radio-group.stories.tsx
│ │ ├── roving-focus-group.stories.tsx
│ │ ├── scroll-area.stories.module.css
│ │ ├── scroll-area.stories.tsx
│ │ ├── select.stories.module.css
│ │ ├── select.stories.tsx
│ │ ├── separator.stories.module.css
│ │ ├── separator.stories.tsx
│ │ ├── slider.stories.module.css
│ │ ├── slider.stories.tsx
│ │ ├── slot.stories.tsx
│ │ ├── switch.stories.module.css
│ │ ├── switch.stories.tsx
│ │ ├── tabs.stories.module.css
│ │ ├── tabs.stories.tsx
│ │ ├── toast.stories.module.css
│ │ ├── toast.stories.tsx
│ │ ├── toggle-group.stories.module.css
│ │ ├── toggle-group.stories.tsx
│ │ ├── toggle.stories.module.css
│ │ ├── toggle.stories.tsx
│ │ ├── toolbar.stories.module.css
│ │ ├── toolbar.stories.tsx
│ │ ├── tooltip.stories.module.css
│ │ ├── tooltip.stories.tsx
│ │ └── visually-hidden.stories.tsx
│ └── tsconfig.json
├── context7.json
├── cypress/
│ ├── e2e/
│ │ ├── ContextMenu.cy.ts
│ │ ├── Dialog.cy.ts
│ │ ├── DropdownMenu.cy.ts
│ │ ├── Form.cy.ts
│ │ ├── Menubar.cy.ts
│ │ ├── Select.cy.ts
│ │ └── Toast.cy.ts
│ ├── support/
│ │ ├── commands.js
│ │ ├── e2e.js
│ │ └── index.d.ts
│ └── tsconfig.json
├── cypress.config.ts
├── eslint.config.mjs
├── internal/
│ ├── builder/
│ │ ├── builder.js
│ │ ├── eslint.config.js
│ │ ├── package.json
│ │ ├── radix-build.js
│ │ └── tsconfig.json
│ ├── eslint-config/
│ │ ├── eslint.config.js
│ │ ├── index.js
│ │ ├── package.json
│ │ ├── react-package.js
│ │ ├── tsconfig.json
│ │ └── vite.js
│ ├── test-data/
│ │ ├── eslint.config.js
│ │ ├── foods.ts
│ │ ├── package.json
│ │ └── tsconfig.json
│ └── typescript-config/
│ ├── base.json
│ ├── nextjs.json
│ ├── package.json
│ ├── react-library/
│ │ └── index.d.ts
│ ├── react-library.json
│ ├── vite-app.json
│ └── vite-node.json
├── package.json
├── packages/
│ ├── core/
│ │ ├── number/
│ │ │ ├── README.md
│ │ │ ├── eslint.config.mjs
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── index.ts
│ │ │ │ └── number.ts
│ │ │ └── tsconfig.json
│ │ ├── primitive/
│ │ │ ├── CHANGELOG.md
│ │ │ ├── README.md
│ │ │ ├── eslint.config.mjs
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── index.ts
│ │ │ │ ├── primitive.tsx
│ │ │ │ └── types.ts
│ │ │ └── tsconfig.json
│ │ └── rect/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── observe-element-rect.ts
│ │ └── tsconfig.json
│ └── react/
│ ├── accessible-icon/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── accesible-icon.test.tsx
│ │ │ ├── accessible-icon.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── accordion/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── accordion.test.tsx
│ │ │ ├── accordion.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── alert-dialog/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── alert-dialog.test.tsx
│ │ │ ├── alert-dialog.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── announce/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── announce.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── arrow/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── arrow.test.tsx
│ │ │ ├── arrow.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── aspect-ratio/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── aspect-ratio.test.tsx
│ │ │ ├── aspect-ratio.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── avatar/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── avatar.test.tsx
│ │ │ ├── avatar.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── checkbox/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── checkbox.test.tsx
│ │ │ ├── checkbox.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── collapsible/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── collapsible.test.tsx
│ │ │ ├── collapsible.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── collection/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── collection-legacy.tsx
│ │ │ ├── collection.tsx
│ │ │ ├── index.ts
│ │ │ ├── ordered-dictionary.test.ts
│ │ │ └── ordered-dictionary.ts
│ │ └── tsconfig.json
│ ├── compose-refs/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── compose-refs.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── context/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── create-context.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── context-menu/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── context-menu.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── dialog/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── dialog.test.tsx
│ │ │ ├── dialog.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── direction/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── direction.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── dismissable-layer/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── dismissable-layer.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── dropdown-menu/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── dropdown-menu.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── focus-guards/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── focus-guards.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── focus-scope/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── focus-scope.test.tsx
│ │ │ ├── focus-scope.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── form/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── form.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── hover-card/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── hover-card.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── id/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── id.tsx
│ │ │ └── index.ts
│ │ └── tsconfig.json
│ ├── label/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── label.tsx
│ │ └── tsconfig.json
│ ├── menu/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── menu.tsx
│ │ └── tsconfig.json
│ ├── menubar/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── menubar.tsx
│ │ └── tsconfig.json
│ ├── navigation-menu/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── navigation-menu.tsx
│ │ └── tsconfig.json
│ ├── one-time-password-field/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── one-time-password-field.test.tsx
│ │ │ └── one-time-password-field.tsx
│ │ └── tsconfig.json
│ ├── password-toggle-field/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── password-toggle-field.test.tsx
│ │ │ └── password-toggle-field.tsx
│ │ └── tsconfig.json
│ ├── popover/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── popover.tsx
│ │ └── tsconfig.json
│ ├── popper/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── popper.tsx
│ │ └── tsconfig.json
│ ├── portal/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── portal.tsx
│ │ └── tsconfig.json
│ ├── presence/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── presence.tsx
│ │ │ └── use-state-machine.tsx
│ │ └── tsconfig.json
│ ├── primitive/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── primitive.tsx
│ │ └── tsconfig.json
│ ├── progress/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── progress.tsx
│ │ └── tsconfig.json
│ ├── radio-group/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── radio-group.tsx
│ │ │ └── radio.tsx
│ │ └── tsconfig.json
│ ├── radix-ui/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── internal.ts
│ │ └── tsconfig.json
│ ├── roving-focus/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── roving-focus-group.tsx
│ │ └── tsconfig.json
│ ├── scroll-area/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── scroll-area.tsx
│ │ │ └── use-state-machine.ts
│ │ └── tsconfig.json
│ ├── select/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── select.tsx
│ │ └── tsconfig.json
│ ├── separator/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── separator.tsx
│ │ └── tsconfig.json
│ ├── slider/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── slider.tsx
│ │ └── tsconfig.json
│ ├── slot/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── __snapshots__/
│ │ │ │ └── slot.test.tsx.snap
│ │ │ ├── index.ts
│ │ │ ├── slot.test.tsx
│ │ │ └── slot.tsx
│ │ └── tsconfig.json
│ ├── switch/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── switch.test.tsx
│ │ │ └── switch.tsx
│ │ └── tsconfig.json
│ ├── tabs/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── tabs.tsx
│ │ └── tsconfig.json
│ ├── toast/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── toast.tsx
│ │ └── tsconfig.json
│ ├── toggle/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── toggle.test.tsx
│ │ │ └── toggle.tsx
│ │ └── tsconfig.json
│ ├── toggle-group/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── toggle-group.test.tsx
│ │ │ └── toggle-group.tsx
│ │ └── tsconfig.json
│ ├── toolbar/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── toolbar.test.tsx
│ │ │ └── toolbar.tsx
│ │ └── tsconfig.json
│ ├── tooltip/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── tooltip.test.tsx
│ │ │ └── tooltip.tsx
│ │ └── tsconfig.json
│ ├── use-callback-ref/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── use-callback-ref.tsx
│ │ └── tsconfig.json
│ ├── use-controllable-state/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── use-controllable-state-reducer.tsx
│ │ │ ├── use-controllable-state.test.tsx
│ │ │ └── use-controllable-state.tsx
│ │ └── tsconfig.json
│ ├── use-effect-event/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── use-effect-event.tsx
│ │ └── tsconfig.json
│ ├── use-escape-keydown/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── use-escape-keydown.tsx
│ │ └── tsconfig.json
│ ├── use-is-hydrated/
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── use-is-hydrated.tsx
│ │ └── tsconfig.json
│ ├── use-layout-effect/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── use-layout-effect.tsx
│ │ └── tsconfig.json
│ ├── use-previous/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── use-previous.tsx
│ │ └── tsconfig.json
│ ├── use-rect/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── use-rect.tsx
│ │ └── tsconfig.json
│ ├── use-size/
│ │ ├── README.md
│ │ ├── eslint.config.mjs
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── use-size.tsx
│ │ └── tsconfig.json
│ └── visually-hidden/
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── eslint.config.mjs
│ ├── package.json
│ ├── src/
│ │ ├── index.ts
│ │ └── visually-hidden.tsx
│ └── tsconfig.json
├── patches/
│ └── @changesets__apply-release-plan.patch
├── philosophy.md
├── pnpm-workspace.yaml
├── release-process.md
├── scripts/
│ └── setup-tests.ts
├── types/
│ ├── global.d.ts
│ └── index.d.ts
└── vitest.config.mts
================================================
FILE CONTENTS
================================================
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
================================================
FILE: .changeset/changelog.cjs
================================================
// https://github.com/ariakit/ariakit/blob/main/.changeset/changelog.cjs
// MIT License, Copyright (c) Diego Haz
/** @type {import("@changesets/types").ChangelogFunctions["getDependencyReleaseLine"]} */
async function getDependencyReleaseLine(_, dependenciesUpdated) {
if (dependenciesUpdated.length === 0) return '';
const updatedDepenenciesList = dependenciesUpdated.map(
(dependency) => `\`${dependency.name}@${dependency.newVersion}\``,
);
return `- Updated dependencies: ${updatedDepenenciesList.join(', ')}`;
}
/** @type {import("@changesets/types").ChangelogFunctions["getReleaseLine"]} */
async function getReleaseLine(changeset) {
const [firstLine, ...nextLines] = changeset.summary.split('\n').map((l) => l.trimEnd());
if (!nextLines.length) return `- ${firstLine}`;
return `### ${firstLine}\n${nextLines.join('\n')}`;
}
/**
* @param {Array<Promise<string>} changelogLines
*/
async function getChangelogText(changelogLines) {
const lines = await Promise.all(changelogLines);
if (!lines.length) return '';
const isOverviewLine = (l) => l.startsWith('### Overview\n');
const isHeadingLine = (l) => l.startsWith('###');
const isOtherLine = (l) => !l.startsWith('###');
const headingLines = lines
.filter(isHeadingLine)
.sort((a, b) => {
if (isOverviewLine(a)) return -1;
if (isOverviewLine(b)) return 1;
return 0;
})
.map((l) => l.replace('### Overview\n\n', ''));
const otherLines = lines.filter(isOtherLine);
if (!headingLines.length && !otherLines.length) return '';
const other = otherLines.join('\n');
if (!headingLines.length) return other;
const heading = headingLines.join('\n\n');
if (!otherLines.length) return heading;
return `${heading}\n\n### Other updates\n\n${other}`;
}
/**
* @param {import("@changesets/types").ModCompWithPackage} release
* @param {Record<"major" | "minor" | "patch", Array<Promise<string>>} changelogLines
*/
async function getChangelogEntry(release, changelogLines) {
// const date = new Date().toLocaleDateString("en-US", {
// month: "long",
// day: "numeric",
// year: "numeric",
// });
const text = await getChangelogText(Object.values(changelogLines).flat());
return `## ${release.newVersion}\n\n${text}`;
}
module.exports = {
getDependencyReleaseLine,
getReleaseLine,
getChangelogEntry,
};
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
"changelog": "./changelog.cjs",
"access": "public",
"commit": false,
"fixed": [],
"linked": [],
"baseBranch": "main",
"updateInternalDependencies": "patch",
"snapshot": {
"useCalculatedVersion": true,
"prereleaseTemplate": "rc.{timestamp}"
},
"ignore": ["@repo/ssr-testing", "@repo/storybook"]
}
================================================
FILE: .changeset/silent-turkeys-fly.md
================================================
---
'@radix-ui/react-collection': patch
---
Updated `unstable_createCollection` signature to extend `BaseItemData` internally
================================================
FILE: .changeset/ten-pumas-agree.md
================================================
---
'@radix-ui/react-direction': patch
---
Added `use client` directive to module entrypoint
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
tab_width = 2
trim_trailing_whitespace = true
[Makefile]
indent_style = tab
tab_width = 4
[{*.md,*.mdx}]
trim_trailing_whitespace = false
================================================
FILE: .github/CODEOWNERS
================================================
# Add the following users as reviewers on new pull requests
- @lucasmotta @hadihallak @chaance
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing to Radix Primitives
## Code of Conduct
Radix has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it.
Please read [the full text](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
## Heuristics
[heuristic](<https://en.wikipedia.org/wiki/Heuristic_(computer_science)>)
/ˌhjʊ(ə)ˈrɪstɪk/
> A technique designed for solving a problem more quickly when classic methods are too slow, or for finding an approximate solution when classic methods fail to find any exact solution
- Priority is the best User Experience
- Complexity should be introduced when it’s inevitable
- Code should be easy to reason about
- Code should be easy to delete
- Avoid abstracting too early
- Avoid thinking too far in the future
## Questions
If you have questions about Radix Primitives, be sure to check out the docs where we have several examples and detailed API references that may help you solve your problem. You can also share your questions on [GitHub Discussions](https://github.com/radix-ui/primitives/discussions).
## How to contribute
There are many ways to contribute to the project. Code is just one possible means of contribution.
- **Feedback.** Tell us what we're doing well or where we can improve.
- **Support.** You can answer questions on StackOverflow or [GitHub Discussions](https://github.com/radix-ui/primitives/discussions), or provide solutions for others in [open issues](https://github.com/radix-ui/primitives/issues).
- **Write.** If you come up with an interesting example, write about it. Post it to your blog and share it with us. We'd love to see what folks in the community build with Primitives!
- **Report.** Create issues with bug reports so we can make Primitives even better.
## Working on your first Pull Request?
There are a lot of great resources on creating a good pull request. We've included a few below, but don't be shy—we appreciate all contriibutions and are happy to help those who are willing to help us!
- [How to Contribute to a Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
## Preparing a Pull Request
[Pull Requests](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) are always welcome, but before working on a large change, it is best to open an issue first to discuss it with maintainers.
A good PR is small, focuses on a single feature or improvement, and clearly communicates the problem it solves. Try not to include more than one issue in a single PR. It's much easier for us to review multiple small pull requests than one that is large and unwieldy.
1. [Fork the repository](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo).
2. Clone the fork to your local machine and add upstream remote:
```sh
git clone https://github.com/<your username>/primitives.git
cd primitives
git remote add upstream https://github.com/radix-ui/primitives.git
```
3. Synchronize your local `main` branch with the upstream remote:
```sh
git checkout main
git pull upstream main
```
4. Make sure your Node version matches the [.nvmrc](../.nvmrc).
```
node -v
```
1. Install dependencies with [pnpm](https://pnpm.io):
```sh
pnpm install
```
6. Create a new branch related to your PR:
```sh
git checkout -b my-bug-fix
```
7. Make changes, then commit and push to your forked repository:
```sh
git push -u origin HEAD
```
8. Go to [the repository](https://github.com/radix-ui/primitives) and [make a Pull Request](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).
9. We will review your Pull Request and either merge it, request changes to it, or close it with an explanation.
## Working locally
The repo is managed with pnpm workspaces.
### Development
```bash
# install dependencies
pnpm install
# start Storybook and see examples in the browser
pnpm dev
```
Make your changes and check that they resolve the problem with an example in Storybook. We also suggest adding tests to support your change, and then run `pnpm test` to make sure nothing is broken.
You also need to inform Changesets that a particular package has changed for proper versioning. Run `pnpm changeset` to mark the appropriate type of change for those packages, then commit the resulting Changeset files.
Lastly, run `pnpm build` to ensure that the build runs successfully before submitting the pull request.
================================================
FILE: .github/ISSUE_TEMPLATE/Bug_report.md
================================================
---
name: 'Bug report'
about: 'Create a bug report'
---
## Bug report
### Current Behavior
<!-- If applicable, add screenshots/videos to help explain the problem. -->
### Expected behavior
<!-- A clear and concise description of what you expected to happen. -->
### Reproducible example
[CodeSandbox Template](https://codesandbox.io/s/2r30e)
### Suggested solution
<!-- How could we solve this bug? What changes would need to made? -->
### Additional context
<!-- Add any other context about the problem here. -->
### Your environment
<!-- Very important for us to help you debug. Please fill this out! -->
| Software | Name(s) | Version |
| ---------------- | ------- | ------- |
| Radix Package(s) | | |
| React | n/a | |
| Browser | | |
| Assistive tech | | |
| Node | n/a | |
| npm/yarn/pnpm | | |
| Operating System | | |
================================================
FILE: .github/ISSUE_TEMPLATE/Documentation.md
================================================
---
name: 'Documentation'
about: 'Suggestions for Radix documentation'
---
## Documentation
### Relevant Radix Component(s)
<!-- Tell us which components you'd like to see improvements for. -->
### Examples from other doc sites
<!-- Please link to examples of your suggestion if applicable. -->
================================================
FILE: .github/ISSUE_TEMPLATE/Feature_request.md
================================================
---
name: 'Feature request'
about: 'Suggest an idea for a feature or a new component'
---
## Feature request
### Overview
<!-- A clear and concise description of the feature you'd like to see. -->
### Examples in other libraries
<!-- Please link to examples of this feature implemented elsewhere if it exists. -->
### Who does this impact? Who is this for?
<!-- Who is this for? All users? Beginners? Advanced? Yourself? Help us understand the value of this feature! -->
### Additional context
<!-- Add any other context or links about the request here. -->
================================================
FILE: .github/ISSUE_TEMPLATE/Question.md
================================================
---
name: 'Question'
about: 'For usage questions, please use Stack Overflow or use GitHub Discussions'
---
## Question
For usage questions, please use Stack Overflow or use [GitHub Discussions](https://github.com/radix-ui/primitives/discussions) instead of posting an issue. This helps us keep bugs and feature requests prioritized, and it increases the liklihood that more people see your question and can answer it more qiuckly!
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
<!--
Thank you for contributing! Please follow the steps below to help us process your PR quickly.
- 📝 Use a meaningful title for the pull request and include the name of the package modified.
- ✅ Add or edit tests to reflect the change (run `pnpm test`).
- 🔍 Add or edit Storybook examples to reflect the change (run `pnpm dev`).
- 🙏 Please review your own PR to check for anything you may have missed.
-->
### Description
<!-- Describe the change you are introducing -->
================================================
FILE: .github/workflows/build.yml
================================================
name: Build
on:
pull_request:
branches:
- main
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
run_install: false
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Lint
run: pnpm lint
- name: Run build
run: pnpm build
- name: Run tests
run: pnpm test:ci
================================================
FILE: .github/workflows/chromatic.yml
================================================
name: 'Chromatic'
on:
push:
branches:
- main
# "You must append a colon (:) to all events, including events without configuration."
# https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#example-using-multiple-events-with-activity-types-or-configuration
pull_request:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
chromatic-deployment:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
run_install: false
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Publish to Chromatic
uses: chromaui/action@v1
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: 63f2bd83c33c
exitOnceUploaded: true
exitZeroOnChanges: true
================================================
FILE: .github/workflows/publish-snapshot.yml
================================================
name: 'Publish Snapshot Release'
on:
push:
branches:
- main
paths-ignore:
# - '.github/**'
- './package.json'
- './changeset/**/*'
- '/apps/**/*'
- '/internal/**/*'
- '/cypress/**/*'
- '**/*.test.ts'
- '**/*.test.tsx'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
concurrency: ${{ github.workflow }}-${{ github.ref }}
jobs:
publish-snapshot:
if: github.repository == 'radix-ui/primitives'
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
run_install: false
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
registry-url: 'https://registry.npmjs.org'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build packages
run: pnpm build
- name: Write .npmrc
run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
- name: Update snapshot version
run: pnpm run bump:next
- name: Publish snapshot
run: pnpm run release:next --no-git-checks
================================================
FILE: .github/workflows/publish-stable.yml
================================================
name: 'Publish Stable Release'
on:
push:
branches:
- stable
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
concurrency: ${{ github.workflow }}-${{ github.ref }}
jobs:
publish-stable:
if: github.repository == 'radix-ui/primitives'
name: Version or publish
timeout-minutes: 15
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
run_install: false
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
registry-url: 'https://registry.npmjs.org'
cache: 'pnpm'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build packages
run: pnpm build
- name: Write .npmrc
run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@v1
with:
title: New release
commit: New release
version: pnpm run bump:stable
publish: pnpm run release:stable:ci
createGithubReleases: false
================================================
FILE: .gitignore
================================================
*.log*
.DS_Store
node_modules
dist
test-output.*
.cache
storybook-static
.env
.eslintcache
.pnp
.pnp.js
*.pem
.npmrc
# Testing
cypress/videos
cypress/screenshots
# Editor-specific
.vscode
.idea
# So devs can maintain their own todo lists in the project
TODO.md
================================================
FILE: .nvmrc
================================================
22
================================================
FILE: .prettierignore
================================================
.next
node_modules
.yarn
dist
storybook-static
.pnp
.pnp.js
coverage
pnpm-lock.yaml
package-lock.json
yarn.lock
*.log*
.DS_Store
*.pem
================================================
FILE: .prettierrc
================================================
{
"printWidth": 100,
"singleQuote": true
}
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at colm@workos.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2022 WorkOS
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
[](https://radix-ui.com/primitives)
# Radix Primitives
**An open-source UI component library for building high-quality, accessible design systems and web apps.**
Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.
---
## Installation
First, install pnpm if you haven't already. Open your terminal and run:
```bash
npm install -g pnpm
```
Then, install the dependencies:
```bash
pnpm install
```
## Documentation
For full documentation, visit [radix-ui.com/primitives/docs](https://www.radix-ui.com/primitives/docs).
## Releases
For changelog, visit [radix-ui.com/primitives/docs/overview/releases](https://www.radix-ui.com/primitives/docs/overview/releases).
## Contributing
Please follow our [contributing guidelines](./.github/CONTRIBUTING.md).
---
## Community
- [Discord](https://discord.com/invite/7Xb99uG) - To get involved with the Radix community, ask questions and share tips.
- [Twitter](https://twitter.com/radix_ui) - To receive updates, announcements, blog posts, and general Radix tips.
## Thanks
<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
---
## License
Licensed under the MIT License, Copyright © 2022-present [WorkOS](https://workos.com).
================================================
FILE: apps/ssr-testing/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
*.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# vercel
.vercel
================================================
FILE: apps/ssr-testing/README.md
================================================
# `@repo/ssr-testing`
This is a testing playground for SSR support in our primitives using a [Next.js](https://nextjs.org/) project.
## Getting Started
From the root of the repo, run the development server:
```sh
pnpm dev:ssr
```
================================================
FILE: apps/ssr-testing/app/accessible-icon/page.tsx
================================================
import * as React from 'react';
import { AccessibleIcon } from 'radix-ui';
export default function Page() {
return (
<button type="button">
<AccessibleIcon.Root label="Close">
<span>X</span>
</AccessibleIcon.Root>
</button>
);
}
================================================
FILE: apps/ssr-testing/app/accordion/page.tsx
================================================
import * as React from 'react';
import { Accordion } from 'radix-ui';
export default function Page() {
return (
<Accordion.Root type="multiple">
<Accordion.Item value="one">
<Accordion.Header>
<Accordion.Trigger>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="two">
<Accordion.Header>
<Accordion.Trigger>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="three" disabled>
<Accordion.Header>
<Accordion.Trigger>Three (disabled)</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos
euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="four">
<Accordion.Header>
<Accordion.Trigger>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content>
Odio placerat quisque sapien sagittis non sociis ligula penatibus dignissim vitae, enim
vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
}
================================================
FILE: apps/ssr-testing/app/alert-dialog/page.tsx
================================================
import * as React from 'react';
import { AlertDialog } from 'radix-ui';
export default function Page() {
return (
<AlertDialog.Root>
<AlertDialog.Trigger>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay />
<AlertDialog.Content>
<AlertDialog.Title>Are you sure?</AlertDialog.Title>
<AlertDialog.Description>
This will do a very dangerous thing. Thar be dragons!
</AlertDialog.Description>
<AlertDialog.Action>yolo, do it</AlertDialog.Action>
<AlertDialog.Cancel>maybe not</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
);
}
================================================
FILE: apps/ssr-testing/app/avatar/page.tsx
================================================
import * as React from 'react';
import { Avatar } from 'radix-ui';
export default function Page() {
return (
<Avatar.Root>
<Avatar.Fallback>A</Avatar.Fallback>
<Avatar.AvatarImage src="https://picsum.photos/id/1005/400/400" />
</Avatar.Root>
);
}
================================================
FILE: apps/ssr-testing/app/checkbox/page.tsx
================================================
import * as React from 'react';
import { Checkbox } from 'radix-ui';
export default function Page() {
return (
<Checkbox.Root>
[ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
</Checkbox.Root>
);
}
================================================
FILE: apps/ssr-testing/app/collapsible/page.tsx
================================================
import * as React from 'react';
import { Collapsible } from 'radix-ui';
export default function Page() {
return (
<Collapsible.Root>
<Collapsible.Trigger>Trigger</Collapsible.Trigger>
<Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>
);
}
================================================
FILE: apps/ssr-testing/app/context-menu/page.tsx
================================================
import * as React from 'react';
import { ContextMenu } from 'radix-ui';
export default function Page() {
return (
<ContextMenu.Root>
<ContextMenu.Trigger>Right click here</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content alignOffset={-5}>
<ContextMenu.Item>Undo</ContextMenu.Item>
<ContextMenu.Item>Redo</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item disabled>Cut</ContextMenu.Item>
<ContextMenu.Item>Copy</ContextMenu.Item>
<ContextMenu.Item>Paste</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
);
}
================================================
FILE: apps/ssr-testing/app/dialog/page.tsx
================================================
import * as React from 'react';
import { Dialog } from 'radix-ui';
export default function Page() {
return (
<Dialog.Root defaultOpen>
<Dialog.Trigger>open</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>Description</Dialog.Description>
<Dialog.Close>close</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
}
================================================
FILE: apps/ssr-testing/app/dropdown-menu/page.tsx
================================================
import * as React from 'react';
import { DropdownMenu } from 'radix-ui';
export default function Page() {
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger>Open</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content sideOffset={5}>
<DropdownMenu.Item>Undo</DropdownMenu.Item>
<DropdownMenu.Item>Redo</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item disabled>Cut</DropdownMenu.Item>
<DropdownMenu.Item>Copy</DropdownMenu.Item>
<DropdownMenu.Item>Paste</DropdownMenu.Item>
<DropdownMenu.Arrow />
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
);
}
================================================
FILE: apps/ssr-testing/app/form/page.tsx
================================================
import * as React from 'react';
import { Form } from 'radix-ui';
export default function Page() {
return (
<Form.Root>
<Form.Field name="email">
<Form.Label>Email</Form.Label>
<Form.Control type="email" required />
<Form.Message match="valueMissing">Value is missing</Form.Message>
<Form.Message match="typeMismatch">Email is invalid</Form.Message>
</Form.Field>
</Form.Root>
);
}
================================================
FILE: apps/ssr-testing/app/hover-card/page.tsx
================================================
import * as React from 'react';
import { HoverCard } from 'radix-ui';
export default function Page() {
return (
<HoverCard.Root>
<HoverCard.Trigger>Hover me</HoverCard.Trigger>
<HoverCard.Portal>
<HoverCard.Content>
<HoverCard.Arrow width={20} height={10} />
Nicely done!
</HoverCard.Content>
</HoverCard.Portal>
</HoverCard.Root>
);
}
================================================
FILE: apps/ssr-testing/app/label/page.tsx
================================================
import * as React from 'react';
import { Label } from 'radix-ui';
export default function Page() {
return <Label.Root>Label</Label.Root>;
}
================================================
FILE: apps/ssr-testing/app/layout.tsx
================================================
import * as React from 'react';
import type { Metadata } from 'next';
import Link from 'next/link';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<React.StrictMode>
<html lang="en">
<body style={{ margin: 0, padding: '2em 3em' }}>
<h1>SSR / RSC testing</h1>
<div style={{ display: 'flex', gap: '10em' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5em' }}>
<Link href="/accessible-icon">AccessibleIcon</Link>
<Link href="/accordion">Accordion</Link>
<Link href="/alert-dialog">AlertDialog</Link>
<Link href="/avatar">Avatar</Link>
<Link href="/checkbox">Checkbox</Link>
<Link href="/collapsible">Collapsible</Link>
<Link href="/context-menu">ContextMenu</Link>
<Link href="/dialog">Dialog</Link>
<Link href="/dropdown-menu">DropdownMenu</Link>
<Link href="/form">Form</Link>
<Link href="/hover-card">HoverCard</Link>
<Link href="/label">Label</Link>
<Link href="/menubar">Menubar</Link>
<Link href="/navigation-menu">NavigationMenu</Link>
<Link href="/one-time-password-field">OneTimePasswordField</Link>
<Link href="/password-toggle-field">PasswordToggleField</Link>
<Link href="/popover">Popover</Link>
<Link href="/portal">Portal</Link>
<Link href="/progress">Progress</Link>
<Link href="/radio-group">RadioGroup</Link>
<Link href="/roving-focus-group">RovingFocusGroup</Link>
<Link href="/scroll-area">ScrollArea</Link>
<Link href="/select">Select</Link>
<Link href="/separator">Separator</Link>
<Link href="/slider">Slider</Link>
<Link href="/slot">Slot</Link>
<Link href="/switch">Switch</Link>
<Link href="/tabs">Tabs</Link>
<Link href="/toast">Toast</Link>
<Link href="/toggle-group">ToggleGroup</Link>
<Link href="/toolbar">Toolbar</Link>
<Link href="/tooltip">Tooltip</Link>
<Link href="/visually-hidden">VisuallyHidden</Link>
</div>
<div>{children}</div>
</div>
</body>
</html>
</React.StrictMode>
);
}
export const metadata: Metadata = {
title: 'SSR testing',
};
================================================
FILE: apps/ssr-testing/app/menubar/page.tsx
================================================
import * as React from 'react';
import { Menubar } from 'radix-ui';
export default function Page() {
return (
<Menubar.Root>
<Menubar.Menu>
<Menubar.Trigger>Open</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content>
<Menubar.Label>Menu</Menubar.Label>
<Menubar.Item>Item 1</Menubar.Item>
<Menubar.Item>Item 2</Menubar.Item>
<Menubar.Item>Item 3</Menubar.Item>
<Menubar.Arrow />
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
);
}
================================================
FILE: apps/ssr-testing/app/navigation-menu/page.tsx
================================================
import * as React from 'react';
import { NavigationMenu } from 'radix-ui';
export default function Page() {
return (
<NavigationMenu.Root>
<NavigationMenu.List>
<NavigationMenu.Item>
<NavigationMenu.Trigger>Nav Menu Item 1</NavigationMenu.Trigger>
<NavigationMenu.Content>
<NavigationMenu.Link href="/">Link</NavigationMenu.Link>
</NavigationMenu.Content>
</NavigationMenu.Item>
<NavigationMenu.Item>
<NavigationMenu.Link href="/">Nav Menu Item 2</NavigationMenu.Link>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu.Root>
);
}
================================================
FILE: apps/ssr-testing/app/one-time-password-field/page.tsx
================================================
import * as React from 'react';
import { unstable_OneTimePasswordField as OneTimePasswordField } from 'radix-ui';
export default function Page() {
return (
<div>
<OneTimePasswordField.Root placeholder="123456">
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.Input />
<OneTimePasswordField.HiddenInput />
</OneTimePasswordField.Root>
<h2>With indices</h2>
<OneTimePasswordField.Root placeholder="123456">
<OneTimePasswordField.Input index={0} />
<OneTimePasswordField.Input index={1} />
<OneTimePasswordField.Input index={2} />
<OneTimePasswordField.Input index={3} />
<OneTimePasswordField.Input index={4} />
<OneTimePasswordField.Input index={5} />
<OneTimePasswordField.HiddenInput />
</OneTimePasswordField.Root>
</div>
);
}
================================================
FILE: apps/ssr-testing/app/page.tsx
================================================
export default function Page() {
return null;
}
================================================
FILE: apps/ssr-testing/app/password-toggle-field/page.tsx
================================================
import * as React from 'react';
import { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';
export default function Page() {
return (
<div style={{ display: 'flex', gap: '1em', flexDirection: 'column' }}>
<div>
<PasswordToggleField.Root>
<PasswordToggleField.Input />
<PasswordToggleField.Toggle>
<PasswordToggleField.Slot visible="Hide" hidden="Show" />
</PasswordToggleField.Toggle>
</PasswordToggleField.Root>
</div>
<div>
<PasswordToggleField.Root>
<PasswordToggleField.Input />
<PasswordToggleField.Toggle>
<PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />
</PasswordToggleField.Toggle>
</PasswordToggleField.Root>
</div>
</div>
);
}
function EyeClosedIcon() {
return (
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 10.9999 7.50001 10.9999C6.99965 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.3989 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 9.99991 7.50001 9.99991C10.3078 9.99991 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z"
fillRule="evenodd"
clipRule="evenodd"
/>
</svg>
);
}
function EyeOpenIcon() {
return (
<svg
width="15"
height="15"
viewBox="0 0 15 15"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z"
fillRule="evenodd"
clipRule="evenodd"
/>
</svg>
);
}
================================================
FILE: apps/ssr-testing/app/popover/page.tsx
================================================
import * as React from 'react';
import { Popover } from 'radix-ui';
export default function Page() {
return (
<Popover.Root>
<Popover.Trigger>open</Popover.Trigger>
<Popover.Portal>
<Popover.Content sideOffset={5}>
<Popover.Close>close</Popover.Close>
<Popover.Arrow width={20} height={10} />
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
}
================================================
FILE: apps/ssr-testing/app/portal/conditional-portal.tsx
================================================
'use client';
import * as React from 'react';
import { Portal } from 'radix-ui';
export const ConditionalPortal = () => {
const [container, setContainer] = React.useState<Element | null>(null);
const [open, setOpen] = React.useState(false);
return (
<div>
<button onClick={() => setOpen((prev) => !prev)}>Toggle another portal</button>
<b ref={setContainer} />
{open && (
<Portal.Root container={container}>
<span>This content is rendered in a custom container</span>
</Portal.Root>
)}
</div>
);
};
================================================
FILE: apps/ssr-testing/app/portal/custom-portal-container.tsx
================================================
'use client';
import * as React from 'react';
import { Portal } from 'radix-ui';
export const CustomPortalContainer = () => {
const [container, setContainer] = React.useState<Element | null>(null);
return (
<div>
<em ref={setContainer} />
<Portal.Root container={container}>
<span>This content is rendered in a custom container</span>
</Portal.Root>
</div>
);
};
================================================
FILE: apps/ssr-testing/app/portal/page.tsx
================================================
import * as React from 'react';
import { Portal } from 'radix-ui';
import { CustomPortalContainer } from './custom-portal-container';
import { ConditionalPortal } from './conditional-portal';
export default function Page() {
return (
<div>
<div
style={{
maxWidth: 300,
maxHeight: 200,
overflow: 'auto',
border: '1px solid',
}}
>
<h1>This content is rendered in the main DOM tree</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos porro, est ex quia itaque
facere fugit necessitatibus aut enim. Nisi rerum quae, repellat in perspiciatis explicabo
laboriosam necessitatibus eius pariatur.
</p>
<Portal.Root>
<h1>This content is rendered in a portal (another DOM tree)</h1>
<p>
Because of the portal, it can appear in a different DOM tree from the main one (by
default a new element inside the body), even though it is part of the same React tree.
</p>
</Portal.Root>
</div>
<br />
<CustomPortalContainer />
<br />
<ConditionalPortal />
</div>
);
}
================================================
FILE: apps/ssr-testing/app/progress/page.tsx
================================================
import * as React from 'react';
import { Progress } from 'radix-ui';
export default function Page() {
return (
<Progress.Root value={20}>
<Progress.Indicator>Progress</Progress.Indicator>
</Progress.Root>
);
}
================================================
FILE: apps/ssr-testing/app/radio-group/page.tsx
================================================
import * as React from 'react';
import { Label, RadioGroup } from 'radix-ui';
export default function Page() {
return (
<Label.Root>
Favourite pet
<RadioGroup.Root defaultValue="1">
<Label.Root>
<RadioGroup.Item value="1">
[ <RadioGroup.Indicator>X</RadioGroup.Indicator> ]
</RadioGroup.Item>
Cat
</Label.Root>
<br />
<Label.Root>
<RadioGroup.Item value="2">
[ <RadioGroup.Indicator>X</RadioGroup.Indicator> ]
</RadioGroup.Item>
Dog
</Label.Root>
<br />
<Label.Root>
<RadioGroup.Item value="3">
[ <RadioGroup.Indicator>X</RadioGroup.Indicator> ]
</RadioGroup.Item>
Rabbit
</Label.Root>
<br />
</RadioGroup.Root>
</Label.Root>
);
}
================================================
FILE: apps/ssr-testing/app/roving-focus-group/page.tsx
================================================
import * as React from 'react';
import { RovingFocusProvider, RovingFocusToggle, ButtonGroup, Button } from './roving-focus.client';
export default function Page() {
return (
<>
<h1>Basic</h1>
<RovingFocusProvider>
<div>
<RovingFocusToggle />
</div>
<h3>no orientation (both) + no looping</h3>
<ButtonGroup defaultValue="two">
<Button value="one">One</Button>
<Button value="two">Two</Button>
<Button disabled value="three">
Three
</Button>
<Button value="four">Four</Button>
</ButtonGroup>
<h3>no orientation (both) + looping</h3>
<ButtonGroup loop>
<Button value="one">One</Button>
<Button value="two">Two</Button>
<Button disabled value="three">
Three
</Button>
<Button value="four">Four</Button>
</ButtonGroup>
<h3>horizontal orientation + no looping</h3>
<ButtonGroup orientation="horizontal">
<Button value="one">One</Button>
<Button value="two">Two</Button>
<Button disabled value="three">
Three
</Button>
<Button value="four">Four</Button>
</ButtonGroup>
<h3>horizontal orientation + looping</h3>
<ButtonGroup orientation="horizontal" loop>
<Button value="one">One</Button>
<Button value="two">Two</Button>
<Button disabled value="three">
Three
</Button>
<Button value="four">Four</Button>
</ButtonGroup>
<h3>vertical orientation + no looping</h3>
<ButtonGroup orientation="vertical">
<Button value="one">One</Button>
<Button value="two">Two</Button>
<Button disabled value="three">
Three
</Button>
<Button value="four">Four</Button>
</ButtonGroup>
<h3>vertical orientation + looping</h3>
<ButtonGroup orientation="vertical" loop>
<Button value="one">One</Button>
<Button value="two">Two</Button>
<Button disabled value="three">
Three
</Button>
<Button value="four">Four</Button>
</ButtonGroup>
</RovingFocusProvider>
<h1>Nested</h1>
<ButtonGroup orientation="vertical" loop>
<Button value="1">1</Button>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<Button value="2" style={{ marginBottom: 10 }}>
2
</Button>
<ButtonGroup orientation="horizontal" loop>
<Button value="2.1">2.1</Button>
<Button value="2.2">2.2</Button>
<Button disabled value="2.3">
2.3
</Button>
<Button value="2.4">2.4</Button>
</ButtonGroup>
</div>
<Button value="3" disabled>
3
</Button>
<Button value="4">4</Button>
</ButtonGroup>
</>
);
}
================================================
FILE: apps/ssr-testing/app/roving-focus-group/roving-focus.client.tsx
================================================
'use client';
import * as React from 'react';
import { composeEventHandlers, RovingFocus } from 'radix-ui/internal';
type Direction = 'ltr' | 'rtl';
const RovingFocusContext = React.createContext<{
dir: 'ltr' | 'rtl';
setDir: React.Dispatch<React.SetStateAction<Direction>>;
}>({
dir: 'ltr',
setDir: () => void 0,
});
RovingFocusContext.displayName = 'RovingFocusContext';
export function RovingFocusProvider({ children }: { children: React.ReactNode }) {
const [dir, setDir] = React.useState<Direction>('ltr');
return (
<div dir={dir}>
<RovingFocusContext value={{ dir, setDir }}>{children}</RovingFocusContext>
</div>
);
}
export function RovingFocusToggle() {
const { dir, setDir } = React.use(RovingFocusContext);
return (
<button type="button" onClick={() => setDir((prev) => (prev === 'ltr' ? 'rtl' : 'ltr'))}>
Toggle to {dir === 'ltr' ? 'rtl' : 'ltr'}
</button>
);
}
const ButtonGroupContext = React.createContext<{
value?: string;
setValue: React.Dispatch<React.SetStateAction<string | undefined>>;
}>({} as any);
type ButtonGroupProps = Omit<React.ComponentPropsWithRef<'div'>, 'defaultValue'> &
RovingFocus.RovingFocusGroupProps & { defaultValue?: string };
export function ButtonGroup({ defaultValue, ...props }: ButtonGroupProps) {
const [value, setValue] = React.useState(defaultValue);
const { dir } = React.use(RovingFocusContext);
return (
<ButtonGroupContext value={{ value, setValue }}>
<RovingFocus.Root
dir={dir}
{...props}
style={{
...props.style,
display: 'inline-flex',
flexDirection: props.orientation === 'vertical' ? 'column' : 'row',
gap: 10,
}}
/>
</ButtonGroupContext>
);
}
type ButtonProps = Omit<React.ComponentPropsWithRef<'button'>, 'value'> & { value?: string };
export function Button(props: ButtonProps) {
const { value: contextValue, setValue } = React.use(ButtonGroupContext);
const isSelected =
contextValue !== undefined && props.value !== undefined && contextValue === props.value;
return (
<RovingFocus.Item asChild active={isSelected}>
<button
{...props}
style={{
...props.style,
border: '1px solid',
borderColor: '#ccc',
padding: '5px 10px',
borderRadius: 5,
...(isSelected
? {
borderColor: 'black',
backgroundColor: 'black',
color: 'white',
}
: {}),
}}
onClick={props.disabled ? undefined : () => setValue(props.value)}
onFocus={composeEventHandlers(props.onFocus, (event) => {
if (contextValue !== undefined) {
event.target.click();
}
})}
/>
</RovingFocus.Item>
);
}
================================================
FILE: apps/ssr-testing/app/scroll-area/page.tsx
================================================
import * as React from 'react';
import { ScrollArea } from 'radix-ui';
export default function Page() {
return (
<ScrollArea.Root style={{ width: '400px', height: '400px' }}>
<ScrollArea.Scrollbar orientation="vertical">
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Scrollbar orientation="horizontal">
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Viewport style={{ width: '2000px', padding: 20 }}>
<LongContent />
<LongContent />
<LongContent />
<LongContent />
<LongContent />
<LongContent />
<LongContent />
</ScrollArea.Viewport>
<ScrollArea.Corner />
</ScrollArea.Root>
);
}
function LongContent() {
return (
<React.Fragment>
<p>
Lacinia hendrerit auctor nam quisque augue suscipit feugiat, sit at imperdiet vitae lacus.
Dolor sit dui posuere faucibus non pharetra laoreet conubia, augue rhoncus cras nisl sodales
proin hac ipsum, per hendrerit sed volutpat natoque curae consectetur. Curae blandit neque
vehicula vel mauris vulputate per felis sociosqu, sodales integer sollicitudin id litora
accumsan viverra pulvinar, mus non adipiscing dolor facilisis habitasse mi leo. Litora
faucibus eu pulvinar tempus gravida iaculis consectetur risus euismod fringilla, dui posuere
viverra sapien tortor mattis et dolor tempor sem conubia, taciti sociis mus rhoncus cubilia
praesent dapibus aliquet quis. Diam hendrerit aliquam metus dolor fusce lorem, non gravida
arcu primis posuere ipsum adipiscing, mus sollicitudin eros lacinia mollis.
</p>
<p>
Habitant fames mi massa mollis fusce congue nascetur magna bibendum inceptos accumsan,
potenti ipsum ac sollicitudin taciti dis rhoncus lacinia fermentum placerat. Himenaeos
taciti egestas lacinia maecenas ornare ultricies, auctor vitae nulla mi posuere leo mollis,
eleifend lacus rutrum ante curabitur. Nullam mi quisque nulla enim pretium facilisi interdum
morbi, himenaeos velit fames pellentesque eget nascetur laoreet vel rutrum, malesuada risus
ad netus dolor et scelerisque.
</p>
<ul>
<li>Dis cubilia aenean tortor iaculis fames duis aliquet</li>
<li>Erat non lacinia, tempor molestie fringilla</li>
<li>Porttitor litora praesent placerat pulvinar</li>
<li>Arcu curabitur fermentum felis sollicitudin varius nec cras</li>
</ul>
<p>
Habitasse tristique hac ligula in metus blandit lobortis leo nullam litora, tempus fusce
tincidunt phasellus urna est rhoncus pretium etiam eu, fames neque faucibus sociis primis
felis dui vitae odio. Egestas purus morbi pulvinar luctus adipiscing rutrum ultrices hac,
vehicula odio ridiculus cubilia vivamus blandit faucibus, dapibus velit sociis metus
ultricies amet scelerisque.
</p>
<p>
Scelerisque commodo nam cras litora lacinia primis fames morbi natoque, quisque ante duis
phasellus pharetra convallis montes felis. Consectetur leo suspendisse fringilla elementum
maecenas massa urna malesuada auctor senectus, pretium turpis nisi orci ipsum vulputate
cubilia sociis adipiscing. Vulputate ridiculus amet dis accumsan non ultrices fames mattis
hendrerit, ornare elementum sociosqu eget consectetur duis viverra vivamus tincidunt,
blandit nulla porta semper dolor pharetra nisi scelerisque. Consequat conubia porta cras et
ac auctor pellentesque luctus morbi potenti, viverra varius commodo venenatis vestibulum
erat sagittis laoreet.
</p>
</React.Fragment>
);
}
================================================
FILE: apps/ssr-testing/app/select/page.tsx
================================================
import * as React from 'react';
import { Select } from 'radix-ui';
export default function Page() {
return (
<>
<Select.Root defaultValue="1">
<Select.Trigger>
<Select.Value />
<Select.Icon>▼</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content>
<Select.ScrollUpButton>▲</Select.ScrollUpButton>
<Select.Viewport>
<Select.Item value="1">
<Select.ItemText>Item 1</Select.ItemText>
<Select.ItemIndicator>✔</Select.ItemIndicator>
</Select.Item>
<Select.Item value="2">
<Select.ItemText>Item 2</Select.ItemText>
<Select.ItemIndicator>✔</Select.ItemIndicator>
</Select.Item>
<Select.Item value="3">
<Select.ItemText>Item 3</Select.ItemText>
<Select.ItemIndicator>✔</Select.ItemIndicator>
</Select.Item>
</Select.Viewport>
<Select.ScrollDownButton>▼</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</Select.Root>
<form>
<Select.Root>
<Select.Trigger>
<Select.Value placeholder="Pick an option" />
<Select.Icon>▼</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content>
<Select.ScrollUpButton>▲</Select.ScrollUpButton>
<Select.Viewport>
<Select.Item value="1">
<Select.ItemText>Item 1</Select.ItemText>
<Select.ItemIndicator>✔</Select.ItemIndicator>
</Select.Item>
<Select.Item value="2">
<Select.ItemText>Item 2</Select.ItemText>
<Select.ItemIndicator>✔</Select.ItemIndicator>
</Select.Item>
<Select.Item value="3">
<Select.ItemText>Item 3</Select.ItemText>
<Select.ItemIndicator>✔</Select.ItemIndicator>
</Select.Item>
</Select.Viewport>
<Select.ScrollDownButton>▼</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</Select.Root>
</form>
</>
);
}
================================================
FILE: apps/ssr-testing/app/separator/page.tsx
================================================
import * as React from 'react';
import { Separator } from 'radix-ui';
export default function Page() {
return <Separator.Root>***</Separator.Root>;
}
================================================
FILE: apps/ssr-testing/app/slider/page.tsx
================================================
import * as React from 'react';
import { Slider } from 'radix-ui';
export default function Page() {
return (
<Slider.Root
defaultValue={[20, 50]}
max={100}
step={1}
style={{
position: 'relative',
display: 'flex',
alignItems: 'center',
width: 200,
height: 20,
}}
>
<Slider.Track
style={{
backgroundColor: 'grey',
position: 'relative',
flexGrow: 1,
height: 3,
}}
>
<Slider.Range
style={{
position: 'absolute',
backgroundColor: 'blue',
height: '100%',
}}
/>
</Slider.Track>
<Slider.Thumb
style={{
display: 'block',
width: 20,
height: 20,
backgroundColor: 'blue',
}}
/>
<Slider.Thumb
style={{
display: 'block',
width: 20,
height: 20,
backgroundColor: 'blue',
}}
/>
</Slider.Root>
);
}
================================================
FILE: apps/ssr-testing/app/slot/page.tsx
================================================
import * as React from 'react';
import { Slot } from 'radix-ui';
export default function Page() {
return (
<Slot.Root>
<span>I'm in a </span>
<Slot.Slottable>
<em>Slot!?</em>
</Slot.Slottable>
</Slot.Root>
);
}
================================================
FILE: apps/ssr-testing/app/switch/page.tsx
================================================
import * as React from 'react';
import { Switch } from 'radix-ui';
export default function Page() {
return (
<Switch.Root>
<Switch.Thumb>Switch</Switch.Thumb>
</Switch.Root>
);
}
================================================
FILE: apps/ssr-testing/app/tabs/page.tsx
================================================
import * as React from 'react';
import { Tabs } from 'radix-ui';
export default function Page() {
return (
<Tabs.Root defaultValue="one" orientation="vertical">
<Tabs.List aria-label="tabs example">
<Tabs.Trigger value="one">Tab 1</Tabs.Trigger>
<Tabs.Trigger value="two">Tab 2</Tabs.Trigger>
<Tabs.Trigger value="three">Tab 3</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="one">
Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos
integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum
pellentesque volutpat dictum ipsum.
</Tabs.Content>
<Tabs.Content value="two">You'll never find me!</Tabs.Content>
<Tabs.Content value="three">
Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor
quam tempus pretium.
</Tabs.Content>
</Tabs.Root>
);
}
================================================
FILE: apps/ssr-testing/app/toast/page.tsx
================================================
import * as React from 'react';
import { Toast } from 'radix-ui';
export default function Page() {
return (
<Toast.Provider>
<Toast.Root>
<Toast.Title>Toast</Toast.Title>
<Toast.Description>This is a toast message.</Toast.Description>
<Toast.Action altText="Do something">Do something</Toast.Action>
<Toast.Close>Close</Toast.Close>
</Toast.Root>
<Toast.Viewport />
</Toast.Provider>
);
}
================================================
FILE: apps/ssr-testing/app/toggle-group/page.tsx
================================================
import * as React from 'react';
import { ToggleGroup } from 'radix-ui';
export default function Page() {
return (
<ToggleGroup.Root defaultValue="1" type="single">
<ToggleGroup.Item value="1">Item 1</ToggleGroup.Item>
<ToggleGroup.Item value="2">Item 2</ToggleGroup.Item>
</ToggleGroup.Root>
);
}
================================================
FILE: apps/ssr-testing/app/toolbar/page.tsx
================================================
import * as React from 'react';
import { Toolbar } from 'radix-ui';
export default function Page() {
return (
<Toolbar.Root orientation="vertical">
<Toolbar.Button>Button</Toolbar.Button>
<Toolbar.Separator>***</Toolbar.Separator>
<Toolbar.Link href="#">Link</Toolbar.Link>
</Toolbar.Root>
);
}
================================================
FILE: apps/ssr-testing/app/tooltip/page.tsx
================================================
import * as React from 'react';
import { Tooltip } from 'radix-ui';
export default function Page() {
return (
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content sideOffset={5}>
Nicely done!
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
}
================================================
FILE: apps/ssr-testing/app/visually-hidden/page.tsx
================================================
import * as React from 'react';
import { VisuallyHidden } from 'radix-ui';
export default function Page() {
return (
<div>
You won't see this:
<VisuallyHidden.Root>🙈</VisuallyHidden.Root>
</div>
);
}
================================================
FILE: apps/ssr-testing/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
================================================
FILE: apps/ssr-testing/next.config.js
================================================
module.exports = {
experimental: {
externalDir: true,
},
};
================================================
FILE: apps/ssr-testing/package.json
================================================
{
"name": "@repo/ssr-testing",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^15.3.1",
"radix-ui": "workspace:*",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"eslint": "^9.38.0",
"typescript": "^5.9.3"
}
}
================================================
FILE: apps/ssr-testing/tsconfig.json
================================================
{
"extends": "@repo/typescript-config/nextjs.json",
"compilerOptions": {
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
================================================
FILE: apps/storybook/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*storybook.log
================================================
FILE: apps/storybook/.storybook/main.ts
================================================
import type { StorybookConfig } from '@storybook/react-webpack5';
const config: StorybookConfig = {
stories: [
//
'../stories/**/*.mdx',
'../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
features: {
experimentalRSC: true,
},
addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-docs'],
framework: {
name: '@storybook/react-webpack5',
options: {
builder: {},
// enable React strict mode
strictMode: true,
},
},
swc: (config: any) => ({
...config,
jsc: {
...config?.jsc,
transform: {
...config?.jsc?.transform,
react: {
// Do not require importing React into scope to use JSX
runtime: 'automatic',
},
},
},
}),
};
export default config;
================================================
FILE: apps/storybook/.storybook/manager-head.html
================================================
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="icon" type="image/png" href="/favicon-white.svg" type="image/svg+xml" />
================================================
FILE: apps/storybook/.storybook/manager.ts
================================================
import { addons } from 'storybook/manager-api';
import { themes } from 'storybook/theming';
addons.setConfig({
enableShortcuts: false,
theme: themes.light,
});
================================================
FILE: apps/storybook/.storybook/preview.css
================================================
@import '@radix-ui/colors/gray.css';
@import '@radix-ui/colors/blue.css';
@import '@radix-ui/colors/green.css';
@import '@radix-ui/colors/red.css';
@import '@radix-ui/colors/purple.css';
@import '@radix-ui/colors/gray-dark.css';
@import '@radix-ui/colors/blue-dark.css';
@import '@radix-ui/colors/green-dark.css';
@import '@radix-ui/colors/red-dark.css';
@import '@radix-ui/colors/purple-dark.css';
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: inherit;
}
[hidden] {
display: none;
}
:root {
--color-white: #fff;
--color-gray100: #ccc;
--color-gray300: #aaa;
--color-black: #111;
--color-red: crimson;
--color-green: green;
}
body {
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
================================================
FILE: apps/storybook/.storybook/preview.ts
================================================
import type { Preview } from '@storybook/react-webpack5';
import './preview.css';
const preview: Preview = {
parameters: {
layout: 'fullscreen',
options: {
storySort: {
order: ['Components', 'Utilities'],
},
},
// disables Chromatic on a global level
chromatic: { disable: true },
docs: {
codePanel: true,
},
},
};
export default preview;
================================================
FILE: apps/storybook/eslint.config.js
================================================
// @ts-check
import storybook from 'eslint-plugin-storybook';
import { configs } from '@repo/eslint-config/vite';
/** @type {import("eslint").Linter.Config[]} */
export default [...configs, ...storybook.configs['flat/recommended']];
================================================
FILE: apps/storybook/index.d.ts
================================================
type CSSModuleClasses = { readonly [key: string]: string };
declare module '*.module.css' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.css' {}
================================================
FILE: apps/storybook/package.json
================================================
{
"name": "@repo/storybook",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"lint": "eslint --max-warnings 0 .",
"dev": "storybook dev -p 6006",
"build": "storybook build",
"serve": "serve storybook-static -l 6006",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@radix-ui/colors": "^3.0.0",
"@repo/test-data": "workspace:*",
"form-serialize": "^0.7.2",
"radix-ui": "workspace:*",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-remove-scroll": "^2.6.3"
},
"devDependencies": {
"@chromatic-com/storybook": "^4.1.1",
"@repo/eslint-config": "workspace:*",
"@repo/typescript-config": "workspace:*",
"@storybook/addon-docs": "^9.1.15",
"@storybook/addon-webpack5-compiler-swc": "^4.0.1",
"@storybook/react-webpack5": "^9.1.15",
"@types/form-serialize": "^0",
"@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2",
"eslint": "^9.38.0",
"eslint-plugin-storybook": "^9.1.15",
"serve": "^14.2.5",
"storybook": "^9.1.15",
"typescript": "^5.9.3"
}
}
================================================
FILE: apps/storybook/stories/accessible-icon.stories.tsx
================================================
import { AccessibleIcon } from 'radix-ui';
export default { title: 'Utilities/AccessibleIcon' };
export const Styled = () => (
<button type="button">
<AccessibleIcon.Root label="Close">
<CrossIcon />
</AccessibleIcon.Root>
</button>
);
export const Chromatic = () => (
<p>
Some text with an inline accessible icon{' '}
<AccessibleIcon.Root label="Close">
<CrossIcon />
</AccessibleIcon.Root>
</p>
);
Chromatic.parameters = { chromatic: { disable: false } };
const CrossIcon = () => (
<svg viewBox="0 0 32 32" width={24} height={24} fill="none" stroke="currentColor">
<path d="M2 30 L30 2 M30 30 L2 2" />
</svg>
);
================================================
FILE: apps/storybook/stories/accordion.stories.module.css
================================================
.root {
font-family: sans-serif;
&[data-orientation='horizontal'] {
display: flex;
max-width: 40em;
height: 50vh;
}
&[data-orientation='vertical'] {
max-width: 20em;
}
}
.item {
&[data-orientation='horizontal'] {
display: flex;
border-right: 1px solid var(--gray-1);
}
&[data-orientation='vertical'] {
border-bottom: 1px solid var(--gray-1);
}
}
.header {
margin: 0;
&[data-orientation='horizontal'] {
height: 100%;
}
}
.trigger {
/* because it's a button, we want to stretch it */
&[data-orientation='horizontal'] {
height: 100%;
}
&[data-orientation='vertical'] {
width: 100%;
}
text-align: inherit;
box-sizing: border-box;
appearance: none;
border: none;
padding: 10px;
background-color: black;
color: var(--gray-1);
font-family: inherit;
font-size: 1.2em;
&:focus {
outline: 2px solid var(--red-8);
color: var(--red-9);
}
&[data-disabled] {
color: var(--gray-9);
}
&[data-state='open'] {
background-color: var(--red-9);
color: var(--gray-1);
&:focus {
color: var(--gray-12);
}
}
}
.content {
padding: 10px;
line-height: 1.5;
}
.animatedContent {
overflow: hidden;
&[data-state='open'] {
animation: accordion-slideDown 300ms ease-out;
}
&[data-state='closed'] {
animation: accordion-slideUp 300ms ease-out;
}
}
.animated2DContent {
overflow: hidden;
&[data-state='open'] {
animation: accordion-open2D 1000ms ease-out;
}
&[data-state='closed'] {
animation: accordion-close2D 1000ms ease-out;
}
}
.rootAttr,
.itemAttr,
.headerAttr,
.triggerAttr,
.contentAttr {
background-color: var(--blue-a12);
border: 2px solid var(--blue-9);
padding: 10px;
&[data-state='closed'] {
border-color: var(--red-9);
}
&[data-state='open'] {
border-color: var(--green-9);
}
&[data-disabled] {
border-style: dashed;
}
&:disabled {
opacity: 0.5;
}
}
.contentAttr {
/* ensure we can see the content (because it has `hidden` attribute) */
display: block;
}
@keyframes accordion-slideDown {
from {
height: 0;
}
to {
height: var(--radix-accordion-content-height);
}
}
@keyframes accordion-slideUp {
from {
height: var(--radix-accordion-content-height);
}
to {
height: 0;
}
}
@keyframes accordion-open2D {
from {
width: 0;
height: 0;
}
to {
width: var(--radix-accordion-content-width);
height: var(--radix-accordion-content-height);
}
}
@keyframes accordion-close2D {
from {
width: var(--radix-accordion-content-width);
height: var(--radix-accordion-content-height);
}
to {
width: 0;
height: 0;
}
}
================================================
FILE: apps/storybook/stories/accordion.stories.tsx
================================================
/* eslint-disable jsx-a11y/anchor-is-valid */
import * as React from 'react';
import { Accordion } from 'radix-ui';
import styles from './accordion.stories.module.css';
export default { title: 'Components/Accordion' };
export const Single = () => {
const [valueOne, setValueOne] = React.useState('one');
return (
<>
<h1>Uncontrolled</h1>
<Accordion.Root type="single" className={styles.root}>
<Accordion.Item className={styles.item} value="one">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="two">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="three" disabled>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="four">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Odio placerat <a href="#">quisque</a> sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<h1>Controlled</h1>
<Accordion.Root
type="single"
value={valueOne}
onValueChange={setValueOne}
className={styles.root}
>
<Accordion.Item className={styles.item} value="one">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="two">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="three" disabled>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="four">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Odio placerat <a href="#">quisque</a> sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<h1>Collapsible</h1>
<Accordion.Root type="single" className={styles.root} defaultValue="one" collapsible>
<Accordion.Item className={styles.item} value="one">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="two">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="three" disabled>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="four">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Odio placerat <a href="#">quisque</a> sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</>
);
};
export const Multiple = () => {
const [value, setValue] = React.useState(['one', 'two']);
return (
<>
<h1>Uncontrolled</h1>
<Accordion.Root type="multiple" className={styles.root}>
<Accordion.Item className={styles.item} value="one">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="two">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="three" disabled>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="four">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Odio placerat <a href="#">quisque</a> sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<h1>Controlled</h1>
<Accordion.Root
type="multiple"
value={value}
onValueChange={setValue}
className={styles.root}
>
<Accordion.Item className={styles.item} value="one">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="two">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="three" disabled>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat
himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="four">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Odio placerat <a href="#">quisque</a> sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</>
);
};
export const Animated = () => {
const values = ['One', 'Two', 'Three', 'Four'];
const [count, setCount] = React.useState(1);
const [hasDynamicContent, setHasDynamicContent] = React.useState(false);
const timerRef = React.useRef(0);
React.useEffect(() => {
if (hasDynamicContent) {
timerRef.current = window.setTimeout(() => {
setCount((prevCount) => {
const nextCount = prevCount < 5 ? prevCount + 1 : prevCount;
if (nextCount === 5) setHasDynamicContent(false);
return nextCount;
});
}, 3000);
return () => {
clearTimeout(timerRef.current);
};
}
}, [count, hasDynamicContent]);
return (
<>
<label>
<input
type="checkbox"
checked={hasDynamicContent}
onChange={(event) => {
const checked = event.target.checked;
if (checked) setCount(1);
setHasDynamicContent(checked);
}}
/>{' '}
Dynamic content
</label>
<br />
<br />
<h1>Closed by default</h1>
<Accordion.Root type="single" className={styles.root}>
{values.map((value) => (
<Accordion.Item key={value} value={value} className={styles.item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{value}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.animatedContent}>
{[...Array(count)].map((_, index) => (
<div style={{ padding: 10 }} key={index}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque
quam suscipit habitant sed.
</div>
))}
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h1>Open by default</h1>
<Accordion.Root type="single" className={styles.root} defaultValue="One">
{values.map((value) => (
<Accordion.Item key={value} value={value} className={styles.item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{value}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.animatedContent}>
{[...Array(count)].map((_, index) => (
<div style={{ padding: 10 }} key={index}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque
quam suscipit habitant sed.
</div>
))}
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
</>
);
};
export const Animated2D = () => {
const values = ['One', 'Two', 'Three', 'Four'];
return (
<>
<Accordion.Root type="single" className={styles.root}>
{values.map((value) => (
<Accordion.Item key={value} value={value} className={styles.item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{value}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.animated2DContent}>
<div style={{ padding: 10, background: 'whitesmoke', overflow: 'hidden' }}>
<div style={{ width: 'calc(20em - 20px)', height: 100 }}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque
quam suscipit habitant sed.
</div>
</div>
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
</>
);
};
export const AnimatedControlled = () => {
const [value, setValue] = React.useState(['one', 'two', 'three', 'four']);
return (
<Accordion.Root type="multiple" value={value} onValueChange={setValue} className={styles.root}>
<Accordion.Item className={styles.item} value="one">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.animatedContent}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="two">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.animatedContent}>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="three">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Three</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.animatedContent}>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos
euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="four">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.animatedContent}>
Odio placerat <a href="#">quisque</a> sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
};
export const OutsideViewport = () => (
<>
<p>Scroll down to see tabs</p>
<div style={{ height: '150vh' }} />
<p>
When accordion buttons are focused and the user is navigating via keyboard, the page should
not scroll unless the next tab is entering the viewport.
</p>
<Accordion.Root type="single" className={styles.root}>
<Accordion.Item className={styles.item} value="one">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="two">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="three" disabled>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos
euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="four">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Odio placerat <a href="#">quisque</a> sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<div style={{ height: '150vh' }} />
</>
);
export const Horizontal = () => (
<>
<h1>Horizontal Orientation</h1>
<Accordion.Root type="single" className={styles.root} orientation="horizontal">
<Accordion.Item className={styles.item} value="one">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra
integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit
habitant sed.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="two">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum
porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="three" disabled>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos
euismod magna, nec tempor pulvinar eu etiam mattis.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item className={styles.item} value="four">
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
Odio placerat <a href="#">quisque</a> sapien sagittis non sociis ligula penatibus
dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.
<button>Cool</button>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</>
);
export const Chromatic = () => {
const items = ['One', 'Two', 'Three', 'Four'];
return (
<>
<h1>Uncontrolled</h1>
<h2>Single closed</h2>
<Accordion.Root type="single" className={styles.root}>
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h2>Single open</h2>
<Accordion.Root type="single" className={styles.root} defaultValue="Two">
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h2>Multiple closed</h2>
<Accordion.Root type="multiple" className={styles.root}>
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h2>Multiple open</h2>
<Accordion.Root type="multiple" className={styles.root} defaultValue={['One', 'Two']}>
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h1>Controlled</h1>
<h2>Single open</h2>
<Accordion.Root type="single" className={styles.root} value="Three">
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h2>Multiple open</h2>
<Accordion.Root type="multiple" className={styles.root} value={['Two', 'Three']}>
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h1>Disabled (whole)</h1>
<Accordion.Root type="single" className={styles.root} disabled>
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h1>Disabled (item)</h1>
<h2>Just item</h2>
<Accordion.Root type="single" className={styles.root}>
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item} disabled={item === 'Two'}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h2>with `disabled=false` on top-level</h2>
<Accordion.Root type="single" className={styles.root} disabled={false}>
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item} disabled={item === 'Two'}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h1>Force mounted contents</h1>
<Accordion.Root type="single" className={styles.root}>
{items.map((item) => (
<Accordion.Item key={item} className={styles.item} value={item}>
<Accordion.Header className={styles.header}>
<Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.content} forceMount>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h1>State attributes</h1>
<h2>Accordion disabled</h2>
<Accordion.Root type="single" className={styles.rootAttr} defaultValue="Two" disabled>
{items.map((item) => (
<Accordion.Item key={item} className={styles.itemAttr} value={item}>
<Accordion.Header className={styles.headerAttr}>
<Accordion.Trigger className={styles.triggerAttr}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.contentAttr}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h2>Accordion enabled with item override</h2>
<Accordion.Root type="single" className={styles.rootAttr} defaultValue="Two" disabled={false}>
{items.map((item) => (
<Accordion.Item
key={item}
className={styles.itemAttr}
value={item}
disabled={['Two', 'Four'].includes(item)}
>
<Accordion.Header className={styles.headerAttr}>
<Accordion.Trigger className={styles.triggerAttr}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.contentAttr}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
<h2>Accordion disabled with item override</h2>
<Accordion.Root type="single" className={styles.rootAttr} defaultValue="Two" disabled={true}>
{items.map((item) => (
<Accordion.Item
key={item}
className={styles.itemAttr}
value={item}
disabled={['Two', 'Four'].includes(item) ? false : undefined}
>
<Accordion.Header className={styles.headerAttr}>
<Accordion.Trigger className={styles.triggerAttr}>{item}</Accordion.Trigger>
</Accordion.Header>
<Accordion.Content className={styles.contentAttr}>
{item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate
viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam
suscipit habitant sed.
</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Root>
</>
);
};
Chromatic.parameters = { chromatic: { disable: false } };
================================================
FILE: apps/storybook/stories/alert-dialog.stories.module.css
================================================
.trigger {
}
.overlay,
.overlayAttr {
/* ensures overlay is positionned correctly */
position: fixed;
inset: 0;
/* --------- */
background-color: var(--gray-12);
opacity: 0.2;
}
.content,
.chromaticContent,
.contentAttr {
/* ensures good default position for content */
position: fixed;
top: 0;
left: 0;
/* --------- */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--gray-1);
min-width: 300px;
min-height: 150px;
padding: 50px;
border-radius: 10px;
background-color: var(--gray-1);
box-shadow: 0 2px 10px var(--black-a6);
}
.cancel,
.action {
appearance: none;
padding: 10px;
border: none;
}
.cancel {
background: var(--gray-3);
color: var(--gray-12);
}
.action {
background: var(--red-9);
color: var(--gray-1);
}
.title {
}
.description {
}
.chromaticContent {
padding: 10px;
min-width: auto;
min-height: auto;
}
.triggerAttr .overlayAttr,
.contentAttr,
.cancelAttr,
.actionAttr,
.titleAttr,
.descriptionAttr {
background-color: var(--blue-a12);
border: 2px solid var(--blue-9);
padding: 10px;
&[data-state='closed'] {
border-color: var(--red-9);
}
&[data-state='open'] {
border-color: var(--green-9);
}
}
================================================
FILE: apps/storybook/stories/alert-dialog.stories.tsx
================================================
import * as React from 'react';
import { AlertDialog } from 'radix-ui';
import styles from './alert-dialog.stories.module.css';
export default { title: 'Components/AlertDialog' };
export const Styled = () => (
<AlertDialog.Root>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlay} />
<AlertDialog.Content className={styles.content}>
<AlertDialog.Title className={styles.title}>Are you sure?</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
This will do a very dangerous thing. Thar be dragons!
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>yolo, do it</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>maybe not</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
);
export const Controlled = () => {
const [open, setOpen] = React.useState(false);
const [housePurchased, setHousePurchased] = React.useState(false);
return (
<div>
<div>
<img src="https://i.ibb.co/K54hsKt/house.jpg" alt="a large white house with a red roof" />
</div>
<AlertDialog.Root open={open} onOpenChange={setOpen}>
<AlertDialog.Trigger
onClick={(e) => {
if (housePurchased) {
e.preventDefault();
setHousePurchased(false);
}
}}
>
{housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}
</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlay} />
<AlertDialog.Content className={styles.content}>
<AlertDialog.Title>Are you sure?</AlertDialog.Title>
<AlertDialog.Description>
Houses are very expensive and it looks like you only have €20 in the bank. Maybe
consult with a financial advisor?
</AlertDialog.Description>
<AlertDialog.Action className={styles.action} onClick={() => setHousePurchased(true)}>
buy it anyway
</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>
good point, I'll reconsider
</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
);
};
export const Chromatic = () => (
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
height: '100vh',
}}
>
<div>
<h1>Uncontrolled</h1>
<h2>Closed</h2>
<AlertDialog.Root>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlay} />
<AlertDialog.Content className={styles.chromaticContent}>
<AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root defaultOpen>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay
className={styles.overlay}
style={{ left: 0, bottom: '50%', width: '25%' }}
/>
<AlertDialog.Content
className={styles.chromaticContent}
style={{ top: '25%', left: '12%' }}
>
<AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
<div>
<h1>Uncontrolled with reordered parts</h1>
<h2>Closed</h2>
<AlertDialog.Root>
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlay} />
<AlertDialog.Content className={styles.chromaticContent}>
<AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root defaultOpen>
<AlertDialog.Portal>
<AlertDialog.Overlay
className={styles.overlay}
style={{ left: '25%', bottom: '50%', width: '25%' }}
/>
<AlertDialog.Content
className={styles.chromaticContent}
style={{ top: '25%', left: '37%' }}
>
<AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
</AlertDialog.Root>
</div>
<div>
<h1>Controlled</h1>
<h2>Closed</h2>
<AlertDialog.Root open={false}>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlay} />
<AlertDialog.Content className={styles.chromaticContent}>
<AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root open>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay
className={styles.overlay}
style={{ left: '50%', bottom: '50%', width: '25%' }}
/>
<AlertDialog.Content
className={styles.chromaticContent}
style={{ top: '25%', left: '62%' }}
>
<AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
<div>
<h1>Controlled with reordered parts</h1>
<h2>Closed</h2>
<AlertDialog.Root open={false}>
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlay} />
<AlertDialog.Content className={styles.chromaticContent}>
<AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root open>
<AlertDialog.Portal>
<AlertDialog.Overlay
className={styles.overlay}
style={{ left: '75%', bottom: '50%', width: '25%' }}
/>
<AlertDialog.Content
className={styles.chromaticContent}
style={{ top: '25%', left: '88%' }}
>
<AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.description}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
<AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
</AlertDialog.Root>
</div>
<div>
<h1>State attributes</h1>
<h2>Closed</h2>
<AlertDialog.Root>
<AlertDialog.Trigger className={styles.triggerAttr}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlayAttr} />
<AlertDialog.Content className={styles.contentAttr}>
<AlertDialog.Title className={styles.titleAttr}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.descriptionAttr}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.actionAttr}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancelAttr}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
<h2>Open</h2>
<AlertDialog.Root defaultOpen>
<AlertDialog.Trigger className={styles.triggerAttr}>delete everything</AlertDialog.Trigger>
<AlertDialog.Portal>
<AlertDialog.Overlay className={styles.overlayAttr} style={{ top: '50%' }} />
<AlertDialog.Content className={styles.contentAttr} style={{ top: '75%' }}>
<AlertDialog.Title className={styles.titleAttr}>Title</AlertDialog.Title>
<AlertDialog.Description className={styles.descriptionAttr}>
Description
</AlertDialog.Description>
<AlertDialog.Action className={styles.actionAttr}>Confirm</AlertDialog.Action>
<AlertDialog.Cancel className={styles.cancelAttr}>Cancel</AlertDialog.Cancel>
</AlertDialog.Content>
</AlertDialog.Portal>
</AlertDialog.Root>
</div>
</div>
);
Chromatic.parameters = { chromatic: { disable: false } };
================================================
FILE: apps/storybook/stories/arrow.stories.tsx
================================================
import { Arrow } from 'radix-ui/internal';
export default { title: 'Utilities/Arrow' };
const RECOMMENDED_CSS__ARROW__ROOT = {
// better default alignment
verticalAlign: 'middle',
};
export const Styled = () => (
<Arrow.Root style={{ ...RECOMMENDED_CSS__ARROW__ROOT, fill: 'crimson' }} width={20} height={10} />
);
export const CustomSizes = () => (
<>
<Arrow.Root style={{ ...RECOMMENDED_CSS__ARROW__ROOT }} width={40} height={10} />
<Arrow.Root style={{ ...RECOMMENDED_CSS__ARROW__ROOT }} width={50} height={30} />
<Arrow.Root style={{ ...RECOMMENDED_CSS__ARROW__ROOT }} width={20} height={100} />
</>
);
export const CustomArrow = () => (
<Arrow.Root asChild>
<div
style={{
width: 20,
height: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
backgroundColor: 'tomato',
}}
/>
</Arrow.Root>
);
================================================
FILE: apps/storybook/stories/aspect-ratio.stories.module.css
================================================
.root {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--red-9);
color: var(--gray-1);
}
================================================
FILE: apps/storybook/stories/aspect-ratio.stories.tsx
================================================
import { AspectRatio } from 'radix-ui';
import styles from './aspect-ratio.stories.module.css';
export default { title: 'Components/AspectRatio' };
const image = (
<img
src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&auto=format&fit=crop&w=400&q=80"
alt="A house in a forest"
style={{ objectFit: 'cover', width: '100%', height: '100%' }}
/>
);
export const Styled = () => (
<div style={{ width: 500 }}>
<AspectRatio.Root className={styles.root}>
<h1>Default ratio (1/1)</h1>
</AspectRatio.Root>
</div>
);
export const CustomRatios = () => {
return (
<div style={{ display: 'flex', gap: 20 }}>
<div style={{ width: 200 }}>
<AspectRatio.Root ratio={1 / 2}>{image}</AspectRatio.Root>
</div>
<div style={{ width: 200 }}>
<AspectRatio.Root>{image}</AspectRatio.Root>
</div>
<div style={{ width: 200 }}>
<AspectRatio.Root ratio={16 / 9}>{image}</AspectRatio.Root>
</div>
<div style={{ width: 200 }}>
<AspectRatio.Root ratio={2 / 1}>{image}</AspectRatio.Root>
</div>
</div>
);
};
export const Chromatic = () => (
<>
<h1>Default ratio</h1>
<div style={{ width: 300 }}>
<AspectRatio.Root className={styles.root}>
<p>Default ratio (1/1)</p>
</AspectRatio.Root>
</div>
<h1>Custom ratios</h1>
<div style={{ display: 'flex', gap: 20 }}>
<div style={{ width: 200 }}>
<AspectRatio.Root ratio={1 / 2}>{image}</AspectRatio.Root>
</div>
<div style={{ width: 200 }}>
<AspectRatio.Root>{image}</AspectRatio.Root>
</div>
<div style={{ width: 200 }}>
<AspectRatio.Root ratio={16 / 9}>{image}</AspectRatio.Root>
</div>
<div style={{ width: 200 }}>
<AspectRatio.Root ratio={2 / 1}>{image}</AspectRatio.Root>
</div>
</div>
</>
);
Chromatic.parameters = { chromatic: { disable: false } };
================================================
FILE: apps/storybook/stories/avatar.stories.module.css
================================================
.root {
/* ensures image/fallback is centered */
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
/* ensures image doesn't bleed out */
overflow: hidden;
/* ensures no selection is possible */
user-select: none;
/* -------- */
border-radius: 9999px;
width: 48px;
height: 48px;
}
.image {
/* ensures image is full size and not distorted */
width: 100%;
height: 100%;
object-fit: cover;
}
.fallback {
/* ensures content inside the fallback is centered */
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* -------- */
background-color: var(--gray-12);
color: var(--gray-1);
}
================================================
FILE: apps/storybook/stories/avatar.stories.tsx
================================================
import { Avatar } from 'radix-ui';
import styles from './avatar.stories.module.css';
import React from 'react';
export default { title: 'Components/Avatar' };
const src = 'https://picsum.photos/id/1005/400/400';
const srcAlternative = 'https://picsum.photos/id/1006/400/400';
const srcBroken = 'https://broken.link.com/broken-pic.jpg';
export const Styled = () => (
<>
<h1>Without image & with fallback</h1>
<Avatar.Root className={styles.root}>
<Avatar.Fallback className={styles.fallback}>JS</Avatar.Fallback>
</Avatar.Root>
<h1>With image & with fallback</h1>
<Avatar.Root className={styles.root}>
<Avatar.Image className={styles.image} alt="John Smith" src={src} />
<Avatar.Fallback delayMs={300} className={styles.fallback}>
JS
</Avatar.Fallback>
</Avatar.Root>
<h1>With image & with fallback (but broken src)</h1>
<Avatar.Root className={styles.root}>
<Avatar.Image
className={styles.image}
alt="John Smith"
src={srcBroken}
onLoadingStatusChange={console.log}
/>
<Avatar.Fallback className={styles.fallback}>
<AvatarIcon />
</Avatar.Fallback>
</Avatar.Root>
<h1>Changing image src</h1>
<SourceChanger sources={[src, srcAlternative, srcBroken]}>
{(src) => (
<Avatar.Root className={styles.root}>
<Avatar.Image className={styles.image} alt="John Smith" src={src} />
<Avatar.Fallback delayMs={300} className={styles.fallback}>
JS
</Avatar.Fallback>
</Avatar.Root>
)}
</SourceChanger>
</>
);
export const Chromatic = () => (
<>
<h1>Without image & with fallback</h1>
<Avatar.Root className={styles.root}>
<Avatar.Fallback className={styles.fallback}>JS</Avatar.Fallback>
</Avatar.Root>
<h1>With image & with fallback</h1>
<Avatar.Root className={styles.root}>
<Avatar.Image className={styles.image} alt="John Smith" src={src} />
<Avatar.Fallback delayMs={300} className={styles.fallback}>
JS
</Avatar.Fallback>
</Avatar.Root>
<h1>With image & with fallback (but broken src)</h1>
<Avatar.Root className={styles.root}>
<Avatar.Image className={styles.image} alt="John Smith" src={srcBroken} />
<Avatar.Fallback className={styles.fallback}>
<AvatarIcon />
</Avatar.Fallback>
</Avatar.Root>
<h1>Changing image src</h1>
<SourceChanger sources={[src, srcAlternative, srcBroken]}>
{(src) => (
<Avatar.Root className={styles.root}>
<Avatar.Image className={styles.image} alt="John Smith" src={src} />
<Avatar.Fallback delayMs={300} className={styles.fallback}>
JS
</Avatar.Fallback>
</Avatar.Root>
)}
</SourceChanger>
</>
);
Chromatic.parameters = { chromatic: { disable: false, delay: 1000 } };
const AvatarIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="42" height="42">
<path
d="M50 51.7a22.1 22.1 0 100-44.2 22.1 22.1 0 000 44.2zM87.9 69.3a27.8 27.8 0 00-21.2-16.1 4 4 0 00-2.8.7 23.5 23.5 0 01-27.6 0 4 4 0 00-2.8-.7 27.5 27.5 0 00-21.2 16.1c-.3.6-.2 1.3.1 1.8a52.8 52.8 0 007 8.9 43.4 43.4 0 0056.9 3.8 56.3 56.3 0 008.9-8.8c.9-1.2 1.8-2.5 2.6-3.9.3-.6.3-1.2.1-1.8z"
fill="currentColor"
/>
</svg>
);
function SourceChanger({
sources,
children,
}: {
sources: [string, ...string[]];
children: (src: string) => React.ReactElement;
}) {
const [src, setSrc] = React.useState(sources[0]);
React.useEffect(() => {
const interval = setInterval(() => {
const nextIndex = (sources.indexOf(src) + 1) % sources.length;
setSrc(sources[nextIndex]!);
}, 1000);
return () => clearInterval(interval);
}, [sources, src]);
return children(src);
}
================================================
FILE: apps/storybook/stories/checkbox.stories.module.css
================================================
.root {
/* better default alignment */
vertical-align: middle;
/* ------ */
border: 1px solid var(--gray-4);
width: 30px;
height: 30px;
padding: 4px;
&:focus {
outline: none;
border-color: var(--red-9);
box-shadow: 0 0 0 1px var(--red-9);
}
&[data-disabled] {
opacity: 0.3;
}
}
.indicator {
background-color: var(--red-9);
display: block;
width: 20px;
height: 4px;
&[data-state='checked'],
&[data-state='unchecked'] {
height: 20px;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.animatedIndicator {
transition: height 300ms;
&[data-state='checked'] {
animation: fadeIn 1000ms ease-out;
}
&[data-state='unchecked'] {
animation: fadeOut 1000ms ease-in;
}
}
.rootAttr,
.indicatorAttr {
background-color: var(--blue-a12);
border: 2px solid var(--blue-9);
padding: 10px;
&[data-state='unchecked'] {
border-color: var(--red-9);
}
&[data-state='checked'] {
border-color: var(--green-9);
}
&[data-state='indeterminate'] {
border-color: var(--purple-9);
}
&[data-disabled] {
border-style: dashed;
}
&:disabled {
opacity: 0.5;
}
}
.label {
/* ensures it can receive vertical margins */
display: inline-block;
/* better default alignment */
vertical-align: middle;
/* mimics default `label` tag (as we render a `span`) */
cursor: default;
display: inline-block;
}
================================================
FILE: apps/storybook/stories/checkbox.stories.tsx
================================================
/* eslint-disable react/jsx-pascal-case */
import * as React from 'react';
import { Checkbox, Label as LabelPrimitive } from 'radix-ui';
import styles from './checkbox.stories.module.css';
export default { title: 'Components/Checkbox' };
export const Styled = () => (
<>
<p>This checkbox is nested inside a label. The state is uncontrolled.</p>
<h1>Custom label</h1>
<Label>
Label{' '}
<Checkbox.unstable_Provider>
<Checkbox.unstable_Trigger className={styles.root}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
</Checkbox.unstable_Provider>
</Label>
<br />
<br />
<h1>Native label</h1>
<label>
Label{' '}
<Checkbox.unstable_Provider>
<Checkbox.unstable_Trigger className={styles.root}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
</Checkbox.unstable_Provider>
</label>
<h1>Native label + native checkbox</h1>
<label>
Label <input type="checkbox" />
</label>
<h1>Custom label + htmlFor</h1>
<Label htmlFor="one">Label</Label>
<Checkbox.unstable_Provider>
<Checkbox.unstable_Trigger className={styles.root} id="one">
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
</Checkbox.unstable_Provider>
<br />
<br />
<h1>Native label + htmlFor</h1>
<label htmlFor="two">Label</label>
<Checkbox.unstable_Provider>
<Checkbox.unstable_Trigger className={styles.root} id="two">
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
</Checkbox.unstable_Provider>
<h1>Native label + native checkbox</h1>
<label htmlFor="three">Label</label>
<input type="checkbox" id="three" />
</>
);
export const Controlled = () => {
const [checked, setChecked] = React.useState<boolean | 'indeterminate'>(true);
return (
<>
<p>This checkbox is placed adjacent to its label. The state is controlled.</p>
<Label htmlFor="randBox">Label</Label>{' '}
<Checkbox.unstable_Provider checked={checked} onCheckedChange={setChecked}>
<Checkbox.unstable_Trigger className={styles.root} id="randBox">
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
</Checkbox.unstable_Provider>
</>
);
};
export const Indeterminate = () => {
const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');
return (
<>
<p>
<Checkbox.unstable_Provider checked={checked} onCheckedChange={setChecked}>
<Checkbox.unstable_Trigger className={styles.root}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
</Checkbox.unstable_Provider>
</p>
<button
type="button"
onClick={() =>
setChecked((prevIsChecked) =>
prevIsChecked === 'indeterminate' ? false : 'indeterminate',
)
}
>
Toggle indeterminate
</button>
</>
);
};
export const WithinForm = () => {
const [data, setData] = React.useState({ optional: false, required: false, stopprop: false });
const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');
return (
<form
onSubmit={(event) => event.preventDefault()}
onChange={(event) => {
const input = event.target as HTMLInputElement;
setData((prevData) => ({ ...prevData, [input.name]: input.checked }));
}}
>
<fieldset>
<legend>optional checked: {String(data.optional)}</legend>
<label>
<Checkbox.Root
className={styles.root}
name="optional"
checked={checked}
onCheckedChange={setChecked}
>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>{' '}
with label
</label>
<br />
<br />
<button
type="button"
onClick={() => {
setChecked((v) => (v === 'indeterminate' ? false : 'indeterminate'));
}}
>
Toggle indeterminate
</button>
</fieldset>
<br />
<br />
<fieldset>
<legend>required checked: {String(data.required)}</legend>
<Checkbox.unstable_Provider name="required" required>
<Checkbox.unstable_Trigger className={styles.root}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
<Checkbox.unstable_BubbleInput />
</Checkbox.unstable_Provider>
</fieldset>
<br />
<br />
<fieldset>
<legend>stop propagation checked: {String(data.stopprop)}</legend>
<Checkbox.unstable_Provider name="stopprop">
<Checkbox.unstable_Trigger
className={styles.root}
onClick={(event) => event.stopPropagation()}
>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
<Checkbox.unstable_BubbleInput />
</Checkbox.unstable_Provider>
</fieldset>
<br />
<br />
<fieldset>
<legend>no bubble input checked: {String(data.stopprop)}</legend>
<Checkbox.unstable_Provider name="stopprop">
<Checkbox.unstable_Trigger className={styles.root}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.unstable_Trigger>
</Checkbox.unstable_Provider>
</fieldset>
<br />
<br />
<button type="reset">Reset</button>
<button>Submit</button>
</form>
);
};
export const LegacyStyled = () => (
<>
<p>This checkbox is nested inside a label. The state is uncontrolled.</p>
<h1>Custom label</h1>
<Label>
Label{' '}
<Checkbox.Root className={styles.root}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
</Label>
<br />
<br />
<h1>Native label</h1>
<label>
Label{' '}
<Checkbox.Root className={styles.root}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
</label>
<h1>Native label + native checkbox</h1>
<label>
Label <input type="checkbox" />
</label>
<h1>Custom label + htmlFor</h1>
<Label htmlFor="one">Label</Label>
<Checkbox.Root className={styles.root} id="one">
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
<br />
<br />
<h1>Native label + htmlFor</h1>
<label htmlFor="two">Label</label>
<Checkbox.Root className={styles.root} id="two">
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
<h1>Native label + native checkbox</h1>
<label htmlFor="three">Label</label>
<input type="checkbox" id="three" />
</>
);
export const LegacyControlled = () => {
const [checked, setChecked] = React.useState<boolean | 'indeterminate'>(true);
return (
<>
<p>This checkbox is placed adjacent to its label. The state is controlled.</p>
<Label htmlFor="randBox">Label</Label>{' '}
<Checkbox.Root
className={styles.root}
checked={checked}
onCheckedChange={setChecked}
id="randBox"
>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
</>
);
};
export const LegacyIndeterminate = () => {
const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');
return (
<>
<p>
<Checkbox.Root className={styles.root} checked={checked} onCheckedChange={setChecked}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
</p>
<button
type="button"
onClick={() =>
setChecked((prevIsChecked) =>
prevIsChecked === 'indeterminate' ? false : 'indeterminate',
)
}
>
Toggle indeterminate
</button>
</>
);
};
export const LegacyWithinForm = () => {
const [data, setData] = React.useState({ optional: false, required: false, stopprop: false });
const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');
return (
<form
onSubmit={(event) => event.preventDefault()}
onChange={(event) => {
const input = event.target as HTMLInputElement;
setData((prevData) => ({ ...prevData, [input.name]: input.checked }));
}}
>
<fieldset>
<legend>optional checked: {String(data.optional)}</legend>
<label>
<Checkbox.Root
className={styles.root}
name="optional"
checked={checked}
onCheckedChange={setChecked}
>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>{' '}
with label
</label>
<br />
<br />
<button
type="button"
onClick={() => {
setChecked((prevChecked) => {
return prevChecked === 'indeterminate' ? false : 'indeterminate';
});
}}
>
Toggle indeterminate
</button>
</fieldset>
<br />
<br />
<fieldset>
<legend>required checked: {String(data.required)}</legend>
<Checkbox.Root className={styles.root} name="required" required>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
</fieldset>
<br />
<br />
<fieldset>
<legend>stop propagation checked: {String(data.stopprop)}</legend>
<Checkbox.Root
className={styles.root}
name="stopprop"
onClick={(event) => event.stopPropagation()}
>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
</fieldset>
<br />
<br />
<button type="reset">Reset</button>
<button>Submit</button>
</form>
);
};
export const LegacyAnimated = () => {
const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');
return (
<>
<p>
<Checkbox.Root className={styles.root} checked={checked} onCheckedChange={setChecked}>
<Checkbox.Indicator className={[styles.indicator, styles.animatedIndicator].join(' ')} />
</Checkbox.Root>
</p>
<button
type="button"
onClick={() =>
setChecked((prevIsChecked) =>
prevIsChecked === 'indeterminate' ? false : 'indeterminate',
)
}
>
Toggle indeterminate
</button>
</>
);
};
export const LegacyChromatic = () => (
<>
<h1>Uncontrolled</h1>
<h2>Unchecked</h2>
<Checkbox.Root className={styles.root}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
<h2>Checked</h2>
<Checkbox.Root className={styles.root} defaultChecked>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
<h1>Controlled</h1>
<h2>Unchecked</h2>
<Checkbox.Root className={styles.root} checked={false}>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
<h2>Checked</h2>
<Checkbox.Root className={styles.root} checked>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
<h1>Indeterminate</h1>
<Checkbox.Root className={styles.root} checked="indeterminate">
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
<h1>Disabled</h1>
<Checkbox.Root className={styles.root} defaultChecked disabled>
<Checkbox.Indicator className={styles.indicator} />
</Checkbox.Root>
<h1>Force mounted indicator</h1>
<Checkbox.Root className={styles.root}>
<Checkbox.Indicator className={styles.indicator} forceMount style={{ height: 20 }} />
</Checkbox.Root>
<h1>State attributes</h1>
<h2>Unchecked</h2>
<Checkbox.Root className={styles.rootAttr}>
<Checkbox.Indicator className={styles.indicatorAttr} />
</Checkbox.Root>
<h2>Checked</h2>
<Checkbox.Root className={styles.rootAttr} defaultChecked>
<Checkbox.Indicator className={styles.indicatorAttr} />
</Checkbox.Root>
<h2>Indeterminate</h2>
<Checkbox.Root className={styles.rootAttr} checked="indeterminate">
<Checkbox.Indicator className={styles.indicatorAttr} />
</Checkbox.Root>
<h2>Disabled</h2>
<Checkbox.Root className={styles.rootAttr} defaultChecked disabled>
<Checkbox.Indicator className={styles.indicatorAttr} />
</Checkbox.Root>
<h2>Force mounted indicator</h2>
<Checkbox.Root className={styles.rootAttr}>
<Checkbox.Indicator className={styles.indicatorAttr} forceMount style={{ height: 20 }} />
</Checkbox.Root>
</>
);
LegacyChromatic.parameters = { chromatic: { disable: false } };
const Label = (props: any) => <LabelPrimitive.Root {...props} className={styles.label} />;
================================================
FILE: apps/storybook/stories/collapsible.stories.module.css
================================================
.root {
max-width: 20em;
font-family: sans-serif;
}
.trigger {
/* because it's a button, we want to stretch it */
width: 100%;
/* and remove center text alignment in favour of inheriting */
text-align: inherit;
/* ---- */
appearance: none;
border: none;
padding: 10px;
background-color: var(--color-black);
color: white;
font-family: inherit;
font-size: 1.2em;
--shadow-color: crimson;
&:focus {
outline: none;
box-shadow: inset 0 -5px 0 0 var(--shadow-color);
color: var(--color-red);
}
&[data-disabled] {
color: var(--color-gray300);
}
&[data-state='open'] {
background-color: var(--color-red);
color: var(--color-white);
&:focus {
--shadow-color: #111;
color: var(--color-black);
}
}
}
.content {
padding: 10px;
line-height: 1.5;
}
@keyframes collapsible-slideDown {
from {
height: 0;
}
to {
height: var(--radix-collapsible-content-height);
}
}
@keyframes collapsible-slideUp {
from {
height: var(--radix-collapsible-content-height);
}
to {
height: 0;
}
}
@keyframes collapsible-openRight {
from {
width: 0;
}
to {
width: var(--radix-collapsible-content-width);
}
}
@keyframes collapsible-closeRight {
from {
width: var(--radix-collapsible-content-width);
}
to {
width: 0;
}
}
.animatedContent {
overflow: hidden;
&[data-state='open'] {
animation: collapsible-slideDown 300ms ease-out;
}
&[data-state='closed'] {
animation: collapsible-slideUp 300ms ease-in;
}
}
.animatedWidthContent {
overflow: hidden;
&[data-state='open'] {
animation: collapsible-openRight 300ms ease-out;
}
&[data-state='closed'] {
animation: collapsible-closeRight 300ms ease-in;
}
}
.rootAttr,
.triggerAttr,
.contentAttr {
/* ensure we can see the content (because it has `hidden` attribute) */
display: block;
background-color: rgb(0 0 255 / 0.3);
border: 2px solid blue;
padding: 10px;
&[data-state='closed'] {
border-color: red;
}
&[data-state='open'] {
border-color: green;
}
&[data-disabled] {
border-style: dashed;
}
&:disabled {
opacity: 0.5;
}
}
================================================
FILE: apps/storybook/stories/collapsible.stories.tsx
================================================
import * as React from 'react';
import { Collapsible } from 'radix-ui';
import styles from './collapsible.stories.module.css';
export default { title: 'Components/Collapsible' };
export const Styled = () => (
<Collapsible.Root className={styles.root}>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>
</Collapsible.Root>
);
export const Controlled = () => {
const [open, setOpen] = React.useState(false);
return (
<Collapsible.Root open={open} onOpenChange={setOpen} className={styles.root}>
<Collapsible.Trigger className={styles.trigger}>
{open ? 'close' : 'open'}
</Collapsible.Trigger>
<Collapsible.Content className={styles.content} asChild>
<article>Content 1</article>
</Collapsible.Content>
</Collapsible.Root>
);
};
export const Animated = () => {
return (
<>
<h1>Closed by default</h1>
<Collapsible.Root className={styles.root}>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.animatedContent}>
<div style={{ padding: 10 }}>Content 1</div>
</Collapsible.Content>
</Collapsible.Root>
<h1>Open by default</h1>
<Collapsible.Root defaultOpen className={styles.root}>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.animatedContent}>
<div style={{ padding: 10 }}>Content 1</div>
</Collapsible.Content>
</Collapsible.Root>
</>
);
};
export const AnimatedHorizontal = () => {
return (
<Collapsible.Root className={styles.root}>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.animatedWidthContent}>
<div style={{ padding: 10 }}>Content</div>
</Collapsible.Content>
</Collapsible.Root>
);
};
export const Chromatic = () => (
<>
<h1>Uncontrolled</h1>
<h2>Closed</h2>
<Collapsible.Root className={styles.root}>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>
</Collapsible.Root>
<h2>Open</h2>
<Collapsible.Root className={styles.root} defaultOpen>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>
</Collapsible.Root>
<h1>Controlled</h1>
<h2>Closed</h2>
<Collapsible.Root className={styles.root} open={false}>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>
</Collapsible.Root>
<h2>Open</h2>
<Collapsible.Root className={styles.root} open>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>
</Collapsible.Root>
<h1>Disabled</h1>
<Collapsible.Root className={styles.root} disabled>
<Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>
</Collapsible.Root>
<h1>State attributes</h1>
<h2>Closed</h2>
<Collapsible.Root className={styles.rootAttr}>
<Collapsible.Trigger className={styles.triggerAttr}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.contentAttr}>Content 1</Collapsible.Content>
</Collapsible.Root>
<h2>Open</h2>
<Collapsible.Root className={styles.rootAttr} defaultOpen>
<Collapsible.Trigger className={styles.triggerAttr}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.contentAttr}>Content 1</Collapsible.Content>
</Collapsible.Root>
<h2>Disabled</h2>
<Collapsible.Root className={styles.rootAttr} defaultOpen disabled>
<Collapsible.Trigger className={styles.triggerAttr}>Trigger</Collapsible.Trigger>
<Collapsible.Content className={styles.contentAttr}>Content 1</Collapsible.Content>
</Collapsible.Root>
</>
);
Chromatic.parameters = { chromatic: { disable: false } };
================================================
FILE: apps/storybook/stories/collection.stories.tsx
================================================
import * as React from 'react';
import { Collection as CollectionPrimitive } from 'radix-ui/internal';
const { createCollection } = CollectionPrimitive;
export default { title: 'Utilities/Collection' };
export const Basic = () => (
<List>
<Item>Red</Item>
<Item disabled>Green</Item>
<Item>Blue</Item>
<LogItems />
</List>
);
export const WithElementInBetween = () => (
<List>
<div style={{ fontVariant: 'small-caps' }}>Colors</div>
<Item>Red</Item>
<Item disabled>Green</Item>
<Item>Blue</Item>
<div style={{ fontVariant: 'small-caps' }}>Words</div>
<Item>Hello</Item>
<Item>World</Item>
<LogItems />
</List>
);
const Tomato = () => <Item style={{ color: 'tomato' }}>Tomato</Item>;
export const WithWrappedItem = () => (
<List>
<Item>Red</Item>
<Item disabled>Green</Item>
<Item>Blue</Item>
<Tomato />
<LogItems />
</List>
);
export const WithFragment = () => {
const countries = (
<>
<Item>France</Item>
<Item disabled>UK</Item>
<Item>Spain</Item>
</>
);
return (
<List>
{countries}
<LogItems />
</List>
);
};
export const DynamicInsertion = () => {
const [hasTomato, setHasTomato] = React.useState(false);
const [, forceUpdate] = React.useState<any>();
return (
<>
<button onClick={() => setHasTomato(!hasTomato)}>
{hasTomato ? 'Remove' : 'Add'} Tomato
</button>
<button onClick={() => forceUpdate({})} style={{ marginLeft: 10 }}>
Force Update
</button>
<List>
<MemoItems hasTomato={hasTomato} />
<LogItems />
</List>
</>
);
};
function WrappedItems({ hasTomato }: any) {
return (
<>
<MemoItem>Red</MemoItem>
{hasTomato ? <Tomato /> : null}
<MemoItem disabled>Green</MemoItem>
<MemoItem>Blue</MemoItem>
</>
);
}
export const WithChangingItem = () => {
const [isDisabled, setIsDisabled] = React.useState(false);
return (
<>
<button onClick={() => setIsDisabled(!isDisabled)}>
{isDisabled ? 'Enable' : 'Disable'} Green
</button>
<List>
<Item>Red</Item>
<Item disabled={isDisabled}>Green</Item>
<Item>Blue</Item>
<LogItems />
</List>
</>
);
};
export const Nested = () => (
<List>
<Item>1</Item>
<Item>
2
<List>
<Item>2.1</Item>
<Item>2.2</Item>
<Item>2.3</Item>
<LogItems name="items inside 2" />
</List>
</Item>
<Item>3</Item>
<LogItems name="top-level items" />
</List>
);
/* -------------------------------------------------------------------------------------------------
* List implementation
* -----------------------------------------------------------------------------------------------*/
type ItemData = { disabled: boolean };
const [Collection, useCollection] = createCollection<React.ComponentRef<typeof Item>, ItemData>(
'List',
);
const List: React.FC<{ children: React.ReactNode }> = (props) => {
return (
<Collection.Provider scope={undefined}>
<Collection.Slot scope={undefined}>
<ul {...props} style={{ width: 200 }} />
</Collection.Slot>
</Collection.Provider>
);
};
type ItemProps = React.ComponentPropsWithRef<'li'> & {
children: React.ReactNode;
disabled?: boolean;
};
function Item({ disabled = false, ...props }: ItemProps) {
return (
<Collection.ItemSlot scope={undefined} disabled={disabled}>
<li {...props} style={{ ...props.style, opacity: disabled ? 0.3 : undefined }} />
</Collection.ItemSlot>
);
}
// Ensure that our implementation doesn't break if the item list/item is memoized
const MemoItem = React.memo(Item);
const MemoItems = React.memo(WrappedItems);
function LogItems({ name = 'items' }: { name?: string }) {
const getItems = useCollection(undefined);
React.useEffect(() => console.log(name, getItems()));
return null;
}
================================================
FILE: apps/storybook/stories/context-menu.stories.module.css
================================================
.trigger {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 100px;
border: 2px dashed var(--color-black);
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.1);
&:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
}
&[data-state='open'] {
background-color: lightblue;
}
}
.content {
display: inline-block;
box-sizing: border-box;
min-width: 130px;
background-color: var(--color-white);
border: 1px solid var(--color-gray100);
border-radius: 6px;
padding: 5px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
font-size: 13px;
&:focus-within {
border-color: var(--color-black);
}
}
.animatedContent {
transform-origin: var(--radix-context-menu-content-transform-origin);
&[data-state='open'] {
animation: contextMenu-scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
}
.label,
.item,
.subTrigger {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1;
cursor: default;
user-select: none;
white-space: nowrap;
height: 25px;
padding: 0 10px;
color: var(--color-black);
border-radius: 3px;
}
.label {
color: var(--color-gray100);
}
.item,
.subTrigger {
outline: none;
&[data-highlighted] {
background-color: var(--color-black);
color: var(--color-white);
}
&[data-disabled] {
color: var(--color-gray100);
}
}
.subTrigger {
&:not([data-highlighted])[data-state='open'] {
background-color: var(--color-gray100);
color: var(--color-black);
}
}
.separator {
height: 1;
margin: 5px 10px;
background-color: var(--color-gray100);
}
@keyframes contextMenu-scaleIn {
0% {
transform: scale(0) rotateZ(-10deg);
}
20% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
================================================
FILE: apps/storybook/stories/context-menu.stories.tsx
================================================
import * as React from 'react';
import { ContextMenu } from 'radix-ui';
import { foodGroups } from '@repo/test-data/foods';
import styles from './context-menu.stories.module.css';
export default { title: 'Components/ContextMenu' };
export const Styled = () => (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '200vw',
height: '200vh',
gap: 20,
}}
>
<ContextMenu.Root>
<ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('undo')}>
Undo
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('redo')}>
Redo
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>
Cut
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('copy')}>
Copy
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('paste')}>
Paste
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
</div>
);
export const Modality = () => (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '110vh' }}>
<div style={{ display: 'grid', gap: 50 }}>
<div style={{ display: 'inline-flex', alignItems: 'center', flexDirection: 'column' }}>
<h1>Modal (default)</h1>
<ContextMenu.Root>
<ContextMenu.Trigger className={styles.trigger} />
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('undo')}>
Undo
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('redo')}>
Redo
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>
Submenu →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('one')}>
One
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('two')}>
Two
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>
Submenu →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('one')}
>
One
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('two')}
>
Two
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('three')}
>
Three
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item className={styles.item} onSelect={() => console.log('three')}>
Three
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item
className={styles.item}
disabled
onSelect={() => console.log('cut')}
>
Cut
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('copy')}>
Copy
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('paste')}>
Paste
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
<textarea
style={{ width: 500, height: 100, marginTop: 10 }}
defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet."
/>
</div>
<div style={{ display: 'inline-flex', alignItems: 'center', flexDirection: 'column' }}>
<h1>Non modal</h1>
<ContextMenu.Root modal={false}>
<ContextMenu.Trigger className={styles.trigger} />
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('undo')}>
Undo
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('redo')}>
Redo
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>
Submenu →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('one')}>
One
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('two')}>
Two
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>
Submenu →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('one')}
>
One
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('two')}
>
Two
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('three')}
>
Three
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item className={styles.item} onSelect={() => console.log('three')}>
Three
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item
className={styles.item}
disabled
onSelect={() => console.log('cut')}
>
Cut
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('copy')}>
Copy
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('paste')}>
Paste
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
<textarea
style={{ width: 500, height: 100, marginTop: 10 }}
defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet."
/>
</div>
</div>
</div>
);
export const Submenus = () => {
const [rtl, setRtl] = React.useState(false);
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
gap: 20,
}}
>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<label style={{ marginBottom: 10 }}>
<input
type="checkbox"
checked={rtl}
onChange={(event) => setRtl(event.currentTarget.checked)}
/>
Right-to-left
</label>
<ContextMenu.Root dir={rtl ? 'rtl' : 'ltr'}>
<ContextMenu.Trigger className={styles.trigger}>Right Click Here</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content}>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('new-tab')}>
New Tab
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('new-window')}>
New Window
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>
Bookmarks →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('index')}>
Inbox
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('calendar')}
>
Calendar
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>
WorkOS →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('stitches')}
>
Stitches
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('composer')}
>
Composer
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('radix')}
>
Radix
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('notion')}
>
Notion
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger} disabled>
History →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('github')}
>
Github
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('google')}
>
Google
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('stack-overflow')}
>
Stack Overflow
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>
Tools →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('extensions')}
>
Extensions
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('task-manager')}
>
Task Manager
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('developer-tools')}
>
Developer Tools
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item
className={styles.item}
disabled
onSelect={() => console.log('print')}
>
Print…
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('cast')}>
Cast…
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('find')}>
Find…
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
</div>
</div>
);
};
export const WithLabels = () => (
<div style={{ textAlign: 'center', padding: 50 }}>
<ContextMenu.Root>
<ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
{foodGroups.map((foodGroup, index) => (
<ContextMenu.Group key={index}>
{foodGroup.label && (
<ContextMenu.Label className={styles.label} key={foodGroup.label}>
{foodGroup.label}
</ContextMenu.Label>
)}
{foodGroup.foods.map((food) => (
<ContextMenu.Item
key={food.value}
className={styles.item}
disabled={food.disabled}
onSelect={() => console.log(food.label)}
>
{food.label}
</ContextMenu.Item>
))}
{index < foodGroups.length - 1 && (
<ContextMenu.Separator className={styles.separator} />
)}
</ContextMenu.Group>
))}
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
</div>
);
export const CheckboxItems = () => {
const checkboxItems = ['Bold', 'Italic', 'Underline'];
const [selection, setSelection] = React.useState<string[]>([]);
return (
<div style={{ textAlign: 'center', padding: 50 }}>
<ContextMenu.Root>
<ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('show')}>
Show fonts
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('bigger')}>
Bigger
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('smaller')}>
Smaller
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
{checkboxItems.map((item) => (
<ContextMenu.CheckboxItem
key={item}
className={styles.item}
checked={selection.includes(item)}
onCheckedChange={() =>
setSelection((current) =>
current.includes(item)
? current.filter((el) => el !== item)
: current.concat(item),
)
}
>
{item}
<ContextMenu.ItemIndicator>
<TickIcon />
</ContextMenu.ItemIndicator>
</ContextMenu.CheckboxItem>
))}
<ContextMenu.Separator />
<ContextMenu.CheckboxItem className={styles.item} disabled>
Strikethrough
<ContextMenu.ItemIndicator>
<TickIcon />
</ContextMenu.ItemIndicator>
</ContextMenu.CheckboxItem>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
</div>
);
};
export const RadioItems = () => {
const files = ['README.md', 'index.js', 'page.css'];
const [file, setFile] = React.useState(files[1]);
return (
<div style={{ textAlign: 'center', padding: 50 }}>
<ContextMenu.Root>
<ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('minimize')}>
Minimize window
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('zoom')}>
Zoom
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('smaller')}>
Smaller
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.RadioGroup value={file} onValueChange={setFile}>
{files.map((file) => (
<ContextMenu.RadioItem key={file} className={styles.item} value={file}>
{file}
<ContextMenu.ItemIndicator>
<TickIcon />
</ContextMenu.ItemIndicator>
</ContextMenu.RadioItem>
))}
</ContextMenu.RadioGroup>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
<p>Selected file: {file}</p>
</div>
);
};
export const PreventClosing = () => (
<div style={{ textAlign: 'center', padding: 50 }}>
<ContextMenu.Root>
<ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
<ContextMenu.Item className={styles.item} onSelect={() => window.alert('action 1')}>
I will close
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={(event) => {
event.preventDefault();
window.alert('action 1');
}}
>
I won't close
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
</div>
);
export const Multiple = () => {
const [customColors, setCustomColors] = React.useState<{ [index: number]: string }>({});
const [fadedIndexes, setFadedIndexes] = React.useState<number[]>([]);
return (
<div
style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}
onContextMenu={(event) => event.preventDefault()}
>
{Array.from({ length: 100 }, (_, i) => {
const customColor = customColors[i];
return (
<ContextMenu.Root key={i}>
<ContextMenu.Portal>
<ContextMenu.Content
className={[styles.content, styles.animatedContent].join(' ')}
alignOffset={-5}
>
<ContextMenu.Label className={styles.label}>Color</ContextMenu.Label>
<ContextMenu.RadioGroup
value={customColor}
onValueChange={(color) =>
setCustomColors((colors) => ({ ...colors, [i]: color }))
}
>
<ContextMenu.RadioItem className={styles.item} value="royalblue">
Blue
<ContextMenu.ItemIndicator>
<TickIcon />
</ContextMenu.ItemIndicator>
</ContextMenu.RadioItem>
<ContextMenu.RadioItem className={styles.item} value="tomato">
Red
<ContextMenu.ItemIndicator>
<TickIcon />
</ContextMenu.ItemIndicator>
</ContextMenu.RadioItem>
</ContextMenu.RadioGroup>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.CheckboxItem
className={styles.item}
checked={fadedIndexes.includes(i)}
onCheckedChange={(faded) =>
setFadedIndexes((indexes) =>
faded ? [...indexes, i] : indexes.filter((index) => index !== i),
)
}
>
Fade
<ContextMenu.ItemIndicator>
<TickIcon />
</ContextMenu.ItemIndicator>
</ContextMenu.CheckboxItem>
</ContextMenu.Content>
</ContextMenu.Portal>
<ContextMenu.Trigger>
<div
style={{
flexShrink: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 100,
height: 100,
backgroundColor: customColor ? customColor : '#eeeef0',
color: customColor ? 'white' : '#666670',
fontSize: 32,
borderRadius: 5,
cursor: 'default',
userSelect: 'none',
opacity: fadedIndexes.includes(i) ? 0.5 : 1,
}}
>
{i + 1}
</div>
</ContextMenu.Trigger>
</ContextMenu.Root>
);
})}
</div>
);
};
export const Nested = () => (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<ContextMenu.Root>
<ContextMenu.Trigger
className={styles.trigger}
style={{ padding: 100, backgroundColor: 'royalblue' }}
>
<ContextMenu.Root>
<ContextMenu.Trigger className={styles.trigger} style={{ backgroundColor: 'tomato' }} />{' '}
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
<ContextMenu.Label className={styles.label}>Red box menu</ContextMenu.Label>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item className={styles.item} onSelect={() => console.log('red action1')}>
Red action 1
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('red action2')}>
Red action 2
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>
Submenu →
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent
className={styles.content}
sideOffset={12}
alignOffset={-6}
>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('red sub action 1')}
>
Red sub action 1
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('red sub action 2')}
>
Red sub action 2
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Content className={styles.content} alignOffset={-5}>
<ContextMenu.Label className={styles.label}>Blue box menu</ContextMenu.Label>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Item className={styles.item} onSelect={() => console.log('blue action1')}>
Blue action 1
</ContextMenu.Item>
<ContextMenu.Item className={styles.item} onSelect={() => console.log('blue action2')}>
Blue action 2
</ContextMenu.Item>
<ContextMenu.Separator className={styles.separator} />
<ContextMenu.Sub>
<ContextMenu.SubTrigger className={styles.subTrigger}>Submenu →</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.SubContent className={styles.content} sideOffset={12} alignOffset={-6}>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('blue sub action 1')}
>
Blue sub action 1
</ContextMenu.Item>
<ContextMenu.Item
className={styles.item}
onSelect={() => console.log('blue sub action 2')}
>
Blue sub action 2
</ContextMenu.Item>
<ContextMenu.Arrow />
</ContextMenu.SubContent>
</ContextMenu.Portal>
</ContextMenu.Sub>
</ContextMenu.Content>
</ContextMenu.Portal>
</ContextMenu.Root>
</div>
);
const TickIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
width="12"
height="12"
fill="none"
stroke="currentcolor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="3"
>
<path d="M2 20 L12 28 30 4" />
</svg>
);
================================================
FILE: apps/storybook/stories/dialog.stories.module.css
================================================
.trigger {
}
.overlay {
/* ensures overlay is positioned correctly */
position: fixed;
inset: 0;
/* ------ */
background-color: rgb(0 0 0 / 0.2);
}
.scrollableOverlay {
overflow: auto;
display: flex;
align-items: flex-start;
justify-content: center;
}
.contentDefault,
.contentSheet {
/* ensures good default position for content */
position: fixed;
top: 0;
left: 0;
/* ------ */
min-width: 300px;
min-height: 150px;
padding: 50px;
border-radius: 10px;
background-color: white;
box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
}
.contentDefault {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.contentScrollable {
overflow: auto;
max-height: 300px;
}
.contentInScrollableOverlay {
margin-top: 50px;
margin-bottom: 50px;
}
.contentSheet {
left: initial;
right: 0;
min-width: 300px;
min-height: 100vh;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.close {
}
@keyframes dialog-fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes dialog-fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes dialog-scaleIn {
from {
transform: translate(-50%, -50%) scale(0.75);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}
.animatedOverlay {
&[data-state='open'] {
animation: dialog-fadeIn 300ms ease-out;
}
&[data-state='closed'] {
animation: dialog-fadeOut 300ms ease-in;
}
}
.animatedContent {
&[data-state='open'] {
animation:
dialog-fadeIn 150ms ease-out,
dialog-scaleIn 200ms ease-out;
}
&[data-state='closed'] {
animation: dialog-fadeOut 300ms ease-in;
}
}
.duration50 {
animation-duration: 50ms;
}
.chromaticContent {
padding: 10px;
min-width: auto;
min-height: auto;
}
.triggerAttr,
.overlayAttr,
.contentAttr,
.closeAttr {
background-color: rgb(0 0 255 / 0.3);
border: 2px solid blue;
padding: 10px;
&[data-state='closed'] {
border-color: red;
}
&[data-state='open'] {
border-color: green;
}
}
================================================
FILE: apps/storybook/stories/dialog.stories.tsx
================================================
import * as React from 'react';
import { Dialog } from 'radix-ui';
import styles from './dialog.stories.module.css';
export default { title: 'Components/Dialog' };
export const Styled = () => (
<Dialog.Root>
<Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className={styles.overlay} />
<Dialog.Content className={styles.contentDefault}>
<Dialog.Title>Booking info</Dialog.Title>
<Dialog.Description>Please enter the info for your booking below.</Dialog.Description>
<Dialog.Close className={styles.close}>close</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
export const NonModal = () => (
<>
<Dialog.Root modal={false}>
<Dialog.Trigger className={styles.trigger}>open (non-modal)</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className={styles.overlay} />
<Dialog.Content
className={[styles.contentDefault, styles.contentSheet].join(' ')}
onInteractOutside={(event) => event.preventDefault()}
>
<Dialog.Title>Booking info</Dialog.Title>
<Dialog.Description>Description</Dialog.Description>
<Dialog.Close className={styles.close}>close</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
{Array.from({ length: 5 }, (_, i) => (
<div key={i} style={{ marginTop: 20 }}>
<textarea
style={{ width: 800, height: 400 }}
defaultValue="Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet, minima expedita alias et fugit voluptate laborum placeat odio dolore ab!"
/>
</div>
))}
</>
);
export const Controlled = () => {
const [open, setOpen] = React.useState(false);
return (
<Dialog.Root open={open} onOpenChange={setOpen}>
<Dialog.Trigger>{open ? 'close' : 'open'}</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className={styles.overlay} />
<Dialog.Content className={styles.contentDefault}>
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>Description</Dialog.Description>
<Dialog.Close>close</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
};
export const FocusTrap = () => (
<>
<Dialog.Root>
<Dialog.Trigger>open</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className={styles.overlay} />
<Dialog.Content className={styles.contentDefault}>
<Dialog.Close>close</Dialog.Close>
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>Description</Dialog.Description>
<div>
<label htmlFor="firstName">First Name</label>
<input type="text" id="firstName" placeholder="John" />
<label htmlFor="lastName">Last Name</label>
<input type="text" id="lastName" placeholder="Doe" />
<button type="submit">Send</button>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<p>These elements can't be focused when the dialog is opened.</p>
<button type="button">A button</button>
<input type="text" placeholder="Another focusable element" />
</>
);
export const CustomFocus = () => {
const firstNameRef = React.useRef<HTMLInputElement>(null);
const searchFieldRef = React.useRef<HTMLInputElement>(null);
return (
<>
<Dialog.Root>
<Dialog.Trigger>open</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className={styles.overlay} />
<Dialog.Content
className={styles.contentDefault}
onOpenAutoFocus={(event) => {
event.preventDefault();
firstNameRef.current?.focus();
}}
onCloseAutoFocus={(event) => {
event.preventDefault();
searchFieldRef.current?.focus();
}}
>
<Dialog.Close>close</Dialog.Close>
<div>
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>
The first name input will receive the focus after opening the dialog.
</Dialog.Description>
<label htmlFor="firstName">First Name</label>
<input type="text" id="firstName" placeholder="John" ref={firstNameRef} />
<label htmlFor="lastName">Last Name</label>
<input type="text" id="lastName" placeholder="Doe" />
<button type="submit">Send</button>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<div>
<p>The search input will receive the focus after closing the dialog.</p>
<input type="text" placeholder="Search…" ref={searchFieldRef} />
</div>
</>
);
};
export const NoEscapeDismiss = () => (
<Dialog.Root>
<Dialog.Trigger>open</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className={styles.overlay} />
<Dialog.Content
className={styles.contentDefault}
onEscapeKeyDown={(event) => event.preventDefault()}
>
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>
The first name input will receive the focus after opening the dialog.
</Dialog.Description>
<Dialog.Close>close</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
export const NoPointerDownOutsideDismiss = () => (
<Dialog.Root>
<Dialog.Trigger>open</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay className={styles.overlay} />
<Dialog.Content
className={styles.contentDefault}
onPointerDownOutside={(event) => event.preventDefault()}
>
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>Description</Dialog.Description>
<Dialog.Close>close</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
);
export const WithPortalContainer = () => {
const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);
return (
<>
<Dialog.Root>
<Dialog.Trigger>open</Dialog.Trigger>
<Dialog.Portal container={portalContai
gitextract_7xaf4qlh/ ├── .changeset/ │ ├── README.md │ ├── changelog.cjs │ ├── config.json │ ├── silent-turkeys-fly.md │ └── ten-pumas-agree.md ├── .editorconfig ├── .github/ │ ├── CODEOWNERS │ ├── CONTRIBUTING.md │ ├── ISSUE_TEMPLATE/ │ │ ├── Bug_report.md │ │ ├── Documentation.md │ │ ├── Feature_request.md │ │ └── Question.md │ ├── PULL_REQUEST_TEMPLATE.md │ └── workflows/ │ ├── build.yml │ ├── chromatic.yml │ ├── publish-snapshot.yml │ └── publish-stable.yml ├── .gitignore ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── apps/ │ ├── ssr-testing/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── app/ │ │ │ ├── accessible-icon/ │ │ │ │ └── page.tsx │ │ │ ├── accordion/ │ │ │ │ └── page.tsx │ │ │ ├── alert-dialog/ │ │ │ │ └── page.tsx │ │ │ ├── avatar/ │ │ │ │ └── page.tsx │ │ │ ├── checkbox/ │ │ │ │ └── page.tsx │ │ │ ├── collapsible/ │ │ │ │ └── page.tsx │ │ │ ├── context-menu/ │ │ │ │ └── page.tsx │ │ │ ├── dialog/ │ │ │ │ └── page.tsx │ │ │ ├── dropdown-menu/ │ │ │ │ └── page.tsx │ │ │ ├── form/ │ │ │ │ └── page.tsx │ │ │ ├── hover-card/ │ │ │ │ └── page.tsx │ │ │ ├── label/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ ├── menubar/ │ │ │ │ └── page.tsx │ │ │ ├── navigation-menu/ │ │ │ │ └── page.tsx │ │ │ ├── one-time-password-field/ │ │ │ │ └── page.tsx │ │ │ ├── page.tsx │ │ │ ├── password-toggle-field/ │ │ │ │ └── page.tsx │ │ │ ├── popover/ │ │ │ │ └── page.tsx │ │ │ ├── portal/ │ │ │ │ ├── conditional-portal.tsx │ │ │ │ ├── custom-portal-container.tsx │ │ │ │ └── page.tsx │ │ │ ├── progress/ │ │ │ │ └── page.tsx │ │ │ ├── radio-group/ │ │ │ │ └── page.tsx │ │ │ ├── roving-focus-group/ │ │ │ │ ├── page.tsx │ │ │ │ └── roving-focus.client.tsx │ │ │ ├── scroll-area/ │ │ │ │ └── page.tsx │ │ │ ├── select/ │ │ │ │ └── page.tsx │ │ │ ├── separator/ │ │ │ │ └── page.tsx │ │ │ ├── slider/ │ │ │ │ └── page.tsx │ │ │ ├── slot/ │ │ │ │ └── page.tsx │ │ │ ├── switch/ │ │ │ │ └── page.tsx │ │ │ ├── tabs/ │ │ │ │ └── page.tsx │ │ │ ├── toast/ │ │ │ │ └── page.tsx │ │ │ ├── toggle-group/ │ │ │ │ └── page.tsx │ │ │ ├── toolbar/ │ │ │ │ └── page.tsx │ │ │ ├── tooltip/ │ │ │ │ └── page.tsx │ │ │ └── visually-hidden/ │ │ │ └── page.tsx │ │ ├── next-env.d.ts │ │ ├── next.config.js │ │ ├── package.json │ │ └── tsconfig.json │ └── storybook/ │ ├── .gitignore │ ├── .storybook/ │ │ ├── main.ts │ │ ├── manager-head.html │ │ ├── manager.ts │ │ ├── preview.css │ │ └── preview.ts │ ├── eslint.config.js │ ├── index.d.ts │ ├── package.json │ ├── stories/ │ │ ├── accessible-icon.stories.tsx │ │ ├── accordion.stories.module.css │ │ ├── accordion.stories.tsx │ │ ├── alert-dialog.stories.module.css │ │ ├── alert-dialog.stories.tsx │ │ ├── arrow.stories.tsx │ │ ├── aspect-ratio.stories.module.css │ │ ├── aspect-ratio.stories.tsx │ │ ├── avatar.stories.module.css │ │ ├── avatar.stories.tsx │ │ ├── checkbox.stories.module.css │ │ ├── checkbox.stories.tsx │ │ ├── collapsible.stories.module.css │ │ ├── collapsible.stories.tsx │ │ ├── collection.stories.tsx │ │ ├── context-menu.stories.module.css │ │ ├── context-menu.stories.tsx │ │ ├── dialog.stories.module.css │ │ ├── dialog.stories.tsx │ │ ├── dismissable-layer.stories.tsx │ │ ├── dropdown-menu.stories.module.css │ │ ├── dropdown-menu.stories.tsx │ │ ├── focus-scope.stories.tsx │ │ ├── form.stories.module.css │ │ ├── form.stories.tsx │ │ ├── hover-card.stories.module.css │ │ ├── hover-card.stories.tsx │ │ ├── label.stories.module.css │ │ ├── label.stories.tsx │ │ ├── menu.stories.module.css │ │ ├── menu.stories.tsx │ │ ├── menubar.stories.module.css │ │ ├── menubar.stories.tsx │ │ ├── navigation-menu.stories.module.css │ │ ├── navigation-menu.stories.tsx │ │ ├── one-time-password-field.stories.module.css │ │ ├── one-time-password-field.stories.tsx │ │ ├── password-toggle-field.stories.module.css │ │ ├── password-toggle-field.stories.tsx │ │ ├── popover.stories.module.css │ │ ├── popover.stories.tsx │ │ ├── popper.stories.module.css │ │ ├── popper.stories.tsx │ │ ├── portal.stories.tsx │ │ ├── presence.stories.module.css │ │ ├── presence.stories.tsx │ │ ├── progress.stories.module.css │ │ ├── progress.stories.tsx │ │ ├── radio-group.stories.module.css │ │ ├── radio-group.stories.tsx │ │ ├── roving-focus-group.stories.tsx │ │ ├── scroll-area.stories.module.css │ │ ├── scroll-area.stories.tsx │ │ ├── select.stories.module.css │ │ ├── select.stories.tsx │ │ ├── separator.stories.module.css │ │ ├── separator.stories.tsx │ │ ├── slider.stories.module.css │ │ ├── slider.stories.tsx │ │ ├── slot.stories.tsx │ │ ├── switch.stories.module.css │ │ ├── switch.stories.tsx │ │ ├── tabs.stories.module.css │ │ ├── tabs.stories.tsx │ │ ├── toast.stories.module.css │ │ ├── toast.stories.tsx │ │ ├── toggle-group.stories.module.css │ │ ├── toggle-group.stories.tsx │ │ ├── toggle.stories.module.css │ │ ├── toggle.stories.tsx │ │ ├── toolbar.stories.module.css │ │ ├── toolbar.stories.tsx │ │ ├── tooltip.stories.module.css │ │ ├── tooltip.stories.tsx │ │ └── visually-hidden.stories.tsx │ └── tsconfig.json ├── context7.json ├── cypress/ │ ├── e2e/ │ │ ├── ContextMenu.cy.ts │ │ ├── Dialog.cy.ts │ │ ├── DropdownMenu.cy.ts │ │ ├── Form.cy.ts │ │ ├── Menubar.cy.ts │ │ ├── Select.cy.ts │ │ └── Toast.cy.ts │ ├── support/ │ │ ├── commands.js │ │ ├── e2e.js │ │ └── index.d.ts │ └── tsconfig.json ├── cypress.config.ts ├── eslint.config.mjs ├── internal/ │ ├── builder/ │ │ ├── builder.js │ │ ├── eslint.config.js │ │ ├── package.json │ │ ├── radix-build.js │ │ └── tsconfig.json │ ├── eslint-config/ │ │ ├── eslint.config.js │ │ ├── index.js │ │ ├── package.json │ │ ├── react-package.js │ │ ├── tsconfig.json │ │ └── vite.js │ ├── test-data/ │ │ ├── eslint.config.js │ │ ├── foods.ts │ │ ├── package.json │ │ └── tsconfig.json │ └── typescript-config/ │ ├── base.json │ ├── nextjs.json │ ├── package.json │ ├── react-library/ │ │ └── index.d.ts │ ├── react-library.json │ ├── vite-app.json │ └── vite-node.json ├── package.json ├── packages/ │ ├── core/ │ │ ├── number/ │ │ │ ├── README.md │ │ │ ├── eslint.config.mjs │ │ │ ├── package.json │ │ │ ├── src/ │ │ │ │ ├── index.ts │ │ │ │ └── number.ts │ │ │ └── tsconfig.json │ │ ├── primitive/ │ │ │ ├── CHANGELOG.md │ │ │ ├── README.md │ │ │ ├── eslint.config.mjs │ │ │ ├── package.json │ │ │ ├── src/ │ │ │ │ ├── index.ts │ │ │ │ ├── primitive.tsx │ │ │ │ └── types.ts │ │ │ └── tsconfig.json │ │ └── rect/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── observe-element-rect.ts │ │ └── tsconfig.json │ └── react/ │ ├── accessible-icon/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── accesible-icon.test.tsx │ │ │ ├── accessible-icon.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── accordion/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── accordion.test.tsx │ │ │ ├── accordion.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── alert-dialog/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── alert-dialog.test.tsx │ │ │ ├── alert-dialog.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── announce/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── announce.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── arrow/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── arrow.test.tsx │ │ │ ├── arrow.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── aspect-ratio/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── aspect-ratio.test.tsx │ │ │ ├── aspect-ratio.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── avatar/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── avatar.test.tsx │ │ │ ├── avatar.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── checkbox/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── checkbox.test.tsx │ │ │ ├── checkbox.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── collapsible/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── collapsible.test.tsx │ │ │ ├── collapsible.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── collection/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── collection-legacy.tsx │ │ │ ├── collection.tsx │ │ │ ├── index.ts │ │ │ ├── ordered-dictionary.test.ts │ │ │ └── ordered-dictionary.ts │ │ └── tsconfig.json │ ├── compose-refs/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── compose-refs.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── context/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── create-context.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── context-menu/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── context-menu.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── dialog/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── dialog.test.tsx │ │ │ ├── dialog.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── direction/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── direction.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── dismissable-layer/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── dismissable-layer.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── dropdown-menu/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── dropdown-menu.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── focus-guards/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── focus-guards.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── focus-scope/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── focus-scope.test.tsx │ │ │ ├── focus-scope.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── form/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── form.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── hover-card/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── hover-card.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── id/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── id.tsx │ │ │ └── index.ts │ │ └── tsconfig.json │ ├── label/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── label.tsx │ │ └── tsconfig.json │ ├── menu/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── menu.tsx │ │ └── tsconfig.json │ ├── menubar/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── menubar.tsx │ │ └── tsconfig.json │ ├── navigation-menu/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── navigation-menu.tsx │ │ └── tsconfig.json │ ├── one-time-password-field/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── one-time-password-field.test.tsx │ │ │ └── one-time-password-field.tsx │ │ └── tsconfig.json │ ├── password-toggle-field/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── password-toggle-field.test.tsx │ │ │ └── password-toggle-field.tsx │ │ └── tsconfig.json │ ├── popover/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── popover.tsx │ │ └── tsconfig.json │ ├── popper/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── popper.tsx │ │ └── tsconfig.json │ ├── portal/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── portal.tsx │ │ └── tsconfig.json │ ├── presence/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── presence.tsx │ │ │ └── use-state-machine.tsx │ │ └── tsconfig.json │ ├── primitive/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── primitive.tsx │ │ └── tsconfig.json │ ├── progress/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── progress.tsx │ │ └── tsconfig.json │ ├── radio-group/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── radio-group.tsx │ │ │ └── radio.tsx │ │ └── tsconfig.json │ ├── radix-ui/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── internal.ts │ │ └── tsconfig.json │ ├── roving-focus/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── roving-focus-group.tsx │ │ └── tsconfig.json │ ├── scroll-area/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── scroll-area.tsx │ │ │ └── use-state-machine.ts │ │ └── tsconfig.json │ ├── select/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── select.tsx │ │ └── tsconfig.json │ ├── separator/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── separator.tsx │ │ └── tsconfig.json │ ├── slider/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── slider.tsx │ │ └── tsconfig.json │ ├── slot/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── __snapshots__/ │ │ │ │ └── slot.test.tsx.snap │ │ │ ├── index.ts │ │ │ ├── slot.test.tsx │ │ │ └── slot.tsx │ │ └── tsconfig.json │ ├── switch/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── switch.test.tsx │ │ │ └── switch.tsx │ │ └── tsconfig.json │ ├── tabs/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── tabs.tsx │ │ └── tsconfig.json │ ├── toast/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── toast.tsx │ │ └── tsconfig.json │ ├── toggle/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── toggle.test.tsx │ │ │ └── toggle.tsx │ │ └── tsconfig.json │ ├── toggle-group/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── toggle-group.test.tsx │ │ │ └── toggle-group.tsx │ │ └── tsconfig.json │ ├── toolbar/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── toolbar.test.tsx │ │ │ └── toolbar.tsx │ │ └── tsconfig.json │ ├── tooltip/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── tooltip.test.tsx │ │ │ └── tooltip.tsx │ │ └── tsconfig.json │ ├── use-callback-ref/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── use-callback-ref.tsx │ │ └── tsconfig.json │ ├── use-controllable-state/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── use-controllable-state-reducer.tsx │ │ │ ├── use-controllable-state.test.tsx │ │ │ └── use-controllable-state.tsx │ │ └── tsconfig.json │ ├── use-effect-event/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── use-effect-event.tsx │ │ └── tsconfig.json │ ├── use-escape-keydown/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── use-escape-keydown.tsx │ │ └── tsconfig.json │ ├── use-is-hydrated/ │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── use-is-hydrated.tsx │ │ └── tsconfig.json │ ├── use-layout-effect/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── use-layout-effect.tsx │ │ └── tsconfig.json │ ├── use-previous/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── use-previous.tsx │ │ └── tsconfig.json │ ├── use-rect/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── use-rect.tsx │ │ └── tsconfig.json │ ├── use-size/ │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── use-size.tsx │ │ └── tsconfig.json │ └── visually-hidden/ │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src/ │ │ ├── index.ts │ │ └── visually-hidden.tsx │ └── tsconfig.json ├── patches/ │ └── @changesets__apply-release-plan.patch ├── philosophy.md ├── pnpm-workspace.yaml ├── release-process.md ├── scripts/ │ └── setup-tests.ts ├── types/ │ ├── global.d.ts │ └── index.d.ts └── vitest.config.mts
SYMBOL INDEX (1583 symbols across 153 files)
FILE: .changeset/changelog.cjs
function getDependencyReleaseLine (line 5) | async function getDependencyReleaseLine(_, dependenciesUpdated) {
function getReleaseLine (line 14) | async function getReleaseLine(changeset) {
function getChangelogText (line 25) | async function getChangelogText(changelogLines) {
function getChangelogEntry (line 58) | async function getChangelogEntry(release, changelogLines) {
FILE: apps/ssr-testing/app/accessible-icon/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/accordion/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/alert-dialog/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/avatar/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/checkbox/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/collapsible/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/context-menu/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/dialog/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/dropdown-menu/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/form/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/hover-card/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/label/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/layout.tsx
function Layout (line 5) | function Layout({ children }: { children: React.ReactNode }) {
FILE: apps/ssr-testing/app/menubar/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/navigation-menu/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/one-time-password-field/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/page.tsx
function Page (line 1) | function Page() {
FILE: apps/ssr-testing/app/password-toggle-field/page.tsx
function Page (line 4) | function Page() {
function EyeClosedIcon (line 27) | function EyeClosedIcon() {
function EyeOpenIcon (line 45) | function EyeOpenIcon() {
FILE: apps/ssr-testing/app/popover/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/portal/page.tsx
function Page (line 6) | function Page() {
FILE: apps/ssr-testing/app/progress/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/radio-group/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/roving-focus-group/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/roving-focus-group/roving-focus.client.tsx
type Direction (line 5) | type Direction = 'ltr' | 'rtl';
function RovingFocusProvider (line 16) | function RovingFocusProvider({ children }: { children: React.ReactNode }) {
function RovingFocusToggle (line 25) | function RovingFocusToggle() {
type ButtonGroupProps (line 39) | type ButtonGroupProps = Omit<React.ComponentPropsWithRef<'div'>, 'defaul...
function ButtonGroup (line 42) | function ButtonGroup({ defaultValue, ...props }: ButtonGroupProps) {
type ButtonProps (line 61) | type ButtonProps = Omit<React.ComponentPropsWithRef<'button'>, 'value'> ...
function Button (line 63) | function Button(props: ButtonProps) {
FILE: apps/ssr-testing/app/scroll-area/page.tsx
function Page (line 4) | function Page() {
function LongContent (line 30) | function LongContent() {
FILE: apps/ssr-testing/app/select/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/separator/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/slider/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/slot/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/switch/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/tabs/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/toast/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/toggle-group/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/toolbar/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/tooltip/page.tsx
function Page (line 4) | function Page() {
FILE: apps/ssr-testing/app/visually-hidden/page.tsx
function Page (line 4) | function Page() {
FILE: apps/storybook/index.d.ts
type CSSModuleClasses (line 1) | type CSSModuleClasses = { readonly [key: string]: string };
FILE: apps/storybook/stories/arrow.stories.tsx
constant RECOMMENDED_CSS__ARROW__ROOT (line 5) | const RECOMMENDED_CSS__ARROW__ROOT = {
FILE: apps/storybook/stories/avatar.stories.tsx
function SourceChanger (line 100) | function SourceChanger({
FILE: apps/storybook/stories/collection.stories.tsx
function WrappedItems (line 78) | function WrappedItems({ hasTomato }: any) {
type ItemData (line 128) | type ItemData = { disabled: boolean };
type ItemProps (line 144) | type ItemProps = React.ComponentPropsWithRef<'li'> & {
function Item (line 149) | function Item({ disabled = false, ...props }: ItemProps) {
function LogItems (line 161) | function LogItems({ name = 'items' }: { name?: string }) {
FILE: apps/storybook/stories/dismissable-layer.stories.tsx
type DismissableLayerProps (line 15) | type DismissableLayerProps = React.ComponentProps<typeof DismissableLayer>;
type FocusScopeProps (line 16) | type FocusScopeProps = React.ComponentProps<typeof FocusScope>;
constant SYSTEM_FONT (line 20) | const SYSTEM_FONT =
type DismissableBoxProps (line 189) | type DismissableBoxProps = Omit<DismissableLayerProps, 'children'>;
function DismissableBox (line 191) | function DismissableBox(props: DismissableBoxProps) {
type DummyDialogProps (line 479) | type DummyDialogProps = {
function DummyDialog (line 485) | function DummyDialog({ children, openLabel = 'Open', closeLabel = 'Close...
type DummyPopoverOwnProps (line 550) | type DummyPopoverOwnProps = {
type DummyPopoverProps (line 557) | type DummyPopoverProps = DummyPopoverOwnProps &
function DummyPopover (line 561) | function DummyPopover({
FILE: apps/storybook/stories/dropdown-menu.stories.tsx
function handleModalDialogClose (line 472) | function handleModalDialogClose(event: Event) {
function handleNonModalDialogClose (line 478) | function handleNonModalDialogClose(event: Event) {
constant SIDES (line 870) | const SIDES = [...SIDE_OPTIONS.filter((side) => side !== 'bottom'), 'bot...
FILE: apps/storybook/stories/focus-scope.stories.tsx
type FocusParam (line 123) | type FocusParam = boolean | React.RefObject<HTMLElement | null>;
FILE: apps/storybook/stories/form.stories.tsx
function wait (line 184) | async function wait(ms: number) {
FILE: apps/storybook/stories/hover-card.stories.tsx
constant SIDES (line 458) | const SIDES = [...SIDE_OPTIONS.filter((side) => side !== 'bottom'), 'bot...
function CardContentPlaceholder (line 772) | function CardContentPlaceholder() {
FILE: apps/storybook/stories/menu.stories.tsx
type MenuProps (line 363) | type MenuProps = Omit<
FILE: apps/storybook/stories/one-time-password-field.stories.tsx
type Story (line 13) | type Story = StoryObj<typeof OneTimePasswordField.Root>;
type FormState (line 15) | type FormState = { type: 'idle' } | { type: 'valid' } | { type: 'invalid...
constant VALID_CODE (line 17) | const VALID_CODE = '123456';
function UncontrolledImpl (line 42) | function UncontrolledImpl(props: OneTimePasswordField.OneTimePasswordFie...
function ControlledImpl (line 114) | function ControlledImpl(props: OneTimePasswordField.OneTimePasswordField...
function ErrorMessage (line 240) | function ErrorMessage({ children }: { children: string }) {
function Dialog (line 244) | function Dialog({
function getInputValues (line 276) | function getInputValues(inputs: HTMLInputElement[]) {
FILE: apps/storybook/stories/password-toggle-field.stories.tsx
type Story (line 12) | type Story = StoryObj<typeof PasswordToggleField.Root>;
type StoryArgs (line 13) | type StoryArgs = Exclude<Story['args'], undefined>;
FILE: apps/storybook/stories/popover.stories.tsx
constant SIDES (line 289) | const SIDES = [...SIDE_OPTIONS.filter((side) => side !== 'bottom'), 'bot...
FILE: apps/storybook/stories/popper.stories.tsx
function anchorClass (line 472) | function anchorClass(props: { size: 'small' | 'large' }) {
function contentClass (line 482) | function contentClass(props: { size: 'small' | 'large' }) {
FILE: apps/storybook/stories/presence.stories.tsx
function Animation (line 64) | function Animation(props: React.ComponentProps<'div'>) {
function Toggles (line 80) | function Toggles({ open, onOpenChange, nodeRef }: any) {
FILE: apps/storybook/stories/progress.stories.tsx
function ProgressRange (line 69) | function ProgressRange({ value, setValue, max = 100 }: any) {
type ProgressValue (line 88) | type ProgressValue = number | null;
function useProgressValueState (line 89) | function useProgressValueState(initialState: ProgressValue | (() => Prog...
function useIndeterminateToggle (line 95) | function useIndeterminateToggle(
function usePreviousValueRef (line 114) | function usePreviousValueRef(value: ProgressValue) {
FILE: apps/storybook/stories/roving-focus-group.stories.tsx
type RovingFocusGroupProps (line 4) | type RovingFocusGroupProps = React.ComponentProps<typeof RovingFocus.Root>;
type ButtonGroupProps (line 156) | type ButtonGroupProps = Omit<React.ComponentPropsWithRef<'div'>, 'defaul...
type ButtonProps (line 176) | type ButtonProps = Omit<React.ComponentPropsWithRef<'button'>, 'value'> ...
FILE: apps/storybook/stories/scroll-area.stories.tsx
constant DYNAMIC_CONTENT_DELAY (line 312) | const DYNAMIC_CONTENT_DELAY = 2000;
FILE: apps/storybook/stories/select.stories.tsx
constant POSITIONS (line 13) | const POSITIONS = ['item-aligned', 'popper'] as const;
function handleChange (line 453) | function handleChange(event: React.FormEvent<HTMLFormElement>) {
function handleChange (line 516) | function handleChange(event: React.FormEvent<HTMLFormElement>) {
function handleChange (line 579) | function handleChange(event: React.FormEvent<HTMLFormElement>) {
function handleChange (line 821) | function handleChange(event: React.FormEvent<HTMLFormElement>) {
type PaddedElement (line 926) | type PaddedElement = 'content' | 'viewport';
type ChromaticSelectProps (line 928) | interface ChromaticSelectProps extends React.ComponentProps<typeof Selec...
FILE: apps/storybook/stories/slot.stories.tsx
type Story (line 7) | type Story = StoryObj<typeof Slot.Root>;
class ErrorBoundary (line 275) | class ErrorBoundary extends React.Component<any, { hasError: boolean }> {
method constructor (line 276) | constructor(props: any) {
method getDerivedStateFromError (line 281) | static getDerivedStateFromError() {
method render (line 285) | render() {
function wait (line 396) | async function wait(ms: number) {
FILE: apps/storybook/stories/toast.stories.tsx
type Direction (line 176) | type Direction = React.ComponentProps<typeof Toast.Provider>['swipeDirec...
constant SNAPSHOT_DELAY (line 266) | const SNAPSHOT_DELAY = 300;
FILE: apps/storybook/stories/tooltip.stories.tsx
constant SIDES (line 793) | const SIDES = [...SIDE_OPTIONS.filter((side) => side !== 'bottom'), 'bot...
function SimpleTooltip (line 1083) | function SimpleTooltip({
FILE: cypress.config.ts
method setupNodeEvents (line 15) | setupNodeEvents(_on, _config) {}
FILE: cypress/e2e/ContextMenu.cy.ts
function shouldOpenOnKeydown (line 125) | function shouldOpenOnKeydown(key: string) {
function pointerExitRightToLeft (line 240) | function pointerExitRightToLeft(elementText: string) {
function pointerExitLeftToRight (line 249) | function pointerExitLeftToRight(elementText: string) {
function pointerOver (line 258) | function pointerOver(elementText: string) {
FILE: cypress/e2e/Dialog.cy.ts
function shouldBeOpen (line 6) | function shouldBeOpen() {
function shouldBeClosed (line 9) | function shouldBeClosed() {
function shouldNotAllowOutsideInteraction (line 12) | function shouldNotAllowOutsideInteraction(action: 'realClick' | 'realTou...
function shouldAllowOutsideInteraction (line 24) | function shouldAllowOutsideInteraction(action: 'realClick' | 'realTouch') {
FILE: cypress/e2e/DropdownMenu.cy.ts
function shouldOpenOnKeydown (line 117) | function shouldOpenOnKeydown(key: string) {
function pointerExitRightToLeft (line 230) | function pointerExitRightToLeft(elementText: string) {
function pointerExitLeftToRight (line 239) | function pointerExitLeftToRight(elementText: string) {
function pointerOver (line 248) | function pointerOver(elementText: string) {
FILE: cypress/e2e/Form.cy.ts
function checkControlMessageAssociation (line 10) | function checkControlMessageAssociation() {
FILE: cypress/e2e/Menubar.cy.ts
function shouldSupportArrowKeyNavigation (line 101) | function shouldSupportArrowKeyNavigation(dir: 'ltr' | 'rtl') {
function shouldOpenOnKeydown (line 178) | function shouldOpenOnKeydown(key: string) {
function pointerOver (line 270) | function pointerOver(elementText: string) {
FILE: cypress/e2e/Toast.cy.ts
function buttonIsFocused (line 6) | function buttonIsFocused(identifier: number) {
function toastIsFocused (line 10) | function toastIsFocused(identifier: number) {
FILE: cypress/support/index.d.ts
type Chainable (line 3) | interface Chainable<Subject> {
FILE: internal/builder/builder.js
function build (line 10) | async function build(relativePath) {
FILE: packages/core/number/src/number.ts
function clamp (line 1) | function clamp(value: number, [min, max]: [number, number]): number {
FILE: packages/core/primitive/src/primitive.tsx
function composeEventHandlers (line 11) | function composeEventHandlers<E extends { defaultPrevented: boolean }>(
function getOwnerWindow (line 25) | function getOwnerWindow(element: Node | null | undefined) {
function getOwnerDocument (line 33) | function getOwnerDocument(element: Node | null | undefined) {
function getActiveElement (line 45) | function getActiveElement(
function isFrame (line 73) | function isFrame(element: Element): element is HTMLIFrameElement {
FILE: packages/core/primitive/src/types.ts
type Timeout (line 1) | type Timeout = ReturnType<typeof setTimeout>;
type Interval (line 2) | type Interval = ReturnType<typeof setInterval>;
type Immediate (line 3) | type Immediate = ReturnType<typeof setImmediate>;
FILE: packages/core/rect/src/observe-element-rect.ts
type Measurable (line 4) | type Measurable = { getBoundingClientRect(): DOMRect };
function observeElementRect (line 11) | function observeElementRect(
type CallbackFn (line 60) | type CallbackFn = (rect: DOMRect) => void;
type ObservedData (line 62) | type ObservedData = {
function runLoop (line 70) | function runLoop() {
function rectEquals (line 97) | function rectEquals(rect1: DOMRect, rect2: DOMRect) {
FILE: packages/react/accessible-icon/src/accesible-icon.test.tsx
constant LABEL_TEXT (line 8) | const LABEL_TEXT = 'Close';
FILE: packages/react/accessible-icon/src/accessible-icon.tsx
constant NAME (line 4) | const NAME = 'AccessibleIcon';
type AccessibleIconProps (line 6) | interface AccessibleIconProps {
FILE: packages/react/accordion/src/accordion.test.tsx
constant ITEMS (line 9) | const ITEMS = ['One', 'Two', 'Three'];
function AccordionTest (line 401) | function AccordionTest(props: React.ComponentProps<typeof Accordion.Root...
FILE: packages/react/accordion/src/accordion.tsx
type Direction (line 15) | type Direction = 'ltr' | 'rtl';
constant ACCORDION_NAME (line 21) | const ACCORDION_NAME = 'Accordion';
constant ACCORDION_KEYS (line 22) | const ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLef...
type ScopedProps (line 27) | type ScopedProps<P> = P & { __scopeAccordion?: Scope };
type AccordionElement (line 34) | type AccordionElement = AccordionImplMultipleElement | AccordionImplSing...
type AccordionSingleProps (line 35) | interface AccordionSingleProps extends AccordionImplSingleProps {
type AccordionMultipleProps (line 38) | interface AccordionMultipleProps extends AccordionImplMultipleProps {
type AccordionValueContextValue (line 63) | type AccordionValueContextValue = {
type AccordionImplSingleElement (line 77) | type AccordionImplSingleElement = AccordionImplElement;
type AccordionImplSingleProps (line 78) | interface AccordionImplSingleProps extends AccordionImplProps {
type AccordionImplMultipleElement (line 133) | type AccordionImplMultipleElement = AccordionImplElement;
type AccordionImplMultipleProps (line 134) | interface AccordionImplMultipleProps extends AccordionImplProps {
type AccordionImplContextValue (line 195) | type AccordionImplContextValue = {
type AccordionImplElement (line 204) | type AccordionImplElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 205) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type AccordionImplProps (line 206) | interface AccordionImplProps extends PrimitiveDivProps {
constant ITEM_NAME (line 328) | const ITEM_NAME = 'AccordionItem';
type AccordionItemContextValue (line 330) | type AccordionItemContextValue = { open?: boolean; disabled?: boolean; t...
type AccordionItemElement (line 334) | type AccordionItemElement = React.ComponentRef<typeof CollapsiblePrimiti...
type CollapsibleProps (line 335) | type CollapsibleProps = React.ComponentPropsWithoutRef<typeof Collapsibl...
type AccordionItemProps (line 336) | interface AccordionItemProps
constant HEADER_NAME (line 397) | const HEADER_NAME = 'AccordionHeader';
type AccordionHeaderElement (line 399) | type AccordionHeaderElement = React.ComponentRef<typeof Primitive.h3>;
type PrimitiveHeading3Props (line 400) | type PrimitiveHeading3Props = React.ComponentPropsWithoutRef<typeof Prim...
type AccordionHeaderProps (line 401) | interface AccordionHeaderProps extends PrimitiveHeading3Props {}
constant TRIGGER_NAME (line 430) | const TRIGGER_NAME = 'AccordionTrigger';
type AccordionTriggerElement (line 432) | type AccordionTriggerElement = React.ComponentRef<typeof CollapsiblePrim...
type CollapsibleTriggerProps (line 433) | type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof Col...
type AccordionTriggerProps (line 434) | interface AccordionTriggerProps extends CollapsibleTriggerProps {}
constant CONTENT_NAME (line 468) | const CONTENT_NAME = 'AccordionContent';
type AccordionContentElement (line 470) | type AccordionContentElement = React.ComponentRef<typeof CollapsiblePrim...
type CollapsibleContentProps (line 471) | type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof Col...
type AccordionContentProps (line 472) | interface AccordionContentProps extends CollapsibleContentProps {}
function getState (line 505) | function getState(open?: boolean) {
FILE: packages/react/alert-dialog/src/alert-dialog.test.tsx
constant OPEN_TEXT (line 8) | const OPEN_TEXT = 'Open';
constant CANCEL_TEXT (line 9) | const CANCEL_TEXT = 'Cancel';
constant ACTION_TEXT (line 10) | const ACTION_TEXT = 'Do it';
constant TITLE_TEXT (line 11) | const TITLE_TEXT = 'Warning';
constant DESC_TEXT (line 12) | const DESC_TEXT = 'This is a warning';
constant OVERLAY_TEST_ID (line 13) | const OVERLAY_TEST_ID = 'test-overlay';
FILE: packages/react/alert-dialog/src/alert-dialog.tsx
constant ROOT_NAME (line 15) | const ROOT_NAME = 'AlertDialog';
type ScopedProps (line 17) | type ScopedProps<P> = P & { __scopeAlertDialog?: Scope };
type DialogProps (line 23) | type DialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive...
type AlertDialogProps (line 24) | interface AlertDialogProps extends Omit<DialogProps, 'modal'> {}
constant TRIGGER_NAME (line 37) | const TRIGGER_NAME = 'AlertDialogTrigger';
type AlertDialogTriggerElement (line 39) | type AlertDialogTriggerElement = React.ComponentRef<typeof DialogPrimiti...
type DialogTriggerProps (line 40) | type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPr...
type AlertDialogTriggerProps (line 41) | interface AlertDialogTriggerProps extends DialogTriggerProps {}
constant PORTAL_NAME (line 57) | const PORTAL_NAME = 'AlertDialogPortal';
type DialogPortalProps (line 59) | type DialogPortalProps = React.ComponentPropsWithoutRef<typeof DialogPri...
type AlertDialogPortalProps (line 60) | interface AlertDialogPortalProps extends DialogPortalProps {}
constant OVERLAY_NAME (line 76) | const OVERLAY_NAME = 'AlertDialogOverlay';
type AlertDialogOverlayElement (line 78) | type AlertDialogOverlayElement = React.ComponentRef<typeof DialogPrimiti...
type DialogOverlayProps (line 79) | type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPr...
type AlertDialogOverlayProps (line 80) | interface AlertDialogOverlayProps extends DialogOverlayProps {}
constant CONTENT_NAME (line 96) | const CONTENT_NAME = 'AlertDialogContent';
type AlertDialogContentContextValue (line 98) | type AlertDialogContentContextValue = {
type AlertDialogContentElement (line 105) | type AlertDialogContentElement = React.ComponentRef<typeof DialogPrimiti...
type DialogContentProps (line 106) | type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPr...
type AlertDialogContentProps (line 107) | interface AlertDialogContentProps
constant TITLE_NAME (line 162) | const TITLE_NAME = 'AlertDialogTitle';
type AlertDialogTitleElement (line 164) | type AlertDialogTitleElement = React.ComponentRef<typeof DialogPrimitive...
type DialogTitleProps (line 165) | type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrim...
type AlertDialogTitleProps (line 166) | interface AlertDialogTitleProps extends DialogTitleProps {}
constant DESCRIPTION_NAME (line 182) | const DESCRIPTION_NAME = 'AlertDialogDescription';
type AlertDialogDescriptionElement (line 184) | type AlertDialogDescriptionElement = React.ComponentRef<typeof DialogPri...
type DialogDescriptionProps (line 185) | type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof Dial...
type AlertDialogDescriptionProps (line 186) | interface AlertDialogDescriptionProps extends DialogDescriptionProps {}
constant ACTION_NAME (line 203) | const ACTION_NAME = 'AlertDialogAction';
type AlertDialogActionElement (line 205) | type AlertDialogActionElement = React.ComponentRef<typeof DialogPrimitiv...
type DialogCloseProps (line 206) | type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrim...
type AlertDialogActionProps (line 207) | interface AlertDialogActionProps extends DialogCloseProps {}
constant CANCEL_NAME (line 223) | const CANCEL_NAME = 'AlertDialogCancel';
type AlertDialogCancelElement (line 225) | type AlertDialogCancelElement = React.ComponentRef<typeof DialogPrimitiv...
type AlertDialogCancelProps (line 226) | interface AlertDialogCancelProps extends DialogCloseProps {}
type DescriptionWarningProps (line 242) | type DescriptionWarningProps = {
FILE: packages/react/announce/src/announce.tsx
type RegionType (line 7) | type RegionType = 'polite' | 'assertive' | 'off';
type RegionRole (line 8) | type RegionRole = 'status' | 'alert' | 'log' | 'none';
constant ROLES (line 10) | const ROLES: { [key in RegionType]: RegionRole } = {
constant NAME (line 22) | const NAME = 'Announce';
type AnnounceElement (line 24) | type AnnounceElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 25) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type AnnounceProps (line 26) | interface AnnounceProps extends PrimitiveDivProps {
function updateAttributesOnVisibilityChange (line 136) | function updateAttributesOnVisibilityChange() {
type LiveRegionOptions (line 183) | type LiveRegionOptions = {
function buildLiveRegionElement (line 191) | function buildLiveRegionElement(
function buildSelector (line 213) | function buildSelector({ type, relevant, role, atomic, id }: LiveRegionO...
function getLiveRegionPartDataAttr (line 225) | function getLiveRegionPartDataAttr(id?: string) {
FILE: packages/react/arrow/src/arrow.test.tsx
constant WIDTH (line 7) | const WIDTH = 40;
constant HEIGHT (line 8) | const HEIGHT = 30;
FILE: packages/react/arrow/src/arrow.tsx
constant NAME (line 8) | const NAME = 'Arrow';
type ArrowElement (line 10) | type ArrowElement = React.ComponentRef<typeof Primitive.svg>;
type PrimitiveSvgProps (line 11) | type PrimitiveSvgProps = React.ComponentPropsWithoutRef<typeof Primitive...
type ArrowProps (line 12) | interface ArrowProps extends PrimitiveSvgProps {}
FILE: packages/react/aspect-ratio/src/aspect-ratio.test.tsx
constant RATIO (line 7) | const RATIO = 1 / 2;
FILE: packages/react/aspect-ratio/src/aspect-ratio.tsx
constant NAME (line 8) | const NAME = 'AspectRatio';
type AspectRatioElement (line 10) | type AspectRatioElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 11) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type AspectRatioProps (line 12) | interface AspectRatioProps extends PrimitiveDivProps {
FILE: packages/react/avatar/src/avatar.test.tsx
constant ROOT_TEST_ID (line 9) | const ROOT_TEST_ID = 'avatar-root';
constant FALLBACK_TEXT (line 10) | const FALLBACK_TEXT = 'AB';
constant IMAGE_ALT_TEXT (line 11) | const IMAGE_ALT_TEXT = 'Fake Avatar';
constant DELAY (line 12) | const DELAY = 300;
function renderAndHydrate (line 148) | function renderAndHydrate(ui: React.ReactElement) {
method onSrcChange (line 215) | onSrcChange() {
class MockImage (line 286) | class MockImage extends EventTarget {
method constructor (line 289) | constructor() {
method src (line 294) | get src() {
method src (line 298) | set src(src: string) {
method complete (line 306) | get complete() {
method naturalWidth (line 310) | get naturalWidth() {
method onSrcChange (line 314) | onSrcChange() {
FILE: packages/react/avatar/src/avatar.tsx
constant AVATAR_NAME (line 14) | const AVATAR_NAME = 'Avatar';
type ScopedProps (line 16) | type ScopedProps<P> = P & { __scopeAvatar?: Scope };
type ImageLoadingStatus (line 19) | type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
type AvatarContextValue (line 21) | type AvatarContextValue = {
type AvatarElement (line 28) | type AvatarElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 29) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type AvatarProps (line 30) | interface AvatarProps extends PrimitiveSpanProps {}
constant IMAGE_NAME (line 54) | const IMAGE_NAME = 'AvatarImage';
type AvatarImageElement (line 56) | type AvatarImageElement = React.ComponentRef<typeof Primitive.img>;
type PrimitiveImageProps (line 57) | type PrimitiveImageProps = React.ComponentPropsWithoutRef<typeof Primiti...
type AvatarImageProps (line 58) | interface AvatarImageProps extends PrimitiveImageProps {
constant FALLBACK_NAME (line 90) | const FALLBACK_NAME = 'AvatarFallback';
type AvatarFallbackElement (line 92) | type AvatarFallbackElement = React.ComponentRef<typeof Primitive.span>;
type AvatarFallbackProps (line 93) | interface AvatarFallbackProps extends PrimitiveSpanProps {
function resolveLoadingStatus (line 120) | function resolveLoadingStatus(image: HTMLImageElement | null, src?: stri...
function useImageLoadingStatus (line 133) | function useImageLoadingStatus(
FILE: packages/react/checkbox/src/checkbox.test.tsx
constant CHECKBOX_ROLE (line 8) | const CHECKBOX_ROLE = 'checkbox';
constant INDICATOR_TEST_ID (line 9) | const INDICATOR_TEST_ID = 'checkbox-indicator';
method constructor (line 13) | constructor(cb: any) {
method observe (line 16) | observe() {
method unobserve (line 19) | unobserve() {}
method disconnect (line 20) | disconnect() {}
function ControlledCheckbox (line 132) | function ControlledCheckbox() {
function ControlledCheckbox (line 245) | function ControlledCheckbox() {
function LegacyCheckbox (line 480) | function LegacyCheckbox(props: React.ComponentProps<typeof Checkbox.Root...
FILE: packages/react/checkbox/src/checkbox.tsx
constant CHECKBOX_NAME (line 13) | const CHECKBOX_NAME = 'Checkbox';
type ScopedProps (line 15) | type ScopedProps<P> = P & { __scopeCheckbox?: Scope };
type CheckedState (line 18) | type CheckedState = boolean | 'indeterminate';
type CheckboxContextValue (line 20) | type CheckboxContextValue<State extends CheckedState | boolean = Checked...
type CheckboxProviderProps (line 44) | interface CheckboxProviderProps<State extends CheckedState = CheckedStat...
function CheckboxProvider (line 56) | function CheckboxProvider<State extends CheckedState = CheckedState>(
constant TRIGGER_NAME (line 119) | const TRIGGER_NAME = 'CheckboxTrigger';
type CheckboxTriggerProps (line 121) | interface CheckboxTriggerProps
type CheckboxElement (line 197) | type CheckboxElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 198) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type CheckboxProps (line 199) | interface CheckboxProps extends Omit<PrimitiveButtonProps, 'checked' | '...
constant INDICATOR_NAME (line 260) | const INDICATOR_NAME = 'CheckboxIndicator';
type CheckboxIndicatorElement (line 262) | type CheckboxIndicatorElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 263) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type CheckboxIndicatorProps (line 264) | interface CheckboxIndicatorProps extends PrimitiveSpanProps {
constant BUBBLE_INPUT_NAME (line 298) | const BUBBLE_INPUT_NAME = 'CheckboxBubbleInput';
type InputProps (line 300) | type InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;
type CheckboxBubbleInputProps (line 301) | interface CheckboxBubbleInputProps extends Omit<InputProps, 'checked'> {}
function isFunction (line 379) | function isFunction(value: unknown): value is (...args: any[]) => any {
function isIndeterminate (line 383) | function isIndeterminate(checked?: CheckedState): checked is 'indetermin...
function getState (line 387) | function getState(checked: CheckedState) {
FILE: packages/react/collapsible/src/collapsible.test.tsx
constant TRIGGER_TEXT (line 8) | const TRIGGER_TEXT = 'Trigger';
constant CONTENT_TEXT (line 9) | const CONTENT_TEXT = 'Content';
FILE: packages/react/collapsible/src/collapsible.tsx
constant COLLAPSIBLE_NAME (line 17) | const COLLAPSIBLE_NAME = 'Collapsible';
type ScopedProps (line 19) | type ScopedProps<P> = P & { __scopeCollapsible?: Scope };
type CollapsibleContextValue (line 22) | type CollapsibleContextValue = {
type CollapsibleElement (line 32) | type CollapsibleElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 33) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type CollapsibleProps (line 34) | interface CollapsibleProps extends PrimitiveDivProps {
constant TRIGGER_NAME (line 84) | const TRIGGER_NAME = 'CollapsibleTrigger';
type CollapsibleTriggerElement (line 86) | type CollapsibleTriggerElement = React.ComponentRef<typeof Primitive.but...
type PrimitiveButtonProps (line 87) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type CollapsibleTriggerProps (line 88) | interface CollapsibleTriggerProps extends PrimitiveButtonProps {}
constant CONTENT_NAME (line 116) | const CONTENT_NAME = 'CollapsibleContent';
type CollapsibleContentElement (line 118) | type CollapsibleContentElement = CollapsibleContentImplElement;
type CollapsibleContentProps (line 119) | interface CollapsibleContentProps extends Omit<CollapsibleContentImplPro...
type CollapsibleContentImplElement (line 145) | type CollapsibleContentImplElement = React.ComponentRef<typeof Primitive...
type CollapsibleContentImplProps (line 146) | interface CollapsibleContentImplProps extends PrimitiveDivProps {
function getState (line 227) | function getState(open?: boolean) {
FILE: packages/react/collection/src/collection-legacy.tsx
type SlotProps (line 6) | type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>;
type CollectionElement (line 7) | type CollectionElement = HTMLElement;
type CollectionProps (line 8) | interface CollectionProps extends SlotProps {
function createCollection (line 17) | function createCollection<ItemElement extends HTMLElement, ItemData = {}...
FILE: packages/react/collection/src/collection.tsx
type SlotProps (line 8) | type SlotProps = React.ComponentPropsWithoutRef<typeof Slot>;
type CollectionElement (line 9) | type CollectionElement = HTMLElement;
type CollectionProps (line 10) | interface CollectionProps extends SlotProps {
type BaseItemData (line 14) | interface BaseItemData {
type ItemDataWithElement (line 18) | type ItemDataWithElement<
type ItemMap (line 25) | type ItemMap<ItemElement extends HTMLElement, ItemData extends BaseItemD...
function createCollection (line 30) | function createCollection<ItemElement extends HTMLElement, ItemData exte...
function shallowEqual (line 263) | function shallowEqual(a: any, b: any) {
function isElementPreceding (line 277) | function isElementPreceding(a: Element, b: Element) {
function sortByDocumentPosition (line 281) | function sortByDocumentPosition<E extends HTMLElement, T extends BaseIte...
function getChildListObserver (line 292) | function getChildListObserver(callback: () => void) {
FILE: packages/react/collection/src/ordered-dictionary.ts
class OrderedDict (line 5) | class OrderedDict<K, V> extends Map<K, V> {
method constructor (line 9) | constructor(entries?: readonly (readonly [K, V])[] | null) {
method set (line 15) | set(key: K, value: V) {
method insert (line 27) | insert(index: number, key: K, value: V) {
method with (line 78) | with(index: number, key: K, value: V) {
method before (line 84) | before(key: K) {
method setBefore (line 95) | setBefore(key: K, newKey: K, value: V) {
method after (line 103) | after(key: K) {
method setAfter (line 115) | setAfter(key: K, newKey: K, value: V) {
method first (line 123) | first() {
method last (line 127) | last() {
method clear (line 131) | clear() {
method delete (line 136) | delete(key: K) {
method deleteAt (line 144) | deleteAt(index: number) {
method at (line 152) | at(index: number) {
method entryAt (line 159) | entryAt(index: number): [K, V] | undefined {
method indexOf (line 166) | indexOf(key: K) {
method keyAt (line 170) | keyAt(index: number) {
method from (line 174) | from(key: K, offset: number) {
method keyFrom (line 185) | keyFrom(key: K, offset: number) {
method find (line 196) | find(
method findIndex (line 210) | findIndex(
method filter (line 234) | filter(
method map (line 249) | map<U>(
method reduce (line 289) | reduce<U>(
method reduceRight (line 341) | reduceRight<U>(
method toSorted (line 365) | toSorted(compareFn?: (a: [K, V], b: [K, V]) => number): OrderedDict<K,...
method toReversed (line 370) | toReversed(): OrderedDict<K, V> {
method toSpliced (line 383) | toSpliced(...args: [start: number, deleteCount: number, ...items: [K, ...
method slice (line 389) | slice(start?: number, end?: number) {
method every (line 413) | every(
method some (line 427) | some(
type KeyOf (line 442) | type KeyOf<D extends OrderedDict<any, any>> =
type ValueOf (line 444) | type ValueOf<D extends OrderedDict<any, any>> =
type EntryOf (line 446) | type EntryOf<D extends OrderedDict<any, any>> = [KeyOf<D>, ValueOf<D>];
type KeyFrom (line 447) | type KeyFrom<E extends EntryOf<any>> = E[0];
type ValueFrom (line 448) | type ValueFrom<E extends EntryOf<any>> = E[1];
function at (line 450) | function at<T>(array: ArrayLike<T>, index: number): T | undefined {
function toSafeIndex (line 458) | function toSafeIndex(array: ArrayLike<any>, index: number) {
function toSafeInteger (line 465) | function toSafeInteger(number: number) {
FILE: packages/react/compose-refs/src/compose-refs.tsx
type PossibleRef (line 3) | type PossibleRef<T> = React.Ref<T> | undefined;
function setRef (line 9) | function setRef<T>(ref: PossibleRef<T>, value: T) {
function composeRefs (line 21) | function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
function useComposedRefs (line 55) | function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallbac...
FILE: packages/react/context-menu/src/context-menu.tsx
type Direction (line 12) | type Direction = 'ltr' | 'rtl';
type Point (line 13) | type Point = { x: number; y: number };
constant CONTEXT_MENU_NAME (line 19) | const CONTEXT_MENU_NAME = 'ContextMenu';
type ScopedProps (line 21) | type ScopedProps<P> = P & { __scopeContextMenu?: Scope };
type ContextMenuContextValue (line 27) | type ContextMenuContextValue = {
type ContextMenuProps (line 36) | interface ContextMenuProps {
constant TRIGGER_NAME (line 83) | const TRIGGER_NAME = 'ContextMenuTrigger';
type ContextMenuTriggerElement (line 85) | type ContextMenuTriggerElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 86) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type ContextMenuTriggerProps (line 87) | interface ContextMenuTriggerProps extends PrimitiveSpanProps {
constant PORTAL_NAME (line 174) | const PORTAL_NAME = 'ContextMenuPortal';
type MenuPortalProps (line 176) | type MenuPortalProps = React.ComponentPropsWithoutRef<typeof MenuPrimiti...
type ContextMenuPortalProps (line 177) | interface ContextMenuPortalProps extends MenuPortalProps {}
constant CONTENT_NAME (line 193) | const CONTENT_NAME = 'ContextMenuContent';
type ContextMenuContentElement (line 195) | type ContextMenuContentElement = React.ComponentRef<typeof MenuPrimitive...
type MenuContentProps (line 196) | type MenuContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimit...
type ContextMenuContentProps (line 197) | interface ContextMenuContentProps
constant GROUP_NAME (line 251) | const GROUP_NAME = 'ContextMenuGroup';
type ContextMenuGroupElement (line 253) | type ContextMenuGroupElement = React.ComponentRef<typeof MenuPrimitive.G...
type MenuGroupProps (line 254) | type MenuGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type ContextMenuGroupProps (line 255) | interface ContextMenuGroupProps extends MenuGroupProps {}
constant LABEL_NAME (line 271) | const LABEL_NAME = 'ContextMenuLabel';
type ContextMenuLabelElement (line 273) | type ContextMenuLabelElement = React.ComponentRef<typeof MenuPrimitive.L...
type MenuLabelProps (line 274) | type MenuLabelProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type ContextMenuLabelProps (line 275) | interface ContextMenuLabelProps extends MenuLabelProps {}
constant ITEM_NAME (line 291) | const ITEM_NAME = 'ContextMenuItem';
type ContextMenuItemElement (line 293) | type ContextMenuItemElement = React.ComponentRef<typeof MenuPrimitive.It...
type MenuItemProps (line 294) | type MenuItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive...
type ContextMenuItemProps (line 295) | interface ContextMenuItemProps extends MenuItemProps {}
constant CHECKBOX_ITEM_NAME (line 311) | const CHECKBOX_ITEM_NAME = 'ContextMenuCheckboxItem';
type ContextMenuCheckboxItemElement (line 313) | type ContextMenuCheckboxItemElement = React.ComponentRef<typeof MenuPrim...
type MenuCheckboxItemProps (line 314) | type MenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenuP...
type ContextMenuCheckboxItemProps (line 315) | interface ContextMenuCheckboxItemProps extends MenuCheckboxItemProps {}
constant RADIO_GROUP_NAME (line 332) | const RADIO_GROUP_NAME = 'ContextMenuRadioGroup';
type ContextMenuRadioGroupElement (line 334) | type ContextMenuRadioGroupElement = React.ComponentRef<typeof MenuPrimit...
type MenuRadioGroupProps (line 335) | type MenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type ContextMenuRadioGroupProps (line 336) | interface ContextMenuRadioGroupProps extends MenuRadioGroupProps {}
constant RADIO_ITEM_NAME (line 353) | const RADIO_ITEM_NAME = 'ContextMenuRadioItem';
type ContextMenuRadioItemElement (line 355) | type ContextMenuRadioItemElement = React.ComponentRef<typeof MenuPrimiti...
type MenuRadioItemProps (line 356) | type MenuRadioItemProps = React.ComponentPropsWithoutRef<typeof MenuPrim...
type ContextMenuRadioItemProps (line 357) | interface ContextMenuRadioItemProps extends MenuRadioItemProps {}
constant INDICATOR_NAME (line 374) | const INDICATOR_NAME = 'ContextMenuItemIndicator';
type ContextMenuItemIndicatorElement (line 376) | type ContextMenuItemIndicatorElement = React.ComponentRef<typeof MenuPri...
type MenuItemIndicatorProps (line 377) | type MenuItemIndicatorProps = React.ComponentPropsWithoutRef<typeof Menu...
type ContextMenuItemIndicatorProps (line 378) | interface ContextMenuItemIndicatorProps extends MenuItemIndicatorProps {}
constant SEPARATOR_NAME (line 395) | const SEPARATOR_NAME = 'ContextMenuSeparator';
type ContextMenuSeparatorElement (line 397) | type ContextMenuSeparatorElement = React.ComponentRef<typeof MenuPrimiti...
type MenuSeparatorProps (line 398) | type MenuSeparatorProps = React.ComponentPropsWithoutRef<typeof MenuPrim...
type ContextMenuSeparatorProps (line 399) | interface ContextMenuSeparatorProps extends MenuSeparatorProps {}
constant ARROW_NAME (line 416) | const ARROW_NAME = 'ContextMenuArrow';
type ContextMenuArrowElement (line 418) | type ContextMenuArrowElement = React.ComponentRef<typeof MenuPrimitive.A...
type MenuArrowProps (line 419) | type MenuArrowProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type ContextMenuArrowProps (line 420) | interface ContextMenuArrowProps extends MenuArrowProps {}
constant SUB_NAME (line 436) | const SUB_NAME = 'ContextMenuSub';
type ContextMenuSubProps (line 438) | interface ContextMenuSubProps {
constant SUB_TRIGGER_NAME (line 468) | const SUB_TRIGGER_NAME = 'ContextMenuSubTrigger';
type ContextMenuSubTriggerElement (line 470) | type ContextMenuSubTriggerElement = React.ComponentRef<typeof MenuPrimit...
type MenuSubTriggerProps (line 471) | type MenuSubTriggerProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type ContextMenuSubTriggerProps (line 472) | interface ContextMenuSubTriggerProps extends MenuSubTriggerProps {}
constant SUB_CONTENT_NAME (line 489) | const SUB_CONTENT_NAME = 'ContextMenuSubContent';
type ContextMenuSubContentElement (line 491) | type ContextMenuSubContentElement = React.ComponentRef<typeof MenuPrimit...
type MenuSubContentProps (line 492) | type MenuSubContentProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type ContextMenuSubContentProps (line 493) | interface ContextMenuSubContentProps extends MenuSubContentProps {}
function whenTouchOrPen (line 526) | function whenTouchOrPen<E>(handler: React.PointerEventHandler<E>): React...
FILE: packages/react/context/src/create-context.tsx
function createContext (line 3) | function createContext<ContextValueType extends object | null>(
type Scope (line 35) | type Scope<C = any> = { [scopeName: string]: React.Context<C>[] } | unde...
type ScopeHook (line 36) | type ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope };
type CreateScope (line 37) | interface CreateScope {
function createContextScope (line 42) | function createContextScope(scopeName: string, createContextScopeDeps: C...
function composeContextScopes (line 108) | function composeContextScopes(...scopes: [CreateScope, ...CreateScope[]]...
FILE: packages/react/dialog/src/dialog.test.tsx
constant OPEN_TEXT (line 9) | const OPEN_TEXT = 'Open';
constant CLOSE_TEXT (line 10) | const CLOSE_TEXT = 'Close';
constant TITLE_TEXT (line 11) | const TITLE_TEXT = 'Title';
function renderAndClickDialogTrigger (line 45) | function renderAndClickDialogTrigger(Dialog: any) {
FILE: packages/react/dialog/src/dialog.tsx
constant DIALOG_NAME (line 23) | const DIALOG_NAME = 'Dialog';
type ScopedProps (line 25) | type ScopedProps<P> = P & { __scopeDialog?: Scope };
type DialogContextValue (line 28) | type DialogContextValue = {
type DialogProps (line 42) | interface DialogProps {
constant TRIGGER_NAME (line 92) | const TRIGGER_NAME = 'DialogTrigger';
type DialogTriggerElement (line 94) | type DialogTriggerElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 95) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type DialogTriggerProps (line 96) | interface DialogTriggerProps extends PrimitiveButtonProps {}
constant PORTAL_NAME (line 124) | const PORTAL_NAME = 'DialogPortal';
type PortalContextValue (line 126) | type PortalContextValue = { forceMount?: true };
type PortalProps (line 131) | type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
type DialogPortalProps (line 132) | interface DialogPortalProps {
constant OVERLAY_NAME (line 167) | const OVERLAY_NAME = 'DialogOverlay';
type DialogOverlayElement (line 169) | type DialogOverlayElement = DialogOverlayImplElement;
type DialogOverlayProps (line 170) | interface DialogOverlayProps extends DialogOverlayImplProps {
type DialogOverlayImplElement (line 193) | type DialogOverlayImplElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 194) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type DialogOverlayImplProps (line 195) | interface DialogOverlayImplProps extends PrimitiveDivProps {}
constant CONTENT_NAME (line 223) | const CONTENT_NAME = 'DialogContent';
type DialogContentElement (line 225) | type DialogContentElement = DialogContentTypeElement;
type DialogContentProps (line 226) | interface DialogContentProps extends DialogContentTypeProps {
type DialogContentTypeElement (line 255) | type DialogContentTypeElement = DialogContentImplElement;
type DialogContentTypeProps (line 256) | interface DialogContentTypeProps
type DialogContentImplElement (line 360) | type DialogContentImplElement = React.ComponentRef<typeof DismissableLay...
type DismissableLayerProps (line 361) | type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof Dismi...
type FocusScopeProps (line 362) | type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
type DialogContentImplProps (line 363) | interface DialogContentImplProps extends Omit<DismissableLayerProps, 'on...
constant TITLE_NAME (line 430) | const TITLE_NAME = 'DialogTitle';
type DialogTitleElement (line 432) | type DialogTitleElement = React.ComponentRef<typeof Primitive.h2>;
type PrimitiveHeading2Props (line 433) | type PrimitiveHeading2Props = React.ComponentPropsWithoutRef<typeof Prim...
type DialogTitleProps (line 434) | interface DialogTitleProps extends PrimitiveHeading2Props {}
constant DESCRIPTION_NAME (line 450) | const DESCRIPTION_NAME = 'DialogDescription';
type DialogDescriptionElement (line 452) | type DialogDescriptionElement = React.ComponentRef<typeof Primitive.p>;
type PrimitiveParagraphProps (line 453) | type PrimitiveParagraphProps = React.ComponentPropsWithoutRef<typeof Pri...
type DialogDescriptionProps (line 454) | interface DialogDescriptionProps extends PrimitiveParagraphProps {}
constant CLOSE_NAME (line 470) | const CLOSE_NAME = 'DialogClose';
type DialogCloseElement (line 472) | type DialogCloseElement = React.ComponentRef<typeof Primitive.button>;
type DialogCloseProps (line 473) | interface DialogCloseProps extends PrimitiveButtonProps {}
function getState (line 494) | function getState(open: boolean) {
constant TITLE_WARNING_NAME (line 498) | const TITLE_WARNING_NAME = 'DialogTitleWarning';
type TitleWarningProps (line 506) | type TitleWarningProps = { titleId?: string };
constant DESCRIPTION_WARNING_NAME (line 527) | const DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning';
type DescriptionWarningProps (line 529) | type DescriptionWarningProps = {
FILE: packages/react/direction/src/direction.tsx
type Direction (line 3) | type Direction = 'ltr' | 'rtl';
type DirectionProviderProps (line 10) | interface DirectionProviderProps {
function useDirection (line 21) | function useDirection(localDir?: Direction) {
FILE: packages/react/dismissable-layer/src/dismissable-layer.tsx
constant DISMISSABLE_LAYER_NAME (line 12) | const DISMISSABLE_LAYER_NAME = 'DismissableLayer';
constant CONTEXT_UPDATE (line 13) | const CONTEXT_UPDATE = 'dismissableLayer.update';
constant POINTER_DOWN_OUTSIDE (line 14) | const POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
constant FOCUS_OUTSIDE (line 15) | const FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
type DismissableLayerElement (line 25) | type DismissableLayerElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 26) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type DismissableLayerProps (line 27) | interface DismissableLayerProps extends PrimitiveDivProps {
constant BRANCH_NAME (line 183) | const BRANCH_NAME = 'DismissableLayerBranch';
type DismissableLayerBranchElement (line 185) | type DismissableLayerBranchElement = React.ComponentRef<typeof Primitive...
type DismissableLayerBranchProps (line 186) | interface DismissableLayerBranchProps extends PrimitiveDivProps {}
type PointerDownOutsideEvent (line 213) | type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent...
type FocusOutsideEvent (line 214) | type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;
function usePointerDownOutside (line 221) | function usePointerDownOutside(
function useFocusOutside (line 302) | function useFocusOutside(
function dispatchUpdate (line 328) | function dispatchUpdate() {
function handleAndDispatchCustomEvent (line 333) | function handleAndDispatchCustomEvent<E extends CustomEvent, OriginalEve...
FILE: packages/react/dropdown-menu/src/dropdown-menu.tsx
type Direction (line 13) | type Direction = 'ltr' | 'rtl';
constant DROPDOWN_MENU_NAME (line 19) | const DROPDOWN_MENU_NAME = 'DropdownMenu';
type ScopedProps (line 21) | type ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
type DropdownMenuContextValue (line 28) | type DropdownMenuContextValue = {
type DropdownMenuProps (line 41) | interface DropdownMenuProps {
constant TRIGGER_NAME (line 93) | const TRIGGER_NAME = 'DropdownMenuTrigger';
type DropdownMenuTriggerElement (line 95) | type DropdownMenuTriggerElement = React.ComponentRef<typeof Primitive.bu...
type PrimitiveButtonProps (line 96) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type DropdownMenuTriggerProps (line 97) | interface DropdownMenuTriggerProps extends PrimitiveButtonProps {}
constant PORTAL_NAME (line 147) | const PORTAL_NAME = 'DropdownMenuPortal';
type MenuPortalProps (line 149) | type MenuPortalProps = React.ComponentPropsWithoutRef<typeof MenuPrimiti...
type DropdownMenuPortalProps (line 150) | interface DropdownMenuPortalProps extends MenuPortalProps {}
constant CONTENT_NAME (line 166) | const CONTENT_NAME = 'DropdownMenuContent';
type DropdownMenuContentElement (line 168) | type DropdownMenuContentElement = React.ComponentRef<typeof MenuPrimitiv...
type MenuContentProps (line 169) | type MenuContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimit...
type DropdownMenuContentProps (line 170) | interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEnt...
constant GROUP_NAME (line 222) | const GROUP_NAME = 'DropdownMenuGroup';
type DropdownMenuGroupElement (line 224) | type DropdownMenuGroupElement = React.ComponentRef<typeof MenuPrimitive....
type MenuGroupProps (line 225) | type MenuGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type DropdownMenuGroupProps (line 226) | interface DropdownMenuGroupProps extends MenuGroupProps {}
constant LABEL_NAME (line 242) | const LABEL_NAME = 'DropdownMenuLabel';
type DropdownMenuLabelElement (line 244) | type DropdownMenuLabelElement = React.ComponentRef<typeof MenuPrimitive....
type MenuLabelProps (line 245) | type MenuLabelProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type DropdownMenuLabelProps (line 246) | interface DropdownMenuLabelProps extends MenuLabelProps {}
constant ITEM_NAME (line 262) | const ITEM_NAME = 'DropdownMenuItem';
type DropdownMenuItemElement (line 264) | type DropdownMenuItemElement = React.ComponentRef<typeof MenuPrimitive.I...
type MenuItemProps (line 265) | type MenuItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive...
type DropdownMenuItemProps (line 266) | interface DropdownMenuItemProps extends MenuItemProps {}
constant CHECKBOX_ITEM_NAME (line 282) | const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
type DropdownMenuCheckboxItemElement (line 284) | type DropdownMenuCheckboxItemElement = React.ComponentRef<typeof MenuPri...
type MenuCheckboxItemProps (line 285) | type MenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenuP...
type DropdownMenuCheckboxItemProps (line 286) | interface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {}
constant RADIO_GROUP_NAME (line 303) | const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
type DropdownMenuRadioGroupElement (line 305) | type DropdownMenuRadioGroupElement = React.ComponentRef<typeof MenuPrimi...
type MenuRadioGroupProps (line 306) | type MenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type DropdownMenuRadioGroupProps (line 307) | interface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {}
constant RADIO_ITEM_NAME (line 324) | const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
type DropdownMenuRadioItemElement (line 326) | type DropdownMenuRadioItemElement = React.ComponentRef<typeof MenuPrimit...
type MenuRadioItemProps (line 327) | type MenuRadioItemProps = React.ComponentPropsWithoutRef<typeof MenuPrim...
type DropdownMenuRadioItemProps (line 328) | interface DropdownMenuRadioItemProps extends MenuRadioItemProps {}
constant INDICATOR_NAME (line 345) | const INDICATOR_NAME = 'DropdownMenuItemIndicator';
type DropdownMenuItemIndicatorElement (line 347) | type DropdownMenuItemIndicatorElement = React.ComponentRef<typeof MenuPr...
type MenuItemIndicatorProps (line 348) | type MenuItemIndicatorProps = React.ComponentPropsWithoutRef<typeof Menu...
type DropdownMenuItemIndicatorProps (line 349) | interface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {}
constant SEPARATOR_NAME (line 366) | const SEPARATOR_NAME = 'DropdownMenuSeparator';
type DropdownMenuSeparatorElement (line 368) | type DropdownMenuSeparatorElement = React.ComponentRef<typeof MenuPrimit...
type MenuSeparatorProps (line 369) | type MenuSeparatorProps = React.ComponentPropsWithoutRef<typeof MenuPrim...
type DropdownMenuSeparatorProps (line 370) | interface DropdownMenuSeparatorProps extends MenuSeparatorProps {}
constant ARROW_NAME (line 387) | const ARROW_NAME = 'DropdownMenuArrow';
type DropdownMenuArrowElement (line 389) | type DropdownMenuArrowElement = React.ComponentRef<typeof MenuPrimitive....
type MenuArrowProps (line 390) | type MenuArrowProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type DropdownMenuArrowProps (line 391) | interface DropdownMenuArrowProps extends MenuArrowProps {}
type DropdownMenuSubProps (line 407) | interface DropdownMenuSubProps {
constant SUB_TRIGGER_NAME (line 437) | const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
type DropdownMenuSubTriggerElement (line 439) | type DropdownMenuSubTriggerElement = React.ComponentRef<typeof MenuPrimi...
type MenuSubTriggerProps (line 440) | type MenuSubTriggerProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type DropdownMenuSubTriggerProps (line 441) | interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {}
constant SUB_CONTENT_NAME (line 458) | const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
type DropdownMenuSubContentElement (line 460) | type DropdownMenuSubContentElement = React.ComponentRef<typeof MenuPrimi...
type MenuSubContentProps (line 461) | type MenuSubContentProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type DropdownMenuSubContentProps (line 462) | interface DropdownMenuSubContentProps extends MenuSubContentProps {}
FILE: packages/react/focus-guards/src/focus-guards.tsx
type FocusGuardsProps (line 6) | interface FocusGuardsProps {
function FocusGuards (line 10) | function FocusGuards(props: FocusGuardsProps) {
function useFocusGuards (line 19) | function useFocusGuards() {
function createFocusGuard (line 35) | function createFocusGuard() {
FILE: packages/react/focus-scope/src/focus-scope.test.tsx
constant INNER_NAME_INPUT_LABEL (line 8) | const INNER_NAME_INPUT_LABEL = 'Name';
constant INNER_EMAIL_INPUT_LABEL (line 9) | const INNER_EMAIL_INPUT_LABEL = 'Email';
constant INNER_SUBMIT_LABEL (line 10) | const INNER_SUBMIT_LABEL = 'Submit';
function TestField (line 123) | function TestField({ label, ...props }: { label: string } & React.Compon...
FILE: packages/react/focus-scope/src/focus-scope.tsx
constant AUTOFOCUS_ON_MOUNT (line 6) | const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';
constant AUTOFOCUS_ON_UNMOUNT (line 7) | const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';
constant EVENT_OPTIONS (line 8) | const EVENT_OPTIONS = { bubbles: false, cancelable: true };
type FocusableTarget (line 10) | type FocusableTarget = HTMLElement | { focus(): void };
constant FOCUS_SCOPE_NAME (line 16) | const FOCUS_SCOPE_NAME = 'FocusScope';
type FocusScopeElement (line 18) | type FocusScopeElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 19) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type FocusScopeProps (line 20) | interface FocusScopeProps extends PrimitiveDivProps {
method pause (line 64) | pause() {
method resume (line 67) | resume() {
function handleFocusIn (line 75) | function handleFocusIn(event: FocusEvent) {
function handleFocusOut (line 85) | function handleFocusOut(event: FocusEvent) {
function handleMutations (line 111) | function handleMutations(mutations: MutationRecord[]) {
function focusFirst (line 218) | function focusFirst(candidates: HTMLElement[], { select = false } = {}) {
function getTabbableEdges (line 229) | function getTabbableEdges(container: HTMLElement) {
function getTabbableCandidates (line 246) | function getTabbableCandidates(container: HTMLElement) {
function findVisible (line 268) | function findVisible(elements: HTMLElement[], container: HTMLElement) {
function isHidden (line 275) | function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {
function isSelectableInput (line 286) | function isSelectableInput(element: any): element is FocusableTarget & {...
function focus (line 290) | function focus(element?: FocusableTarget | null, { select = false } = {}) {
type FocusScopeAPI (line 306) | type FocusScopeAPI = { paused: boolean; pause(): void; resume(): void };
function createFocusScopesStack (line 309) | function createFocusScopesStack() {
function arrayRemove (line 332) | function arrayRemove<T>(array: T[], item: T) {
function removeLinks (line 341) | function removeLinks(items: HTMLElement[]) {
FILE: packages/react/form/src/form.tsx
type ScopedProps (line 11) | type ScopedProps<P> = P & { __scopeForm?: Scope };
constant FORM_NAME (line 18) | const FORM_NAME = 'Form';
type ValidityMap (line 20) | type ValidityMap = { [fieldName: string]: ValidityState | undefined };
type CustomMatcherEntriesMap (line 21) | type CustomMatcherEntriesMap = { [fieldName: string]: CustomMatcherEntry...
type CustomErrorsMap (line 22) | type CustomErrorsMap = { [fieldName: string]: Record<string, boolean> };
type ValidationContextValue (line 24) | type ValidationContextValue = {
type MessageIdsMap (line 40) | type MessageIdsMap = { [fieldName: string]: Set<string> };
type AriaDescriptionContextValue (line 42) | type AriaDescriptionContextValue = {
type FormElement (line 50) | type FormElement = React.ComponentRef<typeof Primitive.form>;
type PrimitiveFormProps (line 51) | type PrimitiveFormProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type FormProps (line 52) | interface FormProps extends PrimitiveFormProps {
constant FIELD_NAME (line 193) | const FIELD_NAME = 'FormField';
type FormFieldContextValue (line 195) | type FormFieldContextValue = {
type FormFieldElement (line 203) | type FormFieldElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 204) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type FormFieldProps (line 205) | interface FormFieldProps extends PrimitiveDivProps {
constant LABEL_NAME (line 236) | const LABEL_NAME = 'FormLabel';
type FormLabelElement (line 238) | type FormLabelElement = React.ComponentRef<typeof LabelPrimitive>;
type LabelProps (line 239) | type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive>;
type FormLabelProps (line 240) | interface FormLabelProps extends LabelProps {}
constant CONTROL_NAME (line 268) | const CONTROL_NAME = 'FormControl';
type FormControlElement (line 270) | type FormControlElement = React.ComponentRef<typeof Primitive.input>;
type PrimitiveInputProps (line 271) | type PrimitiveInputProps = React.ComponentPropsWithoutRef<typeof Primiti...
type FormControlProps (line 272) | interface FormControlProps extends PrimitiveInputProps {}
type ValidityMatcher (line 437) | type ValidityMatcher = (typeof _validityMatchers)[number];
constant DEFAULT_INVALID_MESSAGE (line 439) | const DEFAULT_INVALID_MESSAGE = 'This value is not valid';
constant DEFAULT_BUILT_IN_MESSAGES (line 440) | const DEFAULT_BUILT_IN_MESSAGES: Record<ValidityMatcher, string | undefi...
constant MESSAGE_NAME (line 453) | const MESSAGE_NAME = 'FormMessage';
type FormMessageElement (line 455) | type FormMessageElement = FormMessageImplElement;
type FormMessageProps (line 456) | interface FormMessageProps extends Omit<FormMessageImplProps, 'name'> {
type FormBuiltInMessageElement (line 484) | type FormBuiltInMessageElement = FormMessageImplElement;
type FormBuiltInMessageProps (line 485) | interface FormBuiltInMessageProps extends FormMessageImplProps {
type FormCustomMessageElement (line 510) | type FormCustomMessageElement = React.ComponentRef<typeof FormMessageImpl>;
type FormCustomMessageProps (line 511) | interface FormCustomMessageProps extends React.ComponentPropsWithoutRef<...
type FormMessageImplElement (line 551) | type FormMessageImplElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 552) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type FormMessageImplProps (line 553) | interface FormMessageImplProps extends PrimitiveSpanProps {
constant VALIDITY_STATE_NAME (line 578) | const VALIDITY_STATE_NAME = 'FormValidityState';
type FormValidityStateProps (line 580) | interface FormValidityStateProps {
constant SUBMIT_NAME (line 600) | const SUBMIT_NAME = 'FormSubmit';
type FormSubmitElement (line 602) | type FormSubmitElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 603) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type FormSubmitProps (line 604) | interface FormSubmitProps extends PrimitiveButtonProps {}
type ValidityStateKey (line 617) | type ValidityStateKey = keyof ValidityState;
type SyncCustomMatcher (line 618) | type SyncCustomMatcher = (value: string, formData: FormData) => boolean;
type AsyncCustomMatcher (line 619) | type AsyncCustomMatcher = (value: string, formData: FormData) => Promise...
type CustomMatcher (line 620) | type CustomMatcher = SyncCustomMatcher | AsyncCustomMatcher;
type CustomMatcherEntry (line 621) | type CustomMatcherEntry = { id: string; match: CustomMatcher };
type SyncCustomMatcherEntry (line 622) | type SyncCustomMatcherEntry = { id: string; match: SyncCustomMatcher };
type AsyncCustomMatcherEntry (line 623) | type AsyncCustomMatcherEntry = { id: string; match: AsyncCustomMatcher };
type CustomMatcherArgs (line 624) | type CustomMatcherArgs = [string, FormData];
function validityStateToObject (line 626) | function validityStateToObject(validity: ValidityState) {
function isHTMLElement (line 634) | function isHTMLElement(element: any): element is HTMLElement {
function isFormControl (line 638) | function isFormControl(element: any): element is { validity: ValiditySta...
function isInvalid (line 642) | function isInvalid(control: HTMLElement) {
function getFirstInvalidControl (line 649) | function getFirstInvalidControl(form: HTMLFormElement): HTMLElement | un...
function isAsyncCustomMatcherEntry (line 655) | function isAsyncCustomMatcherEntry(
function isSyncCustomMatcherEntry (line 662) | function isSyncCustomMatcherEntry(entry: CustomMatcherEntry): entry is S...
function returnsPromise (line 666) | function returnsPromise(func: Function, args: Array<unknown>) {
function hasBuiltInError (line 670) | function hasBuiltInError(validity: ValidityState) {
function getValidAttribute (line 682) | function getValidAttribute(validity: ValidityState | undefined, serverIn...
function getInvalidAttribute (line 686) | function getInvalidAttribute(validity: ValidityState | undefined, server...
FILE: packages/react/hover-card/src/hover-card.tsx
constant HOVERCARD_NAME (line 21) | const HOVERCARD_NAME = 'HoverCard';
type ScopedProps (line 23) | type ScopedProps<P> = P & { __scopeHoverCard?: Scope };
type HoverCardContextValue (line 29) | type HoverCardContextValue = {
type HoverCardProps (line 42) | interface HoverCardProps {
constant TRIGGER_NAME (line 118) | const TRIGGER_NAME = 'HoverCardTrigger';
type HoverCardTriggerElement (line 120) | type HoverCardTriggerElement = React.ComponentRef<typeof Primitive.a>;
type PrimitiveLinkProps (line 121) | type PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type HoverCardTriggerProps (line 122) | interface HoverCardTriggerProps extends PrimitiveLinkProps {}
constant PORTAL_NAME (line 153) | const PORTAL_NAME = 'HoverCardPortal';
type PortalContextValue (line 155) | type PortalContextValue = { forceMount?: true };
type PortalProps (line 160) | type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
type HoverCardPortalProps (line 161) | interface HoverCardPortalProps {
constant CONTENT_NAME (line 196) | const CONTENT_NAME = 'HoverCardContent';
type HoverCardContentElement (line 198) | type HoverCardContentElement = HoverCardContentImplElement;
type HoverCardContentProps (line 199) | interface HoverCardContentProps extends HoverCardContentImplProps {
type HoverCardContentImplElement (line 230) | type HoverCardContentImplElement = React.ComponentRef<typeof PopperPrimi...
type DismissableLayerProps (line 231) | type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof Dismi...
type PopperContentProps (line 232) | type PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPr...
type HoverCardContentImplProps (line 233) | interface HoverCardContentImplProps extends Omit<PopperContentProps, 'on...
constant ARROW_NAME (line 367) | const ARROW_NAME = 'HoverCardArrow';
type HoverCardArrowElement (line 369) | type HoverCardArrowElement = React.ComponentRef<typeof PopperPrimitive.A...
type PopperArrowProps (line 370) | type PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrim...
type HoverCardArrowProps (line 371) | interface HoverCardArrowProps extends PopperArrowProps {}
function excludeTouch (line 385) | function excludeTouch<E>(eventHandler: () => void) {
function getTabbableNodes (line 394) | function getTabbableNodes(container: HTMLElement) {
FILE: packages/react/id/src/id.tsx
function useId (line 8) | function useId(deterministicId?: string): string {
FILE: packages/react/label/src/label.tsx
constant NAME (line 8) | const NAME = 'Label';
type LabelElement (line 10) | type LabelElement = React.ComponentRef<typeof Primitive.label>;
type PrimitiveLabelProps (line 11) | type PrimitiveLabelProps = React.ComponentPropsWithoutRef<typeof Primiti...
type LabelProps (line 12) | interface LabelProps extends PrimitiveLabelProps {}
FILE: packages/react/menu/src/menu.tsx
type Direction (line 25) | type Direction = 'ltr' | 'rtl';
constant SELECTION_KEYS (line 27) | const SELECTION_KEYS = ['Enter', ' '];
constant FIRST_KEYS (line 28) | const FIRST_KEYS = ['ArrowDown', 'PageUp', 'Home'];
constant LAST_KEYS (line 29) | const LAST_KEYS = ['ArrowUp', 'PageDown', 'End'];
constant FIRST_LAST_KEYS (line 30) | const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
constant SUB_OPEN_KEYS (line 31) | const SUB_OPEN_KEYS: Record<Direction, string[]> = {
constant SUB_CLOSE_KEYS (line 35) | const SUB_CLOSE_KEYS: Record<Direction, string[]> = {
constant MENU_NAME (line 44) | const MENU_NAME = 'Menu';
type ItemData (line 46) | type ItemData = { disabled: boolean; textValue: string };
type ScopedProps (line 52) | type ScopedProps<P> = P & { __scopeMenu?: Scope };
type MenuContextValue (line 61) | type MenuContextValue = {
type MenuRootContextValue (line 70) | type MenuRootContextValue = {
type MenuProps (line 79) | interface MenuProps {
constant ANCHOR_NAME (line 141) | const ANCHOR_NAME = 'MenuAnchor';
type MenuAnchorElement (line 143) | type MenuAnchorElement = React.ComponentRef<typeof PopperPrimitive.Anchor>;
type PopperAnchorProps (line 144) | type PopperAnchorProps = React.ComponentPropsWithoutRef<typeof PopperPri...
type MenuAnchorProps (line 145) | interface MenuAnchorProps extends PopperAnchorProps {}
constant PORTAL_NAME (line 161) | const PORTAL_NAME = 'MenuPortal';
type PortalContextValue (line 163) | type PortalContextValue = { forceMount?: true };
type PortalProps (line 168) | type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
type MenuPortalProps (line 169) | interface MenuPortalProps {
constant CONTENT_NAME (line 202) | const CONTENT_NAME = 'MenuContent';
type MenuContentContextValue (line 204) | type MenuContentContextValue = {
type MenuContentElement (line 215) | type MenuContentElement = MenuRootContentTypeElement;
type MenuContentProps (line 221) | interface MenuContentProps extends MenuRootContentTypeProps {
type MenuRootContentTypeElement (line 254) | type MenuRootContentTypeElement = MenuContentImplElement;
type MenuRootContentTypeProps (line 255) | interface MenuRootContentTypeProps
type MenuContentImplElement (line 313) | type MenuContentImplElement = React.ComponentRef<typeof PopperPrimitive....
type FocusScopeProps (line 314) | type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
type DismissableLayerProps (line 315) | type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof Dismi...
type RovingFocusGroupProps (line 316) | type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof Rovin...
type PopperContentProps (line 317) | type PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPr...
type MenuContentImplPrivateProps (line 318) | type MenuContentImplPrivateProps = {
type MenuContentImplProps (line 335) | interface MenuContentImplProps
constant GROUP_NAME (line 569) | const GROUP_NAME = 'MenuGroup';
type MenuGroupElement (line 571) | type MenuGroupElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 572) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type MenuGroupProps (line 573) | interface MenuGroupProps extends PrimitiveDivProps {}
constant LABEL_NAME (line 588) | const LABEL_NAME = 'MenuLabel';
type MenuLabelElement (line 590) | type MenuLabelElement = React.ComponentRef<typeof Primitive.div>;
type MenuLabelProps (line 591) | interface MenuLabelProps extends PrimitiveDivProps {}
constant ITEM_NAME (line 606) | const ITEM_NAME = 'MenuItem';
constant ITEM_SELECT (line 607) | const ITEM_SELECT = 'menu.itemSelect';
type MenuItemElement (line 609) | type MenuItemElement = MenuItemImplElement;
type MenuItemProps (line 610) | interface MenuItemProps extends Omit<MenuItemImplProps, 'onSelect'> {
type MenuItemImplElement (line 676) | type MenuItemImplElement = React.ComponentRef<typeof Primitive.div>;
type MenuItemImplProps (line 677) | interface MenuItemImplProps extends PrimitiveDivProps {
constant CHECKBOX_ITEM_NAME (line 756) | const CHECKBOX_ITEM_NAME = 'MenuCheckboxItem';
type MenuCheckboxItemElement (line 758) | type MenuCheckboxItemElement = MenuItemElement;
type CheckedState (line 760) | type CheckedState = boolean | 'indeterminate';
type MenuCheckboxItemProps (line 762) | interface MenuCheckboxItemProps extends MenuItemProps {
constant RADIO_GROUP_NAME (line 796) | const RADIO_GROUP_NAME = 'MenuRadioGroup';
type MenuRadioGroupElement (line 803) | type MenuRadioGroupElement = React.ComponentRef<typeof MenuGroup>;
type MenuRadioGroupProps (line 804) | interface MenuRadioGroupProps extends MenuGroupProps {
constant RADIO_ITEM_NAME (line 827) | const RADIO_ITEM_NAME = 'MenuRadioItem';
type MenuRadioItemElement (line 829) | type MenuRadioItemElement = React.ComponentRef<typeof MenuItem>;
type MenuRadioItemProps (line 830) | interface MenuRadioItemProps extends MenuItemProps {
constant ITEM_INDICATOR_NAME (line 864) | const ITEM_INDICATOR_NAME = 'MenuItemIndicator';
type CheckboxContextValue (line 866) | type CheckboxContextValue = { checked: CheckedState };
type MenuItemIndicatorElement (line 873) | type MenuItemIndicatorElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 874) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type MenuItemIndicatorProps (line 875) | interface MenuItemIndicatorProps extends PrimitiveSpanProps {
constant SEPARATOR_NAME (line 911) | const SEPARATOR_NAME = 'MenuSeparator';
type MenuSeparatorElement (line 913) | type MenuSeparatorElement = React.ComponentRef<typeof Primitive.div>;
type MenuSeparatorProps (line 914) | interface MenuSeparatorProps extends PrimitiveDivProps {}
constant ARROW_NAME (line 936) | const ARROW_NAME = 'MenuArrow';
type MenuArrowElement (line 938) | type MenuArrowElement = React.ComponentRef<typeof PopperPrimitive.Arrow>;
type PopperArrowProps (line 939) | type PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrim...
type MenuArrowProps (line 940) | interface MenuArrowProps extends PopperArrowProps {}
constant SUB_NAME (line 956) | const SUB_NAME = 'MenuSub';
type MenuSubContextValue (line 958) | type MenuSubContextValue = {
type MenuSubProps (line 967) | interface MenuSubProps {
constant SUB_TRIGGER_NAME (line 1016) | const SUB_TRIGGER_NAME = 'MenuSubTrigger';
type MenuSubTriggerElement (line 1018) | type MenuSubTriggerElement = MenuItemImplElement;
type MenuSubTriggerProps (line 1019) | interface MenuSubTriggerProps extends MenuItemImplProps {}
constant SUB_CONTENT_NAME (line 1148) | const SUB_CONTENT_NAME = 'MenuSubContent';
type MenuSubContentElement (line 1150) | type MenuSubContentElement = MenuContentImplElement;
type MenuSubContentProps (line 1151) | interface MenuSubContentProps
function getOpenState (line 1228) | function getOpenState(open: boolean) {
function isIndeterminate (line 1232) | function isIndeterminate(checked?: CheckedState): checked is 'indetermin...
function getCheckedState (line 1236) | function getCheckedState(checked: CheckedState) {
function focusFirst (line 1240) | function focusFirst(candidates: HTMLElement[]) {
function wrapArray (line 1254) | function wrapArray<T>(array: T[], startIndex: number) {
function getNextMatch (line 1275) | function getNextMatch(values: string[], search: string, currentMatch?: s...
type Point (line 1288) | type Point = { x: number; y: number };
type Polygon (line 1289) | type Polygon = Point[];
type Side (line 1290) | type Side = 'left' | 'right';
type GraceIntent (line 1291) | type GraceIntent = { area: Polygon; side: Side };
function isPointInPolygon (line 1295) | function isPointInPolygon(point: Point, polygon: Polygon) {
function isPointerInGraceArea (line 1314) | function isPointerInGraceArea(event: React.PointerEvent, area?: Polygon) {
function whenMouse (line 1320) | function whenMouse<E>(handler: React.PointerEventHandler<E>): React.Poin...
FILE: packages/react/menubar/src/menubar.tsx
type Direction (line 17) | type Direction = 'ltr' | 'rtl';
constant MENUBAR_NAME (line 23) | const MENUBAR_NAME = 'Menubar';
type ItemData (line 25) | type ItemData = { value: string; disabled: boolean };
type ScopedProps (line 31) | type ScopedProps<P> = P & { __scopeMenubar?: Scope };
type MenubarContextValue (line 40) | type MenubarContextValue = {
type MenubarElement (line 52) | type MenubarElement = React.ComponentRef<typeof Primitive.div>;
type RovingFocusGroupProps (line 53) | type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof Rovin...
type PrimitiveDivProps (line 54) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type MenubarProps (line 55) | interface MenubarProps extends PrimitiveDivProps {
constant MENU_NAME (line 138) | const MENU_NAME = 'MenubarMenu';
type MenubarMenuContextValue (line 140) | type MenubarMenuContextValue = {
type MenubarMenuProps (line 151) | interface MenubarMenuProps {
constant TRIGGER_NAME (line 203) | const TRIGGER_NAME = 'MenubarTrigger';
type MenubarTriggerElement (line 205) | type MenubarTriggerElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 206) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type MenubarTriggerProps (line 207) | interface MenubarTriggerProps extends PrimitiveButtonProps {}
constant PORTAL_NAME (line 287) | const PORTAL_NAME = 'MenubarPortal';
type MenuPortalProps (line 289) | type MenuPortalProps = React.ComponentPropsWithoutRef<typeof MenuPrimiti...
type MenubarPortalProps (line 290) | interface MenubarPortalProps extends MenuPortalProps {}
constant CONTENT_NAME (line 304) | const CONTENT_NAME = 'MenubarContent';
type MenubarContentElement (line 306) | type MenubarContentElement = React.ComponentRef<typeof MenuPrimitive.Con...
type MenuContentProps (line 307) | type MenuContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimit...
type MenubarContentProps (line 308) | interface MenubarContentProps extends Omit<MenuContentProps, 'onEntryFoc...
constant GROUP_NAME (line 405) | const GROUP_NAME = 'MenubarGroup';
type MenubarGroupElement (line 407) | type MenubarGroupElement = React.ComponentRef<typeof MenuPrimitive.Group>;
type MenuGroupProps (line 408) | type MenuGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type MenubarGroupProps (line 409) | interface MenubarGroupProps extends MenuGroupProps {}
constant LABEL_NAME (line 425) | const LABEL_NAME = 'MenubarLabel';
type MenubarLabelElement (line 427) | type MenubarLabelElement = React.ComponentRef<typeof MenuPrimitive.Label>;
type MenuLabelProps (line 428) | type MenuLabelProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type MenubarLabelProps (line 429) | interface MenubarLabelProps extends MenuLabelProps {}
constant ITEM_NAME (line 445) | const ITEM_NAME = 'MenubarItem';
type MenubarItemElement (line 447) | type MenubarItemElement = React.ComponentRef<typeof MenuPrimitive.Item>;
type MenuItemProps (line 448) | type MenuItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive...
type MenubarItemProps (line 449) | interface MenubarItemProps extends MenuItemProps {}
constant CHECKBOX_ITEM_NAME (line 465) | const CHECKBOX_ITEM_NAME = 'MenubarCheckboxItem';
type MenubarCheckboxItemElement (line 467) | type MenubarCheckboxItemElement = React.ComponentRef<typeof MenuPrimitiv...
type MenuCheckboxItemProps (line 468) | type MenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenuP...
type MenubarCheckboxItemProps (line 469) | interface MenubarCheckboxItemProps extends MenuCheckboxItemProps {}
constant RADIO_GROUP_NAME (line 485) | const RADIO_GROUP_NAME = 'MenubarRadioGroup';
type MenubarRadioGroupElement (line 487) | type MenubarRadioGroupElement = React.ComponentRef<typeof MenuPrimitive....
type MenuRadioGroupProps (line 488) | type MenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type MenubarRadioGroupProps (line 489) | interface MenubarRadioGroupProps extends MenuRadioGroupProps {}
constant RADIO_ITEM_NAME (line 505) | const RADIO_ITEM_NAME = 'MenubarRadioItem';
type MenubarRadioItemElement (line 507) | type MenubarRadioItemElement = React.ComponentRef<typeof MenuPrimitive.R...
type MenuRadioItemProps (line 508) | type MenuRadioItemProps = React.ComponentPropsWithoutRef<typeof MenuPrim...
type MenubarRadioItemProps (line 509) | interface MenubarRadioItemProps extends MenuRadioItemProps {}
constant INDICATOR_NAME (line 525) | const INDICATOR_NAME = 'MenubarItemIndicator';
type MenubarItemIndicatorElement (line 527) | type MenubarItemIndicatorElement = React.ComponentRef<typeof MenuPrimiti...
type MenuItemIndicatorProps (line 528) | type MenuItemIndicatorProps = React.ComponentPropsWithoutRef<typeof Menu...
type MenubarItemIndicatorProps (line 529) | interface MenubarItemIndicatorProps extends MenuItemIndicatorProps {}
constant SEPARATOR_NAME (line 546) | const SEPARATOR_NAME = 'MenubarSeparator';
type MenubarSeparatorElement (line 548) | type MenubarSeparatorElement = React.ComponentRef<typeof MenuPrimitive.S...
type MenuSeparatorProps (line 549) | type MenuSeparatorProps = React.ComponentPropsWithoutRef<typeof MenuPrim...
type MenubarSeparatorProps (line 550) | interface MenubarSeparatorProps extends MenuSeparatorProps {}
constant ARROW_NAME (line 566) | const ARROW_NAME = 'MenubarArrow';
type MenubarArrowElement (line 568) | type MenubarArrowElement = React.ComponentRef<typeof MenuPrimitive.Arrow>;
type MenuArrowProps (line 569) | type MenuArrowProps = React.ComponentPropsWithoutRef<typeof MenuPrimitiv...
type MenubarArrowProps (line 570) | interface MenubarArrowProps extends MenuArrowProps {}
constant SUB_NAME (line 586) | const SUB_NAME = 'MenubarSub';
type MenubarSubProps (line 588) | interface MenubarSubProps {
constant SUB_TRIGGER_NAME (line 618) | const SUB_TRIGGER_NAME = 'MenubarSubTrigger';
type MenubarSubTriggerElement (line 620) | type MenubarSubTriggerElement = React.ComponentRef<typeof MenuPrimitive....
type MenuSubTriggerProps (line 621) | type MenuSubTriggerProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type MenubarSubTriggerProps (line 622) | interface MenubarSubTriggerProps extends MenuSubTriggerProps {}
constant SUB_CONTENT_NAME (line 645) | const SUB_CONTENT_NAME = 'MenubarSubContent';
type MenubarSubContentElement (line 647) | type MenubarSubContentElement = React.ComponentRef<typeof MenuPrimitive....
type MenuSubContentProps (line 648) | type MenuSubContentProps = React.ComponentPropsWithoutRef<typeof MenuPri...
type MenubarSubContentProps (line 649) | interface MenubarSubContentProps extends MenuSubContentProps {}
function wrapArray (line 686) | function wrapArray<T>(array: T[], startIndex: number) {
FILE: packages/react/navigation-menu/src/navigation-menu.tsx
type Orientation (line 20) | type Orientation = 'vertical' | 'horizontal';
type Direction (line 21) | type Direction = 'ltr' | 'rtl';
constant NAVIGATION_MENU_NAME (line 27) | const NAVIGATION_MENU_NAME = 'NavigationMenu';
type ScopedProps (line 37) | type ScopedProps<P> = P & { __scopeNavigationMenu?: Scope };
type ContentData (line 43) | type ContentData = {
type NavigationMenuContextValue (line 47) | type NavigationMenuContextValue = {
type NavigationMenuElement (line 76) | type NavigationMenuElement = React.ComponentRef<typeof Primitive.nav>;
type PrimitiveNavProps (line 77) | type PrimitiveNavProps = React.ComponentPropsWithoutRef<typeof Primitive...
type NavigationMenuProps (line 78) | interface NavigationMenuProps
constant SUB_NAME (line 221) | const SUB_NAME = 'NavigationMenuSub';
type NavigationMenuSubElement (line 223) | type NavigationMenuSubElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 224) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type NavigationMenuSubProps (line 225) | interface NavigationMenuSubProps
type NavigationMenuProviderPrivateProps (line 274) | interface NavigationMenuProviderPrivateProps {
type NavigationMenuProviderProps (line 290) | interface NavigationMenuProviderProps extends NavigationMenuProviderPriv...
constant LIST_NAME (line 361) | const LIST_NAME = 'NavigationMenuList';
type NavigationMenuListElement (line 363) | type NavigationMenuListElement = React.ComponentRef<typeof Primitive.ul>;
type PrimitiveUnorderedListProps (line 364) | type PrimitiveUnorderedListProps = React.ComponentPropsWithoutRef<typeof...
type NavigationMenuListProps (line 365) | interface NavigationMenuListProps extends PrimitiveUnorderedListProps {}
constant ITEM_NAME (line 392) | const ITEM_NAME = 'NavigationMenuItem';
type FocusProxyElement (line 394) | type FocusProxyElement = React.ComponentRef<typeof VisuallyHiddenPrimiti...
type NavigationMenuItemContextValue (line 396) | type NavigationMenuItemContextValue = {
type NavigationMenuItemElement (line 411) | type NavigationMenuItemElement = React.ComponentRef<typeof Primitive.li>;
type PrimitiveListItemProps (line 412) | type PrimitiveListItemProps = React.ComponentPropsWithoutRef<typeof Prim...
type NavigationMenuItemProps (line 413) | interface NavigationMenuItemProps extends PrimitiveListItemProps {
constant TRIGGER_NAME (line 470) | const TRIGGER_NAME = 'NavigationMenuTrigger';
type NavigationMenuTriggerElement (line 472) | type NavigationMenuTriggerElement = React.ComponentRef<typeof Primitive....
type PrimitiveButtonProps (line 473) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type NavigationMenuTriggerProps (line 474) | interface NavigationMenuTriggerProps extends PrimitiveButtonProps {}
constant LINK_NAME (line 582) | const LINK_NAME = 'NavigationMenuLink';
constant LINK_SELECT (line 583) | const LINK_SELECT = 'navigationMenu.linkSelect';
type NavigationMenuLinkElement (line 585) | type NavigationMenuLinkElement = React.ComponentRef<typeof Primitive.a>;
type PrimitiveLinkProps (line 586) | type PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type NavigationMenuLinkProps (line 587) | interface NavigationMenuLinkProps extends Omit<PrimitiveLinkProps, 'onSe...
constant INDICATOR_NAME (line 636) | const INDICATOR_NAME = 'NavigationMenuIndicator';
type NavigationMenuIndicatorElement (line 638) | type NavigationMenuIndicatorElement = NavigationMenuIndicatorImplElement;
type NavigationMenuIndicatorProps (line 639) | interface NavigationMenuIndicatorProps extends NavigationMenuIndicatorIm...
type NavigationMenuIndicatorImplElement (line 667) | type NavigationMenuIndicatorImplElement = React.ComponentRef<typeof Prim...
type NavigationMenuIndicatorImplProps (line 668) | interface NavigationMenuIndicatorImplProps extends PrimitiveDivProps {}
constant CONTENT_NAME (line 736) | const CONTENT_NAME = 'NavigationMenuContent';
type NavigationMenuContentElement (line 738) | type NavigationMenuContentElement = NavigationMenuContentImplElement;
type NavigationMenuContentProps (line 739) | interface NavigationMenuContentProps
type ViewportContentMounterElement (line 795) | type ViewportContentMounterElement = NavigationMenuContentImplElement;
type ViewportContentMounterProps (line 796) | interface ViewportContentMounterProps extends NavigationMenuContentImplP...
constant ROOT_CONTENT_DISMISS (line 828) | const ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';
type MotionAttribute (line 830) | type MotionAttribute = 'to-start' | 'to-end' | 'from-start' | 'from-end';
type NavigationMenuContentImplElement (line 831) | type NavigationMenuContentImplElement = React.ComponentRef<typeof Dismis...
type DismissableLayerProps (line 832) | type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof Dismi...
type NavigationMenuContentImplPrivateProps (line 834) | interface NavigationMenuContentImplPrivateProps {
type NavigationMenuContentImplProps (line 842) | interface NavigationMenuContentImplProps
constant VIEWPORT_NAME (line 981) | const VIEWPORT_NAME = 'NavigationMenuViewport';
type NavigationMenuViewportElement (line 983) | type NavigationMenuViewportElement = NavigationMenuViewportImplElement;
type NavigationMenuViewportProps (line 984) | interface NavigationMenuViewportProps
type NavigationMenuViewportImplElement (line 1012) | type NavigationMenuViewportImplElement = React.ComponentRef<typeof Primi...
type NavigationMenuViewportImplProps (line 1013) | interface NavigationMenuViewportImplProps extends PrimitiveDivProps {}
constant FOCUS_GROUP_NAME (line 1083) | const FOCUS_GROUP_NAME = 'FocusGroup';
type FocusGroupElement (line 1085) | type FocusGroupElement = React.ComponentRef<typeof Primitive.div>;
type FocusGroupProps (line 1086) | interface FocusGroupProps extends PrimitiveDivProps {}
constant ARROW_KEYS (line 1105) | const ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];
constant FOCUS_GROUP_ITEM_NAME (line 1106) | const FOCUS_GROUP_ITEM_NAME = 'FocusGroupItem';
type FocusGroupItemElement (line 1108) | type FocusGroupItemElement = React.ComponentRef<typeof Primitive.button>;
type FocusGroupItemProps (line 1109) | interface FocusGroupItemProps extends PrimitiveButtonProps {}
function getTabbableCandidates (line 1159) | function getTabbableCandidates(container: HTMLElement) {
function focusFirst (line 1177) | function focusFirst(candidates: HTMLElement[]) {
function removeFromTabOrder (line 1187) | function removeFromTabOrder(candidates: HTMLElement[]) {
function useResizeObserver (line 1200) | function useResizeObserver(element: HTMLElement | null, onResize: () => ...
function getOpenState (line 1225) | function getOpenState(open: boolean) {
function makeTriggerId (line 1229) | function makeTriggerId(baseId: string, value: string) {
function makeContentId (line 1233) | function makeContentId(baseId: string, value: string) {
function whenMouse (line 1237) | function whenMouse<E>(handler: React.PointerEventHandler<E>): React.Poin...
FILE: packages/react/one-time-password-field/src/one-time-password-field.test.tsx
function getInputValues (line 84) | function getInputValues(inputs: HTMLInputElement[]) {
FILE: packages/react/one-time-password-field/src/one-time-password-field.tsx
type InputValidationType (line 17) | type InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';
constant INPUT_VALIDATION_MAP (line 19) | const INPUT_VALIDATION_MAP = {
type RovingFocusGroupProps (line 45) | type RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;
type OneTimePasswordFieldContextValue (line 47) | interface OneTimePasswordFieldContextValue {
constant ONE_TIME_PASSWORD_FIELD_NAME (line 67) | const ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';
type OneTimePasswordFieldOwnProps (line 83) | interface OneTimePasswordFieldOwnProps {
type ScopedProps (line 190) | type ScopedProps<P> = P & { __scopeOneTimePasswordField?: Scope };
type OneTimePasswordFieldProps (line 192) | interface OneTimePasswordFieldProps
type OneTimePasswordFieldHiddenInputProps (line 489) | interface OneTimePasswordFieldHiddenInputProps
type OneTimePasswordFieldInputProps (line 536) | interface OneTimePasswordFieldInputProps
function isFormElement (line 908) | function isFormElement(element: Element | null | undefined): element is ...
function removeWhitespace (line 912) | function removeWhitespace(value: string) {
function focusInput (line 916) | function focusInput(element: HTMLInputElement | null | undefined) {
function isInputEvent (line 929) | function isInputEvent(event: Event): event is InputEvent {
type InputType (line 933) | type InputType = 'password' | 'text';
type AutoComplete (line 934) | type AutoComplete = 'off' | 'one-time-code';
type KeyboardActionDetails (line 935) | type KeyboardActionDetails =
type UpdateAction (line 945) | type UpdateAction =
type Dispatcher (line 955) | type Dispatcher = React.Dispatch<UpdateAction>;
type InputValidation (line 956) | type InputValidation = Record<
FILE: packages/react/password-toggle-field/src/password-toggle-field.test.tsx
function EyeClosedIcon (line 183) | function EyeClosedIcon(props: React.SVGProps<SVGSVGElement>) {
function EyeOpenIcon (line 202) | function EyeOpenIcon(props: React.SVGProps<SVGSVGElement>) {
FILE: packages/react/password-toggle-field/src/password-toggle-field.tsx
constant PASSWORD_TOGGLE_FIELD_NAME (line 13) | const PASSWORD_TOGGLE_FIELD_NAME = 'PasswordToggleField';
type InternalFocusState (line 19) | type InternalFocusState = {
type PasswordToggleFieldContextValue (line 25) | interface PasswordToggleFieldContextValue {
type ScopedProps (line 42) | type ScopedProps<P> = P & { __scopePasswordToggleField?: Scope };
type PasswordToggleFieldProps (line 44) | interface PasswordToggleFieldProps {
constant INITIAL_FOCUS_STATE (line 52) | const INITIAL_FOCUS_STATE: InternalFocusState = {
constant PASSWORD_TOGGLE_FIELD_INPUT_NAME (line 103) | const PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'I...
type PrimitiveInputProps (line 105) | type PrimitiveInputProps = React.ComponentPropsWithoutRef<'input'>;
type PasswordToggleFieldOwnProps (line 107) | interface PasswordToggleFieldOwnProps {
type PasswordToggleFieldInputProps (line 111) | interface PasswordToggleFieldInputProps
constant PASSWORD_TOGGLE_FIELD_TOGGLE_NAME (line 201) | const PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + '...
type PrimitiveButtonProps (line 203) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<'button'>;
type PasswordToggleFieldToggleProps (line 205) | interface PasswordToggleFieldToggleProps extends Omit<PrimitiveButtonPro...
function checkForInnerTextLabel (line 246) | function checkForInnerTextLabel(textContent: string | undefined | null) {
constant PASSWORD_TOGGLE_FIELD_SLOT_NAME (line 369) | const PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Sl...
type PasswordToggleFieldSlotDeclarativeProps (line 371) | interface PasswordToggleFieldSlotDeclarativeProps {
type PasswordToggleFieldSlotRenderProps (line 376) | interface PasswordToggleFieldSlotRenderProps {
type PasswordToggleFieldSlotProps (line 380) | type PasswordToggleFieldSlotProps =
constant PASSWORD_TOGGLE_FIELD_ICON_NAME (line 406) | const PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Ic...
type PrimitiveSvgProps (line 408) | type PrimitiveSvgProps = React.ComponentPropsWithoutRef<'svg'>;
type PasswordToggleFieldIconProps (line 410) | interface PasswordToggleFieldIconProps extends Omit<PrimitiveSvgProps, '...
function requestIdleCallback (line 460) | function requestIdleCallback(
FILE: packages/react/popover/src/popover.tsx
constant POPOVER_NAME (line 25) | const POPOVER_NAME = 'Popover';
type ScopedProps (line 27) | type ScopedProps<P> = P & { __scopePopover?: Scope };
type PopoverContextValue (line 33) | type PopoverContextValue = {
type PopoverProps (line 48) | interface PopoverProps {
constant ANCHOR_NAME (line 101) | const ANCHOR_NAME = 'PopoverAnchor';
type PopoverAnchorElement (line 103) | type PopoverAnchorElement = React.ComponentRef<typeof PopperPrimitive.An...
type PopperAnchorProps (line 104) | type PopperAnchorProps = React.ComponentPropsWithoutRef<typeof PopperPri...
type PopoverAnchorProps (line 105) | interface PopoverAnchorProps extends PopperAnchorProps {}
constant TRIGGER_NAME (line 129) | const TRIGGER_NAME = 'PopoverTrigger';
type PopoverTriggerElement (line 131) | type PopoverTriggerElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 132) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type PopoverTriggerProps (line 133) | interface PopoverTriggerProps extends PrimitiveButtonProps {}
constant PORTAL_NAME (line 171) | const PORTAL_NAME = 'PopoverPortal';
type PortalContextValue (line 173) | type PortalContextValue = { forceMount?: true };
type PortalProps (line 178) | type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
type PopoverPortalProps (line 179) | interface PopoverPortalProps {
constant CONTENT_NAME (line 212) | const CONTENT_NAME = 'PopoverContent';
type PopoverContentProps (line 214) | interface PopoverContentProps extends PopoverContentTypeProps {
type PopoverContentTypeElement (line 245) | type PopoverContentTypeElement = PopoverContentImplElement;
type PopoverContentTypeProps (line 246) | interface PopoverContentTypeProps
type PopoverContentImplElement (line 355) | type PopoverContentImplElement = React.ComponentRef<typeof PopperPrimiti...
type FocusScopeProps (line 356) | type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
type DismissableLayerProps (line 357) | type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof Dismi...
type PopperContentProps (line 358) | type PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPr...
type PopoverContentImplProps (line 359) | interface PopoverContentImplProps
constant CLOSE_NAME (line 448) | const CLOSE_NAME = 'PopoverClose';
type PopoverCloseElement (line 450) | type PopoverCloseElement = React.ComponentRef<typeof Primitive.button>;
type PopoverCloseProps (line 451) | interface PopoverCloseProps extends PrimitiveButtonProps {}
constant ARROW_NAME (line 474) | const ARROW_NAME = 'PopoverArrow';
type PopoverArrowElement (line 476) | type PopoverArrowElement = React.ComponentRef<typeof PopperPrimitive.Arr...
type PopperArrowProps (line 477) | type PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrim...
type PopoverArrowProps (line 478) | interface PopoverArrowProps extends PopperArrowProps {}
function getState (line 492) | function getState(open: boolean) {
FILE: packages/react/popper/src/popper.tsx
constant SIDE_OPTIONS (line 25) | const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const;
constant ALIGN_OPTIONS (line 26) | const ALIGN_OPTIONS = ['start', 'center', 'end'] as const;
type Side (line 28) | type Side = (typeof SIDE_OPTIONS)[number];
type Align (line 29) | type Align = (typeof ALIGN_OPTIONS)[number];
constant POPPER_NAME (line 35) | const POPPER_NAME = 'Popper';
type ScopedProps (line 37) | type ScopedProps<P> = P & { __scopePopper?: Scope };
type PopperContextValue (line 40) | type PopperContextValue = {
type PopperProps (line 46) | interface PopperProps {
constant ANCHOR_NAME (line 65) | const ANCHOR_NAME = 'PopperAnchor';
type PopperAnchorElement (line 67) | type PopperAnchorElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 68) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type PopperAnchorProps (line 69) | interface PopperAnchorProps extends PrimitiveDivProps {
constant CONTENT_NAME (line 102) | const CONTENT_NAME = 'PopperContent';
type PopperContentContextValue (line 104) | type PopperContentContextValue = {
type Boundary (line 115) | type Boundary = Element | null;
type PopperContentElement (line 117) | type PopperContentElement = React.ComponentRef<typeof Primitive.div>;
type PopperContentProps (line 118) | interface PopperContentProps extends PrimitiveDivProps {
constant ARROW_NAME (line 296) | const ARROW_NAME = 'PopperArrow';
constant OPPOSITE_SIDE (line 298) | const OPPOSITE_SIDE: Record<Side, Side> = {
type PopperArrowElement (line 305) | type PopperArrowElement = React.ComponentRef<typeof ArrowPrimitive.Root>;
type ArrowProps (line 306) | type ArrowProps = React.ComponentPropsWithoutRef<typeof ArrowPrimitive.R...
type PopperArrowProps (line 307) | interface PopperArrowProps extends ArrowProps {}
function isNotNull (line 360) | function isNotNull<T>(value: T | null): value is T {
method fn (line 367) | fn(data) {
function getSideAndAlignFromPlacement (line 401) | function getSideAndAlignFromPlacement(placement: Placement) {
FILE: packages/react/portal/src/portal.tsx
constant PORTAL_NAME (line 10) | const PORTAL_NAME = 'Portal';
type PortalElement (line 12) | type PortalElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 13) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type PortalProps (line 14) | interface PortalProps extends PrimitiveDivProps {
FILE: packages/react/presence/src/presence.tsx
type PresenceProps (line 6) | interface PresenceProps {
function usePresence (line 32) | function usePresence(present: boolean) {
function getAnimationName (line 166) | function getAnimationName(styles: CSSStyleDeclaration | null) {
function getElementRef (line 175) | function getElementRef(element: React.ReactElement<{ ref?: React.Ref<unk...
FILE: packages/react/presence/src/use-state-machine.tsx
type Machine (line 3) | type Machine<S> = { [k: string]: { [k: string]: S } };
type MachineState (line 4) | type MachineState<T> = keyof T;
type MachineEvent (line 5) | type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;
type UnionToIntersection (line 8) | type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) ex...
function useStateMachine (line 12) | function useStateMachine<M>(
FILE: packages/react/primitive/src/primitive.tsx
constant NODES (line 5) | const NODES = [
type Primitives (line 25) | type Primitives = { [E in (typeof NODES)[number]]: PrimitiveForwardRefCo...
type PrimitivePropsWithRef (line 26) | type PrimitivePropsWithRef<E extends React.ElementType> = React.Componen...
type PrimitiveForwardRefComponent (line 30) | interface PrimitiveForwardRefComponent<E extends React.ElementType>
function dispatchDiscreteCustomEvent (line 96) | function dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['t...
FILE: packages/react/progress/src/progress.tsx
constant PROGRESS_NAME (line 11) | const PROGRESS_NAME = 'Progress';
constant DEFAULT_MAX (line 12) | const DEFAULT_MAX = 100;
type ScopedProps (line 14) | type ScopedProps<P> = P & { __scopeProgress?: Scope };
type ProgressState (line 17) | type ProgressState = 'indeterminate' | 'complete' | 'loading';
type ProgressContextValue (line 18) | type ProgressContextValue = { value: number | null; max: number };
type ProgressElement (line 22) | type ProgressElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 23) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type ProgressProps (line 24) | interface ProgressProps extends PrimitiveDivProps {
constant INDICATOR_NAME (line 78) | const INDICATOR_NAME = 'ProgressIndicator';
type ProgressIndicatorElement (line 80) | type ProgressIndicatorElement = React.ComponentRef<typeof Primitive.div>;
type ProgressIndicatorProps (line 81) | interface ProgressIndicatorProps extends PrimitiveDivProps {}
function defaultGetValueLabel (line 103) | function defaultGetValueLabel(value: number, max: number) {
function getProgressState (line 107) | function getProgressState(value: number | undefined | null, maxValue: nu...
function isNumber (line 111) | function isNumber(value: any): value is number {
function isValidMaxNumber (line 115) | function isValidMaxNumber(max: any): max is number {
function isValidValueNumber (line 124) | function isValidValueNumber(value: any, max: number): value is number {
function getInvalidMaxError (line 135) | function getInvalidMaxError(propValue: string, componentName: string) {
function getInvalidValueError (line 139) | function getInvalidValueError(propValue: string, componentName: string) {
FILE: packages/react/radio-group/src/radio-group.tsx
constant ARROW_KEYS (line 14) | const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
constant RADIO_GROUP_NAME (line 19) | const RADIO_GROUP_NAME = 'RadioGroup';
type ScopedProps (line 21) | type ScopedProps<P> = P & { __scopeRadioGroup?: Scope };
type RadioGroupContextValue (line 29) | type RadioGroupContextValue = {
type RadioGroupElement (line 40) | type RadioGroupElement = React.ComponentRef<typeof Primitive.div>;
type RovingFocusGroupProps (line 41) | type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof Rovin...
type PrimitiveDivProps (line 42) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type RadioGroupProps (line 43) | interface RadioGroupProps extends PrimitiveDivProps {
constant ITEM_NAME (line 116) | const ITEM_NAME = 'RadioGroupItem';
type RadioGroupItemElement (line 118) | type RadioGroupItemElement = React.ComponentRef<typeof Radio>;
type RadioProps (line 119) | type RadioProps = React.ComponentPropsWithoutRef<typeof Radio>;
type RadioGroupItemProps (line 120) | interface RadioGroupItemProps extends Omit<RadioProps, 'onCheck' | 'name...
constant INDICATOR_NAME (line 191) | const INDICATOR_NAME = 'RadioGroupIndicator';
type RadioGroupIndicatorElement (line 193) | type RadioGroupIndicatorElement = React.ComponentRef<typeof RadioIndicat...
type RadioIndicatorProps (line 194) | type RadioIndicatorProps = React.ComponentPropsWithoutRef<typeof RadioIn...
type RadioGroupIndicatorProps (line 195) | interface RadioGroupIndicatorProps extends RadioIndicatorProps {}
FILE: packages/react/radio-group/src/radio.tsx
constant RADIO_NAME (line 16) | const RADIO_NAME = 'Radio';
type ScopedProps (line 18) | type ScopedProps<P> = P & { __scopeRadio?: Scope };
type RadioContextValue (line 21) | type RadioContextValue = { checked: boolean; disabled?: boolean };
type RadioElement (line 24) | type RadioElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 25) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type RadioProps (line 26) | interface RadioProps extends PrimitiveButtonProps {
constant INDICATOR_NAME (line 102) | const INDICATOR_NAME = 'RadioIndicator';
type RadioIndicatorElement (line 104) | type RadioIndicatorElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 105) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type RadioIndicatorProps (line 106) | interface RadioIndicatorProps extends PrimitiveSpanProps {
constant BUBBLE_INPUT_NAME (line 137) | const BUBBLE_INPUT_NAME = 'RadioBubbleInput';
type InputProps (line 139) | type InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;
type RadioBubbleInputProps (line 140) | interface RadioBubbleInputProps extends Omit<InputProps, 'checked'> {
function getState (line 205) | function getState(checked: boolean) {
FILE: packages/react/roving-focus/src/roving-focus-group.tsx
constant ENTRY_FOCUS (line 14) | const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
constant EVENT_OPTIONS (line 15) | const EVENT_OPTIONS = { bubbles: false, cancelable: true };
constant GROUP_NAME (line 21) | const GROUP_NAME = 'RovingFocusGroup';
type ItemData (line 23) | type ItemData = { id: string; focusable: boolean; active: boolean };
type ScopedProps (line 29) | type ScopedProps<P> = P & { __scopeRovingFocusGroup?: Scope };
type Orientation (line 35) | type Orientation = React.AriaAttributes['aria-orientation'];
type Direction (line 36) | type Direction = 'ltr' | 'rtl';
type RovingFocusGroupOptions (line 38) | interface RovingFocusGroupOptions {
type RovingContextValue (line 55) | type RovingContextValue = RovingFocusGroupOptions & {
type RovingFocusGroupElement (line 66) | type RovingFocusGroupElement = RovingFocusGroupImplElement;
type RovingFocusGroupProps (line 67) | interface RovingFocusGroupProps extends RovingFocusGroupImplProps {}
type RovingFocusGroupImplElement (line 85) | type RovingFocusGroupImplElement = React.ComponentRef<typeof Primitive.d...
type PrimitiveDivProps (line 86) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type RovingFocusGroupImplProps (line 87) | interface RovingFocusGroupImplProps
constant ITEM_NAME (line 201) | const ITEM_NAME = 'RovingFocusGroupItem';
type RovingFocusItemElement (line 203) | type RovingFocusItemElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 204) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type RovingFocusItemProps (line 205) | interface RovingFocusItemProps extends Omit<PrimitiveSpanProps, 'childre...
constant MAP_KEY_TO_FOCUS_INTENT (line 306) | const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {
function getDirectionAwareKey (line 313) | function getDirectionAwareKey(key: string, dir?: Direction) {
type FocusIntent (line 318) | type FocusIntent = 'first' | 'last' | 'prev' | 'next';
function getFocusIntent (line 320) | function getFocusIntent(event: React.KeyboardEvent, orientation?: Orient...
function focusFirst (line 327) | function focusFirst(candidates: HTMLElement[], preventScroll = false) {
function wrapArray (line 341) | function wrapArray<T>(array: T[], startIndex: number) {
FILE: packages/react/scroll-area/src/scroll-area.tsx
type Direction (line 15) | type Direction = 'ltr' | 'rtl';
type Sizes (line 16) | type Sizes = {
constant SCROLL_AREA_NAME (line 30) | const SCROLL_AREA_NAME = 'ScrollArea';
type ScopedProps (line 32) | type ScopedProps<P> = P & { __scopeScrollArea?: Scope };
type ScrollAreaContextValue (line 35) | type ScrollAreaContextValue = {
type ScrollAreaElement (line 59) | type ScrollAreaElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 60) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type ScrollAreaProps (line 61) | interface ScrollAreaProps extends PrimitiveDivProps {
constant VIEWPORT_NAME (line 133) | const VIEWPORT_NAME = 'ScrollAreaViewport';
type ScrollAreaViewportElement (line 135) | type ScrollAreaViewportElement = React.ComponentRef<typeof Primitive.div>;
type ScrollAreaViewportProps (line 136) | interface ScrollAreaViewportProps extends PrimitiveDivProps {
constant SCROLLBAR_NAME (line 198) | const SCROLLBAR_NAME = 'ScrollAreaScrollbar';
type ScrollAreaScrollbarElement (line 200) | type ScrollAreaScrollbarElement = ScrollAreaScrollbarVisibleElement;
type ScrollAreaScrollbarProps (line 201) | interface ScrollAreaScrollbarProps extends ScrollAreaScrollbarVisiblePro...
type ScrollAreaScrollbarHoverElement (line 235) | type ScrollAreaScrollbarHoverElement = ScrollAreaScrollbarAutoElement;
type ScrollAreaScrollbarHoverProps (line 236) | interface ScrollAreaScrollbarHoverProps extends ScrollAreaScrollbarAutoP...
type ScrollAreaScrollbarScrollElement (line 280) | type ScrollAreaScrollbarScrollElement = ScrollAreaScrollbarVisibleElement;
type ScrollAreaScrollbarScrollProps (line 281) | interface ScrollAreaScrollbarScrollProps extends ScrollAreaScrollbarVisi...
type ScrollAreaScrollbarAutoElement (line 352) | type ScrollAreaScrollbarAutoElement = ScrollAreaScrollbarVisibleElement;
type ScrollAreaScrollbarAutoProps (line 353) | interface ScrollAreaScrollbarAutoProps extends ScrollAreaScrollbarVisibl...
type ScrollAreaScrollbarVisibleElement (line 389) | type ScrollAreaScrollbarVisibleElement = ScrollAreaScrollbarAxisElement;
type ScrollAreaScrollbarVisibleProps (line 390) | interface ScrollAreaScrollbarVisibleProps
type UncommonProps (line 410) | type UncommonProps = 'onThumbPositionChange' | 'onDragScroll' | 'onWheel...
function getScrollPosition (line 421) | function getScrollPosition(pointerPos: number, dir?: Direction) {
type ScrollAreaScrollbarAxisPrivateProps (line 476) | type ScrollAreaScrollbarAxisPrivateProps = {
type ScrollAreaScrollbarAxisElement (line 488) | type ScrollAreaScrollbarAxisElement = ScrollAreaScrollbarImplElement;
type ScrollAreaScrollbarAxisProps (line 489) | interface ScrollAreaScrollbarAxisProps
type ScrollbarContext (line 608) | type ScrollbarContext = {
type ScrollAreaScrollbarImplElement (line 620) | type ScrollAreaScrollbarImplElement = React.ComponentRef<typeof Primitiv...
type ScrollAreaScrollbarImplPrivateProps (line 621) | type ScrollAreaScrollbarImplPrivateProps = {
type ScrollAreaScrollbarImplProps (line 632) | interface ScrollAreaScrollbarImplProps
function handleDragScroll (line 664) | function handleDragScroll(event: React.PointerEvent<HTMLElement>) {
constant THUMB_NAME (line 741) | const THUMB_NAME = 'ScrollAreaThumb';
type ScrollAreaThumbElement (line 743) | type ScrollAreaThumbElement = ScrollAreaThumbImplElement;
type ScrollAreaThumbProps (line 744) | interface ScrollAreaThumbProps extends ScrollAreaThumbImplProps {
type ScrollAreaThumbImplElement (line 764) | type ScrollAreaThumbImplElement = React.ComponentRef<typeof Primitive.div>;
type ScrollAreaThumbImplProps (line 765) | interface ScrollAreaThumbImplProps extends PrimitiveDivProps {}
constant CORNER_NAME (line 837) | const CORNER_NAME = 'ScrollAreaCorner';
type ScrollAreaCornerElement (line 839) | type ScrollAreaCornerElement = ScrollAreaCornerImplElement;
type ScrollAreaCornerProps (line 840) | interface ScrollAreaCornerProps extends ScrollAreaCornerImplProps {}
type ScrollAreaCornerImplElement (line 855) | type ScrollAreaCornerImplElement = React.ComponentRef<typeof Primitive.d...
type ScrollAreaCornerImplProps (line 856) | interface ScrollAreaCornerImplProps extends PrimitiveDivProps {}
function toInt (line 899) | function toInt(value?: string) {
function getThumbRatio (line 903) | function getThumbRatio(viewportSize: number, contentSize: number) {
function getThumbSize (line 908) | function getThumbSize(sizes: Sizes) {
function getScrollPositionFromPointer (line 916) | function getScrollPositionFromPointer(
function getThumbOffsetFromScroll (line 934) | function getThumbOffsetFromScroll(scrollPos: number, sizes: Sizes, dir: ...
function linearScale (line 947) | function linearScale(input: readonly [number, number], output: readonly ...
function isScrollingWithinScrollbarBounds (line 955) | function isScrollingWithinScrollbarBounds(scrollPos: number, maxScrollPo...
function useDebounceCallback (line 975) | function useDebounceCallback(callback: () => void, delay: number) {
function useResizeObserver (line 985) | function useResizeObserver(element: HTMLElement | null, onResize: () => ...
FILE: packages/react/scroll-area/src/use-state-machine.ts
type Machine (line 3) | type Machine<S> = { [k: string]: { [k: string]: S } };
type MachineState (line 4) | type MachineState<T> = keyof T;
type MachineEvent (line 5) | type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;
type UnionToIntersection (line 8) | type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) ex...
function useStateMachine (line 12) | function useStateMachine<M>(
FILE: packages/react/select/src/select.tsx
type Direction (line 28) | type Direction = 'ltr' | 'rtl';
constant OPEN_KEYS (line 30) | const OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];
constant SELECTION_KEYS (line 31) | const SELECTION_KEYS = [' ', 'Enter'];
constant SELECT_NAME (line 37) | const SELECT_NAME = 'Select';
type ItemData (line 39) | type ItemData = { value: string; disabled: boolean; textValue: string };
type ScopedProps (line 45) | type ScopedProps<P> = P & { __scopeSelect?: Scope };
type SelectContextValue (line 52) | type SelectContextValue = {
type NativeOption (line 72) | type NativeOption = React.ReactElement<React.ComponentProps<'option'>>;
type SelectNativeOptionsContextValue (line 74) | type SelectNativeOptionsContextValue = {
type ControlledClearableSelectProps (line 81) | interface ControlledClearableSelectProps {
type ControlledUnclearableSelectProps (line 87) | interface ControlledUnclearableSelectProps {
type UncontrolledSelectProps (line 93) | interface UncontrolledSelectProps {
type SelectControlProps (line 102) | type SelectControlProps =
type SelectSharedProps (line 107) | interface SelectSharedProps {
type _FutureSelectProps (line 123) | type _FutureSelectProps = SelectSharedProps & SelectControlProps;
type SelectProps (line 125) | type SelectProps = SelectSharedProps & {
constant TRIGGER_NAME (line 247) | const TRIGGER_NAME = 'SelectTrigger';
type SelectTriggerElement (line 249) | type SelectTriggerElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 250) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type SelectTriggerProps (line 251) | interface SelectTriggerProps extends PrimitiveButtonProps {}
constant VALUE_NAME (line 358) | const VALUE_NAME = 'SelectValue';
type SelectValueElement (line 360) | type SelectValueElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 361) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type SelectValueProps (line 362) | interface SelectValueProps extends Omit<PrimitiveSpanProps, 'placeholder...
constant ICON_NAME (line 399) | const ICON_NAME = 'SelectIcon';
type SelectIconElement (line 401) | type SelectIconElement = React.ComponentRef<typeof Primitive.span>;
type SelectIconProps (line 402) | interface SelectIconProps extends PrimitiveSpanProps {}
constant PORTAL_NAME (line 421) | const PORTAL_NAME = 'SelectPortal';
type PortalProps (line 423) | type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
type SelectPortalProps (line 424) | interface SelectPortalProps {
constant CONTENT_NAME (line 442) | const CONTENT_NAME = 'SelectContent';
type SelectContentElement (line 444) | type SelectContentElement = SelectContentImplElement;
type SelectContentProps (line 445) | interface SelectContentProps extends SelectContentImplProps {}
constant CONTENT_MARGIN (line 481) | const CONTENT_MARGIN = 10;
type SelectContentContextValue (line 483) | type SelectContentContextValue = {
constant CONTENT_IMPL_NAME (line 505) | const CONTENT_IMPL_NAME = 'SelectContentImpl';
type SelectContentImplElement (line 507) | type SelectContentImplElement = SelectPopperPositionElement | SelectItem...
type DismissableLayerProps (line 508) | type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof Dismi...
type FocusScopeProps (line 509) | type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
type SelectPopperPrivateProps (line 511) | type SelectPopperPrivateProps = { onPlaced?: PopperContentProps['onPlace...
type SelectContentImplProps (line 513) | interface SelectContentImplProps
constant ITEM_ALIGNED_POSITION_NAME (line 822) | const ITEM_ALIGNED_POSITION_NAME = 'SelectItemAlignedPosition';
type SelectItemAlignedPositionElement (line 824) | type SelectItemAlignedPositionElement = React.ComponentRef<typeof Primit...
type SelectItemAlignedPositionProps (line 825) | interface SelectItemAlignedPositionProps extends PrimitiveDivProps, Sele...
constant POPPER_POSITION_NAME (line 1043) | const POPPER_POSITION_NAME = 'SelectPopperPosition';
type SelectPopperPositionElement (line 1045) | type SelectPopperPositionElement = React.ComponentRef<typeof PopperPrimi...
type PopperContentProps (line 1046) | type PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPr...
type SelectPopperPositionProps (line 1047) | interface SelectPopperPositionProps extends PopperContentProps, SelectPo...
type SelectViewportContextValue (line 1091) | type SelectViewportContextValue = {
constant VIEWPORT_NAME (line 1100) | const VIEWPORT_NAME = 'SelectViewport';
type SelectViewportElement (line 1102) | type SelectViewportElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 1103) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type SelectViewportProps (line 1104) | interface SelectViewportProps extends PrimitiveDivProps {
constant GROUP_NAME (line 1183) | const GROUP_NAME = 'SelectGroup';
type SelectGroupContextValue (line 1185) | type SelectGroupContextValue = { id: string };
type SelectGroupElement (line 1190) | type SelectGroupElement = React.ComponentRef<typeof Primitive.div>;
type SelectGroupProps (line 1191) | interface SelectGroupProps extends PrimitiveDivProps {}
constant LABEL_NAME (line 1211) | const LABEL_NAME = 'SelectLabel';
type SelectLabelElement (line 1213) | type SelectLabelElement = React.ComponentRef<typeof Primitive.div>;
type SelectLabelProps (line 1214) | interface SelectLabelProps extends PrimitiveDivProps {}
constant ITEM_NAME (line 1230) | const ITEM_NAME = 'SelectItem';
type SelectItemContextValue (line 1232) | type SelectItemContextValue = {
type SelectItemElement (line 1243) | type SelectItemElement = React.ComponentRef<typeof Primitive.div>;
type SelectItemProps (line 1244) | interface SelectItemProps extends PrimitiveDivProps {
constant ITEM_TEXT_NAME (line 1362) | const ITEM_TEXT_NAME = 'SelectItemText';
type SelectItemTextElement (line 1364) | type SelectItemTextElement = React.ComponentRef<typeof Primitive.span>;
type SelectItemTextProps (line 1365) | interface SelectItemTextProps extends PrimitiveSpanProps {}
constant ITEM_INDICATOR_NAME (line 1418) | const ITEM_INDICATOR_NAME = 'SelectItemIndicator';
type SelectItemIndicatorElement (line 1420) | type SelectItemIndicatorElement = React.ComponentRef<typeof Primitive.sp...
type SelectItemIndicatorProps (line 1421) | interface SelectItemIndicatorProps extends PrimitiveSpanProps {}
constant SCROLL_UP_BUTTON_NAME (line 1439) | const SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton';
type SelectScrollUpButtonElement (line 1441) | type SelectScrollUpButtonElement = SelectScrollButtonImplElement;
type SelectScrollUpButtonProps (line 1442) | interface SelectScrollUpButtonProps extends Omit<SelectScrollButtonImplP...
function handleScroll (line 1456) | function handleScroll() {
constant SCROLL_DOWN_BUTTON_NAME (line 1486) | const SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';
type SelectScrollDownButtonElement (line 1488) | type SelectScrollDownButtonElement = SelectScrollButtonImplElement;
type SelectScrollDownButtonProps (line 1489) | interface SelectScrollDownButtonProps extends Omit<SelectScrollButtonImp...
function handleScroll (line 1503) | function handleScroll() {
type SelectScrollButtonImplElement (line 1532) | type SelectScrollButtonImplElement = React.ComponentRef<typeof Primitive...
type SelectScrollButtonImplProps (line 1533) | interface SelectScrollButtonImplProps extends PrimitiveDivProps {
constant SEPARATOR_NAME (line 1594) | const SEPARATOR_NAME = 'SelectSeparator';
type SelectSeparatorElement (line 1596) | type SelectSeparatorElement = React.ComponentRef<typeof Primitive.div>;
type SelectSeparatorProps (line 1597) | interface SelectSeparatorProps extends PrimitiveDivProps {}
constant ARROW_NAME (line 1612) | const ARROW_NAME = 'SelectArrow';
type SelectArrowElement (line 1614) | type SelectArrowElement = React.ComponentRef<typeof PopperPrimitive.Arrow>;
type PopperArrowProps (line 1615) | type PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrim...
type SelectArrowProps (line 1616) | interface SelectArrowProps extends PopperArrowProps {}
constant BUBBLE_INPUT_NAME (line 1636) | const BUBBLE_INPUT_NAME = 'SelectBubbleInput';
type InputProps (line 1638) | type InputProps = React.ComponentPropsWithoutRef<typeof Primitive.select>;
type SwitchBubbleInputProps (line 1639) | interface SwitchBubbleInputProps extends InputProps {}
function shouldShowPlaceholder (line 1692) | function shouldShowPlaceholder(value?: string) {
function useTypeaheadSearch (line 1696) | function useTypeaheadSearch(onSearchChange: (search: string) => void) {
function findNextItem (line 1745) | function findNextItem<T extends { textValue: string }>(
function wrapArray (line 1766) | function wrapArray<T>(array: T[], startIndex: number) {
FILE: packages/react/separator/src/separator.tsx
constant NAME (line 8) | const NAME = 'Separator';
constant DEFAULT_ORIENTATION (line 9) | const DEFAULT_ORIENTATION = 'horizontal';
constant ORIENTATIONS (line 10) | const ORIENTATIONS = ['horizontal', 'vertical'] as const;
type Orientation (line 12) | type Orientation = (typeof ORIENTATIONS)[number];
type SeparatorElement (line 13) | type SeparatorElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 14) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type SeparatorProps (line 15) | interface SeparatorProps extends PrimitiveDivProps {
function isValidOrientation (line 50) | function isValidOrientation(orientation: any): orientation is Orientation {
FILE: packages/react/slider/src/slider.tsx
type Direction (line 15) | type Direction = 'ltr' | 'rtl';
constant PAGE_KEYS (line 17) | const PAGE_KEYS = ['PageUp', 'PageDown'];
constant ARROW_KEYS (line 18) | const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
type SlideDirection (line 20) | type SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from...
constant BACK_KEYS (line 21) | const BACK_KEYS: Record<SlideDirection, string[]> = {
constant SLIDER_NAME (line 32) | const SLIDER_NAME = 'Slider';
type ScopedProps (line 37) | type ScopedProps<P> = P & { __scopeSlider?: Scope };
type SliderContextValue (line 42) | type SliderContextValue = {
type SliderElement (line 56) | type SliderElement = SliderHorizontalElement | SliderVerticalElement;
type SliderProps (line 57) | interface SliderProps
function handleSlideStart (line 112) | function handleSlideStart(value: number) {
function handleSlideMove (line 117) | function handleSlideMove(value: number) {
function handleSlideEnd (line 121) | function handleSlideEnd() {
function updateValues (line 128) | function updateValues(value: number, atIndex: number, { commit } = { com...
type Side (line 204) | type Side = 'top' | 'right' | 'bottom' | 'left';
type SliderOrientationPrivateProps (line 218) | type SliderOrientationPrivateProps = {
type SliderOrientationProps (line 229) | interface SliderOrientationProps
type SliderHorizontalElement (line 233) | type SliderHorizontalElement = SliderImplElement;
type SliderHorizontalProps (line 234) | interface SliderHorizontalProps extends SliderOrientationProps {
function getValueFromPointer (line 258) | function getValueFromPointer(pointerPosition: number) {
type SliderVerticalElement (line 312) | type SliderVerticalElement = SliderImplElement;
type SliderVerticalProps (line 313) | interface SliderVerticalProps extends SliderOrientationProps {}
function getValueFromPointer (line 332) | function getValueFromPointer(pointerPosition: number) {
type SliderImplElement (line 385) | type SliderImplElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveDivProps (line 386) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type SliderImplPrivateProps (line 387) | type SliderImplPrivateProps = {
type SliderImplProps (line 395) | interface SliderImplProps extends PrimitiveDivProps, SliderImplPrivatePr...
constant TRACK_NAME (line 463) | const TRACK_NAME = 'SliderTrack';
type SliderTrackElement (line 465) | type SliderTrackElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 466) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type SliderTrackProps (line 467) | interface SliderTrackProps extends PrimitiveSpanProps {}
constant RANGE_NAME (line 490) | const RANGE_NAME = 'SliderRange';
type SliderRangeElement (line 492) | type SliderRangeElement = React.ComponentRef<typeof Primitive.span>;
type SliderRangeProps (line 493) | interface SliderRangeProps extends PrimitiveSpanProps {}
constant THUMB_NAME (line 531) | const THUMB_NAME = 'SliderThumb';
type SliderThumbElement (line 533) | type SliderThumbElement = SliderThumbImplElement;
type SliderThumbProps (line 534) | interface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {}
type SliderThumbImplElement (line 549) | type SliderThumbImplElement = React.ComponentRef<typeof Primitive.span>;
type SliderThumbImplProps (line 550) | interface SliderThumbImplProps extends PrimitiveSpanProps {
constant BUBBLE_INPUT_NAME (line 640) | const BUBBLE_INPUT_NAME = 'RadioBubbleInput';
type InputProps (line 642) | type InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;
type SliderBubbleInputProps (line 643) | interface SliderBubbleInputProps extends InputProps {}
function getNextSortedValues (line 690) | function getNextSortedValues(prevValues: number[] = [], nextValue: numbe...
function convertValueToPercentage (line 696) | function convertValueToPercentage(value: number, min: number, max: numbe...
function getLabel (line 706) | function getLabel(index: number, totalValues: number) {
function getClosestValueIndex (line 724) | function getClosestValueIndex(values: number[], nextValue: number) {
function getThumbInBoundsOffset (line 735) | function getThumbInBoundsOffset(width: number, left: number, direction: ...
function getStepsBetweenValues (line 749) | function getStepsBetweenValues(values: number[]) {
function hasMinStepsBetweenValues (line 765) | function hasMinStepsBetweenValues(values: number[], minStepsBetweenValue...
function linearScale (line 775) | function linearScale(input: readonly [number, number], output: readonly ...
function getDecimalCount (line 783) | function getDecimalCount(value: number) {
function roundValue (line 787) | function roundValue(value: number, decimalCount: number) {
FILE: packages/react/slot/src/slot.test.tsx
type TriggerProps (line 234) | type TriggerProps = React.ComponentProps<'button'> & { as: React.Element...
FILE: packages/react/slot/src/slot.tsx
type ReactElement (line 5) | interface ReactElement {
constant REACT_LAZY_TYPE (line 10) | const REACT_LAZY_TYPE = Symbol.for('react.lazy');
type LazyReactElement (line 12) | interface LazyReactElement extends React.ReactElement {
type Usable (line 21) | type Usable<T> = PromiseLike<T> | React.Context<T>;
type SlotProps (line 24) | interface SlotProps extends React.HTMLAttributes<HTMLElement> {
function isPromiseLike (line 28) | function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
function isLazyComponent (line 32) | function isLazyComponent(element: React.ReactNode): element is LazyReact...
function createSlot (line 43) | function createSlot(ownerName: string) {
type SlotCloneProps (line 96) | interface SlotCloneProps {
function createSlotClone (line 100) | function createSlotClone(ownerName: string) {
constant SLOTTABLE_IDENTIFIER (line 128) | const SLOTTABLE_IDENTIFIER = Symbol('radix.slottable');
type SlottableProps (line 130) | interface SlottableProps {
type SlottableComponent (line 134) | interface SlottableComponent extends React.FC<SlottableProps> {
function createSlottable (line 138) | function createSlottable(ownerName: string) {
type AnyProps (line 151) | type AnyProps = Record<string, any>;
function isSlottable (line 153) | function isSlottable(
function mergeProps (line 164) | function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
function getElementRef (line 203) | function getElementRef(element: React.ReactElement) {
FILE: packages/react/switch/src/switch.test.tsx
function Test (line 10) | function Test() {
FILE: packages/react/switch/src/switch.tsx
constant SWITCH_NAME (line 16) | const SWITCH_NAME = 'Switch';
type ScopedProps (line 18) | type ScopedProps<P> = P & { __scopeSwitch?: Scope };
type SwitchContextValue (line 21) | type SwitchContextValue = { checked: boolean; disabled?: boolean };
type SwitchElement (line 24) | type SwitchElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 25) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type SwitchProps (line 26) | interface SwitchProps extends PrimitiveButtonProps {
constant THUMB_NAME (line 110) | const THUMB_NAME = 'SwitchThumb';
type SwitchThumbElement (line 112) | type SwitchThumbElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 113) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type SwitchThumbProps (line 114) | interface SwitchThumbProps extends PrimitiveSpanProps {}
constant BUBBLE_INPUT_NAME (line 137) | const BUBBLE_INPUT_NAME = 'SwitchBubbleInput';
type InputProps (line 139) | type InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;
type SwitchBubbleInputProps (line 140) | interface SwitchBubbleInputProps extends Omit<InputProps, 'checked'> {
function getState (line 205) | function getState(checked: boolean) {
FILE: packages/react/tabs/src/tabs.tsx
constant TABS_NAME (line 18) | const TABS_NAME = 'Tabs';
type ScopedProps (line 20) | type ScopedProps<P> = P & { __scopeTabs?: Scope };
type TabsContextValue (line 26) | type TabsContextValue = {
type TabsElement (line 37) | type TabsElement = React.ComponentRef<typeof Primitive.div>;
type RovingFocusGroupProps (line 38) | type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof Rovin...
type PrimitiveDivProps (line 39) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type TabsProps (line 40) | interface TabsProps extends PrimitiveDivProps {
constant TAB_LIST_NAME (line 111) | const TAB_LIST_NAME = 'TabsList';
type TabsListElement (line 113) | type TabsListElement = React.ComponentRef<typeof Primitive.div>;
type TabsListProps (line 114) | interface TabsListProps extends PrimitiveDivProps {
constant TRIGGER_NAME (line 148) | const TRIGGER_NAME = 'TabsTrigger';
type TabsTriggerElement (line 150) | type TabsTriggerElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 151) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type TabsTriggerProps (line 152) | interface TabsTriggerProps extends PrimitiveButtonProps {
constant CONTENT_NAME (line 215) | const CONTENT_NAME = 'TabsContent';
type TabsContentElement (line 217) | type TabsContentElement = React.ComponentRef<typeof Primitive.div>;
type TabsContentProps (line 218) | interface TabsContentProps extends PrimitiveDivProps {
function makeTriggerId (line 272) | function makeTriggerId(baseId: string, value: string) {
function makeContentId (line 276) | function makeContentId(baseId: string, value: string) {
FILE: packages/react/toast/src/toast.tsx
constant PROVIDER_NAME (line 22) | const PROVIDER_NAME = 'ToastProvider';
type SwipeDirection (line 26) | type SwipeDirection = 'up' | 'down' | 'left' | 'right';
type ToastProviderContextValue (line 27) | type ToastProviderContextValue = {
type ScopedProps (line 41) | type ScopedProps<P> = P & { __scopeToast?: Scope };
type ToastProviderProps (line 46) | interface ToastProviderProps {
constant VIEWPORT_NAME (line 119) | const VIEWPORT_NAME = 'ToastViewport';
constant VIEWPORT_DEFAULT_HOTKEY (line 120) | const VIEWPORT_DEFAULT_HOTKEY = ['F8'];
constant VIEWPORT_PAUSE (line 121) | const VIEWPORT_PAUSE = 'toast.viewportPause';
constant VIEWPORT_RESUME (line 122) | const VIEWPORT_RESUME = 'toast.viewportResume';
type ToastViewportElement (line 124) | type ToastViewportElement = React.ComponentRef<typeof Primitive.ol>;
type PrimitiveOrderedListProps (line 125) | type PrimitiveOrderedListProps = React.ComponentPropsWithoutRef<typeof P...
type ToastViewportProps (line 126) | interface ToastViewportProps extends PrimitiveOrderedListProps {
constant FOCUS_PROXY_NAME (line 328) | const FOCUS_PROXY_NAME = 'ToastFocusProxy';
type FocusProxyElement (line 330) | type FocusProxyElement = React.ComponentRef<typeof VisuallyHidden>;
type VisuallyHiddenProps (line 331) | type VisuallyHiddenProps = React.ComponentPropsWithoutRef<typeof Visuall...
type FocusProxyProps (line 332) | interface FocusProxyProps extends VisuallyHiddenProps {
constant TOAST_NAME (line 364) | const TOAST_NAME = 'Toast';
constant TOAST_SWIPE_START (line 365) | const TOAST_SWIPE_START = 'toast.swipeStart';
constant TOAST_SWIPE_MOVE (line 366) | const TOAST_SWIPE_MOVE = 'toast.swipeMove';
constant TOAST_SWIPE_CANCEL (line 367) | const TOAST_SWIPE_CANCEL = 'toast.swipeCancel';
constant TOAST_SWIPE_END (line 368) | const TOAST_SWIPE_END = 'toast.swipeEnd';
type ToastElement (line 370) | type ToastElement = ToastImplElement;
type ToastProps (line 371) | interface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivate...
type SwipeEvent (line 435) | type SwipeEvent = { currentTarget: EventTarget & ToastElement } & Omit<
method onClose (line 441) | onClose() {}
type ToastImplElement (line 444) | type ToastImplElement = React.ComponentRef<typeof Primitive.li>;
type DismissableLayerProps (line 445) | type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof Dismi...
type ToastImplPrivateProps (line 446) | type ToastImplPrivateProps = { open: boolean; onClose(): void };
type PrimitiveListItemProps (line 447) | type PrimitiveListItemProps = React.ComponentPropsWithoutRef<typeof Prim...
type ToastImplProps (line 448) | interface ToastImplProps extends ToastImplPrivateProps, PrimitiveListIte...
type ToastAnnounceProps (line 669) | interface ToastAnnounceProps
constant TITLE_NAME (line 705) | const TITLE_NAME = 'ToastTitle';
type ToastTitleElement (line 707) | type ToastTitleElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 708) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type ToastTitleProps (line 709) | interface ToastTitleProps extends PrimitiveDivProps {}
constant DESCRIPTION_NAME (line 724) | const DESCRIPTION_NAME = 'ToastDescription';
type ToastDescriptionElement (line 726) | type ToastDescriptionElement = React.ComponentRef<typeof Primitive.div>;
type ToastDescriptionProps (line 727) | interface ToastDescriptionProps extends PrimitiveDivProps {}
constant ACTION_NAME (line 742) | const ACTION_NAME = 'ToastAction';
type ToastActionElement (line 744) | type ToastActionElement = ToastCloseElement;
type ToastActionProps (line 745) | interface ToastActionProps extends ToastCloseProps {
constant CLOSE_NAME (line 780) | const CLOSE_NAME = 'ToastClose';
type ToastCloseElement (line 782) | type ToastCloseElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 783) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type ToastCloseProps (line 784) | interface ToastCloseProps extends PrimitiveButtonProps {}
type ToastAnnounceExcludeElement (line 808) | type ToastAnnounceExcludeElement = React.ComponentRef<typeof Primitive.d...
type ToastAnnounceExcludeProps (line 809) | interface ToastAnnounceExcludeProps extends PrimitiveDivProps {
function getAnnounceTextContent (line 829) | function getAnnounceTextContent(container: HTMLElement) {
function handleAndDispatchCustomEvent (line 857) | function handleAndDispatchCustomEvent<
function useNextFrame (line 892) | function useNextFrame(callback = () => {}) {
function isHTMLElement (line 905) | function isHTMLElement(node: any): node is HTMLElement {
function getTabbableCandidates (line 919) | function getTabbableCandidates(container: HTMLElement) {
function focusFirst (line 937) | function focusFirst(candidates: HTMLElement[]) {
FILE: packages/react/toggle-group/src/toggle-group.tsx
constant TOGGLE_GROUP_NAME (line 16) | const TOGGLE_GROUP_NAME = 'ToggleGroup';
type ScopedProps (line 18) | type ScopedProps<P> = P & { __scopeToggleGroup?: Scope };
type ToggleGroupElement (line 24) | type ToggleGroupElement = ToggleGroupImplSingleElement | ToggleGroupImpl...
type ToggleGroupSingleProps (line 25) | interface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {
type ToggleGroupMultipleProps (line 28) | interface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {
type ToggleGroupValueContextValue (line 55) | type ToggleGroupValueContextValue = {
type ToggleGroupImplSingleElement (line 65) | type ToggleGroupImplSingleElement = ToggleGroupImplElement;
type ToggleGroupImplSingleProps (line 66) | interface ToggleGroupImplSingleProps extends ToggleGroupImplProps {
type ToggleGroupImplMultipleElement (line 113) | type ToggleGroupImplMultipleElement = ToggleGroupImplElement;
type ToggleGroupImplMultipleProps (line 114) | interface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {
type ToggleGroupContextValue (line 176) | type ToggleGroupContextValue = { rovingFocus: boolean; disabled: boolean };
type RovingFocusGroupProps (line 181) | type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof Rovin...
type ToggleGroupImplElement (line 182) | type ToggleGroupImplElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 183) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type ToggleGroupImplProps (line 184) | interface ToggleGroupImplProps extends PrimitiveDivProps {
constant ITEM_NAME (line 238) | const ITEM_NAME = 'ToggleGroupItem';
type ToggleGroupItemElement (line 240) | type ToggleGroupItemElement = ToggleGroupItemImplElement;
type ToggleGroupItemProps (line 241) | interface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, 'p...
type ToggleGroupItemImplElement (line 272) | type ToggleGroupItemImplElement = React.ComponentRef<typeof Toggle>;
type ToggleProps (line 273) | type ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle>;
type ToggleGroupItemImplProps (line 274) | interface ToggleGroupItemImplProps extends Omit<ToggleProps, 'defaultPre...
FILE: packages/react/toggle/src/toggle.test.tsx
constant TEXT_CHILD (line 7) | const TEXT_CHILD = 'Like';
FILE: packages/react/toggle/src/toggle.tsx
constant NAME (line 10) | const NAME = 'Toggle';
type ToggleElement (line 12) | type ToggleElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 13) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type ToggleProps (line 14) | interface ToggleProps extends PrimitiveButtonProps {
FILE: packages/react/toolbar/src/toolbar.tsx
constant TOOLBAR_NAME (line 18) | const TOOLBAR_NAME = 'Toolbar';
type ScopedProps (line 20) | type ScopedProps<P> = P & { __scopeToolbar?: Scope };
type RovingFocusGroupProps (line 28) | type RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof Rovin...
type ToolbarContextValue (line 29) | type ToolbarContextValue = {
type ToolbarElement (line 36) | type ToolbarElement = React.ComponentRef<typeof Primitive.div>;
type PrimitiveDivProps (line 37) | type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive...
type ToolbarProps (line 38) | interface ToolbarProps extends PrimitiveDivProps {
constant SEPARATOR_NAME (line 77) | const SEPARATOR_NAME = 'ToolbarSeparator';
type ToolbarSeparatorElement (line 79) | type ToolbarSeparatorElement = React.ComponentRef<typeof SeparatorPrimit...
type SeparatorProps (line 80) | type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPri...
type ToolbarSeparatorProps (line 81) | interface ToolbarSeparatorProps extends SeparatorProps {}
constant BUTTON_NAME (line 103) | const BUTTON_NAME = 'ToolbarButton';
type ToolbarButtonElement (line 105) | type ToolbarButtonElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 106) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type ToolbarButtonProps (line 107) | interface ToolbarButtonProps extends PrimitiveButtonProps {}
constant LINK_NAME (line 127) | const LINK_NAME = 'ToolbarLink';
type ToolbarLinkElement (line 129) | type ToolbarLinkElement = React.ComponentRef<typeof Primitive.a>;
type PrimitiveLinkProps (line 130) | type PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type ToolbarLinkProps (line 131) | interface ToolbarLinkProps extends PrimitiveLinkProps {}
constant TOGGLE_GROUP_NAME (line 157) | const TOGGLE_GROUP_NAME = 'ToolbarToggleGroup';
type ToolbarToggleGroupElement (line 159) | type ToolbarToggleGroupElement = React.ComponentRef<typeof ToggleGroupPr...
type ToggleGroupProps (line 160) | type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGrou...
type ToolbarToggleGroupSingleProps (line 161) | interface ToolbarToggleGroupSingleProps extends Extract<ToggleGroupProps...
type ToolbarToggleGroupMultipleProps (line 162) | interface ToolbarToggleGroupMultipleProps extends Extract<ToggleGroupPro...
constant TOGGLE_ITEM_NAME (line 194) | const TOGGLE_ITEM_NAME = 'ToolbarToggleItem';
type ToolbarToggleItemElement (line 196) | type ToolbarToggleItemElement = React.ComponentRef<typeof ToggleGroupPri...
type ToggleGroupItemProps (line 197) | type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof Toggle...
type ToolbarToggleItemProps (line 198) | interface ToolbarToggleItemProps extends ToggleGroupItemProps {}
FILE: packages/react/tooltip/src/tooltip.tsx
type ScopedProps (line 18) | type ScopedProps<P = {}> = P & { __scopeTooltip?: Scope };
constant PROVIDER_NAME (line 28) | const PROVIDER_NAME = 'TooltipProvider';
constant DEFAULT_DELAY_DURATION (line 29) | const DEFAULT_DELAY_DURATION = 700;
constant TOOLTIP_OPEN (line 30) | const TOOLTIP_OPEN = 'tooltip.open';
type TooltipProviderContextValue (line 32) | type TooltipProviderContextValue = {
type TooltipProviderProps (line 45) | interface TooltipProviderProps {
constant TOOLTIP_NAME (line 116) | const TOOLTIP_NAME = 'Tooltip';
type TooltipContextValue (line 118) | type TooltipContextValue = {
type TooltipProps (line 134) | interface TooltipProps {
constant TRIGGER_NAME (line 261) | const TRIGGER_NAME = 'TooltipTrigger';
type TooltipTriggerElement (line 263) | type TooltipTriggerElement = React.ComponentRef<typeof Primitive.button>;
type PrimitiveButtonProps (line 264) | type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primit...
type TooltipTriggerProps (line 265) | interface TooltipTriggerProps extends PrimitiveButtonProps {}
constant PORTAL_NAME (line 330) | const PORTAL_NAME = 'TooltipPortal';
type PortalContextValue (line 332) | type PortalContextValue = { forceMount?: true };
type PortalProps (line 337) | type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
type TooltipPortalProps (line 338) | interface TooltipPortalProps {
constant CONTENT_NAME (line 371) | const CONTENT_NAME = 'TooltipContent';
type TooltipContentElement (line 373) | type TooltipContentElement = TooltipContentImplElement;
type TooltipContentProps (line 374) | interface TooltipContentProps extends TooltipContentImplProps {
type Point (line 400) | type Point = { x: number; y: number };
type Polygon (line 401) | type Polygon = Point[];
type TooltipContentHoverableElement (line 403) | type TooltipContentHoverableElement = TooltipContentImplElement;
type TooltipContentHoverableProps (line 404) | interface TooltipContentHoverableProps extends TooltipContentImplProps {}
type TooltipContentImplElement (line 484) | type TooltipContentImplElement = React.ComponentRef<typeof PopperPrimiti...
type DismissableLayerProps (line 485) | type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof Dismi...
type PopperContentProps (line 486) | type PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPr...
type TooltipContentImplProps (line 487) | interface TooltipContentImplProps extends Omit<PopperContentProps, 'onPl...
constant ARROW_NAME (line 583) | const ARROW_NAME = 'TooltipArrow';
type TooltipArrowElement (line 585) | type TooltipArrowElement = React.ComponentRef<typeof PopperPrimitive.Arr...
type PopperArrowProps (line 586) | type PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrim...
type TooltipArrowProps (line 587) | interface TooltipArrowProps extends PopperArrowProps {}
type Side (line 609) | type Side = NonNullable<TooltipContentProps['side']>;
function getExitSideFromRect (line 611) | function getExitSideFromRect(point: Point, rect: DOMRect): Side {
function getPaddedExitPoints (line 631) | function getPaddedExitPoints(exitPoint: Point, exitSide: Side, padding =...
function getPointsFromRect (line 662) | function getPointsFromRect(rect: DOMRect) {
function isPointInPolygon (line 674) | function isPointInPolygon(point: Point, polygon: Polygon) {
function getHull (line 695) | function getHull<P extends Point>(points: Readonly<Array<P>>): Array<P> {
function getHullPresorted (line 708) | function getHullPresorted<P extends Point>(points: Readonly<Array<P>>): ...
FILE: packages/react/use-callback-ref/src/use-callback-ref.tsx
function useCallbackRef (line 7) | function useCallbackRef<T extends (...args: any[]) => any>(callback: T |...
FILE: packages/react/use-controllable-state/src/use-controllable-state-reducer.tsx
type ChangeHandler (line 4) | type ChangeHandler<T> = (state: T) => void;
type UseControllableStateParams (line 6) | interface UseControllableStateParams<T> {
type AnyAction (line 13) | interface AnyAction {
constant SYNC_STATE (line 17) | const SYNC_STATE = Symbol('RADIX:SYNC_STATE');
type SyncStateAction (line 19) | interface SyncStateAction<T> {
function useControllableStateReducer (line 37) | function useControllableStateReducer<T, S extends {}, A extends AnyAction>(
FILE: packages/react/use-controllable-state/src/use-controllable-state.test.tsx
function ControlledComponent (line 88) | function ControlledComponent({ defaultChecked }: { defaultChecked?: bool...
function UncontrolledComponent (line 100) | function UncontrolledComponent({ defaultChecked }: { defaultChecked?: bo...
function UnstableComponent (line 104) | function UnstableComponent({ defaultChecked }: { defaultChecked?: boolea...
function Checkbox (line 116) | function Checkbox(props: {
FILE: packages/react/use-controllable-state/src/use-controllable-state.tsx
type ChangeHandler (line 8) | type ChangeHandler<T> = (state: T) => void;
type SetStateFn (line 9) | type SetStateFn<T> = React.Dispatch<React.SetStateAction<T>>;
type UseControllableStateParams (line 11) | interface UseControllableStateParams<T> {
function useControllableState (line 18) | function useControllableState<T>({
function useUncontrolledState (line 68) | function useUncontrolledState<T>({
function isFunction (line 94) | function isFunction(value: unknown): value is (...args: any[]) => any {
FILE: packages/react/use-effect-event/src/use-effect-event.tsx
type AnyFunction (line 5) | type AnyFunction = (...args: any[]) => any;
function useEffectEvent (line 15) | function useEffectEvent<T extends AnyFunction>(callback?: T): T {
FILE: packages/react/use-escape-keydown/src/use-escape-keydown.tsx
function useEscapeKeydown (line 7) | function useEscapeKeydown(
FILE: packages/react/use-is-hydrated/src/use-is-hydrated.tsx
function useIsHydrated (line 6) | function useIsHydrated() {
function subscribe (line 14) | function subscribe() {
FILE: packages/react/use-previous/src/use-previous.tsx
function usePrevious (line 3) | function usePrevious<T>(value: T) {
FILE: packages/react/use-rect/src/use-rect.tsx
function useRect (line 10) | function useRect(measurable: Measurable | null) {
FILE: packages/react/use-size/src/use-size.tsx
function useSize (line 4) | function useSize(element: HTMLElement | null) {
FILE: packages/react/visually-hidden/src/visually-hidden.tsx
constant VISUALLY_HIDDEN_STYLES (line 8) | const VISUALLY_HIDDEN_STYLES = Object.freeze({
constant NAME (line 22) | const NAME = 'VisuallyHidden';
type VisuallyHiddenElement (line 24) | type VisuallyHiddenElement = React.ComponentRef<typeof Primitive.span>;
type PrimitiveSpanProps (line 25) | type PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitiv...
type VisuallyHiddenProps (line 26) | interface VisuallyHiddenProps extends PrimitiveSpanProps {}
FILE: scripts/setup-tests.ts
method constructor (line 9) | constructor(cb: any) {
method observe (line 12) | observe() {
method unobserve (line 15) | unobserve() {}
method disconnect (line 16) | disconnect() {}
FILE: types/global.d.ts
type RequestIdleCallbackHandle (line 3) | type RequestIdleCallbackHandle = any;
type RequestIdleCallbackOptions (line 4) | type RequestIdleCallbackOptions = {
type RequestIdleCallbackDeadline (line 7) | type RequestIdleCallbackDeadline = {
Condensed preview — 649 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,039K chars).
[
{
"path": ".changeset/README.md",
"chars": 510,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/changelog.cjs",
"chars": 2360,
"preview": "// https://github.com/ariakit/ariakit/blob/main/.changeset/changelog.cjs\n// MIT License, Copyright (c) Diego Haz\n\n/** @t"
},
{
"path": ".changeset/config.json",
"chars": 397,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@3.1.1/schema.json\",\n \"changelog\": \"./changelog.cjs\",\n \"access\": \""
},
{
"path": ".changeset/silent-turkeys-fly.md",
"chars": 127,
"preview": "---\n'@radix-ui/react-collection': patch\n---\n\nUpdated `unstable_createCollection` signature to extend `BaseItemData` inte"
},
{
"path": ".changeset/ten-pumas-agree.md",
"chars": 94,
"preview": "---\n'@radix-ui/react-direction': patch\n---\n\nAdded `use client` directive to module entrypoint\n"
},
{
"path": ".editorconfig",
"chars": 276,
"preview": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\nmax_l"
},
{
"path": ".github/CODEOWNERS",
"chars": 96,
"preview": "# Add the following users as reviewers on new pull requests\n\n- @lucasmotta @hadihallak @chaance\n"
},
{
"path": ".github/CONTRIBUTING.md",
"chars": 4639,
"preview": "# Contributing to Radix Primitives\n\n## Code of Conduct\n\nRadix has adopted the [Contributor Covenant](https://www.contrib"
},
{
"path": ".github/ISSUE_TEMPLATE/Bug_report.md",
"chars": 991,
"preview": "---\nname: 'Bug report'\nabout: 'Create a bug report'\n---\n\n## Bug report\n\n### Current Behavior\n\n<!-- If applicable, add sc"
},
{
"path": ".github/ISSUE_TEMPLATE/Documentation.md",
"chars": 300,
"preview": "---\nname: 'Documentation'\nabout: 'Suggestions for Radix documentation'\n---\n\n## Documentation\n\n### Relevant Radix Compone"
},
{
"path": ".github/ISSUE_TEMPLATE/Feature_request.md",
"chars": 569,
"preview": "---\nname: 'Feature request'\nabout: 'Suggest an idea for a feature or a new component'\n---\n\n## Feature request\n\n### Overv"
},
{
"path": ".github/ISSUE_TEMPLATE/Question.md",
"chars": 433,
"preview": "---\nname: 'Question'\nabout: 'For usage questions, please use Stack Overflow or use GitHub Discussions'\n---\n\n## Question\n"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 478,
"preview": "<!--\n\nThank you for contributing! Please follow the steps below to help us process your PR quickly.\n\n- 📝 Use a meaningfu"
},
{
"path": ".github/workflows/build.yml",
"chars": 726,
"preview": "name: Build\n\non:\n pull_request:\n branches:\n - main\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.ref"
},
{
"path": ".github/workflows/chromatic.yml",
"chars": 1124,
"preview": "name: 'Chromatic'\n\non:\n push:\n branches:\n - main\n # \"You must append a colon (:) to all events, including even"
},
{
"path": ".github/workflows/publish-snapshot.yml",
"chars": 1283,
"preview": "name: 'Publish Snapshot Release'\n\non:\n push:\n branches:\n - main\n paths-ignore:\n # - '.github/**'\n "
},
{
"path": ".github/workflows/publish-stable.yml",
"chars": 1286,
"preview": "name: 'Publish Stable Release'\n\non:\n push:\n branches:\n - stable\n\nenv:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN "
},
{
"path": ".gitignore",
"chars": 264,
"preview": "*.log*\n.DS_Store\nnode_modules\ndist\ntest-output.*\n.cache\nstorybook-static\n.env\n.eslintcache\n.pnp\n.pnp.js\n*.pem\n.npmrc\n\n# "
},
{
"path": ".nvmrc",
"chars": 3,
"preview": "22\n"
},
{
"path": ".prettierignore",
"chars": 135,
"preview": ".next\nnode_modules\n.yarn\ndist\nstorybook-static\n.pnp\n.pnp.js\ncoverage\npnpm-lock.yaml\npackage-lock.json\nyarn.lock\n*.log*\n."
},
{
"path": ".prettierrc",
"chars": 47,
"preview": "{\n \"printWidth\": 100,\n \"singleQuote\": true\n}\n"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3350,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, w"
},
{
"path": "LICENSE",
"chars": 1063,
"preview": "MIT License\n\nCopyright (c) 2022 WorkOS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof "
},
{
"path": "README.md",
"chars": 1703,
"preview": "[](https://radix-ui.com/primitives)\n\n# Radix Primitives\n\n**An open-source UI com"
},
{
"path": "apps/ssr-testing/.gitignore",
"chars": 346,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "apps/ssr-testing/README.md",
"chars": 234,
"preview": "# `@repo/ssr-testing`\n\nThis is a testing playground for SSR support in our primitives using a [Next.js](https://nextjs.o"
},
{
"path": "apps/ssr-testing/app/accessible-icon/page.tsx",
"chars": 262,
"preview": "import * as React from 'react';\nimport { AccessibleIcon } from 'radix-ui';\n\nexport default function Page() {\n return (\n"
},
{
"path": "apps/ssr-testing/app/accordion/page.tsx",
"chars": 1853,
"preview": "import * as React from 'react';\nimport { Accordion } from 'radix-ui';\n\nexport default function Page() {\n return (\n <"
},
{
"path": "apps/ssr-testing/app/alert-dialog/page.tsx",
"chars": 712,
"preview": "import * as React from 'react';\nimport { AlertDialog } from 'radix-ui';\n\nexport default function Page() {\n return (\n "
},
{
"path": "apps/ssr-testing/app/avatar/page.tsx",
"chars": 272,
"preview": "import * as React from 'react';\nimport { Avatar } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Ava"
},
{
"path": "apps/ssr-testing/app/checkbox/page.tsx",
"chars": 215,
"preview": "import * as React from 'react';\nimport { Checkbox } from 'radix-ui';\n\nexport default function Page() {\n return (\n <C"
},
{
"path": "apps/ssr-testing/app/collapsible/page.tsx",
"chars": 285,
"preview": "import * as React from 'react';\nimport { Collapsible } from 'radix-ui';\n\nexport default function Page() {\n return (\n "
},
{
"path": "apps/ssr-testing/app/context-menu/page.tsx",
"chars": 675,
"preview": "import * as React from 'react';\nimport { ContextMenu } from 'radix-ui';\n\nexport default function Page() {\n return (\n "
},
{
"path": "apps/ssr-testing/app/dialog/page.tsx",
"chars": 488,
"preview": "import * as React from 'react';\nimport { Dialog } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Dia"
},
{
"path": "apps/ssr-testing/app/dropdown-menu/page.tsx",
"chars": 714,
"preview": "import * as React from 'react';\nimport { DropdownMenu } from 'radix-ui';\n\nexport default function Page() {\n return (\n "
},
{
"path": "apps/ssr-testing/app/form/page.tsx",
"chars": 438,
"preview": "import * as React from 'react';\nimport { Form } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Form."
},
{
"path": "apps/ssr-testing/app/hover-card/page.tsx",
"chars": 403,
"preview": "import * as React from 'react';\nimport { HoverCard } from 'radix-ui';\n\nexport default function Page() {\n return (\n <"
},
{
"path": "apps/ssr-testing/app/label/page.tsx",
"chars": 143,
"preview": "import * as React from 'react';\nimport { Label } from 'radix-ui';\n\nexport default function Page() {\n return <Label.Root"
},
{
"path": "apps/ssr-testing/app/layout.tsx",
"chars": 2510,
"preview": "import * as React from 'react';\nimport type { Metadata } from 'next';\nimport Link from 'next/link';\n\nexport default func"
},
{
"path": "apps/ssr-testing/app/menubar/page.tsx",
"chars": 580,
"preview": "import * as React from 'react';\nimport { Menubar } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Me"
},
{
"path": "apps/ssr-testing/app/navigation-menu/page.tsx",
"chars": 653,
"preview": "import * as React from 'react';\nimport { NavigationMenu } from 'radix-ui';\n\nexport default function Page() {\n return (\n"
},
{
"path": "apps/ssr-testing/app/one-time-password-field/page.tsx",
"chars": 1013,
"preview": "import * as React from 'react';\nimport { unstable_OneTimePasswordField as OneTimePasswordField } from 'radix-ui';\n\nexpor"
},
{
"path": "apps/ssr-testing/app/page.tsx",
"chars": 50,
"preview": "export default function Page() {\n return null;\n}\n"
},
{
"path": "apps/ssr-testing/app/password-toggle-field/page.tsx",
"chars": 3174,
"preview": "import * as React from 'react';\nimport { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';\n\nexport "
},
{
"path": "apps/ssr-testing/app/popover/page.tsx",
"chars": 418,
"preview": "import * as React from 'react';\nimport { Popover } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Po"
},
{
"path": "apps/ssr-testing/app/portal/conditional-portal.tsx",
"chars": 567,
"preview": "'use client';\n\nimport * as React from 'react';\nimport { Portal } from 'radix-ui';\n\nexport const ConditionalPortal = () ="
},
{
"path": "apps/ssr-testing/app/portal/custom-portal-container.tsx",
"chars": 405,
"preview": "'use client';\n\nimport * as React from 'react';\nimport { Portal } from 'radix-ui';\n\nexport const CustomPortalContainer = "
},
{
"path": "apps/ssr-testing/app/portal/page.tsx",
"chars": 1204,
"preview": "import * as React from 'react';\nimport { Portal } from 'radix-ui';\nimport { CustomPortalContainer } from './custom-porta"
},
{
"path": "apps/ssr-testing/app/progress/page.tsx",
"chars": 229,
"preview": "import * as React from 'react';\nimport { Progress } from 'radix-ui';\n\nexport default function Page() {\n return (\n <P"
},
{
"path": "apps/ssr-testing/app/radio-group/page.tsx",
"chars": 862,
"preview": "import * as React from 'react';\nimport { Label, RadioGroup } from 'radix-ui';\n\nexport default function Page() {\n return"
},
{
"path": "apps/ssr-testing/app/roving-focus-group/page.tsx",
"chars": 3025,
"preview": "import * as React from 'react';\nimport { RovingFocusProvider, RovingFocusToggle, ButtonGroup, Button } from './roving-fo"
},
{
"path": "apps/ssr-testing/app/roving-focus-group/roving-focus.client.tsx",
"chars": 2835,
"preview": "'use client';\nimport * as React from 'react';\nimport { composeEventHandlers, RovingFocus } from 'radix-ui/internal';\n\nty"
},
{
"path": "apps/ssr-testing/app/scroll-area/page.tsx",
"chars": 3737,
"preview": "import * as React from 'react';\nimport { ScrollArea } from 'radix-ui';\n\nexport default function Page() {\n return (\n "
},
{
"path": "apps/ssr-testing/app/select/page.tsx",
"chars": 2286,
"preview": "import * as React from 'react';\nimport { Select } from 'radix-ui';\n\nexport default function Page() {\n return (\n <>\n "
},
{
"path": "apps/ssr-testing/app/separator/page.tsx",
"chars": 153,
"preview": "import * as React from 'react';\nimport { Separator } from 'radix-ui';\n\nexport default function Page() {\n return <Separa"
},
{
"path": "apps/ssr-testing/app/slider/page.tsx",
"chars": 1050,
"preview": "import * as React from 'react';\nimport { Slider } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Sli"
},
{
"path": "apps/ssr-testing/app/slot/page.tsx",
"chars": 250,
"preview": "import * as React from 'react';\nimport { Slot } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Slot."
},
{
"path": "apps/ssr-testing/app/switch/page.tsx",
"chars": 198,
"preview": "import * as React from 'react';\nimport { Switch } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Swi"
},
{
"path": "apps/ssr-testing/app/tabs/page.tsx",
"chars": 969,
"preview": "import * as React from 'react';\nimport { Tabs } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Tabs."
},
{
"path": "apps/ssr-testing/app/toast/page.tsx",
"chars": 453,
"preview": "import * as React from 'react';\nimport { Toast } from 'radix-ui';\n\nexport default function Page() {\n return (\n <Toas"
},
{
"path": "apps/ssr-testing/app/toggle-group/page.tsx",
"chars": 322,
"preview": "import * as React from 'react';\nimport { ToggleGroup } from 'radix-ui';\n\nexport default function Page() {\n return (\n "
},
{
"path": "apps/ssr-testing/app/toolbar/page.tsx",
"chars": 326,
"preview": "import * as React from 'react';\nimport { Toolbar } from 'radix-ui';\n\nexport default function Page() {\n return (\n <To"
},
{
"path": "apps/ssr-testing/app/tooltip/page.tsx",
"chars": 449,
"preview": "import * as React from 'react';\nimport { Tooltip } from 'radix-ui';\n\nexport default function Page() {\n return (\n <To"
},
{
"path": "apps/ssr-testing/app/visually-hidden/page.tsx",
"chars": 225,
"preview": "import * as React from 'react';\nimport { VisuallyHidden } from 'radix-ui';\n\nexport default function Page() {\n return (\n"
},
{
"path": "apps/ssr-testing/next-env.d.ts",
"chars": 211,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": "apps/ssr-testing/next.config.js",
"chars": 68,
"preview": "module.exports = {\n experimental: {\n externalDir: true,\n },\n};\n"
},
{
"path": "apps/ssr-testing/package.json",
"chars": 535,
"preview": "{\n \"name\": \"@repo/ssr-testing\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"bui"
},
{
"path": "apps/ssr-testing/tsconfig.json",
"chars": 216,
"preview": "{\n \"extends\": \"@repo/typescript-config/nextjs.json\",\n \"compilerOptions\": {\n \"incremental\": true\n },\n \"include\": ["
},
{
"path": "apps/storybook/.gitignore",
"chars": 269,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndis"
},
{
"path": "apps/storybook/.storybook/main.ts",
"chars": 792,
"preview": "import type { StorybookConfig } from '@storybook/react-webpack5';\n\nconst config: StorybookConfig = {\n stories: [\n //"
},
{
"path": "apps/storybook/.storybook/manager-head.html",
"chars": 141,
"preview": "<link rel=\"icon\" type=\"image/png\" href=\"/favicon.png\" />\n<link rel=\"icon\" type=\"image/png\" href=\"/favicon-white.svg\" typ"
},
{
"path": "apps/storybook/.storybook/manager.ts",
"chars": 165,
"preview": "import { addons } from 'storybook/manager-api';\nimport { themes } from 'storybook/theming';\n\naddons.setConfig({\n enable"
},
{
"path": "apps/storybook/.storybook/preview.css",
"chars": 842,
"preview": "@import '@radix-ui/colors/gray.css';\n@import '@radix-ui/colors/blue.css';\n@import '@radix-ui/colors/green.css';\n@import "
},
{
"path": "apps/storybook/.storybook/preview.ts",
"chars": 399,
"preview": "import type { Preview } from '@storybook/react-webpack5';\nimport './preview.css';\n\nconst preview: Preview = {\n paramete"
},
{
"path": "apps/storybook/eslint.config.js",
"chars": 234,
"preview": "// @ts-check\nimport storybook from 'eslint-plugin-storybook';\nimport { configs } from '@repo/eslint-config/vite';\n\n/** @"
},
{
"path": "apps/storybook/index.d.ts",
"chars": 183,
"preview": "type CSSModuleClasses = { readonly [key: string]: string };\n\ndeclare module '*.module.css' {\n const classes: CSSModuleC"
},
{
"path": "apps/storybook/package.json",
"chars": 1094,
"preview": "{\n \"name\": \"@repo/storybook\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"lint\": \""
},
{
"path": "apps/storybook/stories/accessible-icon.stories.tsx",
"chars": 667,
"preview": "import { AccessibleIcon } from 'radix-ui';\n\nexport default { title: 'Utilities/AccessibleIcon' };\n\nexport const Styled ="
},
{
"path": "apps/storybook/stories/accordion.stories.module.css",
"chars": 2691,
"preview": ".root {\n font-family: sans-serif;\n &[data-orientation='horizontal'] {\n display: flex;\n max-width: 40em;\n heig"
},
{
"path": "apps/storybook/stories/accordion.stories.tsx",
"chars": 34253,
"preview": "/* eslint-disable jsx-a11y/anchor-is-valid */\nimport * as React from 'react';\nimport { Accordion } from 'radix-ui';\nimpo"
},
{
"path": "apps/storybook/stories/alert-dialog.stories.module.css",
"chars": 1226,
"preview": ".trigger {\n}\n\n.overlay,\n.overlayAttr {\n /* ensures overlay is positionned correctly */\n position: fixed;\n inset: 0;\n "
},
{
"path": "apps/storybook/stories/alert-dialog.stories.tsx",
"chars": 11603,
"preview": "import * as React from 'react';\nimport { AlertDialog } from 'radix-ui';\nimport styles from './alert-dialog.stories.modul"
},
{
"path": "apps/storybook/stories/arrow.stories.tsx",
"chars": 898,
"preview": "import { Arrow } from 'radix-ui/internal';\n\nexport default { title: 'Utilities/Arrow' };\n\nconst RECOMMENDED_CSS__ARROW__"
},
{
"path": "apps/storybook/stories/aspect-ratio.stories.module.css",
"chars": 135,
"preview": ".root {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--red-9);\n color: va"
},
{
"path": "apps/storybook/stories/aspect-ratio.stories.tsx",
"chars": 1942,
"preview": "import { AspectRatio } from 'radix-ui';\nimport styles from './aspect-ratio.stories.module.css';\n\nexport default { title:"
},
{
"path": "apps/storybook/stories/avatar.stories.module.css",
"chars": 711,
"preview": ".root {\n /* ensures image/fallback is centered */\n display: inline-flex;\n align-items: center;\n justify-content: cen"
},
{
"path": "apps/storybook/stories/avatar.stories.tsx",
"chars": 3838,
"preview": "import { Avatar } from 'radix-ui';\nimport styles from './avatar.stories.module.css';\nimport React from 'react';\n\nexport "
},
{
"path": "apps/storybook/stories/checkbox.stories.module.css",
"chars": 1510,
"preview": ".root {\n /* better default alignment */\n vertical-align: middle;\n /* ------ */\n border: 1px solid var(--gray-4);\n w"
},
{
"path": "apps/storybook/stories/checkbox.stories.tsx",
"chars": 13125,
"preview": "/* eslint-disable react/jsx-pascal-case */\nimport * as React from 'react';\nimport { Checkbox, Label as LabelPrimitive } "
},
{
"path": "apps/storybook/stories/collapsible.stories.module.css",
"chars": 2177,
"preview": ".root {\n max-width: 20em;\n font-family: sans-serif;\n}\n\n.trigger {\n /* because it's a button, we want to stretch it */"
},
{
"path": "apps/storybook/stories/collapsible.stories.tsx",
"chars": 4423,
"preview": "import * as React from 'react';\nimport { Collapsible } from 'radix-ui';\nimport styles from './collapsible.stories.module"
},
{
"path": "apps/storybook/stories/collection.stories.tsx",
"chars": 3953,
"preview": "import * as React from 'react';\nimport { Collection as CollectionPrimitive } from 'radix-ui/internal';\n\nconst { createCo"
},
{
"path": "apps/storybook/stories/context-menu.stories.module.css",
"chars": 1885,
"preview": ".trigger {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 200px;\n height: 100px;\n border:"
},
{
"path": "apps/storybook/stories/context-menu.stories.tsx",
"chars": 30501,
"preview": "import * as React from 'react';\nimport { ContextMenu } from 'radix-ui';\nimport { foodGroups } from '@repo/test-data/food"
},
{
"path": "apps/storybook/stories/dialog.stories.module.css",
"chars": 2036,
"preview": ".trigger {\n}\n\n.overlay {\n /* ensures overlay is positioned correctly */\n position: fixed;\n inset: 0;\n /* ------ */\n "
},
{
"path": "apps/storybook/stories/dialog.stories.tsx",
"chars": 18796,
"preview": "import * as React from 'react';\nimport { Dialog } from 'radix-ui';\nimport styles from './dialog.stories.module.css';\n\nex"
},
{
"path": "apps/storybook/stories/dismissable-layer.stories.tsx",
"chars": 22920,
"preview": "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { Portal, Slot } from 'radix-ui';\ni"
},
{
"path": "apps/storybook/stories/dropdown-menu.stories.module.css",
"chars": 3212,
"preview": ".trigger {\n border: 1px solid $black;\n border-radius: 6px;\n background-color: transparent;\n padding: 5px 10px;\n fon"
},
{
"path": "apps/storybook/stories/dropdown-menu.stories.tsx",
"chars": 66601,
"preview": "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { Dialog, DropdownMenu, Tooltip } f"
},
{
"path": "apps/storybook/stories/focus-scope.stories.tsx",
"chars": 8105,
"preview": "import React from 'react';\nimport { FocusScope } from 'radix-ui/internal';\n\nexport default { title: 'Utilities/FocusScop"
},
{
"path": "apps/storybook/stories/form.stories.module.css",
"chars": 176,
"preview": ".form {\n & [data-invalid] {\n color: var(--red-9);\n outline-color: currentColor;\n }\n & [data-valid] {\n color:"
},
{
"path": "apps/storybook/stories/form.stories.tsx",
"chars": 6160,
"preview": "import * as React from 'react';\nimport { Form } from 'radix-ui';\nimport styles from './form.stories.module.css';\n\nexport"
},
{
"path": "apps/storybook/stories/hover-card.stories.module.css",
"chars": 1441,
"preview": ".content {\n transform-origin: var(--radix-hover-card-content-transform-origin);\n /* ----- */\n background-color: var(-"
},
{
"path": "apps/storybook/stories/hover-card.stories.tsx",
"chars": 27476,
"preview": "import * as React from 'react';\nimport { Dialog, HoverCard } from 'radix-ui';\nimport { Popper } from 'radix-ui/internal'"
},
{
"path": "apps/storybook/stories/label.stories.module.css",
"chars": 484,
"preview": ".root {\n /* ensures it can receive vertical margins */\n display: inline-block;\n /* better default alignment */\n vert"
},
{
"path": "apps/storybook/stories/label.stories.tsx",
"chars": 905,
"preview": "import { Label as LabelPrimitive } from 'radix-ui';\nimport styles from './label.stories.module.css';\n\nconst Label = Labe"
},
{
"path": "apps/storybook/stories/menu.stories.module.css",
"chars": 1765,
"preview": ".content {\n display: inline-block;\n box-sizing: border-box;\n min-width: 130px;\n background-color: var(--color-white)"
},
{
"path": "apps/storybook/stories/menu.stories.tsx",
"chars": 13634,
"preview": "import * as React from 'react';\nimport { Direction } from 'radix-ui';\nimport { Menu } from 'radix-ui/internal';\nimport {"
},
{
"path": "apps/storybook/stories/menubar.stories.module.css",
"chars": 2225,
"preview": ".root {\n border: 1px solid var(--gray-4);\n border-radius: 6px;\n padding: 2px;\n}\n\n.trigger {\n padding: 6px 16px;\n bo"
},
{
"path": "apps/storybook/stories/menubar.stories.tsx",
"chars": 34825,
"preview": "import * as React from 'react';\nimport { Menubar } from 'radix-ui';\nimport { foodGroups } from '@repo/test-data/foods';\n"
},
{
"path": "apps/storybook/stories/navigation-menu.stories.module.css",
"chars": 6791,
"preview": ".list {\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.borde"
},
{
"path": "apps/storybook/stories/navigation-menu.stories.tsx",
"chars": 19622,
"preview": "import * as React from 'react';\nimport { NavigationMenu, Direction } from 'radix-ui';\nimport styles from './navigation-m"
},
{
"path": "apps/storybook/stories/one-time-password-field.stories.module.css",
"chars": 1654,
"preview": ".viewport {\n display: flex;\n flex-direction: column;\n height: 100vh;\n width: 100vw;\n justify-content: center;\n ali"
},
{
"path": "apps/storybook/stories/one-time-password-field.stories.tsx",
"chars": 9729,
"preview": "import * as React from 'react';\nimport { unstable_OneTimePasswordField as OneTimePasswordField, Separator } from 'radix-"
},
{
"path": "apps/storybook/stories/password-toggle-field.stories.module.css",
"chars": 1116,
"preview": ".viewport {\n --easing: cubic-bezier(0.165, 0.84, 0.44, 1);\n display: flex;\n flex-direction: column;\n height: 100vh;\n"
},
{
"path": "apps/storybook/stories/password-toggle-field.stories.tsx",
"chars": 6162,
"preview": "import * as React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-webpack5';\nimport { useArgs } from"
},
{
"path": "apps/storybook/stories/popover.stories.module.css",
"chars": 1414,
"preview": ".trigger {\n}\n\n.content {\n transform-origin: var(--radix-popover-content-transform-origin);\n background-color: var(--co"
},
{
"path": "apps/storybook/stories/popover.stories.tsx",
"chars": 22006,
"preview": "import * as React from 'react';\nimport { Popover } from 'radix-ui';\nimport { Popper } from 'radix-ui/internal';\nimport s"
},
{
"path": "apps/storybook/stories/popper.stories.module.css",
"chars": 774,
"preview": ".content {\n transform-origin: var(--radix-popper-transform-origin);\n background-color: var(--color-gray100);\n padding"
},
{
"path": "apps/storybook/stories/popper.stories.tsx",
"chars": 15826,
"preview": "import * as React from 'react';\nimport { Portal } from 'radix-ui';\nimport { Popper } from 'radix-ui/internal';\nimport st"
},
{
"path": "apps/storybook/stories/portal.stories.tsx",
"chars": 4464,
"preview": "import * as React from 'react';\nimport { Portal } from 'radix-ui';\n\nexport default { title: 'Utilities/Portal' };\n\nexpor"
},
{
"path": "apps/storybook/stories/presence.stories.module.css",
"chars": 1269,
"preview": "@keyframes presence-fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes presence-fadeOut {\n "
},
{
"path": "apps/storybook/stories/presence.stories.tsx",
"chars": 3062,
"preview": "import * as React from 'react';\nimport { Presence } from 'radix-ui/internal';\nimport styles from './presence.stories.mod"
},
{
"path": "apps/storybook/stories/progress.stories.module.css",
"chars": 958,
"preview": ".root {\n width: 400px;\n height: 20px;\n max-width: 100%;\n border: 5px solid var(--gray-12);\n background-color: var(-"
},
{
"path": "apps/storybook/stories/progress.stories.tsx",
"chars": 3764,
"preview": "import * as React from 'react';\nimport { Progress } from 'radix-ui';\nimport styles from './progress.stories.module.css';"
},
{
"path": "apps/storybook/stories/radio-group.stories.module.css",
"chars": 1558,
"preview": ".root {\n}\n\n.item {\n vertical-align: middle;\n width: 30px;\n height: 30px;\n display: inline-grid;\n padding: 0;\n plac"
},
{
"path": "apps/storybook/stories/radio-group.stories.tsx",
"chars": 16085,
"preview": "import * as React from 'react';\nimport { Direction, Label as LabelPrimitive, RadioGroup } from 'radix-ui';\nimport styles"
},
{
"path": "apps/storybook/stories/roving-focus-group.stories.tsx",
"chars": 6466,
"preview": "import * as React from 'react';\nimport { composeEventHandlers, RovingFocus } from 'radix-ui/internal';\n\ntype RovingFocus"
},
{
"path": "apps/storybook/stories/scroll-area.stories.module.css",
"chars": 1982,
"preview": ".root,\n:global(:root) {\n --scroll-area-scrollbar-size: 8px;\n}\n\n.scrollArea {\n width: 100%;\n height: 100%;\n border: 1"
},
{
"path": "apps/storybook/stories/scroll-area.stories.tsx",
"chars": 13955,
"preview": "import * as React from 'react';\nimport { Direction, ScrollArea } from 'radix-ui';\nimport styles from './scroll-area.stor"
},
{
"path": "apps/storybook/stories/select.stories.module.css",
"chars": 2366,
"preview": ".trigger {\n display: flex;\n align-items: center;\n gap: 5px;\n border: 1px solid var(--color-black);\n border-radius: "
},
{
"path": "apps/storybook/stories/select.stories.tsx",
"chars": 40977,
"preview": "import * as React from 'react';\nimport { Dialog, Select, Label as LabelPrimitive } from 'radix-ui';\nimport { foodGroups "
},
{
"path": "apps/storybook/stories/separator.stories.module.css",
"chars": 255,
"preview": ".root {\n border: none;\n background-color: var(--color-red);\n\n &[data-orientation='horizontal'] {\n height: 1px;\n "
},
{
"path": "apps/storybook/stories/separator.stories.tsx",
"chars": 1051,
"preview": "import { Separator } from 'radix-ui';\nimport styles from './separator.stories.module.css';\n\nexport default { title: 'Com"
},
{
"path": "apps/storybook/stories/slider.stories.module.css",
"chars": 1965,
"preview": ".root,\n.rootAttr {\n position: relative;\n display: flex;\n align-items: center;\n flex-shrink: 0;\n /* ensures no selec"
},
{
"path": "apps/storybook/stories/slider.stories.tsx",
"chars": 17628,
"preview": "import * as React from 'react';\nimport { Direction, Slider } from 'radix-ui';\nimport serialize from 'form-serialize';\nim"
},
{
"path": "apps/storybook/stories/slot.stories.tsx",
"chars": 9844,
"preview": "import * as React from 'react';\nimport { Slot } from 'radix-ui';\nimport type { Meta, StoryObj } from '@storybook/react-w"
},
{
"path": "apps/storybook/stories/switch.stories.module.css",
"chars": 1870,
"preview": ".root,\n:global(:root) {\n --_switch-width: 50px;\n --_switch-thumb-width: 20px;\n --_switch-gap: 4px;\n}\n\n.root {\n /* be"
},
{
"path": "apps/storybook/stories/switch.stories.tsx",
"chars": 3947,
"preview": "import * as React from 'react';\nimport { Label as LabelPrimitive, Switch } from 'radix-ui';\nimport styles from './switch"
},
{
"path": "apps/storybook/stories/tabs.stories.module.css",
"chars": 2220,
"preview": ".root {\n /* ensures things are layed out correctly by default */\n display: flex;\n &[data-orientation='horizontal'] {\n"
},
{
"path": "apps/storybook/stories/tabs.stories.tsx",
"chars": 14567,
"preview": "import { Direction, Tabs } from 'radix-ui';\nimport styles from './tabs.stories.module.css';\n\nexport default { title: 'Co"
},
{
"path": "apps/storybook/stories/toast.stories.module.css",
"chars": 3627,
"preview": ".viewport,\n:global(:root) {\n --_viewport-padding: 10px;\n}\n\n.viewport {\n position: fixed;\n top: 50%;\n left: 50%;\n tr"
},
{
"path": "apps/storybook/stories/toast.stories.tsx",
"chars": 17414,
"preview": "import * as React from 'react';\nimport { Dialog, Toast } from 'radix-ui';\nimport styles from './toast.stories.module.css"
},
{
"path": "apps/storybook/stories/toggle-group.stories.module.css",
"chars": 826,
"preview": ".root {\n display: inline-flex;\n gap: 5px;\n padding: 5px;\n &[data-orientation='vertical'] {\n flex-direction: 'colu"
},
{
"path": "apps/storybook/stories/toggle-group.stories.tsx",
"chars": 9150,
"preview": "import * as React from 'react';\nimport { Direction, ToggleGroup } from 'radix-ui';\nimport styles from './toggle-group.st"
},
{
"path": "apps/storybook/stories/toggle.stories.module.css",
"chars": 624,
"preview": ".root {\n padding: 6px;\n line-height: 1;\n border: none;\n font-family: sans-serif;\n font-weight: bold;\n\n &:focus {\n "
},
{
"path": "apps/storybook/stories/toggle.stories.tsx",
"chars": 1339,
"preview": "import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport styles from './toggle.stories.module.css';\n\nex"
},
{
"path": "apps/storybook/stories/toolbar.stories.module.css",
"chars": 3186,
"preview": ".toolbar {\n /* ensures things are layed out correctly by default */\n display: flex;\n &[data-orientation='vertical'] {"
},
{
"path": "apps/storybook/stories/toolbar.stories.tsx",
"chars": 3254,
"preview": "import { Direction, DropdownMenu, Toggle, Toolbar } from 'radix-ui';\nimport styles from './toolbar.stories.module.css';\n"
},
{
"path": "apps/storybook/stories/tooltip.stories.module.css",
"chars": 1638,
"preview": ".positionButton {\n margin: 5px;\n border: 1px solid black;\n background: transparent;\n}\n\n.trigger {\n}\n\n.content {\n tra"
},
{
"path": "apps/storybook/stories/tooltip.stories.tsx",
"chars": 38551,
"preview": "import * as React from 'react';\nimport { Popper } from 'radix-ui/internal';\nimport { Dialog, Tooltip } from 'radix-ui';\n"
},
{
"path": "apps/storybook/stories/visually-hidden.stories.tsx",
"chars": 246,
"preview": "import { VisuallyHidden } from 'radix-ui';\n\nexport default { title: 'Utilities/VisuallyHidden' };\n\nexport const Basic = "
},
{
"path": "apps/storybook/tsconfig.json",
"chars": 102,
"preview": "{\n \"extends\": \"@repo/typescript-config/react-library.json\",\n \"include\": [\"stories\", \"index.d.ts\"]\n}\n"
},
{
"path": "context7.json",
"chars": 99,
"preview": "{\n \"url\": \"https://context7.com/radix-ui/primitives\",\n \"public_key\": \"pk_q7NnKuFFXMWA7WnmjMHQU\"\n}"
},
{
"path": "cypress/e2e/ContextMenu.cy.ts",
"chars": 9617,
"preview": "describe('ContextMenu', () => {\n describe('given submenu user', () => {\n beforeEach(() => {\n cy.visitStory('con"
},
{
"path": "cypress/e2e/Dialog.cy.ts",
"chars": 6819,
"preview": "describe('Dialog', () => {\n beforeEach(() => {\n cy.visitStory('dialog--cypress');\n });\n\n function shouldBeOpen() {"
},
{
"path": "cypress/e2e/DropdownMenu.cy.ts",
"chars": 9053,
"preview": "describe('DropdownMenu', () => {\n describe('given submenu user', () => {\n beforeEach(() => {\n cy.visitStory('dr"
},
{
"path": "cypress/e2e/Form.cy.ts",
"chars": 7985,
"preview": "describe('Form', () => {\n before(() => {\n cy.visitStory('form--cypress');\n });\n\n beforeEach(() => {\n cy.findByT"
},
{
"path": "cypress/e2e/Menubar.cy.ts",
"chars": 10027,
"preview": "describe('Menubar', () => {\n beforeEach(() => {\n cy.visitStory('menubar--cypress');\n });\n\n describe('given a point"
},
{
"path": "cypress/e2e/Select.cy.ts",
"chars": 1070,
"preview": "describe('Select', () => {\n beforeEach(() => {\n cy.visitStory('select--cypress');\n });\n\n describe('given a select "
},
{
"path": "cypress/e2e/Toast.cy.ts",
"chars": 2596,
"preview": "describe('Toast', () => {\n beforeEach(() => {\n cy.visitStory('toast--cypress');\n });\n\n function buttonIsFocused(id"
},
{
"path": "cypress/support/commands.js",
"chars": 1163,
"preview": "// @ts-check\n/// <reference types=\"cypress\" />\n/// <reference types=\"./index.d.ts\" />\n\n// ******************************"
},
{
"path": "cypress/support/e2e.js",
"chars": 759,
"preview": "// ***********************************************************\n// This file is processed and\n// loaded automatically bef"
},
{
"path": "cypress/support/index.d.ts",
"chars": 363,
"preview": "declare namespace Cypress {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n interface Chainable<Subjec"
},
{
"path": "cypress/tsconfig.json",
"chars": 196,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"es5\", \"dom\"],\n \"types\": [\"cypress\", \"@testing-library/cypr"
},
{
"path": "cypress.config.ts",
"chars": 640,
"preview": "import { defineConfig } from 'cypress';\n\nexport default defineConfig({\n viewportWidth: 1024,\n viewportHeight: 768,\n f"
},
{
"path": "eslint.config.mjs",
"chars": 1057,
"preview": "// @ts-check\nimport * as react from '@chance/eslint/react';\nimport * as js from '@chance/eslint';\nimport * as typescript"
},
{
"path": "internal/builder/builder.js",
"chars": 2339,
"preview": "// @ts-check\nimport path from 'node:path';\nimport fs from 'node:fs';\nimport * as esbuild from 'esbuild';\nimport * as tsu"
},
{
"path": "internal/builder/eslint.config.js",
"chars": 85,
"preview": "// @ts-check\nimport { configs } from '@repo/eslint-config';\n\nexport default configs;\n"
},
{
"path": "internal/builder/package.json",
"chars": 448,
"preview": "{\n \"name\": \"@repo/builder\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"main\": "
},
{
"path": "internal/builder/radix-build.js",
"chars": 386,
"preview": "#!/usr/bin/env node\n// @ts-check\nimport path from 'node:path';\nimport { build } from './builder.js';\n\nprocess.on('unhand"
},
{
"path": "internal/builder/tsconfig.json",
"chars": 203,
"preview": "{\n \"extends\": \"@repo/typescript-config/base.json\",\n \"compilerOptions\": {\n \"rootDir\": \".\",\n \"allowJs\": true,\n "
},
{
"path": "internal/eslint-config/eslint.config.js",
"chars": 75,
"preview": "// @ts-check\nimport { configs } from './index.js';\nexport default configs;\n"
},
{
"path": "internal/eslint-config/index.js",
"chars": 559,
"preview": "// @ts-check\nimport * as eslintJs from '@chance/eslint';\nimport * as typescript from '@chance/eslint/typescript';\nimport"
},
{
"path": "internal/eslint-config/package.json",
"chars": 567,
"preview": "{\n \"name\": \"@repo/eslint-config\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"m"
},
{
"path": "internal/eslint-config/react-package.js",
"chars": 599,
"preview": "// @ts-check\nimport * as react from '@chance/eslint/react';\nimport * as base from './index.js';\n\n/** @type {import(\"esli"
},
{
"path": "internal/eslint-config/tsconfig.json",
"chars": 205,
"preview": "{\n \"extends\": \"@repo/typescript-config/base.json\",\n \"compilerOptions\": {\n \"rootDir\": \".\",\n \"outDir\": \"dist\",\n "
},
{
"path": "internal/eslint-config/vite.js",
"chars": 491,
"preview": "// @ts-check\nimport * as react from '@chance/eslint/react';\nimport reactRefresh from 'eslint-plugin-react-refresh';\nimpo"
},
{
"path": "internal/test-data/eslint.config.js",
"chars": 85,
"preview": "// @ts-check\nimport { configs } from '@repo/eslint-config';\n\nexport default configs;\n"
},
{
"path": "internal/test-data/foods.ts",
"chars": 1116,
"preview": "export const foodGroups: Array<{\n label?: string;\n foods: Array<{ value: string; label: string; disabled?: boolean }>;"
},
{
"path": "internal/test-data/package.json",
"chars": 416,
"preview": "{\n \"name\": \"@repo/test-data\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"license\": \"MIT\",\n \"type\": \"module\",\n \"devDe"
},
{
"path": "internal/test-data/tsconfig.json",
"chars": 184,
"preview": "{\n \"extends\": \"@repo/typescript-config/base.json\",\n \"compilerOptions\": {\n \"rootDir\": \".\",\n \"outDir\": \"dist\"\n },"
},
{
"path": "internal/typescript-config/base.json",
"chars": 500,
"preview": "{\n \"$schema\": \"https://json.schemastore.org/tsconfig\",\n \"compilerOptions\": {\n \"declaration\": true,\n \"declaration"
},
{
"path": "internal/typescript-config/nextjs.json",
"chars": 272,
"preview": "{\n \"$schema\": \"https://json.schemastore.org/tsconfig\",\n \"extends\": \"./base.json\",\n \"compilerOptions\": {\n \"plugins\""
},
{
"path": "internal/typescript-config/package.json",
"chars": 101,
"preview": "{\n \"name\": \"@repo/typescript-config\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"license\": \"MIT\"\n}\n"
},
{
"path": "internal/typescript-config/react-library/index.d.ts",
"chars": 293,
"preview": "/// <reference types=\"node\" />\n/// <reference types=\"@testing-library/react\" />\n/// <reference types=\"vitest-axe/extend-"
},
{
"path": "internal/typescript-config/react-library.json",
"chars": 195,
"preview": "{\n \"$schema\": \"https://json.schemastore.org/tsconfig\",\n \"extends\": \"./base.json\",\n \"compilerOptions\": {\n \"jsx\": \"r"
},
{
"path": "internal/typescript-config/vite-app.json",
"chars": 292,
"preview": "{\n \"$schema\": \"https://json.schemastore.org/tsconfig\",\n \"extends\": \"./base.json\",\n \"compilerOptions\": {\n \"allowImp"
},
{
"path": "internal/typescript-config/vite-node.json",
"chars": 254,
"preview": "{\n \"$schema\": \"https://json.schemastore.org/tsconfig\",\n \"extends\": \"./base.json\",\n \"compilerOptions\": {\n \"allowImp"
},
{
"path": "package.json",
"chars": 2857,
"preview": "{\n \"private\": true,\n \"name\": \"primitives\",\n \"version\": \"0.1.0\",\n \"license\": \"MIT\",\n \"scripts\": {\n \"lint\": \"pnpm "
},
{
"path": "packages/core/number/README.md",
"chars": 72,
"preview": "# `number`\n\nThis is an internal utility, not intended for public usage.\n"
},
{
"path": "packages/core/number/eslint.config.mjs",
"chars": 99,
"preview": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
},
{
"path": "packages/core/number/package.json",
"chars": 1247,
"preview": "{\n \"name\": \"@radix-ui/number\",\n \"version\": \"1.1.1\",\n \"license\": \"MIT\",\n \"source\": \"./src/index.ts\",\n \"main\": \"./src"
},
{
"path": "packages/core/number/src/index.ts",
"chars": 34,
"preview": "export { clamp } from './number';\n"
},
{
"path": "packages/core/number/src/number.ts",
"chars": 137,
"preview": "function clamp(value: number, [min, max]: [number, number]): number {\n return Math.min(max, Math.max(min, value));\n}\n\ne"
},
{
"path": "packages/core/number/tsconfig.json",
"chars": 228,
"preview": "{\n \"extends\": \"@repo/typescript-config/react-library.json\",\n \"compilerOptions\": {\n \"outDir\": \"dist\",\n \"types\": ["
},
{
"path": "packages/core/primitive/CHANGELOG.md",
"chars": 64,
"preview": "# @radix-ui/primitive\n\n## 1.1.3\n\n- Added internal DOM utilities\n"
},
{
"path": "packages/core/primitive/README.md",
"chars": 75,
"preview": "# `primitive`\n\nThis is an internal utility, not intended for public usage.\n"
},
{
"path": "packages/core/primitive/eslint.config.mjs",
"chars": 227,
"preview": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\n/** @type {import(\"eslint\").Linter.Config[]} "
},
{
"path": "packages/core/primitive/package.json",
"chars": 1250,
"preview": "{\n \"name\": \"@radix-ui/primitive\",\n \"version\": \"1.1.3\",\n \"license\": \"MIT\",\n \"source\": \"./src/index.ts\",\n \"main\": \"./"
}
]
// ... and 449 more files (download for full content)
About this extraction
This page contains the full source code of the radix-ui/primitives GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 649 files (1.8 MB), approximately 470.8k tokens, and a symbol index with 1583 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.