├── .changeset ├── README.md ├── changelog.cjs └── config.json ├── .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 ├── 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 │ ├── public │ │ └── favicon.ico │ └── tsconfig.json └── storybook │ ├── .gitignore │ ├── .storybook │ ├── main.ts │ ├── manager-head.html │ ├── manager.ts │ ├── preview.css │ └── preview.ts │ ├── eslint.config.js │ ├── index.d.ts │ ├── package.json │ ├── public │ ├── favicon-white.svg │ └── favicon.png │ ├── 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 ├── cypress.config.ts ├── 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 ├── 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.json │ ├── react-library │ └── index.d.ts │ ├── 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 │ │ ├── README.md │ │ ├── eslint.config.mjs │ │ ├── package.json │ │ ├── src │ │ │ ├── index.ts │ │ │ └── primitive.tsx │ │ └── 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-menu │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── context-menu.tsx │ │ └── index.ts │ └── tsconfig.json │ ├── context │ ├── README.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── create-context.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 │ ├── 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-group │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── toggle-group.test.tsx │ │ └── toggle-group.tsx │ └── tsconfig.json │ ├── toggle │ ├── CHANGELOG.md │ ├── README.md │ ├── eslint.config.mjs │ ├── package.json │ ├── src │ │ ├── index.ts │ │ ├── toggle.test.tsx │ │ └── toggle.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-lock.yaml ├── pnpm-workspace.yaml ├── primitives.png ├── release-process.md ├── scripts └── setup-tests.ts ├── types ├── global.d.ts └── index.d.ts └── vitest.config.mts /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json", 3 | "changelog": "./changelog.cjs", 4 | "access": "public", 5 | "commit": false, 6 | "fixed": [], 7 | "linked": [], 8 | "baseBranch": "main", 9 | "updateInternalDependencies": "patch", 10 | "snapshot": { 11 | "useCalculatedVersion": true, 12 | "prereleaseTemplate": "rc.{timestamp}" 13 | }, 14 | "ignore": ["@repo/ssr-testing", "@repo/storybook"] 15 | } 16 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | max_line_length = 80 10 | tab_width = 2 11 | trim_trailing_whitespace = true 12 | 13 | [Makefile] 14 | indent_style = tab 15 | tab_width = 4 16 | 17 | [{*.md,*.mdx}] 18 | trim_trailing_whitespace = false 19 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Add the following users as reviewers on new pull requests 2 | 3 | - @lucasmotta @hadihallak @chaance 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Bug report' 3 | about: 'Create a bug report' 4 | --- 5 | 6 | ## Bug report 7 | 8 | ### Current Behavior 9 | 10 | 11 | 12 | ### Expected behavior 13 | 14 | 15 | 16 | ### Reproducible example 17 | 18 | [CodeSandbox Template](https://codesandbox.io/s/2r30e) 19 | 20 | ### Suggested solution 21 | 22 | 23 | 24 | ### Additional context 25 | 26 | 27 | 28 | ### Your environment 29 | 30 | 31 | 32 | | Software | Name(s) | Version | 33 | | ---------------- | ------- | ------- | 34 | | Radix Package(s) | | | 35 | | React | n/a | | 36 | | Browser | | | 37 | | Assistive tech | | | 38 | | Node | n/a | | 39 | | npm/yarn/pnpm | | | 40 | | Operating System | | | 41 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Documentation.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Documentation' 3 | about: 'Suggestions for Radix documentation' 4 | --- 5 | 6 | ## Documentation 7 | 8 | ### Relevant Radix Component(s) 9 | 10 | 11 | 12 | ### Examples from other doc sites 13 | 14 | 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Feature request' 3 | about: 'Suggest an idea for a feature or a new component' 4 | --- 5 | 6 | ## Feature request 7 | 8 | ### Overview 9 | 10 | 11 | 12 | ### Examples in other libraries 13 | 14 | 15 | 16 | ### Who does this impact? Who is this for? 17 | 18 | 19 | 20 | ### Additional context 21 | 22 | 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Question.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Question' 3 | about: 'For usage questions, please use Stack Overflow or use GitHub Discussions' 4 | --- 5 | 6 | ## Question 7 | 8 | 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! 9 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 11 | 12 | ### Description 13 | 14 | 15 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | 8 | concurrency: 9 | group: ${{ github.workflow }}-${{ github.ref }} 10 | cancel-in-progress: true 11 | 12 | jobs: 13 | test: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout 17 | uses: actions/checkout@v4 18 | 19 | - name: Setup pnpm 20 | uses: pnpm/action-setup@v4 21 | with: 22 | run_install: false 23 | 24 | - name: Setup Node 25 | uses: actions/setup-node@v4 26 | with: 27 | node-version-file: '.nvmrc' 28 | cache: 'pnpm' 29 | 30 | - name: Install dependencies 31 | run: pnpm install --frozen-lockfile 32 | 33 | - name: Lint 34 | run: pnpm lint 35 | 36 | - name: Run build 37 | run: pnpm build 38 | 39 | - name: Run tests 40 | run: pnpm test:ci 41 | -------------------------------------------------------------------------------- /.github/workflows/chromatic.yml: -------------------------------------------------------------------------------- 1 | name: 'Chromatic' 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | # "You must append a colon (:) to all events, including events without configuration." 8 | # https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#example-using-multiple-events-with-activity-types-or-configuration 9 | pull_request: 10 | 11 | concurrency: 12 | group: ${{ github.workflow }}-${{ github.ref }} 13 | cancel-in-progress: true 14 | 15 | jobs: 16 | chromatic-deployment: 17 | runs-on: ubuntu-latest 18 | steps: 19 | - name: Checkout 20 | uses: actions/checkout@v4 21 | with: 22 | fetch-depth: 0 23 | 24 | - name: Setup pnpm 25 | uses: pnpm/action-setup@v4 26 | with: 27 | run_install: false 28 | 29 | - name: Setup Node 30 | uses: actions/setup-node@v4 31 | with: 32 | node-version-file: '.nvmrc' 33 | cache: 'pnpm' 34 | 35 | - name: Install dependencies 36 | run: pnpm install --frozen-lockfile 37 | 38 | - name: Publish to Chromatic 39 | uses: chromaui/action@v1 40 | with: 41 | token: ${{ secrets.GITHUB_TOKEN }} 42 | projectToken: 63f2bd83c33c 43 | exitOnceUploaded: true 44 | exitZeroOnChanges: true 45 | -------------------------------------------------------------------------------- /.github/workflows/publish-snapshot.yml: -------------------------------------------------------------------------------- 1 | name: 'Publish Snapshot Release' 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths-ignore: 8 | # - '.github/**' 9 | - '**/package.json' 10 | 11 | env: 12 | NPM_TOKEN: ${{ secrets.NPM_AUTOMATION_FROM_CHANCE }} 13 | 14 | concurrency: ${{ github.workflow }}-${{ github.ref }} 15 | 16 | jobs: 17 | publish-snapshot: 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout 21 | uses: actions/checkout@v4 22 | 23 | - name: Setup pnpm 24 | uses: pnpm/action-setup@v4 25 | with: 26 | run_install: false 27 | 28 | - name: Setup Node 29 | uses: actions/setup-node@v4 30 | with: 31 | node-version-file: '.nvmrc' 32 | registry-url: 'https://registry.npmjs.org' 33 | cache: 'pnpm' 34 | 35 | - name: Install dependencies 36 | run: pnpm install --frozen-lockfile 37 | 38 | - name: Build packages 39 | run: pnpm build 40 | 41 | - name: Write .npmrc 42 | run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc 43 | 44 | - name: Update snapshot version 45 | run: pnpm run bump:next 46 | 47 | - name: Publish snapshot 48 | run: pnpm run release:next --no-git-checks 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log* 2 | .DS_Store 3 | node_modules 4 | dist 5 | test-output.* 6 | .cache 7 | storybook-static 8 | .env 9 | .eslintcache 10 | .pnp 11 | .pnp.js 12 | *.pem 13 | .npmrc 14 | 15 | # Testing 16 | cypress/videos 17 | cypress/screenshots 18 | 19 | # Editor-specific 20 | .vscode 21 | .idea 22 | 23 | # So devs can maintain their own todo lists in the project 24 | TODO.md 25 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 22 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules 3 | .yarn 4 | dist 5 | storybook-static 6 | .pnp 7 | .pnp.js 8 | coverage 9 | pnpm-lock.yaml 10 | package-lock.json 11 | yarn.lock 12 | *.log* 13 | .DS_Store 14 | *.pem 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 WorkOS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /apps/ssr-testing/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | *.log* 24 | 25 | # local env files 26 | .env.local 27 | .env.development.local 28 | .env.test.local 29 | .env.production.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /apps/ssr-testing/README.md: -------------------------------------------------------------------------------- 1 | # `@repo/ssr-testing` 2 | 3 | This is a testing playground for SSR support in our primitives using a [Next.js](https://nextjs.org/) project. 4 | 5 | ## Getting Started 6 | 7 | From the root of the repo, run the development server: 8 | 9 | ```sh 10 | pnpm dev:ssr 11 | ``` 12 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/accessible-icon/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AccessibleIcon } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/alert-dialog/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AlertDialog } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | delete everything 8 | 9 | 10 | 11 | Are you sure? 12 | 13 | This will do a very dangerous thing. Thar be dragons! 14 | 15 | yolo, do it 16 | maybe not 17 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/avatar/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Avatar } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | A 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/checkbox/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Checkbox } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | [ ✔ ] 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/collapsible/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Collapsible } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Trigger 8 | Content 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/context-menu/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ContextMenu } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Right click here 8 | 9 | 10 | Undo 11 | Redo 12 | 13 | Cut 14 | Copy 15 | Paste 16 | 17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/dialog/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Dialog } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | open 8 | 9 | 10 | 11 | Title 12 | Description 13 | close 14 | 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/dropdown-menu/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { DropdownMenu } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Open 8 | 9 | 10 | Undo 11 | Redo 12 | 13 | Cut 14 | Copy 15 | Paste 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/form/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Form } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | 8 | Email 9 | 10 | Value is missing 11 | Email is invalid 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/hover-card/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { HoverCard } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Hover me 8 | 9 | 10 | 11 | Nicely done! 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/label/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Label } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return Label; 6 | } 7 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/menubar/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Menubar } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | 8 | Open 9 | 10 | 11 | Menu 12 | Item 1 13 | Item 2 14 | Item 3 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/navigation-menu/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { NavigationMenu } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | 8 | 9 | Nav Menu Item 1 10 | 11 | Link 12 | 13 | 14 | 15 | 16 | Nav Menu Item 2 17 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/one-time-password-field/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { unstable_OneTimePasswordField as OneTimePasswordField } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

With indices

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/page.tsx: -------------------------------------------------------------------------------- 1 | export default function Page() { 2 | return null; 3 | } 4 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/popover/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Popover } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | open 8 | 9 | 10 | close 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/portal/conditional-portal.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as React from 'react'; 4 | import { Portal } from 'radix-ui'; 5 | 6 | export const ConditionalPortal = () => { 7 | const [container, setContainer] = React.useState(null); 8 | const [open, setOpen] = React.useState(false); 9 | return ( 10 |
11 | 12 | 13 | {open && ( 14 | 15 | This content is rendered in a custom container 16 | 17 | )} 18 |
19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/portal/custom-portal-container.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as React from 'react'; 4 | import { Portal } from 'radix-ui'; 5 | 6 | export const CustomPortalContainer = () => { 7 | const [container, setContainer] = React.useState(null); 8 | return ( 9 |
10 | 11 | 12 | This content is rendered in a custom container 13 | 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/portal/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Portal } from 'radix-ui'; 3 | import { CustomPortalContainer } from './custom-portal-container'; 4 | import { ConditionalPortal } from './conditional-portal'; 5 | 6 | export default function Page() { 7 | return ( 8 |
9 |
17 |

This content is rendered in the main DOM tree

18 |

19 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos porro, est ex quia itaque 20 | facere fugit necessitatibus aut enim. Nisi rerum quae, repellat in perspiciatis explicabo 21 | laboriosam necessitatibus eius pariatur. 22 |

23 | 24 | 25 |

This content is rendered in a portal (another DOM tree)

26 |

27 | Because of the portal, it can appear in a different DOM tree from the main one (by 28 | default a new element inside the body), even though it is part of the same React tree. 29 |

30 | 31 |
32 | 33 |
34 | 35 | 36 |
37 | 38 |
39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/progress/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Progress } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Progress 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/radio-group/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Label, RadioGroup } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Favourite pet 8 | 9 | 10 | 11 | [ X ] 12 | 13 | Cat 14 | 15 |
16 | 17 | 18 | 19 | [ X ] 20 | 21 | Dog 22 | 23 |
24 | 25 | 26 | 27 | [ X ] 28 | 29 | Rabbit 30 | 31 |
32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/separator/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Separator } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ***; 6 | } 7 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/slider/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Slider } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 18 | 26 | 33 | 34 | 42 | 50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/slot/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Slot } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | I'm in a 8 | 9 | Slot!? 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/switch/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Switch } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Switch 8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/tabs/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Tabs } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | 8 | Tab 1 9 | Tab 2 10 | Tab 3 11 | 12 | 13 | Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos 14 | integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum 15 | pellentesque volutpat dictum ipsum. 16 | 17 | You'll never find me! 18 | 19 | Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor 20 | quam tempus pretium. 21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/toast/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Toast } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | 8 | Toast 9 | This is a toast message. 10 | Do something 11 | Close 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/toggle-group/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { ToggleGroup } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Item 1 8 | Item 2 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/toolbar/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Toolbar } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | Button 8 | *** 9 | Link 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/tooltip/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Tooltip } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 | 7 | 8 | Hover or Focus me 9 | 10 | 11 | Nicely done! 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /apps/ssr-testing/app/visually-hidden/page.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { VisuallyHidden } from 'radix-ui'; 3 | 4 | export default function Page() { 5 | return ( 6 |
7 | You won't see this: 8 | 🙈 9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /apps/ssr-testing/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. 6 | -------------------------------------------------------------------------------- /apps/ssr-testing/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | experimental: { 3 | externalDir: true, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /apps/ssr-testing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@repo/ssr-testing", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "next": "^15.3.1", 12 | "radix-ui": "workspace:*", 13 | "react": "^19.1.0", 14 | "react-dom": "^19.1.0" 15 | }, 16 | "devDependencies": { 17 | "@repo/eslint-config": "workspace:*", 18 | "@repo/typescript-config": "workspace:*", 19 | "@types/react": "^19.0.7", 20 | "@types/react-dom": "^19.0.3", 21 | "eslint": "^9.18.0", 22 | "typescript": "^5.7.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /apps/ssr-testing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/radix-ui/primitives/79304015e13a31bc465545fa1d20e743a0bce3c5/apps/ssr-testing/public/favicon.ico -------------------------------------------------------------------------------- /apps/ssr-testing/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/nextjs.json", 3 | "compilerOptions": { 4 | "incremental": true 5 | }, 6 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 7 | "exclude": ["node_modules"] 8 | } 9 | -------------------------------------------------------------------------------- /apps/storybook/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | *storybook.log 27 | -------------------------------------------------------------------------------- /apps/storybook/.storybook/main.ts: -------------------------------------------------------------------------------- 1 | import type { StorybookConfig } from '@storybook/react-webpack5'; 2 | 3 | const config: StorybookConfig = { 4 | stories: [ 5 | // 6 | '../stories/**/*.mdx', 7 | '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', 8 | ], 9 | addons: [ 10 | // 11 | '@storybook/addon-essentials', 12 | '@storybook/addon-storysource', 13 | '@storybook/addon-webpack5-compiler-swc', 14 | // '@chromatic-com/storybook', 15 | ], 16 | framework: { 17 | name: '@storybook/react-webpack5', 18 | options: { 19 | builder: {}, 20 | // enable React strict mode 21 | strictMode: true, 22 | }, 23 | }, 24 | 25 | swc: (config: any) => ({ 26 | ...config, 27 | jsc: { 28 | ...config?.jsc, 29 | transform: { 30 | ...config?.jsc?.transform, 31 | react: { 32 | // Do not require importing React into scope to use JSX 33 | runtime: 'automatic', 34 | }, 35 | }, 36 | }, 37 | }), 38 | }; 39 | export default config; 40 | -------------------------------------------------------------------------------- /apps/storybook/.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /apps/storybook/.storybook/manager.ts: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/manager-api'; 2 | import { themes } from '@storybook/theming'; 3 | 4 | addons.setConfig({ 5 | enableShortcuts: false, 6 | theme: themes.light, 7 | }); 8 | -------------------------------------------------------------------------------- /apps/storybook/.storybook/preview.css: -------------------------------------------------------------------------------- 1 | @import '@radix-ui/colors/gray.css'; 2 | @import '@radix-ui/colors/blue.css'; 3 | @import '@radix-ui/colors/green.css'; 4 | @import '@radix-ui/colors/red.css'; 5 | @import '@radix-ui/colors/purple.css'; 6 | @import '@radix-ui/colors/gray-dark.css'; 7 | @import '@radix-ui/colors/blue-dark.css'; 8 | @import '@radix-ui/colors/green-dark.css'; 9 | @import '@radix-ui/colors/red-dark.css'; 10 | @import '@radix-ui/colors/purple-dark.css'; 11 | 12 | * { 13 | box-sizing: border-box; 14 | } 15 | 16 | *::before, 17 | *::after { 18 | box-sizing: inherit; 19 | } 20 | 21 | [hidden] { 22 | display: none; 23 | } 24 | 25 | :root { 26 | --color-white: #fff; 27 | --color-gray100: #ccc; 28 | --color-gray300: #aaa; 29 | --color-black: #111; 30 | --color-red: crimson; 31 | --color-green: green; 32 | } 33 | 34 | body { 35 | font-family: 36 | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 37 | 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; 38 | } 39 | -------------------------------------------------------------------------------- /apps/storybook/.storybook/preview.ts: -------------------------------------------------------------------------------- 1 | import type { Preview } from '@storybook/react'; 2 | import './preview.css'; 3 | 4 | const preview: Preview = { 5 | parameters: { 6 | layout: 'fullscreen', 7 | options: { 8 | storySort: { 9 | order: ['Components', 'Utilities'], 10 | }, 11 | }, 12 | // disables Chromatic on a global level 13 | chromatic: { disable: true }, 14 | }, 15 | }; 16 | 17 | export default preview; 18 | -------------------------------------------------------------------------------- /apps/storybook/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/vite'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /apps/storybook/index.d.ts: -------------------------------------------------------------------------------- 1 | type CSSModuleClasses = { readonly [key: string]: string }; 2 | 3 | declare module '*.module.css' { 4 | const classes: CSSModuleClasses; 5 | export default classes; 6 | } 7 | 8 | declare module '*.css' {} 9 | -------------------------------------------------------------------------------- /apps/storybook/public/favicon-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /apps/storybook/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/radix-ui/primitives/79304015e13a31bc465545fa1d20e743a0bce3c5/apps/storybook/public/favicon.png -------------------------------------------------------------------------------- /apps/storybook/stories/accessible-icon.stories.tsx: -------------------------------------------------------------------------------- 1 | import { AccessibleIcon } from 'radix-ui'; 2 | 3 | export default { title: 'Utilities/AccessibleIcon' }; 4 | 5 | export const Styled = () => ( 6 | 11 | ); 12 | 13 | export const Chromatic = () => ( 14 |

15 | Some text with an inline accessible icon{' '} 16 | 17 | 18 | 19 |

20 | ); 21 | 22 | Chromatic.parameters = { chromatic: { disable: false } }; 23 | 24 | const CrossIcon = () => ( 25 | 26 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /apps/storybook/stories/arrow.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Arrow } from 'radix-ui/internal'; 2 | 3 | export default { title: 'Utilities/Arrow' }; 4 | 5 | const RECOMMENDED_CSS__ARROW__ROOT = { 6 | // better default alignment 7 | verticalAlign: 'middle', 8 | }; 9 | 10 | export const Styled = () => ( 11 | 12 | ); 13 | 14 | export const CustomSizes = () => ( 15 | <> 16 | 17 | 18 | 19 | 20 | ); 21 | 22 | export const CustomArrow = () => ( 23 | 24 |
33 | 34 | ); 35 | -------------------------------------------------------------------------------- /apps/storybook/stories/aspect-ratio.stories.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | background-color: var(--red-9); 6 | color: var(--gray-1); 7 | } 8 | -------------------------------------------------------------------------------- /apps/storybook/stories/avatar.stories.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | /* ensures image/fallback is centered */ 3 | display: inline-flex; 4 | align-items: center; 5 | justify-content: center; 6 | vertical-align: middle; 7 | /* ensures image doesn't bleed out */ 8 | overflow: hidden; 9 | /* ensures no selection is possible */ 10 | user-select: none; 11 | /* -------- */ 12 | border-radius: 9999px; 13 | width: 48px; 14 | height: 48px; 15 | } 16 | 17 | .image { 18 | /* ensures image is full size and not distorted */ 19 | width: 100%; 20 | height: 100%; 21 | object-fit: cover; 22 | } 23 | 24 | .fallback { 25 | /* ensures content inside the fallback is centered */ 26 | width: 100%; 27 | height: 100%; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | /* -------- */ 32 | background-color: var(--gray-12); 33 | color: var(--gray-1); 34 | } 35 | -------------------------------------------------------------------------------- /apps/storybook/stories/form.stories.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | & [data-invalid] { 3 | color: var(--red-9); 4 | outline-color: currentColor; 5 | } 6 | & [data-valid] { 7 | color: var(--green-9); 8 | outline-color: currentColor; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /apps/storybook/stories/label.stories.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | /* ensures it can receive vertical margins */ 3 | display: inline-block; 4 | /* better default alignment */ 5 | vertical-align: middle; 6 | /* mimics default `label` tag (as we render a `span`) */ 7 | cursor: default; 8 | display: inline-block; 9 | border: 1px solid var(--gray-5); 10 | padding: 10px; 11 | } 12 | 13 | .control { 14 | display: inline-flex; 15 | border: 1px solid var(--gray-5); 16 | padding: 10px; 17 | vertical-align: middle; 18 | margin: 0 10px; 19 | 20 | &:hover { 21 | background-color: var(--red-9); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /apps/storybook/stories/label.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Label as LabelPrimitive } from 'radix-ui'; 2 | import styles from './label.stories.module.css'; 3 | 4 | const Label = LabelPrimitive.Root; 5 | 6 | export default { title: 'Components/Label' }; 7 | 8 | export const Styled = () => ; 9 | 10 | export const WithControl = () => { 11 | return ( 12 | <> 13 |

Wrapping control

14 | 17 | 18 |

Referencing control

19 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export const WithInputNumber = (_props: any) => { 26 | return ( 27 | 31 | ); 32 | }; 33 | 34 | const Control = (props: any) => { 35 | return ( 36 | 39 | ); 40 | }; 41 | -------------------------------------------------------------------------------- /apps/storybook/stories/popper.stories.module.css: -------------------------------------------------------------------------------- 1 | .content { 2 | transform-origin: var(--radix-popper-transform-origin); 3 | background-color: var(--color-gray100); 4 | padding: 10px; 5 | border-radius: 10px; 6 | } 7 | 8 | .contentSmall { 9 | width: 100px; 10 | height: 50px; 11 | } 12 | 13 | .contentLarge { 14 | width: 300px; 15 | height: 150px; 16 | } 17 | 18 | .anchor { 19 | background-color: hotpink; 20 | } 21 | 22 | .anchorSmall { 23 | width: 50px; 24 | height: 50px; 25 | } 26 | 27 | .anchorLarge { 28 | width: 100px; 29 | height: 100px; 30 | } 31 | 32 | .arrow { 33 | fill: var(--color-gray100); 34 | } 35 | 36 | @keyframes popper-rotateIn { 37 | 0% { 38 | transform: scale(0) rotateZ(calc(var(--direction, 0) * 45deg)); 39 | } 40 | 100% { 41 | transform: scale(1); 42 | } 43 | } 44 | 45 | .animatedContent { 46 | &[data-side='top'] { 47 | --direction: 1; 48 | } 49 | &[data-side='bottom'] { 50 | --direction: -1; 51 | } 52 | animation: popper-rotateIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); 53 | } 54 | -------------------------------------------------------------------------------- /apps/storybook/stories/progress.stories.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | width: 400px; 3 | height: 20px; 4 | max-width: 100%; 5 | border: 5px solid var(--gray-12); 6 | background-color: var(--gray-3); 7 | } 8 | 9 | .indicator, 10 | .chromaticIndicatorClass { 11 | width: 0; 12 | height: 100%; 13 | background-color: var(--red-9); 14 | transition: background 150ms ease-out; 15 | &[data-state='indeterminate'] { 16 | background-color: var(--gray-8); 17 | } 18 | &[data-state='complete'] { 19 | background-color: var(--green-9); 20 | } 21 | &::before { 22 | content: attr(data-value); 23 | } 24 | &::after { 25 | content: attr(data-max); 26 | } 27 | } 28 | 29 | .rootAttr, 30 | .indicatorAttr { 31 | background-color: var(--blue-a12); 32 | border: 2px solid var(--blue-9); 33 | padding: 10px; 34 | 35 | &[data-state='loading'] { 36 | border-color: var(--red-9); 37 | } 38 | &[data-state='indeterminate'] { 39 | border-color: var(--purple-9); 40 | } 41 | &[data-state='complete'] { 42 | border-color: var(--green-9); 43 | } 44 | } 45 | 46 | .indicatorAttr { 47 | &::before { 48 | content: attr(data-value); 49 | } 50 | &::after { 51 | content: attr(data-max); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /apps/storybook/stories/separator.stories.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | border: none; 3 | background-color: var(--color-red); 4 | 5 | &[data-orientation='horizontal'] { 6 | height: 1px; 7 | width: 100%; 8 | margin: 20px 0; 9 | } 10 | 11 | &[data-orientation='vertical'] { 12 | height: 100px; 13 | width: 1px; 14 | margin: 0 20px; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /apps/storybook/stories/separator.stories.tsx: -------------------------------------------------------------------------------- 1 | import { Separator } from 'radix-ui'; 2 | import styles from './separator.stories.module.css'; 3 | 4 | export default { title: 'Components/Separator' }; 5 | 6 | export const Styled = () => ( 7 | <> 8 |

Horizontal

9 |

The following separator is horizontal and has semantic meaning.

10 | 11 |

12 | The following separator is horizontal and is purely decorative. Assistive technology will 13 | ignore this element. 14 |

15 | 16 | 17 |

Vertical

18 |
19 |

The following separator is vertical and has semantic meaning.

20 | 21 |

22 | The following separator is vertical and is purely decorative. Assistive technology will 23 | ignore this element. 24 |

25 | 26 |
27 | 28 | ); 29 | -------------------------------------------------------------------------------- /apps/storybook/stories/toggle-group.stories.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: inline-flex; 3 | gap: 5px; 4 | padding: 5px; 5 | &[data-orientation='vertical'] { 6 | flex-direction: 'column'; 7 | } 8 | } 9 | 10 | .item { 11 | border: 1px solid var(--color-black); 12 | border-radius: 6px; 13 | padding: 5px 10px; 14 | font-size: 13px; 15 | background-color: var(--color-white); 16 | color: var(--color-black); 17 | 18 | &:focus { 19 | outline: none; 20 | box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5); 21 | } 22 | 23 | &:disabled { 24 | opacity: 0.5; 25 | } 26 | 27 | &[data-state='on'] { 28 | background-color: var(--color-black); 29 | color: var(--color-white); 30 | } 31 | } 32 | 33 | .itemAttr { 34 | background-color: rgba(0, 0, 255, 0.3); 35 | border: 2px solid blue; 36 | padding: 10px; 37 | 38 | &[data-state='off'] { 39 | border-color: red; 40 | } 41 | &[data-state='on'] { 42 | border-color: green; 43 | } 44 | &[data-disabled] { 45 | border-style: dashed; 46 | } 47 | &:disabled { 48 | opacity: 0.5; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /apps/storybook/stories/toggle.stories.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | padding: 6px; 3 | line-height: 1; 4 | border: none; 5 | font-family: sans-serif; 6 | font-weight: bold; 7 | 8 | &:focus { 9 | outline: none; 10 | box-shadow: 0 0 0 2px var(--color-black); 11 | } 12 | 13 | &[data-disabled] { 14 | opacity: 0.5; 15 | } 16 | 17 | &[data-state='off'] { 18 | background-color: var(--color-red); 19 | color: var(--color-white); 20 | } 21 | 22 | &[data-state='on'] { 23 | background-color: var(--color-green); 24 | color: var(--color-white); 25 | } 26 | } 27 | 28 | .rootAttr { 29 | background-color: rgba(0, 0, 255, 0.3); 30 | border: 2px solid blue; 31 | padding: 10px; 32 | 33 | &:disabled { 34 | opacity: 0.5; 35 | } 36 | &[data-disabled] { 37 | border-style: dashed; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /apps/storybook/stories/visually-hidden.stories.tsx: -------------------------------------------------------------------------------- 1 | import { VisuallyHidden } from 'radix-ui'; 2 | 3 | export default { title: 'Utilities/VisuallyHidden' }; 4 | 5 | export const Basic = () => ( 6 | 10 | ); 11 | -------------------------------------------------------------------------------- /apps/storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "include": ["stories", "index.d.ts"] 4 | } 5 | -------------------------------------------------------------------------------- /cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress'; 2 | 3 | export default defineConfig({ 4 | viewportWidth: 1024, 5 | viewportHeight: 768, 6 | fixturesFolder: false, 7 | e2e: { 8 | // TODO There is a bug (I think) in Cypress that results in the page 9 | // navigating to `about:blank` after certain tests run. Unclear why at this 10 | // stage. This is a hack that seems to prevent it, but unclear why. Debug 11 | // and remove this config option. 12 | // Possibly related: https://github.com/cypress-io/cypress/issues/28527 13 | testIsolation: false, 14 | setupNodeEvents(on, config) {}, 15 | baseUrl: 'http://localhost:9009', 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /cypress/e2e/Select.cy.ts: -------------------------------------------------------------------------------- 1 | describe('Select', () => { 2 | beforeEach(() => { 3 | cy.visitStory('select--cypress'); 4 | }); 5 | 6 | describe('given a select inside a form', () => { 7 | it('should submit and react to changes', () => { 8 | // submit without change 9 | cy.findByText('buy').click(); 10 | cy.findByText(/t-shirt size/).should('include.text', 'size M'); 11 | 12 | // react to changes 13 | cy.findByLabelText(/choose a size/).click(); 14 | cy.findByRole('option', { name: /small/i }).click(); 15 | cy.findByText(/t-shirt size/).should('include.text', 'size S'); 16 | }); 17 | }); 18 | 19 | describe('given a select with no value', () => { 20 | it('should display the placeholder', () => { 21 | cy.findByText('…').should('exist'); 22 | }); 23 | 24 | it('can be reset to the placeholder', () => { 25 | cy.findByLabelText(/choose a model/).click(); 26 | cy.findByRole('option', { name: /model x/i }).click(); 27 | cy.findByText(/model y/i).should('not.exist'); 28 | cy.findByText(/model x/i).should('exist'); 29 | cy.findByText('unset').click(); 30 | cy.findByText('…').should('exist'); 31 | }); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | 27 | Cypress.Commands.add('visitStory', (storyName, options) => { 28 | return cy.visit(`iframe.html?id=components-${storyName}`, options); 29 | }); 30 | -------------------------------------------------------------------------------- /cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This file is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import '@testing-library/cypress/add-commands'; 18 | import 'cypress-real-events/support'; 19 | import './commands'; 20 | 21 | // Alternatively you can use CommonJS syntax: 22 | // require('./commands') 23 | -------------------------------------------------------------------------------- /cypress/support/index.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace Cypress { 2 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 3 | interface Chainable { 4 | visitStory(storyName: string, options?: Partial): Chainable; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /cypress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["es5", "dom"], 5 | "types": ["cypress", "@testing-library/cypress", "cypress-real-events"] 6 | }, 7 | "include": ["**/*.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import * as react from '@chance/eslint/react'; 3 | import * as js from '@chance/eslint'; 4 | import * as typescript from '@chance/eslint/typescript'; 5 | import { globals } from '@chance/eslint/globals'; 6 | import pluginCypress from 'eslint-plugin-cypress/flat'; 7 | 8 | /** @type {import("eslint").Linter.Config[]} */ 9 | export default [ 10 | { ...js.getConfig({ ...globals.node, ...globals.browser }) }, 11 | typescript.config, 12 | { 13 | ...react.config, 14 | rules: { 15 | ...react.rules, 16 | 'react/jsx-pascal-case': ['warn', { allowNamespace: true }], 17 | // TODO: enable this and fix all the errors 18 | 'react/display-name': 'off', 19 | 'prefer-const': ['warn', { destructuring: 'all' }], 20 | 'jsx-a11y/label-has-associated-control': [ 21 | 'warn', 22 | { 23 | controlComponents: ['Checkbox'], 24 | depth: 3, 25 | }, 26 | ], 27 | }, 28 | }, 29 | { ...pluginCypress.configs.recommended, files: ['cypress/**/*.{ts,js}'] }, 30 | { 31 | ignores: ['dist/**', '.next/**'], 32 | rules: { 33 | 'prefer-const': ['warn', { destructuring: 'all' }], 34 | }, 35 | }, 36 | ]; 37 | -------------------------------------------------------------------------------- /internal/builder/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /internal/builder/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@repo/builder", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "type": "module", 7 | "main": "./builder.js", 8 | "exports": { 9 | ".": "./builder.js" 10 | }, 11 | "bin": { 12 | "radix-build": "./radix-build.js" 13 | }, 14 | "dependencies": { 15 | "esbuild": "0.24.2", 16 | "tsup": "^8.3.6" 17 | }, 18 | "devDependencies": { 19 | "@repo/eslint-config": "workspace:*", 20 | "@repo/typescript-config": "workspace:*", 21 | "eslint": "^9.18.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /internal/builder/radix-build.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | // @ts-check 3 | import path from 'node:path'; 4 | import { build } from './builder.js'; 5 | 6 | process.on('unhandledRejection', (err) => { 7 | throw err; 8 | }); 9 | process.on('SIGINT', () => process.exit(0)); 10 | process.on('SIGTERM', () => process.exit(0)); 11 | 12 | const args = process.argv.slice(2); 13 | const relativePath = path.relative(process.cwd(), args[0] || '.'); 14 | 15 | await build(relativePath); 16 | -------------------------------------------------------------------------------- /internal/builder/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/base.json", 3 | "compilerOptions": { 4 | "rootDir": ".", 5 | "allowJs": true, 6 | "noEmit": true 7 | }, 8 | "include": ["**/*"], 9 | "exclude": ["node_modules", "dist"] 10 | } 11 | -------------------------------------------------------------------------------- /internal/eslint-config/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from './index.js'; 3 | export default configs; 4 | -------------------------------------------------------------------------------- /internal/eslint-config/index.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import * as eslintJs from '@chance/eslint'; 3 | import * as typescript from '@chance/eslint/typescript'; 4 | import { globals } from '@chance/eslint/globals'; 5 | 6 | export const js = eslintJs.getConfig({ ...globals.node, ...globals.browser }); 7 | export const ts = typescript.config; 8 | 9 | /** @type {import("eslint").Linter.Config} */ 10 | export const overrides = { 11 | ignores: ['dist/**', '.next/**'], 12 | rules: { 13 | 'prefer-const': ['warn', { destructuring: 'all' }], 14 | }, 15 | }; 16 | 17 | /** @type {import("eslint").Linter.Config[]} */ 18 | export const configs = [js, ts, overrides]; 19 | -------------------------------------------------------------------------------- /internal/eslint-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@repo/eslint-config", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "type": "module", 7 | "main": "./index.js", 8 | "exports": { 9 | ".": "./index.js", 10 | "./react-package": "./react-package.js", 11 | "./vite": "./vite.js" 12 | }, 13 | "scripts": { 14 | "lint": "eslint --max-warnings 0 ." 15 | }, 16 | "dependencies": { 17 | "@chance/eslint": "^1.1.0", 18 | "eslint-plugin-react-refresh": "^0.4.19", 19 | "eslint-plugin-storybook": "^0.11.2" 20 | }, 21 | "devDependencies": { 22 | "@repo/typescript-config": "workspace:*", 23 | "eslint": "^9.18.0" 24 | }, 25 | "peerDependencies": { 26 | "eslint": ">=9.18" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /internal/eslint-config/react-package.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import * as react from '@chance/eslint/react'; 3 | import storybook from 'eslint-plugin-storybook'; 4 | import * as base from './index.js'; 5 | 6 | /** @type {import("eslint").Linter.Config[]} */ 7 | export const configs = [ 8 | base.js, 9 | base.ts, 10 | react.config, 11 | base.overrides, 12 | { 13 | rules: { 14 | 'react/jsx-pascal-case': ['warn', { allowNamespace: true }], 15 | // TODO: enable this and fix all the errors 16 | 'react/display-name': 'off', 17 | 'jsx-a11y/label-has-associated-control': [ 18 | 'warn', 19 | { 20 | controlComponents: ['Checkbox'], 21 | depth: 3, 22 | }, 23 | ], 24 | }, 25 | }, 26 | ...storybook.configs['flat/recommended'], 27 | { ignores: ['**/dist/**'] }, 28 | ]; 29 | -------------------------------------------------------------------------------- /internal/eslint-config/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/base.json", 3 | "compilerOptions": { 4 | "rootDir": ".", 5 | "outDir": "dist", 6 | "allowJs": true 7 | }, 8 | "include": ["**/*"], 9 | "exclude": ["node_modules", "dist"] 10 | } 11 | -------------------------------------------------------------------------------- /internal/eslint-config/vite.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import * as react from '@chance/eslint/react'; 3 | import reactRefresh from 'eslint-plugin-react-refresh'; 4 | import * as base from './index.js'; 5 | 6 | /** @type {import("eslint").Linter.Config[]} */ 7 | export const configs = [ 8 | base.js, 9 | base.ts, 10 | react.config, 11 | base.overrides, 12 | { 13 | plugins: { 14 | 'react-refresh': reactRefresh, 15 | }, 16 | rules: { 17 | 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], 18 | }, 19 | }, 20 | { ignores: ['**/dist/**'] }, 21 | ]; 22 | -------------------------------------------------------------------------------- /internal/test-data/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /internal/test-data/foods.ts: -------------------------------------------------------------------------------- 1 | export const foodGroups: Array<{ 2 | label?: string; 3 | foods: Array<{ value: string; label: string; disabled?: boolean }>; 4 | }> = [ 5 | { 6 | label: 'Fruits', 7 | foods: [ 8 | { value: 'apple', label: 'Apple' }, 9 | { value: 'banana', label: 'Banana' }, 10 | { value: 'blueberry', label: 'Blueberry' }, 11 | { value: 'grapes', label: 'Grapes' }, 12 | { value: 'pineapple', label: 'Pineapple' }, 13 | ], 14 | }, 15 | { 16 | label: 'Vegetables', 17 | foods: [ 18 | { value: 'aubergine', label: 'Aubergine' }, 19 | { value: 'broccoli', label: 'Broccoli' }, 20 | { value: 'carrot', label: 'Carrot', disabled: true }, 21 | { value: 'courgette', label: 'Courgette' }, 22 | { value: 'leek', label: 'Leek' }, 23 | ], 24 | }, 25 | { 26 | label: 'Meat', 27 | foods: [ 28 | { value: 'beef', label: 'Beef' }, 29 | { value: 'beef-with-sauce', label: 'Beef with sauce' }, 30 | { value: 'chicken', label: 'Chicken' }, 31 | { value: 'lamb', label: 'Lamb' }, 32 | { value: 'pork', label: 'Pork' }, 33 | ], 34 | }, 35 | { 36 | foods: [ 37 | { value: 'candies', label: 'Candies' }, 38 | { value: 'chocolates', label: 'Chocolates' }, 39 | ], 40 | }, 41 | ]; 42 | -------------------------------------------------------------------------------- /internal/test-data/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@repo/test-data", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "type": "module", 7 | "devDependencies": { 8 | "@repo/eslint-config": "workspace:*", 9 | "@repo/typescript-config": "workspace:*", 10 | "eslint": "^9.18.0", 11 | "typescript": "^5.7.3" 12 | }, 13 | "exports": { 14 | "./*": "./*.ts" 15 | }, 16 | "scripts": { 17 | "lint": "eslint --max-warnings 0 .", 18 | "check-types": "tsc --noEmit" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /internal/test-data/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/base.json", 3 | "compilerOptions": { 4 | "rootDir": ".", 5 | "outDir": "dist" 6 | }, 7 | "include": ["**/*"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /internal/typescript-config/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "compilerOptions": { 4 | "declaration": true, 5 | "declarationMap": true, 6 | "esModuleInterop": true, 7 | "incremental": false, 8 | "isolatedModules": true, 9 | "lib": ["ES2023", "DOM", "DOM.Iterable"], 10 | "module": "NodeNext", 11 | "moduleDetection": "force", 12 | "moduleResolution": "NodeNext", 13 | "noUncheckedIndexedAccess": true, 14 | "resolveJsonModule": true, 15 | "skipLibCheck": true, 16 | "strict": true, 17 | "target": "ES2022" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /internal/typescript-config/nextjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "extends": "./base.json", 4 | "compilerOptions": { 5 | "plugins": [{ "name": "next" }], 6 | "module": "ESNext", 7 | "moduleResolution": "Bundler", 8 | "allowJs": true, 9 | "jsx": "preserve", 10 | "noEmit": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /internal/typescript-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@repo/typescript-config", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT" 6 | } 7 | -------------------------------------------------------------------------------- /internal/typescript-config/react-library.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "extends": "./base.json", 4 | "compilerOptions": { 5 | "jsx": "react-jsx", 6 | "module": "ESNext", 7 | "moduleResolution": "Bundler" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /internal/typescript-config/react-library/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | /// 5 | 6 | declare module '*.module.css' { 7 | const classes: { [key: string]: string }; 8 | export default classes; 9 | } 10 | -------------------------------------------------------------------------------- /internal/typescript-config/vite-app.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "extends": "./base.json", 4 | "compilerOptions": { 5 | "allowImportingTsExtensions": true, 6 | "module": "ESNext", 7 | "moduleResolution": "Bundler", 8 | "noEmit": true, 9 | "jsx": "react-jsx", 10 | "useDefineForClassFields": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /internal/typescript-config/vite-node.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "extends": "./base.json", 4 | "compilerOptions": { 5 | "allowImportingTsExtensions": true, 6 | "lib": ["ES2023"], 7 | "module": "ESNext", 8 | "moduleResolution": "Bundler", 9 | "noEmit": true 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/core/number/README.md: -------------------------------------------------------------------------------- 1 | # `number` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/core/number/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/core/number/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@radix-ui/number", 3 | "version": "1.1.1", 4 | "license": "MIT", 5 | "source": "./src/index.ts", 6 | "main": "./src/index.ts", 7 | "module": "./src/index.ts", 8 | "publishConfig": { 9 | "main": "./dist/index.js", 10 | "module": "./dist/index.mjs", 11 | "types": "./dist/index.d.ts", 12 | "exports": { 13 | ".": { 14 | "import": { 15 | "types": "./dist/index.d.mts", 16 | "default": "./dist/index.mjs" 17 | }, 18 | "require": { 19 | "types": "./dist/index.d.ts", 20 | "default": "./dist/index.js" 21 | } 22 | } 23 | } 24 | }, 25 | "files": [ 26 | "dist", 27 | "README.md" 28 | ], 29 | "sideEffects": false, 30 | "scripts": { 31 | "lint": "eslint --max-warnings 0 src", 32 | "clean": "rm -rf dist", 33 | "typecheck": "tsc --noEmit", 34 | "build": "radix-build" 35 | }, 36 | "devDependencies": { 37 | "@repo/builder": "workspace:*", 38 | "@repo/eslint-config": "workspace:*", 39 | "@repo/typescript-config": "workspace:*", 40 | "eslint": "^9.18.0", 41 | "typescript": "^5.7.3" 42 | }, 43 | "homepage": "https://radix-ui.com/primitives", 44 | "repository": { 45 | "type": "git", 46 | "url": "git+https://github.com/radix-ui/primitives.git" 47 | }, 48 | "bugs": { 49 | "url": "https://github.com/radix-ui/primitives/issues" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/core/number/src/index.ts: -------------------------------------------------------------------------------- 1 | export { clamp } from './number'; 2 | -------------------------------------------------------------------------------- /packages/core/number/src/number.ts: -------------------------------------------------------------------------------- 1 | function clamp(value: number, [min, max]: [number, number]): number { 2 | return Math.min(max, Math.max(min, value)); 3 | } 4 | 5 | export { clamp }; 6 | -------------------------------------------------------------------------------- /packages/core/number/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/core/primitive/README.md: -------------------------------------------------------------------------------- 1 | # `primitive` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/core/primitive/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/core/primitive/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@radix-ui/primitive", 3 | "version": "1.1.2", 4 | "license": "MIT", 5 | "source": "./src/index.ts", 6 | "main": "./src/index.ts", 7 | "module": "./src/index.ts", 8 | "publishConfig": { 9 | "main": "./dist/index.js", 10 | "module": "./dist/index.mjs", 11 | "types": "./dist/index.d.ts", 12 | "exports": { 13 | ".": { 14 | "import": { 15 | "types": "./dist/index.d.mts", 16 | "default": "./dist/index.mjs" 17 | }, 18 | "require": { 19 | "types": "./dist/index.d.ts", 20 | "default": "./dist/index.js" 21 | } 22 | } 23 | } 24 | }, 25 | "files": [ 26 | "dist", 27 | "README.md" 28 | ], 29 | "sideEffects": false, 30 | "scripts": { 31 | "lint": "eslint --max-warnings 0 src", 32 | "clean": "rm -rf dist", 33 | "typecheck": "tsc --noEmit", 34 | "build": "radix-build" 35 | }, 36 | "devDependencies": { 37 | "@repo/builder": "workspace:*", 38 | "@repo/eslint-config": "workspace:*", 39 | "@repo/typescript-config": "workspace:*", 40 | "eslint": "^9.18.0", 41 | "typescript": "^5.7.3" 42 | }, 43 | "homepage": "https://radix-ui.com/primitives", 44 | "repository": { 45 | "type": "git", 46 | "url": "git+https://github.com/radix-ui/primitives.git" 47 | }, 48 | "bugs": { 49 | "url": "https://github.com/radix-ui/primitives/issues" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/core/primitive/src/index.ts: -------------------------------------------------------------------------------- 1 | export { composeEventHandlers } from './primitive'; 2 | -------------------------------------------------------------------------------- /packages/core/primitive/src/primitive.tsx: -------------------------------------------------------------------------------- 1 | function composeEventHandlers( 2 | originalEventHandler?: (event: E) => void, 3 | ourEventHandler?: (event: E) => void, 4 | { checkForDefaultPrevented = true } = {} 5 | ) { 6 | return function handleEvent(event: E) { 7 | originalEventHandler?.(event); 8 | 9 | if (checkForDefaultPrevented === false || !event.defaultPrevented) { 10 | return ourEventHandler?.(event); 11 | } 12 | }; 13 | } 14 | 15 | export { composeEventHandlers }; 16 | -------------------------------------------------------------------------------- /packages/core/primitive/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/core/rect/README.md: -------------------------------------------------------------------------------- 1 | # `rect` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/core/rect/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/core/rect/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@radix-ui/rect", 3 | "version": "1.1.1", 4 | "license": "MIT", 5 | "source": "./src/index.ts", 6 | "main": "./src/index.ts", 7 | "module": "./src/index.ts", 8 | "publishConfig": { 9 | "main": "./dist/index.js", 10 | "module": "./dist/index.mjs", 11 | "types": "./dist/index.d.ts", 12 | "exports": { 13 | ".": { 14 | "import": { 15 | "types": "./dist/index.d.mts", 16 | "default": "./dist/index.mjs" 17 | }, 18 | "require": { 19 | "types": "./dist/index.d.ts", 20 | "default": "./dist/index.js" 21 | } 22 | } 23 | } 24 | }, 25 | "files": [ 26 | "dist", 27 | "README.md" 28 | ], 29 | "sideEffects": false, 30 | "scripts": { 31 | "lint": "eslint --max-warnings 0 src", 32 | "clean": "rm -rf dist", 33 | "typecheck": "tsc --noEmit", 34 | "build": "radix-build" 35 | }, 36 | "devDependencies": { 37 | "@repo/builder": "workspace:*", 38 | "@repo/eslint-config": "workspace:*", 39 | "@repo/typescript-config": "workspace:*", 40 | "eslint": "^9.18.0", 41 | "typescript": "^5.7.3" 42 | }, 43 | "homepage": "https://radix-ui.com/primitives", 44 | "repository": { 45 | "type": "git", 46 | "url": "git+https://github.com/radix-ui/primitives.git" 47 | }, 48 | "bugs": { 49 | "url": "https://github.com/radix-ui/primitives/issues" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/core/rect/src/index.ts: -------------------------------------------------------------------------------- 1 | export { observeElementRect } from './observe-element-rect'; 2 | export type { Measurable } from './observe-element-rect'; 3 | -------------------------------------------------------------------------------- /packages/core/rect/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/accessible-icon/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-accessible-icon 2 | 3 | ## 1.1.7 4 | 5 | - Updated dependencies: `@radix-ui/react-visually-hidden@1.2.3` 6 | 7 | ## 1.1.6 8 | 9 | - Updated dependencies: `@radix-ui/react-visually-hidden@1.2.2` 10 | 11 | ## 1.1.5 12 | 13 | - Updated dependencies: `@radix-ui/react-visually-hidden@1.2.1` 14 | 15 | ## 1.1.4 16 | 17 | - Updated dependencies: `@radix-ui/react-visually-hidden@1.2.0` 18 | -------------------------------------------------------------------------------- /packages/react/accessible-icon/README.md: -------------------------------------------------------------------------------- 1 | # `react-accessible-icon` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/accessible-icon). 4 | -------------------------------------------------------------------------------- /packages/react/accessible-icon/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/accessible-icon/src/accessible-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden'; 3 | 4 | const NAME = 'AccessibleIcon'; 5 | 6 | interface AccessibleIconProps { 7 | children?: React.ReactNode; 8 | /** 9 | * The accessible label for the icon. This label will be visually hidden but announced to screen 10 | * reader users, similar to `alt` text for `img` tags. 11 | */ 12 | label: string; 13 | } 14 | 15 | const AccessibleIcon: React.FC = ({ children, label }) => { 16 | const child = React.Children.only(children); 17 | return ( 18 | <> 19 | {React.cloneElement(child as React.ReactElement>, { 20 | // accessibility 21 | 'aria-hidden': 'true', 22 | focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable 23 | })} 24 | {label} 25 | 26 | ); 27 | }; 28 | 29 | AccessibleIcon.displayName = NAME; 30 | 31 | const Root = AccessibleIcon; 32 | 33 | export { 34 | AccessibleIcon, 35 | // 36 | Root, 37 | }; 38 | export type { AccessibleIconProps }; 39 | -------------------------------------------------------------------------------- /packages/react/accessible-icon/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | AccessibleIcon, 3 | // 4 | Root, 5 | } from './accessible-icon'; 6 | export type { AccessibleIconProps } from './accessible-icon'; 7 | -------------------------------------------------------------------------------- /packages/react/accessible-icon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/accordion/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-accordion 2 | 3 | ## 1.2.11 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-collapsible@1.1.11`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.2.10 9 | 10 | - Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-collapsible@1.1.10` 11 | 12 | ## 1.2.9 13 | 14 | - Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-collapsible@1.1.9` 15 | 16 | ## 1.2.8 17 | 18 | - Updated dependencies: `@radix-ui/react-collapsible@1.1.8` 19 | 20 | ## 1.2.7 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-collapsible@1.1.7` 23 | 24 | ## 1.2.6 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-collapsible@1.1.6` 27 | 28 | ## 1.2.5 29 | 30 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 31 | - Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-collapsible@1.1.5`, `@radix-ui/react-primitive@2.1.0` 32 | -------------------------------------------------------------------------------- /packages/react/accordion/README.md: -------------------------------------------------------------------------------- 1 | # `react-accordion` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/accordion). 4 | -------------------------------------------------------------------------------- /packages/react/accordion/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/accordion/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createAccordionScope, 4 | // 5 | Accordion, 6 | AccordionItem, 7 | AccordionHeader, 8 | AccordionTrigger, 9 | AccordionContent, 10 | // 11 | Root, 12 | Item, 13 | Header, 14 | Trigger, 15 | Content, 16 | } from './accordion'; 17 | export type { 18 | AccordionSingleProps, 19 | AccordionMultipleProps, 20 | AccordionItemProps, 21 | AccordionHeaderProps, 22 | AccordionTriggerProps, 23 | AccordionContentProps, 24 | } from './accordion'; 25 | -------------------------------------------------------------------------------- /packages/react/accordion/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/alert-dialog/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-alert-dialog 2 | 3 | ## 1.1.14 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-dialog@1.1.14`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.13 9 | 10 | - Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-dialog@1.1.13`, `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.12 13 | 14 | - Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-dialog@1.1.12`, `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.11 17 | 18 | - Updated dependencies: `@radix-ui/react-dialog@1.1.11` 19 | 20 | ## 1.1.10 21 | 22 | - Updated dependencies: `@radix-ui/react-dialog@1.1.10` 23 | 24 | ## 1.1.9 25 | 26 | - Updated dependencies: `@radix-ui/react-dialog@1.1.9` 27 | 28 | ## 1.1.8 29 | 30 | - Updated dependencies: `@radix-ui/react-dialog@1.1.8`, `@radix-ui/react-primitive@2.1.0` 31 | -------------------------------------------------------------------------------- /packages/react/alert-dialog/README.md: -------------------------------------------------------------------------------- 1 | # `react-alert-dialog` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/alert-dialog). 4 | -------------------------------------------------------------------------------- /packages/react/alert-dialog/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/alert-dialog/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createAlertDialogScope, 4 | // 5 | AlertDialog, 6 | AlertDialogTrigger, 7 | AlertDialogPortal, 8 | AlertDialogOverlay, 9 | AlertDialogContent, 10 | AlertDialogAction, 11 | AlertDialogCancel, 12 | AlertDialogTitle, 13 | AlertDialogDescription, 14 | // 15 | Root, 16 | Trigger, 17 | Portal, 18 | Overlay, 19 | Content, 20 | Action, 21 | Cancel, 22 | Title, 23 | Description, 24 | } from './alert-dialog'; 25 | export type { 26 | AlertDialogProps, 27 | AlertDialogTriggerProps, 28 | AlertDialogPortalProps, 29 | AlertDialogOverlayProps, 30 | AlertDialogContentProps, 31 | AlertDialogActionProps, 32 | AlertDialogCancelProps, 33 | AlertDialogTitleProps, 34 | AlertDialogDescriptionProps, 35 | } from './alert-dialog'; 36 | -------------------------------------------------------------------------------- /packages/react/alert-dialog/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/announce/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-announce 2 | 3 | ## 0.2.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 0.2.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 0.2.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 0.2.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/announce/README.md: -------------------------------------------------------------------------------- 1 | # `react-announce` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/announce). 4 | -------------------------------------------------------------------------------- /packages/react/announce/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/announce/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | Announce, 4 | // 5 | Root, 6 | } from './announce'; 7 | export type { AnnounceProps } from './announce'; 8 | -------------------------------------------------------------------------------- /packages/react/announce/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/arrow/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-arrow 2 | 3 | ## 1.1.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/arrow/README.md: -------------------------------------------------------------------------------- 1 | # `react-arrow` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/arrow/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/arrow/src/arrow.test.tsx: -------------------------------------------------------------------------------- 1 | import { axe } from 'vitest-axe'; 2 | import type { RenderResult } from '@testing-library/react'; 3 | import { cleanup, render } from '@testing-library/react'; 4 | import { Arrow } from './arrow'; 5 | import { afterEach, describe, it, beforeEach, expect } from 'vitest'; 6 | 7 | const WIDTH = 40; 8 | const HEIGHT = 30; 9 | 10 | describe('given a default Arrow', () => { 11 | let rendered: RenderResult; 12 | let svg: HTMLElement; 13 | 14 | afterEach(cleanup); 15 | 16 | beforeEach(() => { 17 | rendered = render(); 18 | svg = rendered.getByTestId('test-arrow'); 19 | }); 20 | 21 | it('should have no accessibility violations', async () => { 22 | expect(await axe(rendered.container)).toHaveNoViolations(); 23 | }); 24 | 25 | it('should have width attribute', () => { 26 | expect(svg).toHaveAttribute('width', String(WIDTH)); 27 | }); 28 | 29 | it('should have height attribute', () => { 30 | expect(svg).toHaveAttribute('height', String(HEIGHT)); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /packages/react/arrow/src/arrow.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Primitive } from '@radix-ui/react-primitive'; 3 | 4 | /* ------------------------------------------------------------------------------------------------- 5 | * Arrow 6 | * -----------------------------------------------------------------------------------------------*/ 7 | 8 | const NAME = 'Arrow'; 9 | 10 | type ArrowElement = React.ComponentRef; 11 | type PrimitiveSvgProps = React.ComponentPropsWithoutRef; 12 | interface ArrowProps extends PrimitiveSvgProps {} 13 | 14 | const Arrow = React.forwardRef((props, forwardedRef) => { 15 | const { children, width = 10, height = 5, ...arrowProps } = props; 16 | return ( 17 | 25 | {/* We use their children if they're slotting to replace the whole svg */} 26 | {props.asChild ? children : } 27 | 28 | ); 29 | }); 30 | 31 | Arrow.displayName = NAME; 32 | 33 | /* -----------------------------------------------------------------------------------------------*/ 34 | 35 | const Root = Arrow; 36 | 37 | export { 38 | Arrow, 39 | // 40 | Root, 41 | }; 42 | export type { ArrowProps }; 43 | -------------------------------------------------------------------------------- /packages/react/arrow/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Arrow, 3 | // 4 | Root, 5 | } from './arrow'; 6 | export type { ArrowProps } from './arrow'; 7 | -------------------------------------------------------------------------------- /packages/react/arrow/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/aspect-ratio/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-aspect-ratio 2 | 3 | ## 1.1.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/aspect-ratio/README.md: -------------------------------------------------------------------------------- 1 | # `react-aspect-ratio` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/aspect-ratio). 4 | -------------------------------------------------------------------------------- /packages/react/aspect-ratio/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/aspect-ratio/src/aspect-ratio.test.tsx: -------------------------------------------------------------------------------- 1 | import { axe } from 'vitest-axe'; 2 | import type { RenderResult } from '@testing-library/react'; 3 | import { cleanup, render } from '@testing-library/react'; 4 | import { AspectRatio } from './aspect-ratio'; 5 | import { afterEach, describe, it, beforeEach, expect } from 'vitest'; 6 | 7 | const RATIO = 1 / 2; 8 | 9 | describe('given a default Arrow', () => { 10 | let rendered: RenderResult; 11 | 12 | afterEach(cleanup); 13 | 14 | beforeEach(() => { 15 | rendered = render( 16 |
17 | 18 | Hello 19 | 20 |
21 | ); 22 | }); 23 | 24 | it('should have no accessibility violations', async () => { 25 | expect(await axe(rendered.container)).toHaveNoViolations(); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /packages/react/aspect-ratio/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | AspectRatio, 3 | // 4 | Root, 5 | } from './aspect-ratio'; 6 | export type { AspectRatioProps } from './aspect-ratio'; 7 | -------------------------------------------------------------------------------- /packages/react/aspect-ratio/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/avatar/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-avatar 2 | 3 | ## 1.1.10 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.9 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.8 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.7 17 | 18 | - Updated dependencies: `@radix-ui/react-use-is-hydrated@0.1.0` 19 | 20 | ## 1.1.6 21 | 22 | - Fix breaking `useSyncExternalStore` import in Avatar 23 | 24 | ## 1.1.5 25 | 26 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 27 | -------------------------------------------------------------------------------- /packages/react/avatar/README.md: -------------------------------------------------------------------------------- 1 | # `react-avatar` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/avatar). 4 | -------------------------------------------------------------------------------- /packages/react/avatar/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/avatar/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createAvatarScope, 4 | // 5 | Avatar, 6 | AvatarImage, 7 | AvatarFallback, 8 | // 9 | Root, 10 | Image, 11 | Fallback, 12 | } from './avatar'; 13 | export type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './avatar'; 14 | -------------------------------------------------------------------------------- /packages/react/avatar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/checkbox/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-checkbox 2 | 3 | ## 1.3.2 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.3.1 9 | 10 | - Fix type error emitted in build artifacts 11 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 12 | 13 | ## 1.3.0 14 | 15 | - Add unstable `Provider`, `Trigger` and `BubbleInput` parts to Checkbox ([#3459](https://github.com/radix-ui/primitives/pull/3459)) 16 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 17 | 18 | ## 1.2.3 19 | 20 | - Updated dependencies: `@radix-ui/react-presence@1.1.4` 21 | 22 | ## 1.2.2 23 | 24 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2` 25 | 26 | ## 1.2.1 27 | 28 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1` 29 | 30 | ## 1.2.0 31 | 32 | - All form controls with internal bubble inputs now use the Radix `Primitive` component by default. This will allow us to expose these components directly so users can better control this behavior in the future. 33 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 34 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0` 35 | -------------------------------------------------------------------------------- /packages/react/checkbox/README.md: -------------------------------------------------------------------------------- 1 | # `react-checkbox` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/checkbox). 4 | -------------------------------------------------------------------------------- /packages/react/checkbox/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/checkbox/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createCheckboxScope, 4 | // 5 | Checkbox, 6 | CheckboxProvider as unstable_CheckboxProvider, 7 | CheckboxTrigger as unstable_CheckboxTrigger, 8 | CheckboxIndicator, 9 | CheckboxBubbleInput as unstable_CheckboxBubbleInput, 10 | // 11 | Root, 12 | Provider as unstable_Provider, 13 | Trigger as unstable_Trigger, 14 | Indicator, 15 | BubbleInput as unstable_BubbleInput, 16 | } from './checkbox'; 17 | export type { 18 | CheckboxProps, 19 | CheckboxProviderProps as unstable_CheckboxProviderProps, 20 | CheckboxTriggerProps as unstable_CheckboxTriggerProps, 21 | CheckboxIndicatorProps, 22 | CheckboxBubbleInputProps as unstable_CheckboxBubbleInputProps, 23 | CheckedState, 24 | } from './checkbox'; 25 | -------------------------------------------------------------------------------- /packages/react/checkbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/collapsible/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-collapsible 2 | 3 | ## 1.1.11 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.10 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.9 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.8 17 | 18 | - Updated dependencies: `@radix-ui/react-presence@1.1.4` 19 | 20 | ## 1.1.7 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2` 23 | 24 | ## 1.1.6 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1` 27 | 28 | ## 1.1.5 29 | 30 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 31 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0` 32 | -------------------------------------------------------------------------------- /packages/react/collapsible/README.md: -------------------------------------------------------------------------------- 1 | # `react-collapsible` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/collapsible). 4 | -------------------------------------------------------------------------------- /packages/react/collapsible/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/collapsible/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createCollapsibleScope, 4 | // 5 | Collapsible, 6 | CollapsibleTrigger, 7 | CollapsibleContent, 8 | // 9 | Root, 10 | Trigger, 11 | Content, 12 | } from './collapsible'; 13 | export type { 14 | CollapsibleProps, 15 | CollapsibleTriggerProps, 16 | CollapsibleContentProps, 17 | } from './collapsible'; 18 | -------------------------------------------------------------------------------- /packages/react/collapsible/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/collection/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-collection 2 | 3 | ## 1.1.7 4 | 5 | - Updated dependencies: `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-primitive@2.1.3` 6 | 7 | ## 1.1.6 8 | 9 | - Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-primitive@2.1.2` 10 | 11 | ## 1.1.5 12 | 13 | - Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-primitive@2.1.1` 14 | 15 | ## 1.1.4 16 | 17 | - Add unstable collection utilities 18 | - Minor changes to unreleased unstable APIs 19 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 20 | -------------------------------------------------------------------------------- /packages/react/collection/README.md: -------------------------------------------------------------------------------- 1 | # `react-collection` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/collection/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/collection/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { createCollection } from './collection-legacy'; 3 | export type { CollectionProps } from './collection-legacy'; 4 | 5 | export { createCollection as unstable_createCollection } from './collection'; 6 | export type { CollectionProps as unstable_CollectionProps } from './collection-legacy'; 7 | -------------------------------------------------------------------------------- /packages/react/collection/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/compose-refs/README.md: -------------------------------------------------------------------------------- 1 | # `react-compose-refs` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/compose-refs/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/compose-refs/src/index.ts: -------------------------------------------------------------------------------- 1 | export { composeRefs, useComposedRefs } from './compose-refs'; 2 | -------------------------------------------------------------------------------- /packages/react/compose-refs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/context-menu/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-context-menu 2 | 3 | ## 2.2.15 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-menu@2.1.15`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 2.2.14 9 | 10 | - Updated dependencies: `@radix-ui/react-menu@2.1.14`, `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 2.2.13 13 | 14 | - Updated dependencies: `@radix-ui/react-menu@2.1.13`, `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 2.2.12 17 | 18 | - Updated dependencies: `@radix-ui/react-menu@2.1.12` 19 | 20 | ## 2.2.11 21 | 22 | - Updated dependencies: `@radix-ui/react-menu@2.1.11` 23 | 24 | ## 2.2.10 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-menu@2.1.10` 27 | 28 | ## 2.2.9 29 | 30 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-menu@2.1.9` 31 | 32 | ## 2.2.8 33 | 34 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 35 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-menu@2.1.8` 36 | -------------------------------------------------------------------------------- /packages/react/context-menu/README.md: -------------------------------------------------------------------------------- 1 | # `react-context-menu` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/context-menu). 4 | -------------------------------------------------------------------------------- /packages/react/context-menu/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/context-menu/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createContextMenuScope, 4 | // 5 | ContextMenu, 6 | ContextMenuTrigger, 7 | ContextMenuPortal, 8 | ContextMenuContent, 9 | ContextMenuGroup, 10 | ContextMenuLabel, 11 | ContextMenuItem, 12 | ContextMenuCheckboxItem, 13 | ContextMenuRadioGroup, 14 | ContextMenuRadioItem, 15 | ContextMenuItemIndicator, 16 | ContextMenuSeparator, 17 | ContextMenuArrow, 18 | ContextMenuSub, 19 | ContextMenuSubTrigger, 20 | ContextMenuSubContent, 21 | // 22 | Root, 23 | Trigger, 24 | Portal, 25 | Content, 26 | Group, 27 | Label, 28 | Item, 29 | CheckboxItem, 30 | RadioGroup, 31 | RadioItem, 32 | ItemIndicator, 33 | Separator, 34 | Arrow, 35 | Sub, 36 | SubTrigger, 37 | SubContent, 38 | } from './context-menu'; 39 | export type { 40 | ContextMenuProps, 41 | ContextMenuTriggerProps, 42 | ContextMenuPortalProps, 43 | ContextMenuContentProps, 44 | ContextMenuGroupProps, 45 | ContextMenuLabelProps, 46 | ContextMenuItemProps, 47 | ContextMenuCheckboxItemProps, 48 | ContextMenuRadioGroupProps, 49 | ContextMenuRadioItemProps, 50 | ContextMenuItemIndicatorProps, 51 | ContextMenuSeparatorProps, 52 | ContextMenuArrowProps, 53 | ContextMenuSubProps, 54 | ContextMenuSubTriggerProps, 55 | ContextMenuSubContentProps, 56 | } from './context-menu'; 57 | -------------------------------------------------------------------------------- /packages/react/context-menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/context/README.md: -------------------------------------------------------------------------------- 1 | # `react-context` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/context/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/context/src/index.ts: -------------------------------------------------------------------------------- 1 | export { createContext, createContextScope } from './create-context'; 2 | export type { CreateScope, Scope } from './create-context'; 3 | -------------------------------------------------------------------------------- /packages/react/context/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/dialog/README.md: -------------------------------------------------------------------------------- 1 | # `react-dialog` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/dialog). 4 | -------------------------------------------------------------------------------- /packages/react/dialog/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/dialog/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createDialogScope, 4 | // 5 | Dialog, 6 | DialogTrigger, 7 | DialogPortal, 8 | DialogOverlay, 9 | DialogContent, 10 | DialogTitle, 11 | DialogDescription, 12 | DialogClose, 13 | // 14 | Root, 15 | Trigger, 16 | Portal, 17 | Overlay, 18 | Content, 19 | Title, 20 | Description, 21 | Close, 22 | // 23 | WarningProvider, 24 | } from './dialog'; 25 | export type { 26 | DialogProps, 27 | DialogTriggerProps, 28 | DialogPortalProps, 29 | DialogOverlayProps, 30 | DialogContentProps, 31 | DialogTitleProps, 32 | DialogDescriptionProps, 33 | DialogCloseProps, 34 | } from './dialog'; 35 | -------------------------------------------------------------------------------- /packages/react/dialog/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/direction/README.md: -------------------------------------------------------------------------------- 1 | # `react-direction` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/direction). 4 | -------------------------------------------------------------------------------- /packages/react/direction/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/direction/src/direction.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | type Direction = 'ltr' | 'rtl'; 4 | const DirectionContext = React.createContext(undefined); 5 | 6 | /* ------------------------------------------------------------------------------------------------- 7 | * Direction 8 | * -----------------------------------------------------------------------------------------------*/ 9 | 10 | interface DirectionProviderProps { 11 | children?: React.ReactNode; 12 | dir: Direction; 13 | } 14 | const DirectionProvider: React.FC = (props) => { 15 | const { dir, children } = props; 16 | return {children}; 17 | }; 18 | 19 | /* -----------------------------------------------------------------------------------------------*/ 20 | 21 | function useDirection(localDir?: Direction) { 22 | const globalDir = React.useContext(DirectionContext); 23 | return localDir || globalDir || 'ltr'; 24 | } 25 | 26 | const Provider = DirectionProvider; 27 | 28 | export { 29 | useDirection, 30 | // 31 | Provider, 32 | // 33 | DirectionProvider, 34 | }; 35 | -------------------------------------------------------------------------------- /packages/react/direction/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | useDirection, 3 | // 4 | Provider, 5 | // 6 | DirectionProvider, 7 | } from './direction'; 8 | -------------------------------------------------------------------------------- /packages/react/direction/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/dismissable-layer/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-dismissable-layer 2 | 3 | ## 1.1.10 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.9 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.8 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.7 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/dismissable-layer/README.md: -------------------------------------------------------------------------------- 1 | # `react-dismissable-layer` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/dismissable-layer/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/dismissable-layer/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | DismissableLayer, 4 | DismissableLayerBranch, 5 | // 6 | Root, 7 | Branch, 8 | } from './dismissable-layer'; 9 | export type { DismissableLayerProps } from './dismissable-layer'; 10 | -------------------------------------------------------------------------------- /packages/react/dismissable-layer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/dropdown-menu/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-dropdown-menu 2 | 3 | ## 2.1.15 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-menu@2.1.15`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 2.1.14 9 | 10 | - Updated dependencies: `@radix-ui/react-menu@2.1.14`, `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 2.1.13 13 | 14 | - Updated dependencies: `@radix-ui/react-menu@2.1.13`, `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 2.1.12 17 | 18 | - Updated dependencies: `@radix-ui/react-menu@2.1.12` 19 | 20 | ## 2.1.11 21 | 22 | - Updated dependencies: `@radix-ui/react-menu@2.1.11` 23 | 24 | ## 2.1.10 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-menu@2.1.10` 27 | 28 | ## 2.1.9 29 | 30 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-menu@2.1.9` 31 | 32 | ## 2.1.8 33 | 34 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 35 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-menu@2.1.8` 36 | -------------------------------------------------------------------------------- /packages/react/dropdown-menu/README.md: -------------------------------------------------------------------------------- 1 | # `react-dropdown-menu` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/dropdown-menu). 4 | -------------------------------------------------------------------------------- /packages/react/dropdown-menu/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/dropdown-menu/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createDropdownMenuScope, 4 | // 5 | DropdownMenu, 6 | DropdownMenuTrigger, 7 | DropdownMenuPortal, 8 | DropdownMenuContent, 9 | DropdownMenuGroup, 10 | DropdownMenuLabel, 11 | DropdownMenuItem, 12 | DropdownMenuCheckboxItem, 13 | DropdownMenuRadioGroup, 14 | DropdownMenuRadioItem, 15 | DropdownMenuItemIndicator, 16 | DropdownMenuSeparator, 17 | DropdownMenuArrow, 18 | DropdownMenuSub, 19 | DropdownMenuSubTrigger, 20 | DropdownMenuSubContent, 21 | // 22 | Root, 23 | Trigger, 24 | Portal, 25 | Content, 26 | Group, 27 | Label, 28 | Item, 29 | CheckboxItem, 30 | RadioGroup, 31 | RadioItem, 32 | ItemIndicator, 33 | Separator, 34 | Arrow, 35 | Sub, 36 | SubTrigger, 37 | SubContent, 38 | } from './dropdown-menu'; 39 | export type { 40 | DropdownMenuProps, 41 | DropdownMenuTriggerProps, 42 | DropdownMenuPortalProps, 43 | DropdownMenuContentProps, 44 | DropdownMenuGroupProps, 45 | DropdownMenuLabelProps, 46 | DropdownMenuItemProps, 47 | DropdownMenuCheckboxItemProps, 48 | DropdownMenuRadioGroupProps, 49 | DropdownMenuRadioItemProps, 50 | DropdownMenuItemIndicatorProps, 51 | DropdownMenuSeparatorProps, 52 | DropdownMenuArrowProps, 53 | DropdownMenuSubProps, 54 | DropdownMenuSubTriggerProps, 55 | DropdownMenuSubContentProps, 56 | } from './dropdown-menu'; 57 | -------------------------------------------------------------------------------- /packages/react/dropdown-menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/focus-guards/README.md: -------------------------------------------------------------------------------- 1 | # `react-focus-guards` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/focus-guards/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/focus-guards/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | FocusGuards, 4 | // 5 | Root, 6 | // 7 | useFocusGuards, 8 | } from './focus-guards'; 9 | -------------------------------------------------------------------------------- /packages/react/focus-guards/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/focus-scope/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-focus-scope 2 | 3 | ## 1.1.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/focus-scope/README.md: -------------------------------------------------------------------------------- 1 | # `react-focus-scope` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/focus-scope/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/focus-scope/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | FocusScope, 4 | // 5 | Root, 6 | } from './focus-scope'; 7 | export type { FocusScopeProps } from './focus-scope'; 8 | -------------------------------------------------------------------------------- /packages/react/focus-scope/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/form/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-form 2 | 3 | ## 0.1.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-label@2.1.7`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 0.1.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-label@2.1.6` 11 | 12 | ## 0.1.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-label@2.1.5` 15 | 16 | ## 0.1.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-label@2.1.4` 19 | -------------------------------------------------------------------------------- /packages/react/form/README.md: -------------------------------------------------------------------------------- 1 | # `react-form` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/form). 4 | -------------------------------------------------------------------------------- /packages/react/form/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/form/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createFormScope, 4 | // 5 | Form, 6 | FormField, 7 | FormLabel, 8 | FormControl, 9 | FormMessage, 10 | FormValidityState, 11 | FormSubmit, 12 | // 13 | Root, 14 | Field, 15 | Label, 16 | Control, 17 | Message, 18 | ValidityState, 19 | Submit, 20 | } from './form'; 21 | 22 | export type { 23 | FormProps, 24 | FormFieldProps, 25 | FormLabelProps, 26 | FormControlProps, 27 | FormMessageProps, 28 | FormValidityStateProps, 29 | FormSubmitProps, 30 | } from './form'; 31 | -------------------------------------------------------------------------------- /packages/react/form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/hover-card/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-hover-card 2 | 3 | ## 1.1.14 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-popper@1.2.7`, `@radix-ui/react-portal@1.1.9`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.13 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-dismissable-layer@1.1.9`, `@radix-ui/react-popper@1.2.6`, `@radix-ui/react-portal@1.1.8` 11 | 12 | ## 1.1.12 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-dismissable-layer@1.1.8`, `@radix-ui/react-popper@1.2.5`, `@radix-ui/react-portal@1.1.7` 15 | 16 | ## 1.1.11 17 | 18 | - Updated dependencies: `@radix-ui/react-presence@1.1.4` 19 | 20 | ## 1.1.10 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2` 23 | 24 | ## 1.1.9 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1` 27 | 28 | ## 1.1.8 29 | 30 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 31 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-dismissable-layer@1.1.7`, `@radix-ui/react-popper@1.2.4`, `@radix-ui/react-portal@1.1.6` 32 | -------------------------------------------------------------------------------- /packages/react/hover-card/README.md: -------------------------------------------------------------------------------- 1 | # `react-hover-card` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/hover-card). 4 | -------------------------------------------------------------------------------- /packages/react/hover-card/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/hover-card/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createHoverCardScope, 4 | // 5 | HoverCard, 6 | HoverCardTrigger, 7 | HoverCardPortal, 8 | HoverCardContent, 9 | HoverCardArrow, 10 | // 11 | Root, 12 | Trigger, 13 | Portal, 14 | Content, 15 | Arrow, 16 | } from './hover-card'; 17 | export type { 18 | HoverCardProps, 19 | HoverCardTriggerProps, 20 | HoverCardPortalProps, 21 | HoverCardContentProps, 22 | HoverCardArrowProps, 23 | } from './hover-card'; 24 | -------------------------------------------------------------------------------- /packages/react/hover-card/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/id/README.md: -------------------------------------------------------------------------------- 1 | # `react-id` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/id-provider). 4 | -------------------------------------------------------------------------------- /packages/react/id/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/id/src/id.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { useLayoutEffect } from '@radix-ui/react-use-layout-effect'; 3 | 4 | // We spaces with `.trim().toString()` to prevent bundlers from trying to `import { useId } from 'react';` 5 | const useReactId = (React as any)[' useId '.trim().toString()] || (() => undefined); 6 | let count = 0; 7 | 8 | function useId(deterministicId?: string): string { 9 | const [id, setId] = React.useState(useReactId()); 10 | // React versions older than 18 will have client-side ids only. 11 | useLayoutEffect(() => { 12 | if (!deterministicId) setId((reactId) => reactId ?? String(count++)); 13 | }, [deterministicId]); 14 | return deterministicId || (id ? `radix-${id}` : ''); 15 | } 16 | 17 | export { useId }; 18 | -------------------------------------------------------------------------------- /packages/react/id/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useId } from './id'; 2 | -------------------------------------------------------------------------------- /packages/react/id/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/label/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-label 2 | 3 | ## 2.1.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 2.1.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 2.1.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 2.1.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/label/README.md: -------------------------------------------------------------------------------- 1 | # `react-label` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/label). 4 | -------------------------------------------------------------------------------- /packages/react/label/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/label/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | Label, 4 | // 5 | Root, 6 | } from './label'; 7 | export type { LabelProps } from './label'; 8 | -------------------------------------------------------------------------------- /packages/react/label/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/menu/README.md: -------------------------------------------------------------------------------- 1 | # `react-menu` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/menu/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/menu/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createMenuScope, 4 | // 5 | Menu, 6 | MenuAnchor, 7 | MenuPortal, 8 | MenuContent, 9 | MenuGroup, 10 | MenuLabel, 11 | MenuItem, 12 | MenuCheckboxItem, 13 | MenuRadioGroup, 14 | MenuRadioItem, 15 | MenuItemIndicator, 16 | MenuSeparator, 17 | MenuArrow, 18 | MenuSub, 19 | MenuSubTrigger, 20 | MenuSubContent, 21 | // 22 | Root, 23 | Anchor, 24 | Portal, 25 | Content, 26 | Group, 27 | Label, 28 | Item, 29 | CheckboxItem, 30 | RadioGroup, 31 | RadioItem, 32 | ItemIndicator, 33 | Separator, 34 | Arrow, 35 | Sub, 36 | SubTrigger, 37 | SubContent, 38 | } from './menu'; 39 | export type { 40 | MenuProps, 41 | MenuAnchorProps, 42 | MenuPortalProps, 43 | MenuContentProps, 44 | MenuGroupProps, 45 | MenuLabelProps, 46 | MenuItemProps, 47 | MenuCheckboxItemProps, 48 | MenuRadioGroupProps, 49 | MenuRadioItemProps, 50 | MenuItemIndicatorProps, 51 | MenuSeparatorProps, 52 | MenuArrowProps, 53 | MenuSubProps, 54 | MenuSubTriggerProps, 55 | MenuSubContentProps, 56 | } from './menu'; 57 | -------------------------------------------------------------------------------- /packages/react/menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/menubar/README.md: -------------------------------------------------------------------------------- 1 | # `react-menubar` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/menubar). 4 | -------------------------------------------------------------------------------- /packages/react/menubar/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/menubar/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createMenubarScope, 4 | // 5 | Menubar, 6 | MenubarMenu, 7 | MenubarTrigger, 8 | MenubarPortal, 9 | MenubarContent, 10 | MenubarGroup, 11 | MenubarLabel, 12 | MenubarItem, 13 | MenubarCheckboxItem, 14 | MenubarRadioGroup, 15 | MenubarRadioItem, 16 | MenubarItemIndicator, 17 | MenubarSeparator, 18 | MenubarArrow, 19 | MenubarSub, 20 | MenubarSubTrigger, 21 | MenubarSubContent, 22 | // 23 | Root, 24 | Menu, 25 | Trigger, 26 | Portal, 27 | Content, 28 | Group, 29 | Label, 30 | Item, 31 | CheckboxItem, 32 | RadioGroup, 33 | RadioItem, 34 | ItemIndicator, 35 | Separator, 36 | Arrow, 37 | Sub, 38 | SubTrigger, 39 | SubContent, 40 | } from './menubar'; 41 | export type { 42 | MenubarProps, 43 | MenubarMenuProps, 44 | MenubarTriggerProps, 45 | MenubarPortalProps, 46 | MenubarContentProps, 47 | MenubarGroupProps, 48 | MenubarLabelProps, 49 | MenubarItemProps, 50 | MenubarCheckboxItemProps, 51 | MenubarRadioGroupProps, 52 | MenubarRadioItemProps, 53 | MenubarItemIndicatorProps, 54 | MenubarSeparatorProps, 55 | MenubarArrowProps, 56 | MenubarSubProps, 57 | MenubarSubTriggerProps, 58 | MenubarSubContentProps, 59 | } from './menubar'; 60 | -------------------------------------------------------------------------------- /packages/react/menubar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/navigation-menu/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-navigation-menu 2 | 3 | ## 1.2.13 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-visually-hidden@1.2.3`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.2.12 9 | 10 | - Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-dismissable-layer@1.1.9`, `@radix-ui/react-visually-hidden@1.2.2` 11 | 12 | ## 1.2.11 13 | 14 | - Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-dismissable-layer@1.1.8`, `@radix-ui/react-visually-hidden@1.2.1` 15 | 16 | ## 1.2.10 17 | 18 | - Updated dependencies: `@radix-ui/react-presence@1.1.4` 19 | 20 | ## 1.2.9 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2` 23 | 24 | ## 1.2.8 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1` 27 | 28 | ## 1.2.7 29 | 30 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 31 | - Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-visually-hidden@1.2.0`, `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-dismissable-layer@1.1.7` 32 | -------------------------------------------------------------------------------- /packages/react/navigation-menu/README.md: -------------------------------------------------------------------------------- 1 | # `react-navigation-menu` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/navigation-menu). 4 | -------------------------------------------------------------------------------- /packages/react/navigation-menu/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/navigation-menu/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createNavigationMenuScope, 4 | // 5 | NavigationMenu, 6 | NavigationMenuSub, 7 | NavigationMenuList, 8 | NavigationMenuItem, 9 | NavigationMenuTrigger, 10 | NavigationMenuLink, 11 | NavigationMenuIndicator, 12 | NavigationMenuContent, 13 | NavigationMenuViewport, 14 | // 15 | Root, 16 | Sub, 17 | List, 18 | Item, 19 | Trigger, 20 | Link, 21 | Indicator, 22 | Content, 23 | Viewport, 24 | } from './navigation-menu'; 25 | export type { 26 | NavigationMenuProps, 27 | NavigationMenuSubProps, 28 | NavigationMenuListProps, 29 | NavigationMenuItemProps, 30 | NavigationMenuTriggerProps, 31 | NavigationMenuLinkProps, 32 | NavigationMenuIndicatorProps, 33 | NavigationMenuContentProps, 34 | NavigationMenuViewportProps, 35 | } from './navigation-menu'; 36 | -------------------------------------------------------------------------------- /packages/react/navigation-menu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/one-time-password-field/README.md: -------------------------------------------------------------------------------- 1 | # `react-one-time-password-field` 2 | 3 | ## Installation 4 | 5 | ```sh 6 | $ yarn add radix-ui 7 | # or 8 | $ npm install radix-ui 9 | ``` 10 | 11 | ## Usage 12 | 13 | View docs [here](https://radix-ui.com/primitives/docs/components/one-time-password-field). 14 | -------------------------------------------------------------------------------- /packages/react/one-time-password-field/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/one-time-password-field/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export type { 3 | OneTimePasswordFieldProps, 4 | OneTimePasswordFieldInputProps, 5 | OneTimePasswordFieldHiddenInputProps, 6 | InputValidationType, 7 | } from './one-time-password-field'; 8 | export { 9 | OneTimePasswordField, 10 | OneTimePasswordFieldInput, 11 | OneTimePasswordFieldHiddenInput, 12 | // 13 | Root, 14 | Input, 15 | HiddenInput, 16 | } from './one-time-password-field'; 17 | -------------------------------------------------------------------------------- /packages/react/one-time-password-field/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/password-toggle-field/README.md: -------------------------------------------------------------------------------- 1 | # `react-password-toggle-field` 2 | 3 | ## Installation 4 | 5 | ```sh 6 | $ yarn add radix-ui 7 | # or 8 | $ npm install radix-ui 9 | ``` 10 | 11 | ## Usage 12 | 13 | View docs [here](https://radix-ui.com/primitives/docs/components/password-toggle-field). 14 | -------------------------------------------------------------------------------- /packages/react/password-toggle-field/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/password-toggle-field/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export type { 3 | PasswordToggleFieldProps, 4 | PasswordToggleFieldInputProps, 5 | PasswordToggleFieldToggleProps, 6 | PasswordToggleFieldIconProps, 7 | PasswordToggleFieldSlotProps, 8 | } from './password-toggle-field'; 9 | export { 10 | PasswordToggleField, 11 | PasswordToggleFieldInput, 12 | PasswordToggleFieldToggle, 13 | PasswordToggleFieldIcon, 14 | PasswordToggleFieldSlot, 15 | // 16 | Root, 17 | Input, 18 | Toggle, 19 | Icon, 20 | Slot, 21 | } from './password-toggle-field'; 22 | -------------------------------------------------------------------------------- /packages/react/password-toggle-field/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/popover/README.md: -------------------------------------------------------------------------------- 1 | # `react-popover` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/popover). 4 | -------------------------------------------------------------------------------- /packages/react/popover/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/popover/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createPopoverScope, 4 | // 5 | Popover, 6 | PopoverAnchor, 7 | PopoverTrigger, 8 | PopoverPortal, 9 | PopoverContent, 10 | PopoverClose, 11 | PopoverArrow, 12 | // 13 | Root, 14 | Anchor, 15 | Trigger, 16 | Portal, 17 | Content, 18 | Close, 19 | Arrow, 20 | } from './popover'; 21 | export type { 22 | PopoverProps, 23 | PopoverAnchorProps, 24 | PopoverTriggerProps, 25 | PopoverPortalProps, 26 | PopoverContentProps, 27 | PopoverCloseProps, 28 | PopoverArrowProps, 29 | } from './popover'; 30 | -------------------------------------------------------------------------------- /packages/react/popover/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/popper/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-popper 2 | 3 | ## 1.2.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-arrow@1.1.7`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.2.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-arrow@1.1.6` 11 | 12 | ## 1.2.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-arrow@1.1.5` 15 | 16 | ## 1.2.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-arrow@1.1.4` 19 | -------------------------------------------------------------------------------- /packages/react/popper/README.md: -------------------------------------------------------------------------------- 1 | # `react-popper` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/popper/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/popper/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createPopperScope, 4 | // 5 | Popper, 6 | PopperAnchor, 7 | PopperContent, 8 | PopperArrow, 9 | // 10 | Root, 11 | Anchor, 12 | Content, 13 | Arrow, 14 | // 15 | SIDE_OPTIONS, 16 | ALIGN_OPTIONS, 17 | } from './popper'; 18 | export type { 19 | PopperProps, 20 | PopperAnchorProps, 21 | PopperContentProps, 22 | PopperArrowProps, 23 | } from './popper'; 24 | -------------------------------------------------------------------------------- /packages/react/popper/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/portal/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-portal 2 | 3 | ## 1.1.9 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.8 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.7 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.6 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/portal/README.md: -------------------------------------------------------------------------------- 1 | # `react-portal` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/portal). 4 | -------------------------------------------------------------------------------- /packages/react/portal/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/portal/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | Portal, 4 | // 5 | Root, 6 | } from './portal'; 7 | export type { PortalProps } from './portal'; 8 | -------------------------------------------------------------------------------- /packages/react/portal/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/presence/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-presence 2 | 3 | ## 1.1.4 4 | 5 | - Fix memory leak in Presence 6 | -------------------------------------------------------------------------------- /packages/react/presence/README.md: -------------------------------------------------------------------------------- 1 | # `react-presence` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/presence/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/presence/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { Presence, Root } from './presence'; 3 | export type { PresenceProps } from './presence'; 4 | -------------------------------------------------------------------------------- /packages/react/presence/src/use-state-machine.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | type Machine = { [k: string]: { [k: string]: S } }; 4 | type MachineState = keyof T; 5 | type MachineEvent = keyof UnionToIntersection; 6 | 7 | // 🤯 https://fettblog.eu/typescript-union-to-intersection/ 8 | type UnionToIntersection = (T extends any ? (x: T) => any : never) extends (x: infer R) => any 9 | ? R 10 | : never; 11 | 12 | export function useStateMachine( 13 | initialState: MachineState, 14 | machine: M & Machine> 15 | ) { 16 | return React.useReducer((state: MachineState, event: MachineEvent): MachineState => { 17 | const nextState = (machine[state] as any)[event]; 18 | return nextState ?? state; 19 | }, initialState); 20 | } 21 | -------------------------------------------------------------------------------- /packages/react/presence/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/primitive/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-primitive 2 | 3 | ## 2.1.3 4 | 5 | - Updated dependencies: `@radix-ui/react-slot@1.2.3` 6 | 7 | ## 2.1.2 8 | 9 | - Updated dependencies: `@radix-ui/react-slot@1.2.2` 10 | 11 | ## 2.1.1 12 | 13 | - Updated dependencies: `@radix-ui/react-slot@1.2.1` 14 | 15 | ## 2.1.0 16 | 17 | - All form controls with internal bubble inputs now use the Radix `Primitive` component by default. This will allow us to expose these components directly so users can better control this behavior in the future. 18 | -------------------------------------------------------------------------------- /packages/react/primitive/README.md: -------------------------------------------------------------------------------- 1 | # `react-primitive` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/primitive/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/primitive/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Primitive, 3 | // 4 | Root, 5 | // 6 | dispatchDiscreteCustomEvent, 7 | } from './primitive'; 8 | export type { PrimitivePropsWithRef } from './primitive'; 9 | -------------------------------------------------------------------------------- /packages/react/primitive/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/progress/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-progress 2 | 3 | ## 1.1.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/progress/README.md: -------------------------------------------------------------------------------- 1 | # `react-progress` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/progress). 4 | -------------------------------------------------------------------------------- /packages/react/progress/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/progress/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createProgressScope, 4 | // 5 | Progress, 6 | ProgressIndicator, 7 | // 8 | Root, 9 | Indicator, 10 | } from './progress'; 11 | export type { ProgressProps, ProgressIndicatorProps } from './progress'; 12 | -------------------------------------------------------------------------------- /packages/react/progress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/radio-group/README.md: -------------------------------------------------------------------------------- 1 | # `react-radio-group` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/radio-group). 4 | -------------------------------------------------------------------------------- /packages/react/radio-group/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/radio-group/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createRadioGroupScope, 4 | // 5 | RadioGroup, 6 | RadioGroupItem, 7 | RadioGroupIndicator, 8 | // 9 | Root, 10 | Item, 11 | Indicator, 12 | } from './radio-group'; 13 | export type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps } from './radio-group'; 14 | -------------------------------------------------------------------------------- /packages/react/radio-group/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/radix-ui/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/radix-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/roving-focus/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-roving-focus 2 | 3 | ## 1.1.10 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.9 9 | 10 | - Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.8 13 | 14 | - Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.7 17 | 18 | - Internal changes to render props 19 | 20 | ## 1.1.6 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2` 23 | 24 | ## 1.1.5 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1` 27 | 28 | ## 1.1.4 29 | 30 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 31 | - Accept function as child 32 | - Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0` 33 | -------------------------------------------------------------------------------- /packages/react/roving-focus/README.md: -------------------------------------------------------------------------------- 1 | # `react-roving-focus` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/roving-focus/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/roving-focus/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createRovingFocusGroupScope, 4 | // 5 | RovingFocusGroup, 6 | RovingFocusGroupItem, 7 | // 8 | Root, 9 | Item, 10 | } from './roving-focus-group'; 11 | export type { RovingFocusGroupProps, RovingFocusItemProps } from './roving-focus-group'; 12 | -------------------------------------------------------------------------------- /packages/react/roving-focus/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/scroll-area/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-scroll-area 2 | 3 | ## 1.2.9 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.2.8 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.2.7 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.2.6 17 | 18 | - Updated dependencies: `@radix-ui/react-presence@1.1.4` 19 | 20 | ## 1.2.5 21 | 22 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 23 | -------------------------------------------------------------------------------- /packages/react/scroll-area/README.md: -------------------------------------------------------------------------------- 1 | # `react-scroll-area` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/scroll-area). 4 | -------------------------------------------------------------------------------- /packages/react/scroll-area/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/scroll-area/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createScrollAreaScope, 4 | // 5 | ScrollArea, 6 | ScrollAreaViewport, 7 | ScrollAreaScrollbar, 8 | ScrollAreaThumb, 9 | ScrollAreaCorner, 10 | // 11 | Root, 12 | Viewport, 13 | Scrollbar, 14 | Thumb, 15 | Corner, 16 | } from './scroll-area'; 17 | export type { 18 | ScrollAreaProps, 19 | ScrollAreaViewportProps, 20 | ScrollAreaScrollbarProps, 21 | ScrollAreaThumbProps, 22 | ScrollAreaCornerProps, 23 | } from './scroll-area'; 24 | -------------------------------------------------------------------------------- /packages/react/scroll-area/src/use-state-machine.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | type Machine = { [k: string]: { [k: string]: S } }; 4 | type MachineState = keyof T; 5 | type MachineEvent = keyof UnionToIntersection; 6 | 7 | // 🤯 https://fettblog.eu/typescript-union-to-intersection/ 8 | type UnionToIntersection = (T extends any ? (x: T) => any : never) extends (x: infer R) => any 9 | ? R 10 | : never; 11 | 12 | export function useStateMachine( 13 | initialState: MachineState, 14 | machine: M & Machine> 15 | ) { 16 | return React.useReducer((state: MachineState, event: MachineEvent): MachineState => { 17 | const nextState = (machine[state] as any)[event]; 18 | return nextState ?? state; 19 | }, initialState); 20 | } 21 | -------------------------------------------------------------------------------- /packages/react/scroll-area/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/select/README.md: -------------------------------------------------------------------------------- 1 | # `react-select` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/select). 4 | -------------------------------------------------------------------------------- /packages/react/select/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/select/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createSelectScope, 4 | // 5 | Select, 6 | SelectTrigger, 7 | SelectValue, 8 | SelectIcon, 9 | SelectPortal, 10 | SelectContent, 11 | SelectViewport, 12 | SelectGroup, 13 | SelectLabel, 14 | SelectItem, 15 | SelectItemText, 16 | SelectItemIndicator, 17 | SelectScrollUpButton, 18 | SelectScrollDownButton, 19 | SelectSeparator, 20 | SelectArrow, 21 | // 22 | Root, 23 | Trigger, 24 | Value, 25 | Icon, 26 | Portal, 27 | Content, 28 | Viewport, 29 | Group, 30 | Label, 31 | Item, 32 | ItemText, 33 | ItemIndicator, 34 | ScrollUpButton, 35 | ScrollDownButton, 36 | Separator, 37 | Arrow, 38 | } from './select'; 39 | export type { 40 | SelectProps, 41 | SelectTriggerProps, 42 | SelectValueProps, 43 | SelectIconProps, 44 | SelectPortalProps, 45 | SelectContentProps, 46 | SelectViewportProps, 47 | SelectGroupProps, 48 | SelectLabelProps, 49 | SelectItemProps, 50 | SelectItemTextProps, 51 | SelectItemIndicatorProps, 52 | SelectScrollUpButtonProps, 53 | SelectScrollDownButtonProps, 54 | SelectSeparatorProps, 55 | SelectArrowProps, 56 | } from './select'; 57 | -------------------------------------------------------------------------------- /packages/react/select/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/separator/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-separator 2 | 3 | ## 1.1.7 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.6 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.5 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.4 17 | 18 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 19 | -------------------------------------------------------------------------------- /packages/react/separator/README.md: -------------------------------------------------------------------------------- 1 | # `react-separator` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/separator). 4 | -------------------------------------------------------------------------------- /packages/react/separator/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/separator/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Separator, 3 | // 4 | Root, 5 | } from './separator'; 6 | export type { SeparatorProps } from './separator'; 7 | -------------------------------------------------------------------------------- /packages/react/separator/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/slider/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-slider 2 | 3 | ## 1.3.5 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.3.4 9 | 10 | - Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.3.3 13 | 14 | - Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.3.2 17 | 18 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2` 19 | 20 | ## 1.3.1 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1` 23 | 24 | ## 1.3.0 25 | 26 | - All form controls with internal bubble inputs now use the Radix `Primitive` component by default. This will allow us to expose these components directly so users can better control this behavior in the future. 27 | - Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0` 28 | -------------------------------------------------------------------------------- /packages/react/slider/README.md: -------------------------------------------------------------------------------- 1 | # `react-slider` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/slider). 4 | -------------------------------------------------------------------------------- /packages/react/slider/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/slider/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createSliderScope, 4 | // 5 | Slider, 6 | SliderTrack, 7 | SliderRange, 8 | SliderThumb, 9 | // 10 | Root, 11 | Track, 12 | Range, 13 | Thumb, 14 | } from './slider'; 15 | export type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps } from './slider'; 16 | -------------------------------------------------------------------------------- /packages/react/slider/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/slot/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-slot 2 | 3 | ## 1.2.3 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Revert slot changes causing errors in server components 7 | 8 | ## 1.2.2 9 | 10 | - Add `use client` to slot entry to prevent RSC errors 11 | 12 | ## 1.2.1 13 | 14 | - Use stable composed refs in SlotClone ([#3477](https://github.com/radix-ui/primitives/pull/3477)) 15 | -------------------------------------------------------------------------------- /packages/react/slot/README.md: -------------------------------------------------------------------------------- 1 | # `react-slot` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/slot). 4 | -------------------------------------------------------------------------------- /packages/react/slot/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/slot/src/__snapshots__/slot.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 | 3 | exports[`given a Button with Slottable > with asChild > should render a link with icon on the left/right 1`] = ` 4 | 20 | `; 21 | 22 | exports[`given a Button with Slottable > without asChild > should render a button with icon on the left/right 1`] = ` 23 |
24 | 36 |
37 | `; 38 | -------------------------------------------------------------------------------- /packages/react/slot/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | Slot, 3 | Slottable, 4 | // 5 | Root, 6 | createSlot, 7 | createSlottable, 8 | } from './slot'; 9 | export type { SlotProps } from './slot'; 10 | -------------------------------------------------------------------------------- /packages/react/slot/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/switch/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-switch 2 | 3 | ## 1.2.5 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.2.4 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.2.3 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.2.2 17 | 18 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2` 19 | 20 | ## 1.2.1 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1` 23 | 24 | ## 1.2.0 25 | 26 | - All form controls with internal bubble inputs now use the Radix `Primitive` component by default. This will allow us to expose these components directly so users can better control this behavior in the future. 27 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 28 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0` 29 | -------------------------------------------------------------------------------- /packages/react/switch/README.md: -------------------------------------------------------------------------------- 1 | # `react-switch` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/switch). 4 | -------------------------------------------------------------------------------- /packages/react/switch/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/switch/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createSwitchScope, 4 | // 5 | Switch, 6 | SwitchThumb, 7 | // 8 | Root, 9 | Thumb, 10 | } from './switch'; 11 | export type { SwitchProps, SwitchThumbProps } from './switch'; 12 | -------------------------------------------------------------------------------- /packages/react/switch/src/switch.test.tsx: -------------------------------------------------------------------------------- 1 | import * as Switch from './switch'; 2 | import { cleanup, render } from '@testing-library/react'; 3 | import { afterEach, describe, it, expect } from 'vitest'; 4 | 5 | describe('given a default Switch', () => { 6 | afterEach(cleanup); 7 | 8 | let cleanedUp = false; 9 | 10 | function Test() { 11 | return ( 12 | () => { 14 | cleanedUp = true; 15 | }} 16 | > 17 | 18 | 19 | ); 20 | } 21 | 22 | it('should correctly invoke the cleanup function of a ref callback', () => { 23 | const rendered = render(); 24 | rendered.unmount(); 25 | expect(cleanedUp).toBe(true); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /packages/react/switch/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/tabs/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-tabs 2 | 3 | ## 1.1.12 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.11 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9` 11 | 12 | ## 1.1.10 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8` 15 | 16 | ## 1.1.9 17 | 18 | - Updated dependencies: `@radix-ui/react-presence@1.1.4` 19 | 20 | ## 1.1.8 21 | 22 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.7` 23 | 24 | ## 1.1.7 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-roving-focus@1.1.6` 27 | 28 | ## 1.1.6 29 | 30 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-roving-focus@1.1.5` 31 | 32 | ## 1.1.5 33 | 34 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 35 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-roving-focus@1.1.4`, `@radix-ui/react-primitive@2.1.0` 36 | -------------------------------------------------------------------------------- /packages/react/tabs/README.md: -------------------------------------------------------------------------------- 1 | # `react-tabs` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/tabs). 4 | -------------------------------------------------------------------------------- /packages/react/tabs/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/tabs/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createTabsScope, 4 | // 5 | Tabs, 6 | TabsList, 7 | TabsTrigger, 8 | TabsContent, 9 | // 10 | Root, 11 | List, 12 | Trigger, 13 | Content, 14 | } from './tabs'; 15 | export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './tabs'; 16 | -------------------------------------------------------------------------------- /packages/react/tabs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/toast/README.md: -------------------------------------------------------------------------------- 1 | # `react-toast` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/toast). 4 | -------------------------------------------------------------------------------- /packages/react/toast/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/toast/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createToastScope, 4 | // 5 | ToastProvider, 6 | ToastViewport, 7 | Toast, 8 | ToastTitle, 9 | ToastDescription, 10 | ToastAction, 11 | ToastClose, 12 | // 13 | Provider, 14 | Viewport, 15 | Root, 16 | Title, 17 | Description, 18 | Action, 19 | Close, 20 | } from './toast'; 21 | export type { 22 | ToastProviderProps, 23 | ToastViewportProps, 24 | ToastProps, 25 | ToastTitleProps, 26 | ToastDescriptionProps, 27 | ToastActionProps, 28 | ToastCloseProps, 29 | } from './toast'; 30 | -------------------------------------------------------------------------------- /packages/react/toast/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/toggle-group/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-toggle-group 2 | 3 | ## 1.1.10 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-toggle@1.1.9`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.9 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9`, `@radix-ui/react-toggle@1.1.8` 11 | 12 | ## 1.1.8 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8`, `@radix-ui/react-toggle@1.1.7` 15 | 16 | ## 1.1.7 17 | 18 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.7` 19 | 20 | ## 1.1.6 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-roving-focus@1.1.6`, `@radix-ui/react-toggle@1.1.6` 23 | 24 | ## 1.1.5 25 | 26 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-roving-focus@1.1.5`, `@radix-ui/react-toggle@1.1.5` 27 | 28 | ## 1.1.4 29 | 30 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 31 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-roving-focus@1.1.4`, `@radix-ui/react-toggle@1.1.4`, `@radix-ui/react-primitive@2.1.0` 32 | -------------------------------------------------------------------------------- /packages/react/toggle-group/README.md: -------------------------------------------------------------------------------- 1 | # `react-toggle-group` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/toggle-group). 4 | -------------------------------------------------------------------------------- /packages/react/toggle-group/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/toggle-group/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createToggleGroupScope, 4 | // 5 | ToggleGroup, 6 | ToggleGroupItem, 7 | // 8 | Root, 9 | Item, 10 | } from './toggle-group'; 11 | export type { 12 | ToggleGroupSingleProps, 13 | ToggleGroupMultipleProps, 14 | ToggleGroupItemProps, 15 | } from './toggle-group'; 16 | -------------------------------------------------------------------------------- /packages/react/toggle-group/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/toggle/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-toggle 2 | 3 | ## 1.1.9 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.8 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.1.7 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.1.6 17 | 18 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2` 19 | 20 | ## 1.1.5 21 | 22 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1` 23 | 24 | ## 1.1.4 25 | 26 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 27 | - Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0` 28 | -------------------------------------------------------------------------------- /packages/react/toggle/README.md: -------------------------------------------------------------------------------- 1 | # `react-toggle` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/toggle). 4 | -------------------------------------------------------------------------------- /packages/react/toggle/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/toggle/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | Toggle, 4 | // 5 | Root, 6 | } from './toggle'; 7 | export type { ToggleProps } from './toggle'; 8 | -------------------------------------------------------------------------------- /packages/react/toggle/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/toolbar/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-toolbar 2 | 3 | ## 1.1.10 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-toggle-group@1.1.10`, `@radix-ui/react-separator@1.1.7`, `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.1.9 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9`, `@radix-ui/react-separator@1.1.6`, `@radix-ui/react-toggle-group@1.1.9` 11 | 12 | ## 1.1.8 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8`, `@radix-ui/react-separator@1.1.5`, `@radix-ui/react-toggle-group@1.1.8` 15 | 16 | ## 1.1.7 17 | 18 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.7`, `@radix-ui/react-toggle-group@1.1.7` 19 | 20 | ## 1.1.6 21 | 22 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.6`, `@radix-ui/react-toggle-group@1.1.6` 23 | 24 | ## 1.1.5 25 | 26 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.5`, `@radix-ui/react-toggle-group@1.1.5` 27 | 28 | ## 1.1.4 29 | 30 | - Updated dependencies: `@radix-ui/react-roving-focus@1.1.4`, `@radix-ui/react-toggle-group@1.1.4`, `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-separator@1.1.4` 31 | -------------------------------------------------------------------------------- /packages/react/toolbar/README.md: -------------------------------------------------------------------------------- 1 | # `react-toolbar` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/toolbar). 4 | -------------------------------------------------------------------------------- /packages/react/toolbar/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/toolbar/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createToolbarScope, 4 | // 5 | Toolbar, 6 | ToolbarSeparator, 7 | ToolbarButton, 8 | ToolbarLink, 9 | ToolbarToggleGroup, 10 | ToolbarToggleItem, 11 | // 12 | Root, 13 | Separator, 14 | Button, 15 | Link, 16 | ToggleGroup, 17 | ToggleItem, 18 | } from './toolbar'; 19 | export type { 20 | ToolbarProps, 21 | ToolbarSeparatorProps, 22 | ToolbarButtonProps, 23 | ToolbarLinkProps, 24 | ToolbarToggleGroupSingleProps, 25 | ToolbarToggleGroupMultipleProps, 26 | ToolbarToggleItemProps, 27 | } from './toolbar'; 28 | -------------------------------------------------------------------------------- /packages/react/toolbar/src/toolbar.test.tsx: -------------------------------------------------------------------------------- 1 | import { cleanup, render, fireEvent, getByText } from '@testing-library/react'; 2 | import * as Toolbar from './toolbar'; 3 | import { afterEach, describe, it, vi, expect } from 'vitest'; 4 | 5 | const component = (props: any) => { 6 | return render( 7 | 8 | 9 | 10 | Left 11 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | describe('given a default Toolbar', () => { 18 | afterEach(cleanup); 19 | it('Click event should be called just once', async () => { 20 | const spy = vi.fn(); 21 | 22 | const rendered = component({ 23 | onClick: spy, 24 | }); 25 | 26 | fireEvent( 27 | getByText(rendered.container, 'Left'), 28 | new MouseEvent('click', { 29 | bubbles: true, 30 | cancelable: true, 31 | }) 32 | ); 33 | 34 | expect(spy).toHaveBeenCalledTimes(1); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /packages/react/toolbar/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/tooltip/README.md: -------------------------------------------------------------------------------- 1 | # `react-tooltip` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/components/tooltip). 4 | -------------------------------------------------------------------------------- /packages/react/tooltip/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/tooltip/src/index.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | export { 3 | createTooltipScope, 4 | // 5 | TooltipProvider, 6 | Tooltip, 7 | TooltipTrigger, 8 | TooltipPortal, 9 | TooltipContent, 10 | TooltipArrow, 11 | // 12 | Provider, 13 | Root, 14 | Trigger, 15 | Portal, 16 | Content, 17 | Arrow, 18 | } from './tooltip'; 19 | export type { 20 | TooltipProps, 21 | TooltipProviderProps, 22 | TooltipTriggerProps, 23 | TooltipPortalProps, 24 | TooltipContentProps, 25 | TooltipArrowProps, 26 | } from './tooltip'; 27 | -------------------------------------------------------------------------------- /packages/react/tooltip/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-callback-ref/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-callback-ref` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/use-callback-ref/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-callback-ref/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useCallbackRef } from './use-callback-ref'; 2 | -------------------------------------------------------------------------------- /packages/react/use-callback-ref/src/use-callback-ref.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | /** 4 | * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a 5 | * prop or avoid re-executing effects when passed as a dependency 6 | */ 7 | function useCallbackRef any>(callback: T | undefined): T { 8 | const callbackRef = React.useRef(callback); 9 | 10 | React.useEffect(() => { 11 | callbackRef.current = callback; 12 | }); 13 | 14 | // https://github.com/facebook/react/issues/19240 15 | return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []); 16 | } 17 | 18 | export { useCallbackRef }; 19 | -------------------------------------------------------------------------------- /packages/react/use-callback-ref/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-controllable-state/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-use-controllable-state 2 | 3 | ## 1.2.2 4 | 5 | - Updated dependencies: `@radix-ui/react-use-effect-event@0.0.2` 6 | 7 | ## 1.2.1 8 | 9 | - Updated dependencies: `@radix-ui/react-use-effect-event@0.0.1` 10 | 11 | ## 1.2.0 12 | 13 | - Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455) 14 | -------------------------------------------------------------------------------- /packages/react/use-controllable-state/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-controllable-state` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/use-controllable-state/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-controllable-state/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useControllableState } from './use-controllable-state'; 2 | export { useControllableStateReducer } from './use-controllable-state-reducer'; 3 | -------------------------------------------------------------------------------- /packages/react/use-controllable-state/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-effect-event/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-use-effect-event 2 | 3 | ## 0.0.2 4 | 5 | - Patch additional issues with conditional React imports 6 | 7 | ## 0.0.1 8 | 9 | - Update how potentially missing React APIs are imported to breaking webpack builds. See https://github.com/radix-ui/primitives/issues/3485. 10 | -------------------------------------------------------------------------------- /packages/react/use-effect-event/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-is-hydrated` 2 | 3 | ## Usage 4 | 5 | This is an internal utility, not intended for public usage. 6 | -------------------------------------------------------------------------------- /packages/react/use-effect-event/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-effect-event/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useEffectEvent } from './use-effect-event'; 2 | -------------------------------------------------------------------------------- /packages/react/use-effect-event/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-escape-keydown/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-escape-keydown` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/use-escape-keydown/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-escape-keydown/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useEscapeKeydown } from './use-escape-keydown'; 2 | -------------------------------------------------------------------------------- /packages/react/use-escape-keydown/src/use-escape-keydown.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { useCallbackRef } from '@radix-ui/react-use-callback-ref'; 3 | 4 | /** 5 | * Listens for when the escape key is down 6 | */ 7 | function useEscapeKeydown( 8 | onEscapeKeyDownProp?: (event: KeyboardEvent) => void, 9 | ownerDocument: Document = globalThis?.document 10 | ) { 11 | const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp); 12 | 13 | React.useEffect(() => { 14 | const handleKeyDown = (event: KeyboardEvent) => { 15 | if (event.key === 'Escape') { 16 | onEscapeKeyDown(event); 17 | } 18 | }; 19 | ownerDocument.addEventListener('keydown', handleKeyDown, { capture: true }); 20 | return () => ownerDocument.removeEventListener('keydown', handleKeyDown, { capture: true }); 21 | }, [onEscapeKeyDown, ownerDocument]); 22 | } 23 | 24 | export { useEscapeKeydown }; 25 | -------------------------------------------------------------------------------- /packages/react/use-escape-keydown/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-is-hydrated/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-use-is-hydrated 2 | 3 | ## 0.1.0 4 | 5 | - Update the dependency for `use-sync-external-store` to ensure entrypoint is valid 6 | -------------------------------------------------------------------------------- /packages/react/use-is-hydrated/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-is-hydrated` 2 | 3 | ## Usage 4 | 5 | This is an internal utility, not intended for public usage. 6 | -------------------------------------------------------------------------------- /packages/react/use-is-hydrated/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-is-hydrated/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useIsHydrated } from './use-is-hydrated'; 2 | -------------------------------------------------------------------------------- /packages/react/use-is-hydrated/src/use-is-hydrated.tsx: -------------------------------------------------------------------------------- 1 | import { useSyncExternalStore } from 'use-sync-external-store/shim'; 2 | 3 | /** 4 | * Determines whether or not the component tree has been hydrated. 5 | */ 6 | export function useIsHydrated() { 7 | return useSyncExternalStore( 8 | subscribe, 9 | () => true, 10 | () => false 11 | ); 12 | } 13 | 14 | function subscribe() { 15 | return () => {}; 16 | } 17 | -------------------------------------------------------------------------------- /packages/react/use-is-hydrated/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-layout-effect/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-layout-effect` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/use-layout-effect/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-layout-effect/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useLayoutEffect } from './use-layout-effect'; 2 | -------------------------------------------------------------------------------- /packages/react/use-layout-effect/src/use-layout-effect.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | /** 4 | * On the server, React emits a warning when calling `useLayoutEffect`. 5 | * This is because neither `useLayoutEffect` nor `useEffect` run on the server. 6 | * We use this safe version which suppresses the warning by replacing it with a noop on the server. 7 | * 8 | * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect 9 | */ 10 | const useLayoutEffect = globalThis?.document ? React.useLayoutEffect : () => {}; 11 | 12 | export { useLayoutEffect }; 13 | -------------------------------------------------------------------------------- /packages/react/use-layout-effect/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-previous/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-previous` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/use-previous/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-previous/src/index.ts: -------------------------------------------------------------------------------- 1 | export { usePrevious } from './use-previous'; 2 | -------------------------------------------------------------------------------- /packages/react/use-previous/src/use-previous.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | function usePrevious(value: T) { 4 | const ref = React.useRef({ value, previous: value }); 5 | 6 | // We compare values before making an update to ensure that 7 | // a change has been made. This ensures the previous value is 8 | // persisted correctly between renders. 9 | return React.useMemo(() => { 10 | if (ref.current.value !== value) { 11 | ref.current.previous = ref.current.value; 12 | ref.current.value = value; 13 | } 14 | return ref.current.previous; 15 | }, [value]); 16 | } 17 | 18 | export { usePrevious }; 19 | -------------------------------------------------------------------------------- /packages/react/use-previous/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-rect/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-rect` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/use-rect/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-rect/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useRect } from './use-rect'; 2 | -------------------------------------------------------------------------------- /packages/react/use-rect/src/use-rect.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { observeElementRect } from '@radix-ui/rect'; 3 | 4 | import type { Measurable } from '@radix-ui/rect'; 5 | 6 | /** 7 | * Use this custom hook to get access to an element's rect (getBoundingClientRect) 8 | * and observe it along time. 9 | */ 10 | function useRect(measurable: Measurable | null) { 11 | const [rect, setRect] = React.useState(); 12 | React.useEffect(() => { 13 | if (measurable) { 14 | const unobserve = observeElementRect(measurable, setRect); 15 | return () => { 16 | setRect(undefined); 17 | unobserve(); 18 | }; 19 | } 20 | return; 21 | }, [measurable]); 22 | return rect; 23 | } 24 | 25 | export { useRect }; 26 | -------------------------------------------------------------------------------- /packages/react/use-rect/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/use-size/README.md: -------------------------------------------------------------------------------- 1 | # `react-use-size` 2 | 3 | This is an internal utility, not intended for public usage. 4 | -------------------------------------------------------------------------------- /packages/react/use-size/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/use-size/src/index.ts: -------------------------------------------------------------------------------- 1 | export { useSize } from './use-size'; 2 | -------------------------------------------------------------------------------- /packages/react/use-size/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/react/visually-hidden/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @radix-ui/react-visually-hidden 2 | 3 | ## 1.2.3 4 | 5 | - Replace deprecated 'ElementRef' with 'ComponentRef' (#3426) 6 | - Updated dependencies: `@radix-ui/react-primitive@2.1.3` 7 | 8 | ## 1.2.2 9 | 10 | - Updated dependencies: `@radix-ui/react-primitive@2.1.2` 11 | 12 | ## 1.2.1 13 | 14 | - Updated dependencies: `@radix-ui/react-primitive@2.1.1` 15 | 16 | ## 1.2.0 17 | 18 | - All form controls with internal bubble inputs now use the Radix `Primitive` component by default. This will allow us to expose these components directly so users can better control this behavior in the future. 19 | - Updated dependencies: `@radix-ui/react-primitive@2.1.0` 20 | -------------------------------------------------------------------------------- /packages/react/visually-hidden/README.md: -------------------------------------------------------------------------------- 1 | # `react-visually-hidden` 2 | 3 | View docs [here](https://radix-ui.com/primitives/docs/utilities/visually-hidden). 4 | -------------------------------------------------------------------------------- /packages/react/visually-hidden/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { configs } from '@repo/eslint-config/react-package'; 3 | 4 | export default configs; 5 | -------------------------------------------------------------------------------- /packages/react/visually-hidden/src/index.ts: -------------------------------------------------------------------------------- 1 | export { 2 | VisuallyHidden, 3 | // 4 | Root, 5 | // 6 | VISUALLY_HIDDEN_STYLES, 7 | } from './visually-hidden'; 8 | export type { VisuallyHiddenProps } from './visually-hidden'; 9 | -------------------------------------------------------------------------------- /packages/react/visually-hidden/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@repo/typescript-config/react-library.json", 3 | "compilerOptions": { 4 | "outDir": "dist", 5 | "types": ["@repo/typescript-config/react-library"] 6 | }, 7 | "include": ["src"], 8 | "exclude": ["node_modules", "dist"] 9 | } 10 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'internal/*' 4 | - 'packages/*/*' 5 | -------------------------------------------------------------------------------- /primitives.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/radix-ui/primitives/79304015e13a31bc465545fa1d20e743a0bce3c5/primitives.png -------------------------------------------------------------------------------- /scripts/setup-tests.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/vitest'; 2 | import * as axeMatchers from 'vitest-axe/matchers'; 3 | import { expect } from 'vitest'; 4 | 5 | expect.extend(axeMatchers); 6 | 7 | global.ResizeObserver = class ResizeObserver { 8 | cb: any; 9 | constructor(cb: any) { 10 | this.cb = cb; 11 | } 12 | observe() { 13 | this.cb([{ borderBoxSize: { inlineSize: 0, blockSize: 0 } }]); 14 | } 15 | unobserve() {} 16 | disconnect() {} 17 | }; 18 | -------------------------------------------------------------------------------- /types/global.d.ts: -------------------------------------------------------------------------------- 1 | export {}; 2 | 3 | type RequestIdleCallbackHandle = any; 4 | type RequestIdleCallbackOptions = { 5 | timeout: number; 6 | }; 7 | type RequestIdleCallbackDeadline = { 8 | readonly didTimeout: boolean; 9 | timeRemaining: () => number; 10 | }; 11 | 12 | declare module '*.module.css' { 13 | const classes: { [key: string]: string }; 14 | export default classes; 15 | } 16 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.css' { 2 | const classes: { [key: string]: string }; 3 | export default classes; 4 | } 5 | -------------------------------------------------------------------------------- /vitest.config.mts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | 3 | export default defineConfig({ 4 | test: { 5 | setupFiles: ['./scripts/setup-tests.ts'], 6 | environment: 'jsdom', 7 | include: ['**/*.test.?(c|m)[jt]s?(x)'], 8 | }, 9 | }); 10 | --------------------------------------------------------------------------------