[
  {
    "path": ".changeset/README.md",
    "content": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works\nwith multi-package repos, or single-package repos to help you version and publish your code. You can\nfind the full documentation for it [in our repository](https://github.com/changesets/changesets)\n\nWe have a quick list of common questions to get you started engaging with this project in\n[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)\n"
  },
  {
    "path": ".changeset/changelog.cjs",
    "content": "// https://github.com/ariakit/ariakit/blob/main/.changeset/changelog.cjs\n// MIT License, Copyright (c) Diego Haz\n\n/** @type {import(\"@changesets/types\").ChangelogFunctions[\"getDependencyReleaseLine\"]} */\nasync function getDependencyReleaseLine(_, dependenciesUpdated) {\n  if (dependenciesUpdated.length === 0) return '';\n  const updatedDepenenciesList = dependenciesUpdated.map(\n    (dependency) => `\\`${dependency.name}@${dependency.newVersion}\\``,\n  );\n  return `- Updated dependencies: ${updatedDepenenciesList.join(', ')}`;\n}\n\n/** @type {import(\"@changesets/types\").ChangelogFunctions[\"getReleaseLine\"]} */\nasync function getReleaseLine(changeset) {\n  const [firstLine, ...nextLines] = changeset.summary.split('\\n').map((l) => l.trimEnd());\n\n  if (!nextLines.length) return `- ${firstLine}`;\n\n  return `### ${firstLine}\\n${nextLines.join('\\n')}`;\n}\n\n/**\n * @param {Array<Promise<string>} changelogLines\n */\nasync function getChangelogText(changelogLines) {\n  const lines = await Promise.all(changelogLines);\n  if (!lines.length) return '';\n\n  const isOverviewLine = (l) => l.startsWith('### Overview\\n');\n  const isHeadingLine = (l) => l.startsWith('###');\n  const isOtherLine = (l) => !l.startsWith('###');\n\n  const headingLines = lines\n    .filter(isHeadingLine)\n    .sort((a, b) => {\n      if (isOverviewLine(a)) return -1;\n      if (isOverviewLine(b)) return 1;\n      return 0;\n    })\n    .map((l) => l.replace('### Overview\\n\\n', ''));\n\n  const otherLines = lines.filter(isOtherLine);\n  if (!headingLines.length && !otherLines.length) return '';\n\n  const other = otherLines.join('\\n');\n  if (!headingLines.length) return other;\n\n  const heading = headingLines.join('\\n\\n');\n  if (!otherLines.length) return heading;\n\n  return `${heading}\\n\\n### Other updates\\n\\n${other}`;\n}\n\n/**\n * @param {import(\"@changesets/types\").ModCompWithPackage} release\n * @param {Record<\"major\" | \"minor\" | \"patch\", Array<Promise<string>>} changelogLines\n */\nasync function getChangelogEntry(release, changelogLines) {\n  // const date = new Date().toLocaleDateString(\"en-US\", {\n  //   month: \"long\",\n  //   day: \"numeric\",\n  //   year: \"numeric\",\n  // });\n  const text = await getChangelogText(Object.values(changelogLines).flat());\n  return `## ${release.newVersion}\\n\\n${text}`;\n}\n\nmodule.exports = {\n  getDependencyReleaseLine,\n  getReleaseLine,\n  getChangelogEntry,\n};\n"
  },
  {
    "path": ".changeset/config.json",
    "content": "{\n  \"$schema\": \"https://unpkg.com/@changesets/config@3.1.1/schema.json\",\n  \"changelog\": \"./changelog.cjs\",\n  \"access\": \"public\",\n  \"commit\": false,\n  \"fixed\": [],\n  \"linked\": [],\n  \"baseBranch\": \"main\",\n  \"updateInternalDependencies\": \"patch\",\n  \"snapshot\": {\n    \"useCalculatedVersion\": true,\n    \"prereleaseTemplate\": \"rc.{timestamp}\"\n  },\n  \"ignore\": [\"@repo/ssr-testing\", \"@repo/storybook\"]\n}\n"
  },
  {
    "path": ".changeset/silent-turkeys-fly.md",
    "content": "---\n'@radix-ui/react-collection': patch\n---\n\nUpdated `unstable_createCollection` signature to extend `BaseItemData` internally\n"
  },
  {
    "path": ".changeset/ten-pumas-agree.md",
    "content": "---\n'@radix-ui/react-direction': patch\n---\n\nAdded `use client` directive to module entrypoint\n"
  },
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\nmax_line_length = 80\ntab_width = 2\ntrim_trailing_whitespace = true\n\n[Makefile]\nindent_style = tab\ntab_width = 4\n\n[{*.md,*.mdx}]\ntrim_trailing_whitespace = false\n"
  },
  {
    "path": ".github/CODEOWNERS",
    "content": "# Add the following users as reviewers on new pull requests\n\n- @lucasmotta @hadihallak @chaance\n"
  },
  {
    "path": ".github/CONTRIBUTING.md",
    "content": "# Contributing to Radix Primitives\n\n## Code of Conduct\n\nRadix has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it.\n\nPlease read [the full text](/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.\n\n## Heuristics\n\n[heuristic](<https://en.wikipedia.org/wiki/Heuristic_(computer_science)>)\n/ˌhjʊ(ə)ˈrɪstɪk/\n\n> A technique designed for solving a problem more quickly when classic methods are too slow, or for finding an approximate solution when classic methods fail to find any exact solution\n\n- Priority is the best User Experience\n- Complexity should be introduced when it’s inevitable\n- Code should be easy to reason about\n- Code should be easy to delete\n- Avoid abstracting too early\n- Avoid thinking too far in the future\n\n## Questions\n\nIf you have questions about Radix Primitives, be sure to check out the docs where we have several examples and detailed API references that may help you solve your problem. You can also share your questions on [GitHub Discussions](https://github.com/radix-ui/primitives/discussions).\n\n## How to contribute\n\nThere are many ways to contribute to the project. Code is just one possible means of contribution.\n\n- **Feedback.** Tell us what we're doing well or where we can improve.\n- **Support.** You can answer questions on StackOverflow or [GitHub Discussions](https://github.com/radix-ui/primitives/discussions), or provide solutions for others in [open issues](https://github.com/radix-ui/primitives/issues).\n- **Write.** If you come up with an interesting example, write about it. Post it to your blog and share it with us. We'd love to see what folks in the community build with Primitives!\n- **Report.** Create issues with bug reports so we can make Primitives even better.\n\n## Working on your first Pull Request?\n\nThere are a lot of great resources on creating a good pull request. We've included a few below, but don't be shy—we appreciate all contriibutions and are happy to help those who are willing to help us!\n\n- [How to Contribute to a Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)\n\n## Preparing a Pull Request\n\n[Pull Requests](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request) are always welcome, but before working on a large change, it is best to open an issue first to discuss it with maintainers.\n\nA good PR is small, focuses on a single feature or improvement, and clearly communicates the problem it solves. Try not to include more than one issue in a single PR. It's much easier for us to review multiple small pull requests than one that is large and unwieldy.\n\n1. [Fork the repository](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo).\n\n2. Clone the fork to your local machine and add upstream remote:\n\n```sh\ngit clone https://github.com/<your username>/primitives.git\ncd primitives\ngit remote add upstream https://github.com/radix-ui/primitives.git\n```\n\n3. Synchronize your local `main` branch with the upstream remote:\n\n```sh\ngit checkout main\ngit pull upstream main\n```\n\n4. Make sure your Node version matches the [.nvmrc](../.nvmrc).\n\n```\nnode -v\n```\n\n1. Install dependencies with [pnpm](https://pnpm.io):\n\n```sh\npnpm install\n```\n\n6. Create a new branch related to your PR:\n\n```sh\ngit checkout -b my-bug-fix\n```\n\n7. Make changes, then commit and push to your forked repository:\n\n```sh\ngit push -u origin HEAD\n```\n\n8. Go to [the repository](https://github.com/radix-ui/primitives) and [make a Pull Request](https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).\n\n9. We will review your Pull Request and either merge it, request changes to it, or close it with an explanation.\n\n## Working locally\n\nThe repo is managed with pnpm workspaces.\n\n### Development\n\n```bash\n# install dependencies\npnpm install\n\n# start Storybook and see examples in the browser\npnpm dev\n```\n\nMake your changes and check that they resolve the problem with an example in Storybook. We also suggest adding tests to support your change, and then run `pnpm test` to make sure nothing is broken.\n\nYou also need to inform Changesets that a particular package has changed for proper versioning. Run `pnpm changeset` to mark the appropriate type of change for those packages, then commit the resulting Changeset files.\n\nLastly, run `pnpm build` to ensure that the build runs successfully before submitting the pull request.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/Bug_report.md",
    "content": "---\nname: 'Bug report'\nabout: 'Create a bug report'\n---\n\n## Bug report\n\n### Current Behavior\n\n<!-- If applicable, add screenshots/videos to help explain the problem. -->\n\n### Expected behavior\n\n<!-- A clear and concise description of what you expected to happen. -->\n\n### Reproducible example\n\n[CodeSandbox Template](https://codesandbox.io/s/2r30e)\n\n### Suggested solution\n\n<!-- How could we solve this bug? What changes would need to made? -->\n\n### Additional context\n\n<!-- Add any other context about the problem here.  -->\n\n### Your environment\n\n<!-- Very important for us to help you debug. Please fill this out! -->\n\n| Software         | Name(s) | Version |\n| ---------------- | ------- | ------- |\n| Radix Package(s) |         |         |\n| React            | n/a     |         |\n| Browser          |         |         |\n| Assistive tech   |         |         |\n| Node             | n/a     |         |\n| npm/yarn/pnpm    |         |         |\n| Operating System |         |         |\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/Documentation.md",
    "content": "---\nname: 'Documentation'\nabout: 'Suggestions for Radix documentation'\n---\n\n## Documentation\n\n### Relevant Radix Component(s)\n\n<!-- Tell us which components you'd like to see improvements for. -->\n\n### Examples from other doc sites\n\n<!-- Please link to examples of your suggestion if applicable. -->\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/Feature_request.md",
    "content": "---\nname: 'Feature request'\nabout: 'Suggest an idea for a feature or a new component'\n---\n\n## Feature request\n\n### Overview\n\n<!-- A clear and concise description of the feature you'd like to see.  -->\n\n### Examples in other libraries\n\n<!-- Please link to examples of this feature implemented elsewhere if it exists.  -->\n\n### Who does this impact? Who is this for?\n\n<!-- Who is this for? All users? Beginners? Advanced? Yourself? Help us understand the value of this feature! -->\n\n### Additional context\n\n<!-- Add any other context or links about the request here. -->\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/Question.md",
    "content": "---\nname: 'Question'\nabout: 'For usage questions, please use Stack Overflow or use GitHub Discussions'\n---\n\n## Question\n\nFor 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!\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE.md",
    "content": "<!--\n\nThank you for contributing! Please follow the steps below to help us process your PR quickly.\n\n- 📝 Use a meaningful title for the pull request and include the name of the package modified.\n- ✅ Add or edit tests to reflect the change (run `pnpm test`).\n- 🔍 Add or edit Storybook examples to reflect the change (run `pnpm dev`).\n- 🙏 Please review your own PR to check for anything you may have missed.\n\n-->\n\n### Description\n\n<!-- Describe the change you are introducing -->\n"
  },
  {
    "path": ".github/workflows/build.yml",
    "content": "name: Build\n\non:\n  pull_request:\n    branches:\n      - main\n\nconcurrency:\n  group: ${{ github.workflow }}-${{ github.ref }}\n  cancel-in-progress: true\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          run_install: false\n\n      - name: Setup Node\n        uses: actions/setup-node@v4\n        with:\n          node-version-file: '.nvmrc'\n          cache: 'pnpm'\n\n      - name: Install dependencies\n        run: pnpm install --frozen-lockfile\n\n      - name: Lint\n        run: pnpm lint\n\n      - name: Run build\n        run: pnpm build\n\n      - name: Run tests\n        run: pnpm test:ci\n"
  },
  {
    "path": ".github/workflows/chromatic.yml",
    "content": "name: 'Chromatic'\n\non:\n  push:\n    branches:\n      - main\n  # \"You must append a colon (:) to all events, including events without configuration.\"\n  # https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#example-using-multiple-events-with-activity-types-or-configuration\n  pull_request:\n\nconcurrency:\n  group: ${{ github.workflow }}-${{ github.ref }}\n  cancel-in-progress: true\n\njobs:\n  chromatic-deployment:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n        with:\n          fetch-depth: 0\n\n      - name: Setup pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          run_install: false\n\n      - name: Setup Node\n        uses: actions/setup-node@v4\n        with:\n          node-version-file: '.nvmrc'\n          cache: 'pnpm'\n\n      - name: Install dependencies\n        run: pnpm install --frozen-lockfile\n\n      - name: Publish to Chromatic\n        uses: chromaui/action@v1\n        with:\n          token: ${{ secrets.GITHUB_TOKEN }}\n          projectToken: 63f2bd83c33c\n          exitOnceUploaded: true\n          exitZeroOnChanges: true\n"
  },
  {
    "path": ".github/workflows/publish-snapshot.yml",
    "content": "name: 'Publish Snapshot Release'\n\non:\n  push:\n    branches:\n      - main\n    paths-ignore:\n      # - '.github/**'\n      - './package.json'\n      - './changeset/**/*'\n      - '/apps/**/*'\n      - '/internal/**/*'\n      - '/cypress/**/*'\n      - '**/*.test.ts'\n      - '**/*.test.tsx'\n\nenv:\n  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n\nconcurrency: ${{ github.workflow }}-${{ github.ref }}\n\njobs:\n  publish-snapshot:\n    if: github.repository == 'radix-ui/primitives'\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          run_install: false\n\n      - name: Setup Node\n        uses: actions/setup-node@v4\n        with:\n          node-version-file: '.nvmrc'\n          registry-url: 'https://registry.npmjs.org'\n          cache: 'pnpm'\n\n      - name: Install dependencies\n        run: pnpm install --frozen-lockfile\n\n      - name: Build packages\n        run: pnpm build\n\n      - name: Write .npmrc\n        run: echo \"//registry.npmjs.org/:_authToken=$NPM_TOKEN\" > .npmrc\n\n      - name: Update snapshot version\n        run: pnpm run bump:next\n\n      - name: Publish snapshot\n        run: pnpm run release:next --no-git-checks\n"
  },
  {
    "path": ".github/workflows/publish-stable.yml",
    "content": "name: 'Publish Stable Release'\n\non:\n  push:\n    branches:\n      - stable\n\nenv:\n  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n\nconcurrency: ${{ github.workflow }}-${{ github.ref }}\n\njobs:\n  publish-stable:\n    if: github.repository == 'radix-ui/primitives'\n    name: Version or publish\n    timeout-minutes: 15\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout\n        uses: actions/checkout@v4\n\n      - name: Setup pnpm\n        uses: pnpm/action-setup@v4\n        with:\n          run_install: false\n\n      - name: Setup Node\n        uses: actions/setup-node@v4\n        with:\n          node-version-file: '.nvmrc'\n          registry-url: 'https://registry.npmjs.org'\n          cache: 'pnpm'\n\n      - name: Install dependencies\n        run: pnpm install --frozen-lockfile\n\n      - name: Build packages\n        run: pnpm build\n\n      - name: Write .npmrc\n        run: echo \"//registry.npmjs.org/:_authToken=$NPM_TOKEN\" > .npmrc\n\n      - name: Create Release Pull Request or Publish to npm\n        id: changesets\n        uses: changesets/action@v1\n        with:\n          title: New release\n          commit: New release\n          version: pnpm run bump:stable\n          publish: pnpm run release:stable:ci\n          createGithubReleases: false\n"
  },
  {
    "path": ".gitignore",
    "content": "*.log*\n.DS_Store\nnode_modules\ndist\ntest-output.*\n.cache\nstorybook-static\n.env\n.eslintcache\n.pnp\n.pnp.js\n*.pem\n.npmrc\n\n# Testing\ncypress/videos\ncypress/screenshots\n\n# Editor-specific\n.vscode\n.idea\n\n# So devs can maintain their own todo lists in the project\nTODO.md\n"
  },
  {
    "path": ".nvmrc",
    "content": "22\n"
  },
  {
    "path": ".prettierignore",
    "content": ".next\nnode_modules\n.yarn\ndist\nstorybook-static\n.pnp\n.pnp.js\ncoverage\npnpm-lock.yaml\npackage-lock.json\nyarn.lock\n*.log*\n.DS_Store\n*.pem\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"printWidth\": 100,\n  \"singleQuote\": true\n}\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n  advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n  address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at colm@workos.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2022 WorkOS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "[![Radix Primitives Logo](primitives.png)](https://radix-ui.com/primitives)\n\n# Radix Primitives\n\n**An open-source UI component library for building high-quality, accessible design systems and web apps.**\n\nRadix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.\n\n---\n\n## Installation\n\nFirst, install pnpm if you haven't already. Open your terminal and run:\n\n```bash\nnpm install -g pnpm\n```\n\nThen, install the dependencies:\n\n```bash\npnpm install\n```\n\n## Documentation\n\nFor full documentation, visit [radix-ui.com/primitives/docs](https://www.radix-ui.com/primitives/docs).\n\n## Releases\n\nFor changelog, visit [radix-ui.com/primitives/docs/overview/releases](https://www.radix-ui.com/primitives/docs/overview/releases).\n\n## Contributing\n\nPlease follow our [contributing guidelines](./.github/CONTRIBUTING.md).\n\n---\n\n## Community\n\n- [Discord](https://discord.com/invite/7Xb99uG) - To get involved with the Radix community, ask questions and share tips.\n- [Twitter](https://twitter.com/radix_ui) - To receive updates, announcements, blog posts, and general Radix tips.\n\n## Thanks\n\n<a href=\"https://www.chromatic.com/\"><img src=\"https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" /></a>\n\nThanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.\n\n---\n\n## License\n\nLicensed under the MIT License, Copyright © 2022-present [WorkOS](https://workos.com).\n"
  },
  {
    "path": "apps/ssr-testing/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\n*.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "apps/ssr-testing/README.md",
    "content": "# `@repo/ssr-testing`\n\nThis is a testing playground for SSR support in our primitives using a [Next.js](https://nextjs.org/) project.\n\n## Getting Started\n\nFrom the root of the repo, run the development server:\n\n```sh\npnpm dev:ssr\n```\n"
  },
  {
    "path": "apps/ssr-testing/app/accessible-icon/page.tsx",
    "content": "import * as React from 'react';\nimport { AccessibleIcon } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <button type=\"button\">\n      <AccessibleIcon.Root label=\"Close\">\n        <span>X</span>\n      </AccessibleIcon.Root>\n    </button>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/accordion/page.tsx",
    "content": "import * as React from 'react';\nimport { Accordion } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Accordion.Root type=\"multiple\">\n      <Accordion.Item value=\"one\">\n        <Accordion.Header>\n          <Accordion.Trigger>One</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content>\n          Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n          integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n          habitant sed.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"two\">\n        <Accordion.Header>\n          <Accordion.Trigger>Two</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content>\n          Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n          porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"three\" disabled>\n        <Accordion.Header>\n          <Accordion.Trigger>Three (disabled)</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content>\n          Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos\n          euismod magna, nec tempor pulvinar eu etiam mattis.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item value=\"four\">\n        <Accordion.Header>\n          <Accordion.Trigger>Four</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content>\n          Odio placerat quisque sapien sagittis non sociis ligula penatibus dignissim vitae, enim\n          vulputate nullam semper potenti etiam volutpat libero.\n          <button>Cool</button>\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/alert-dialog/page.tsx",
    "content": "import * as React from 'react';\nimport { AlertDialog } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <AlertDialog.Root>\n      <AlertDialog.Trigger>delete everything</AlertDialog.Trigger>\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay />\n        <AlertDialog.Content>\n          <AlertDialog.Title>Are you sure?</AlertDialog.Title>\n          <AlertDialog.Description>\n            This will do a very dangerous thing. Thar be dragons!\n          </AlertDialog.Description>\n          <AlertDialog.Action>yolo, do it</AlertDialog.Action>\n          <AlertDialog.Cancel>maybe not</AlertDialog.Cancel>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/avatar/page.tsx",
    "content": "import * as React from 'react';\nimport { Avatar } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Avatar.Root>\n      <Avatar.Fallback>A</Avatar.Fallback>\n      <Avatar.AvatarImage src=\"https://picsum.photos/id/1005/400/400\" />\n    </Avatar.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/checkbox/page.tsx",
    "content": "import * as React from 'react';\nimport { Checkbox } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Checkbox.Root>\n      [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]\n    </Checkbox.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/collapsible/page.tsx",
    "content": "import * as React from 'react';\nimport { Collapsible } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Collapsible.Root>\n      <Collapsible.Trigger>Trigger</Collapsible.Trigger>\n      <Collapsible.Content>Content</Collapsible.Content>\n    </Collapsible.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/context-menu/page.tsx",
    "content": "import * as React from 'react';\nimport { ContextMenu } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <ContextMenu.Root>\n      <ContextMenu.Trigger>Right click here</ContextMenu.Trigger>\n      <ContextMenu.Portal>\n        <ContextMenu.Content alignOffset={-5}>\n          <ContextMenu.Item>Undo</ContextMenu.Item>\n          <ContextMenu.Item>Redo</ContextMenu.Item>\n          <ContextMenu.Separator />\n          <ContextMenu.Item disabled>Cut</ContextMenu.Item>\n          <ContextMenu.Item>Copy</ContextMenu.Item>\n          <ContextMenu.Item>Paste</ContextMenu.Item>\n        </ContextMenu.Content>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/dialog/page.tsx",
    "content": "import * as React from 'react';\nimport { Dialog } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Dialog.Root defaultOpen>\n      <Dialog.Trigger>open</Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay />\n        <Dialog.Content>\n          <Dialog.Title>Title</Dialog.Title>\n          <Dialog.Description>Description</Dialog.Description>\n          <Dialog.Close>close</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/dropdown-menu/page.tsx",
    "content": "import * as React from 'react';\nimport { DropdownMenu } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n      <DropdownMenu.Portal>\n        <DropdownMenu.Content sideOffset={5}>\n          <DropdownMenu.Item>Undo</DropdownMenu.Item>\n          <DropdownMenu.Item>Redo</DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item disabled>Cut</DropdownMenu.Item>\n          <DropdownMenu.Item>Copy</DropdownMenu.Item>\n          <DropdownMenu.Item>Paste</DropdownMenu.Item>\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\n      </DropdownMenu.Portal>\n    </DropdownMenu.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/form/page.tsx",
    "content": "import * as React from 'react';\nimport { Form } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Form.Root>\n      <Form.Field name=\"email\">\n        <Form.Label>Email</Form.Label>\n        <Form.Control type=\"email\" required />\n        <Form.Message match=\"valueMissing\">Value is missing</Form.Message>\n        <Form.Message match=\"typeMismatch\">Email is invalid</Form.Message>\n      </Form.Field>\n    </Form.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/hover-card/page.tsx",
    "content": "import * as React from 'react';\nimport { HoverCard } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <HoverCard.Root>\n      <HoverCard.Trigger>Hover me</HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content>\n          <HoverCard.Arrow width={20} height={10} />\n          Nicely done!\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/label/page.tsx",
    "content": "import * as React from 'react';\nimport { Label } from 'radix-ui';\n\nexport default function Page() {\n  return <Label.Root>Label</Label.Root>;\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/layout.tsx",
    "content": "import * as React from 'react';\nimport type { Metadata } from 'next';\nimport Link from 'next/link';\n\nexport default function Layout({ children }: { children: React.ReactNode }) {\n  return (\n    <React.StrictMode>\n      <html lang=\"en\">\n        <body style={{ margin: 0, padding: '2em 3em' }}>\n          <h1>SSR / RSC testing</h1>\n          <div style={{ display: 'flex', gap: '10em' }}>\n            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5em' }}>\n              <Link href=\"/accessible-icon\">AccessibleIcon</Link>\n              <Link href=\"/accordion\">Accordion</Link>\n              <Link href=\"/alert-dialog\">AlertDialog</Link>\n              <Link href=\"/avatar\">Avatar</Link>\n              <Link href=\"/checkbox\">Checkbox</Link>\n              <Link href=\"/collapsible\">Collapsible</Link>\n              <Link href=\"/context-menu\">ContextMenu</Link>\n              <Link href=\"/dialog\">Dialog</Link>\n              <Link href=\"/dropdown-menu\">DropdownMenu</Link>\n              <Link href=\"/form\">Form</Link>\n              <Link href=\"/hover-card\">HoverCard</Link>\n              <Link href=\"/label\">Label</Link>\n              <Link href=\"/menubar\">Menubar</Link>\n              <Link href=\"/navigation-menu\">NavigationMenu</Link>\n              <Link href=\"/one-time-password-field\">OneTimePasswordField</Link>\n              <Link href=\"/password-toggle-field\">PasswordToggleField</Link>\n              <Link href=\"/popover\">Popover</Link>\n              <Link href=\"/portal\">Portal</Link>\n              <Link href=\"/progress\">Progress</Link>\n              <Link href=\"/radio-group\">RadioGroup</Link>\n              <Link href=\"/roving-focus-group\">RovingFocusGroup</Link>\n              <Link href=\"/scroll-area\">ScrollArea</Link>\n              <Link href=\"/select\">Select</Link>\n              <Link href=\"/separator\">Separator</Link>\n              <Link href=\"/slider\">Slider</Link>\n              <Link href=\"/slot\">Slot</Link>\n              <Link href=\"/switch\">Switch</Link>\n              <Link href=\"/tabs\">Tabs</Link>\n              <Link href=\"/toast\">Toast</Link>\n              <Link href=\"/toggle-group\">ToggleGroup</Link>\n              <Link href=\"/toolbar\">Toolbar</Link>\n              <Link href=\"/tooltip\">Tooltip</Link>\n              <Link href=\"/visually-hidden\">VisuallyHidden</Link>\n            </div>\n\n            <div>{children}</div>\n          </div>\n        </body>\n      </html>\n    </React.StrictMode>\n  );\n}\n\nexport const metadata: Metadata = {\n  title: 'SSR testing',\n};\n"
  },
  {
    "path": "apps/ssr-testing/app/menubar/page.tsx",
    "content": "import * as React from 'react';\nimport { Menubar } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Menubar.Root>\n      <Menubar.Menu>\n        <Menubar.Trigger>Open</Menubar.Trigger>\n        <Menubar.Portal>\n          <Menubar.Content>\n            <Menubar.Label>Menu</Menubar.Label>\n            <Menubar.Item>Item 1</Menubar.Item>\n            <Menubar.Item>Item 2</Menubar.Item>\n            <Menubar.Item>Item 3</Menubar.Item>\n            <Menubar.Arrow />\n          </Menubar.Content>\n        </Menubar.Portal>\n      </Menubar.Menu>\n    </Menubar.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/navigation-menu/page.tsx",
    "content": "import * as React from 'react';\nimport { NavigationMenu } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <NavigationMenu.Root>\n      <NavigationMenu.List>\n        <NavigationMenu.Item>\n          <NavigationMenu.Trigger>Nav Menu Item 1</NavigationMenu.Trigger>\n          <NavigationMenu.Content>\n            <NavigationMenu.Link href=\"/\">Link</NavigationMenu.Link>\n          </NavigationMenu.Content>\n        </NavigationMenu.Item>\n\n        <NavigationMenu.Item>\n          <NavigationMenu.Link href=\"/\">Nav Menu Item 2</NavigationMenu.Link>\n        </NavigationMenu.Item>\n      </NavigationMenu.List>\n    </NavigationMenu.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/one-time-password-field/page.tsx",
    "content": "import * as React from 'react';\nimport { unstable_OneTimePasswordField as OneTimePasswordField } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <div>\n      <OneTimePasswordField.Root placeholder=\"123456\">\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.HiddenInput />\n      </OneTimePasswordField.Root>\n      <h2>With indices</h2>\n      <OneTimePasswordField.Root placeholder=\"123456\">\n        <OneTimePasswordField.Input index={0} />\n        <OneTimePasswordField.Input index={1} />\n        <OneTimePasswordField.Input index={2} />\n        <OneTimePasswordField.Input index={3} />\n        <OneTimePasswordField.Input index={4} />\n        <OneTimePasswordField.Input index={5} />\n        <OneTimePasswordField.HiddenInput />\n      </OneTimePasswordField.Root>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/page.tsx",
    "content": "export default function Page() {\n  return null;\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/password-toggle-field/page.tsx",
    "content": "import * as React from 'react';\nimport { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <div style={{ display: 'flex', gap: '1em', flexDirection: 'column' }}>\n      <div>\n        <PasswordToggleField.Root>\n          <PasswordToggleField.Input />\n          <PasswordToggleField.Toggle>\n            <PasswordToggleField.Slot visible=\"Hide\" hidden=\"Show\" />\n          </PasswordToggleField.Toggle>\n        </PasswordToggleField.Root>\n      </div>\n      <div>\n        <PasswordToggleField.Root>\n          <PasswordToggleField.Input />\n          <PasswordToggleField.Toggle>\n            <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />\n          </PasswordToggleField.Toggle>\n        </PasswordToggleField.Root>\n      </div>\n    </div>\n  );\n}\n\nfunction EyeClosedIcon() {\n  return (\n    <svg\n      width=\"15\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 10.9999 7.50001 10.9999C6.99965 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.3989 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 9.99991 7.50001 9.99991C10.3078 9.99991 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nfunction EyeOpenIcon() {\n  return (\n    <svg\n      width=\"15\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/popover/page.tsx",
    "content": "import * as React from 'react';\nimport { Popover } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Popover.Root>\n      <Popover.Trigger>open</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content sideOffset={5}>\n          <Popover.Close>close</Popover.Close>\n          <Popover.Arrow width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/portal/conditional-portal.tsx",
    "content": "'use client';\n\nimport * as React from 'react';\nimport { Portal } from 'radix-ui';\n\nexport const ConditionalPortal = () => {\n  const [container, setContainer] = React.useState<Element | null>(null);\n  const [open, setOpen] = React.useState(false);\n  return (\n    <div>\n      <button onClick={() => setOpen((prev) => !prev)}>Toggle another portal</button>\n      <b ref={setContainer} />\n      {open && (\n        <Portal.Root container={container}>\n          <span>This content is rendered in a custom container</span>\n        </Portal.Root>\n      )}\n    </div>\n  );\n};\n"
  },
  {
    "path": "apps/ssr-testing/app/portal/custom-portal-container.tsx",
    "content": "'use client';\n\nimport * as React from 'react';\nimport { Portal } from 'radix-ui';\n\nexport const CustomPortalContainer = () => {\n  const [container, setContainer] = React.useState<Element | null>(null);\n  return (\n    <div>\n      <em ref={setContainer} />\n      <Portal.Root container={container}>\n        <span>This content is rendered in a custom container</span>\n      </Portal.Root>\n    </div>\n  );\n};\n"
  },
  {
    "path": "apps/ssr-testing/app/portal/page.tsx",
    "content": "import * as React from 'react';\nimport { Portal } from 'radix-ui';\nimport { CustomPortalContainer } from './custom-portal-container';\nimport { ConditionalPortal } from './conditional-portal';\n\nexport default function Page() {\n  return (\n    <div>\n      <div\n        style={{\n          maxWidth: 300,\n          maxHeight: 200,\n          overflow: 'auto',\n          border: '1px solid',\n        }}\n      >\n        <h1>This content is rendered in the main DOM tree</h1>\n        <p>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos porro, est ex quia itaque\n          facere fugit necessitatibus aut enim. Nisi rerum quae, repellat in perspiciatis explicabo\n          laboriosam necessitatibus eius pariatur.\n        </p>\n\n        <Portal.Root>\n          <h1>This content is rendered in a portal (another DOM tree)</h1>\n          <p>\n            Because of the portal, it can appear in a different DOM tree from the main one (by\n            default a new element inside the body), even though it is part of the same React tree.\n          </p>\n        </Portal.Root>\n      </div>\n\n      <br />\n      <CustomPortalContainer />\n\n      <br />\n      <ConditionalPortal />\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/progress/page.tsx",
    "content": "import * as React from 'react';\nimport { Progress } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Progress.Root value={20}>\n      <Progress.Indicator>Progress</Progress.Indicator>\n    </Progress.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/radio-group/page.tsx",
    "content": "import * as React from 'react';\nimport { Label, RadioGroup } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Label.Root>\n      Favourite pet\n      <RadioGroup.Root defaultValue=\"1\">\n        <Label.Root>\n          <RadioGroup.Item value=\"1\">\n            [ <RadioGroup.Indicator>X</RadioGroup.Indicator> ]\n          </RadioGroup.Item>\n          Cat\n        </Label.Root>\n        <br />\n\n        <Label.Root>\n          <RadioGroup.Item value=\"2\">\n            [ <RadioGroup.Indicator>X</RadioGroup.Indicator> ]\n          </RadioGroup.Item>\n          Dog\n        </Label.Root>\n        <br />\n\n        <Label.Root>\n          <RadioGroup.Item value=\"3\">\n            [ <RadioGroup.Indicator>X</RadioGroup.Indicator> ]\n          </RadioGroup.Item>\n          Rabbit\n        </Label.Root>\n        <br />\n      </RadioGroup.Root>\n    </Label.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/roving-focus-group/page.tsx",
    "content": "import * as React from 'react';\nimport { RovingFocusProvider, RovingFocusToggle, ButtonGroup, Button } from './roving-focus.client';\n\nexport default function Page() {\n  return (\n    <>\n      <h1>Basic</h1>\n      <RovingFocusProvider>\n        <div>\n          <RovingFocusToggle />\n        </div>\n\n        <h3>no orientation (both) + no looping</h3>\n\n        <ButtonGroup defaultValue=\"two\">\n          <Button value=\"one\">One</Button>\n          <Button value=\"two\">Two</Button>\n          <Button disabled value=\"three\">\n            Three\n          </Button>\n          <Button value=\"four\">Four</Button>\n        </ButtonGroup>\n\n        <h3>no orientation (both) + looping</h3>\n\n        <ButtonGroup loop>\n          <Button value=\"one\">One</Button>\n          <Button value=\"two\">Two</Button>\n          <Button disabled value=\"three\">\n            Three\n          </Button>\n          <Button value=\"four\">Four</Button>\n        </ButtonGroup>\n\n        <h3>horizontal orientation + no looping</h3>\n\n        <ButtonGroup orientation=\"horizontal\">\n          <Button value=\"one\">One</Button>\n          <Button value=\"two\">Two</Button>\n          <Button disabled value=\"three\">\n            Three\n          </Button>\n          <Button value=\"four\">Four</Button>\n        </ButtonGroup>\n\n        <h3>horizontal orientation + looping</h3>\n\n        <ButtonGroup orientation=\"horizontal\" loop>\n          <Button value=\"one\">One</Button>\n          <Button value=\"two\">Two</Button>\n          <Button disabled value=\"three\">\n            Three\n          </Button>\n          <Button value=\"four\">Four</Button>\n        </ButtonGroup>\n\n        <h3>vertical orientation + no looping</h3>\n\n        <ButtonGroup orientation=\"vertical\">\n          <Button value=\"one\">One</Button>\n          <Button value=\"two\">Two</Button>\n          <Button disabled value=\"three\">\n            Three\n          </Button>\n          <Button value=\"four\">Four</Button>\n        </ButtonGroup>\n\n        <h3>vertical orientation + looping</h3>\n\n        <ButtonGroup orientation=\"vertical\" loop>\n          <Button value=\"one\">One</Button>\n          <Button value=\"two\">Two</Button>\n          <Button disabled value=\"three\">\n            Three\n          </Button>\n          <Button value=\"four\">Four</Button>\n        </ButtonGroup>\n      </RovingFocusProvider>\n\n      <h1>Nested</h1>\n      <ButtonGroup orientation=\"vertical\" loop>\n        <Button value=\"1\">1</Button>\n\n        <div style={{ display: 'flex', flexDirection: 'column' }}>\n          <Button value=\"2\" style={{ marginBottom: 10 }}>\n            2\n          </Button>\n\n          <ButtonGroup orientation=\"horizontal\" loop>\n            <Button value=\"2.1\">2.1</Button>\n            <Button value=\"2.2\">2.2</Button>\n            <Button disabled value=\"2.3\">\n              2.3\n            </Button>\n            <Button value=\"2.4\">2.4</Button>\n          </ButtonGroup>\n        </div>\n\n        <Button value=\"3\" disabled>\n          3\n        </Button>\n        <Button value=\"4\">4</Button>\n      </ButtonGroup>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/roving-focus-group/roving-focus.client.tsx",
    "content": "'use client';\nimport * as React from 'react';\nimport { composeEventHandlers, RovingFocus } from 'radix-ui/internal';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst RovingFocusContext = React.createContext<{\n  dir: 'ltr' | 'rtl';\n  setDir: React.Dispatch<React.SetStateAction<Direction>>;\n}>({\n  dir: 'ltr',\n  setDir: () => void 0,\n});\nRovingFocusContext.displayName = 'RovingFocusContext';\n\nexport function RovingFocusProvider({ children }: { children: React.ReactNode }) {\n  const [dir, setDir] = React.useState<Direction>('ltr');\n  return (\n    <div dir={dir}>\n      <RovingFocusContext value={{ dir, setDir }}>{children}</RovingFocusContext>\n    </div>\n  );\n}\n\nexport function RovingFocusToggle() {\n  const { dir, setDir } = React.use(RovingFocusContext);\n  return (\n    <button type=\"button\" onClick={() => setDir((prev) => (prev === 'ltr' ? 'rtl' : 'ltr'))}>\n      Toggle to {dir === 'ltr' ? 'rtl' : 'ltr'}\n    </button>\n  );\n}\n\nconst ButtonGroupContext = React.createContext<{\n  value?: string;\n  setValue: React.Dispatch<React.SetStateAction<string | undefined>>;\n}>({} as any);\n\ntype ButtonGroupProps = Omit<React.ComponentPropsWithRef<'div'>, 'defaultValue'> &\n  RovingFocus.RovingFocusGroupProps & { defaultValue?: string };\n\nexport function ButtonGroup({ defaultValue, ...props }: ButtonGroupProps) {\n  const [value, setValue] = React.useState(defaultValue);\n  const { dir } = React.use(RovingFocusContext);\n  return (\n    <ButtonGroupContext value={{ value, setValue }}>\n      <RovingFocus.Root\n        dir={dir}\n        {...props}\n        style={{\n          ...props.style,\n          display: 'inline-flex',\n          flexDirection: props.orientation === 'vertical' ? 'column' : 'row',\n          gap: 10,\n        }}\n      />\n    </ButtonGroupContext>\n  );\n}\n\ntype ButtonProps = Omit<React.ComponentPropsWithRef<'button'>, 'value'> & { value?: string };\n\nexport function Button(props: ButtonProps) {\n  const { value: contextValue, setValue } = React.use(ButtonGroupContext);\n  const isSelected =\n    contextValue !== undefined && props.value !== undefined && contextValue === props.value;\n\n  return (\n    <RovingFocus.Item asChild active={isSelected}>\n      <button\n        {...props}\n        style={{\n          ...props.style,\n          border: '1px solid',\n          borderColor: '#ccc',\n          padding: '5px 10px',\n          borderRadius: 5,\n          ...(isSelected\n            ? {\n                borderColor: 'black',\n                backgroundColor: 'black',\n                color: 'white',\n              }\n            : {}),\n        }}\n        onClick={props.disabled ? undefined : () => setValue(props.value)}\n        onFocus={composeEventHandlers(props.onFocus, (event) => {\n          if (contextValue !== undefined) {\n            event.target.click();\n          }\n        })}\n      />\n    </RovingFocus.Item>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/scroll-area/page.tsx",
    "content": "import * as React from 'react';\nimport { ScrollArea } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <ScrollArea.Root style={{ width: '400px', height: '400px' }}>\n      <ScrollArea.Scrollbar orientation=\"vertical\">\n        <ScrollArea.Thumb />\n      </ScrollArea.Scrollbar>\n\n      <ScrollArea.Scrollbar orientation=\"horizontal\">\n        <ScrollArea.Thumb />\n      </ScrollArea.Scrollbar>\n\n      <ScrollArea.Viewport style={{ width: '2000px', padding: 20 }}>\n        <LongContent />\n        <LongContent />\n        <LongContent />\n        <LongContent />\n        <LongContent />\n        <LongContent />\n        <LongContent />\n      </ScrollArea.Viewport>\n\n      <ScrollArea.Corner />\n    </ScrollArea.Root>\n  );\n}\n\nfunction LongContent() {\n  return (\n    <React.Fragment>\n      <p>\n        Lacinia hendrerit auctor nam quisque augue suscipit feugiat, sit at imperdiet vitae lacus.\n        Dolor sit dui posuere faucibus non pharetra laoreet conubia, augue rhoncus cras nisl sodales\n        proin hac ipsum, per hendrerit sed volutpat natoque curae consectetur. Curae blandit neque\n        vehicula vel mauris vulputate per felis sociosqu, sodales integer sollicitudin id litora\n        accumsan viverra pulvinar, mus non adipiscing dolor facilisis habitasse mi leo. Litora\n        faucibus eu pulvinar tempus gravida iaculis consectetur risus euismod fringilla, dui posuere\n        viverra sapien tortor mattis et dolor tempor sem conubia, taciti sociis mus rhoncus cubilia\n        praesent dapibus aliquet quis. Diam hendrerit aliquam metus dolor fusce lorem, non gravida\n        arcu primis posuere ipsum adipiscing, mus sollicitudin eros lacinia mollis.\n      </p>\n      <p>\n        Habitant fames mi massa mollis fusce congue nascetur magna bibendum inceptos accumsan,\n        potenti ipsum ac sollicitudin taciti dis rhoncus lacinia fermentum placerat. Himenaeos\n        taciti egestas lacinia maecenas ornare ultricies, auctor vitae nulla mi posuere leo mollis,\n        eleifend lacus rutrum ante curabitur. Nullam mi quisque nulla enim pretium facilisi interdum\n        morbi, himenaeos velit fames pellentesque eget nascetur laoreet vel rutrum, malesuada risus\n        ad netus dolor et scelerisque.\n      </p>\n      <ul>\n        <li>Dis cubilia aenean tortor iaculis fames duis aliquet</li>\n        <li>Erat non lacinia, tempor molestie fringilla</li>\n        <li>Porttitor litora praesent placerat pulvinar</li>\n        <li>Arcu curabitur fermentum felis sollicitudin varius nec cras</li>\n      </ul>\n      <p>\n        Habitasse tristique hac ligula in metus blandit lobortis leo nullam litora, tempus fusce\n        tincidunt phasellus urna est rhoncus pretium etiam eu, fames neque faucibus sociis primis\n        felis dui vitae odio. Egestas purus morbi pulvinar luctus adipiscing rutrum ultrices hac,\n        vehicula odio ridiculus cubilia vivamus blandit faucibus, dapibus velit sociis metus\n        ultricies amet scelerisque.\n      </p>\n      <p>\n        Scelerisque commodo nam cras litora lacinia primis fames morbi natoque, quisque ante duis\n        phasellus pharetra convallis montes felis. Consectetur leo suspendisse fringilla elementum\n        maecenas massa urna malesuada auctor senectus, pretium turpis nisi orci ipsum vulputate\n        cubilia sociis adipiscing. Vulputate ridiculus amet dis accumsan non ultrices fames mattis\n        hendrerit, ornare elementum sociosqu eget consectetur duis viverra vivamus tincidunt,\n        blandit nulla porta semper dolor pharetra nisi scelerisque. Consequat conubia porta cras et\n        ac auctor pellentesque luctus morbi potenti, viverra varius commodo venenatis vestibulum\n        erat sagittis laoreet.\n      </p>\n    </React.Fragment>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/select/page.tsx",
    "content": "import * as React from 'react';\nimport { Select } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <>\n      <Select.Root defaultValue=\"1\">\n        <Select.Trigger>\n          <Select.Value />\n          <Select.Icon>▼</Select.Icon>\n        </Select.Trigger>\n        <Select.Portal>\n          <Select.Content>\n            <Select.ScrollUpButton>▲</Select.ScrollUpButton>\n            <Select.Viewport>\n              <Select.Item value=\"1\">\n                <Select.ItemText>Item 1</Select.ItemText>\n                <Select.ItemIndicator>✔</Select.ItemIndicator>\n              </Select.Item>\n              <Select.Item value=\"2\">\n                <Select.ItemText>Item 2</Select.ItemText>\n                <Select.ItemIndicator>✔</Select.ItemIndicator>\n              </Select.Item>\n              <Select.Item value=\"3\">\n                <Select.ItemText>Item 3</Select.ItemText>\n                <Select.ItemIndicator>✔</Select.ItemIndicator>\n              </Select.Item>\n            </Select.Viewport>\n            <Select.ScrollDownButton>▼</Select.ScrollDownButton>\n          </Select.Content>\n        </Select.Portal>\n      </Select.Root>\n\n      <form>\n        <Select.Root>\n          <Select.Trigger>\n            <Select.Value placeholder=\"Pick an option\" />\n            <Select.Icon>▼</Select.Icon>\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content>\n              <Select.ScrollUpButton>▲</Select.ScrollUpButton>\n              <Select.Viewport>\n                <Select.Item value=\"1\">\n                  <Select.ItemText>Item 1</Select.ItemText>\n                  <Select.ItemIndicator>✔</Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item value=\"2\">\n                  <Select.ItemText>Item 2</Select.ItemText>\n                  <Select.ItemIndicator>✔</Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item value=\"3\">\n                  <Select.ItemText>Item 3</Select.ItemText>\n                  <Select.ItemIndicator>✔</Select.ItemIndicator>\n                </Select.Item>\n              </Select.Viewport>\n              <Select.ScrollDownButton>▼</Select.ScrollDownButton>\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </form>\n    </>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/separator/page.tsx",
    "content": "import * as React from 'react';\nimport { Separator } from 'radix-ui';\n\nexport default function Page() {\n  return <Separator.Root>***</Separator.Root>;\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/slider/page.tsx",
    "content": "import * as React from 'react';\nimport { Slider } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Slider.Root\n      defaultValue={[20, 50]}\n      max={100}\n      step={1}\n      style={{\n        position: 'relative',\n        display: 'flex',\n        alignItems: 'center',\n        width: 200,\n        height: 20,\n      }}\n    >\n      <Slider.Track\n        style={{\n          backgroundColor: 'grey',\n          position: 'relative',\n          flexGrow: 1,\n          height: 3,\n        }}\n      >\n        <Slider.Range\n          style={{\n            position: 'absolute',\n            backgroundColor: 'blue',\n            height: '100%',\n          }}\n        />\n      </Slider.Track>\n      <Slider.Thumb\n        style={{\n          display: 'block',\n          width: 20,\n          height: 20,\n          backgroundColor: 'blue',\n        }}\n      />\n      <Slider.Thumb\n        style={{\n          display: 'block',\n          width: 20,\n          height: 20,\n          backgroundColor: 'blue',\n        }}\n      />\n    </Slider.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/slot/page.tsx",
    "content": "import * as React from 'react';\nimport { Slot } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Slot.Root>\n      <span>I'm in a </span>\n      <Slot.Slottable>\n        <em>Slot!?</em>\n      </Slot.Slottable>\n    </Slot.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/switch/page.tsx",
    "content": "import * as React from 'react';\nimport { Switch } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Switch.Root>\n      <Switch.Thumb>Switch</Switch.Thumb>\n    </Switch.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/tabs/page.tsx",
    "content": "import * as React from 'react';\nimport { Tabs } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Tabs.Root defaultValue=\"one\" orientation=\"vertical\">\n      <Tabs.List aria-label=\"tabs example\">\n        <Tabs.Trigger value=\"one\">Tab 1</Tabs.Trigger>\n        <Tabs.Trigger value=\"two\">Tab 2</Tabs.Trigger>\n        <Tabs.Trigger value=\"three\">Tab 3</Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"one\">\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"two\">You'll never find me!</Tabs.Content>\n      <Tabs.Content value=\"three\">\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/toast/page.tsx",
    "content": "import * as React from 'react';\nimport { Toast } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Toast.Provider>\n      <Toast.Root>\n        <Toast.Title>Toast</Toast.Title>\n        <Toast.Description>This is a toast message.</Toast.Description>\n        <Toast.Action altText=\"Do something\">Do something</Toast.Action>\n        <Toast.Close>Close</Toast.Close>\n      </Toast.Root>\n\n      <Toast.Viewport />\n    </Toast.Provider>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/toggle-group/page.tsx",
    "content": "import * as React from 'react';\nimport { ToggleGroup } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <ToggleGroup.Root defaultValue=\"1\" type=\"single\">\n      <ToggleGroup.Item value=\"1\">Item 1</ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\">Item 2</ToggleGroup.Item>\n    </ToggleGroup.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/toolbar/page.tsx",
    "content": "import * as React from 'react';\nimport { Toolbar } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Toolbar.Root orientation=\"vertical\">\n      <Toolbar.Button>Button</Toolbar.Button>\n      <Toolbar.Separator>***</Toolbar.Separator>\n      <Toolbar.Link href=\"#\">Link</Toolbar.Link>\n    </Toolbar.Root>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/tooltip/page.tsx",
    "content": "import * as React from 'react';\nimport { Tooltip } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <Tooltip.Provider>\n      <Tooltip.Root>\n        <Tooltip.Trigger>Hover or Focus me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </Tooltip.Provider>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/app/visually-hidden/page.tsx",
    "content": "import * as React from 'react';\nimport { VisuallyHidden } from 'radix-ui';\n\nexport default function Page() {\n  return (\n    <div>\n      You won't see this:\n      <VisuallyHidden.Root>🙈</VisuallyHidden.Root>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/ssr-testing/next-env.d.ts",
    "content": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.\n"
  },
  {
    "path": "apps/ssr-testing/next.config.js",
    "content": "module.exports = {\n  experimental: {\n    externalDir: true,\n  },\n};\n"
  },
  {
    "path": "apps/ssr-testing/package.json",
    "content": "{\n  \"name\": \"@repo/ssr-testing\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\"\n  },\n  \"dependencies\": {\n    \"next\": \"^15.3.1\",\n    \"radix-ui\": \"workspace:*\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\"\n  },\n  \"devDependencies\": {\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"typescript\": \"^5.9.3\"\n  }\n}\n"
  },
  {
    "path": "apps/ssr-testing/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/nextjs.json\",\n  \"compilerOptions\": {\n    \"incremental\": true\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n"
  },
  {
    "path": "apps/storybook/.gitignore",
    "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n\n*storybook.log\n"
  },
  {
    "path": "apps/storybook/.storybook/main.ts",
    "content": "import type { StorybookConfig } from '@storybook/react-webpack5';\n\nconst config: StorybookConfig = {\n  stories: [\n    //\n    '../stories/**/*.mdx',\n    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',\n  ],\n  features: {\n    experimentalRSC: true,\n  },\n  addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-docs'],\n  framework: {\n    name: '@storybook/react-webpack5',\n    options: {\n      builder: {},\n      // enable React strict mode\n      strictMode: true,\n    },\n  },\n\n  swc: (config: any) => ({\n    ...config,\n    jsc: {\n      ...config?.jsc,\n      transform: {\n        ...config?.jsc?.transform,\n        react: {\n          // Do not require importing React into scope to use JSX\n          runtime: 'automatic',\n        },\n      },\n    },\n  }),\n};\nexport default config;\n"
  },
  {
    "path": "apps/storybook/.storybook/manager-head.html",
    "content": "<link rel=\"icon\" type=\"image/png\" href=\"/favicon.png\" />\n<link rel=\"icon\" type=\"image/png\" href=\"/favicon-white.svg\" type=\"image/svg+xml\" />\n"
  },
  {
    "path": "apps/storybook/.storybook/manager.ts",
    "content": "import { addons } from 'storybook/manager-api';\nimport { themes } from 'storybook/theming';\n\naddons.setConfig({\n  enableShortcuts: false,\n  theme: themes.light,\n});\n"
  },
  {
    "path": "apps/storybook/.storybook/preview.css",
    "content": "@import '@radix-ui/colors/gray.css';\n@import '@radix-ui/colors/blue.css';\n@import '@radix-ui/colors/green.css';\n@import '@radix-ui/colors/red.css';\n@import '@radix-ui/colors/purple.css';\n@import '@radix-ui/colors/gray-dark.css';\n@import '@radix-ui/colors/blue-dark.css';\n@import '@radix-ui/colors/green-dark.css';\n@import '@radix-ui/colors/red-dark.css';\n@import '@radix-ui/colors/purple-dark.css';\n\n* {\n  box-sizing: border-box;\n}\n\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\n[hidden] {\n  display: none;\n}\n\n:root {\n  --color-white: #fff;\n  --color-gray100: #ccc;\n  --color-gray300: #aaa;\n  --color-black: #111;\n  --color-red: crimson;\n  --color-green: green;\n}\n\nbody {\n  font-family:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n}\n"
  },
  {
    "path": "apps/storybook/.storybook/preview.ts",
    "content": "import type { Preview } from '@storybook/react-webpack5';\nimport './preview.css';\n\nconst preview: Preview = {\n  parameters: {\n    layout: 'fullscreen',\n    options: {\n      storySort: {\n        order: ['Components', 'Utilities'],\n      },\n    },\n    // disables Chromatic on a global level\n    chromatic: { disable: true },\n    docs: {\n      codePanel: true,\n    },\n  },\n};\n\nexport default preview;\n"
  },
  {
    "path": "apps/storybook/eslint.config.js",
    "content": "// @ts-check\nimport storybook from 'eslint-plugin-storybook';\nimport { configs } from '@repo/eslint-config/vite';\n\n/** @type {import(\"eslint\").Linter.Config[]} */\nexport default [...configs, ...storybook.configs['flat/recommended']];\n"
  },
  {
    "path": "apps/storybook/index.d.ts",
    "content": "type CSSModuleClasses = { readonly [key: string]: string };\n\ndeclare module '*.module.css' {\n  const classes: CSSModuleClasses;\n  export default classes;\n}\n\ndeclare module '*.css' {}\n"
  },
  {
    "path": "apps/storybook/package.json",
    "content": "{\n  \"name\": \"@repo/storybook\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 .\",\n    \"dev\": \"storybook dev -p 6006\",\n    \"build\": \"storybook build\",\n    \"serve\": \"serve storybook-static -l 6006\",\n    \"typecheck\": \"tsc --noEmit\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/colors\": \"^3.0.0\",\n    \"@repo/test-data\": \"workspace:*\",\n    \"form-serialize\": \"^0.7.2\",\n    \"radix-ui\": \"workspace:*\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"react-remove-scroll\": \"^2.6.3\"\n  },\n  \"devDependencies\": {\n    \"@chromatic-com/storybook\": \"^4.1.1\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@storybook/addon-docs\": \"^9.1.15\",\n    \"@storybook/addon-webpack5-compiler-swc\": \"^4.0.1\",\n    \"@storybook/react-webpack5\": \"^9.1.15\",\n    \"@types/form-serialize\": \"^0\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"eslint-plugin-storybook\": \"^9.1.15\",\n    \"serve\": \"^14.2.5\",\n    \"storybook\": \"^9.1.15\",\n    \"typescript\": \"^5.9.3\"\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/accessible-icon.stories.tsx",
    "content": "import { AccessibleIcon } from 'radix-ui';\n\nexport default { title: 'Utilities/AccessibleIcon' };\n\nexport const Styled = () => (\n  <button type=\"button\">\n    <AccessibleIcon.Root label=\"Close\">\n      <CrossIcon />\n    </AccessibleIcon.Root>\n  </button>\n);\n\nexport const Chromatic = () => (\n  <p>\n    Some text with an inline accessible icon{' '}\n    <AccessibleIcon.Root label=\"Close\">\n      <CrossIcon />\n    </AccessibleIcon.Root>\n  </p>\n);\n\nChromatic.parameters = { chromatic: { disable: false } };\n\nconst CrossIcon = () => (\n  <svg viewBox=\"0 0 32 32\" width={24} height={24} fill=\"none\" stroke=\"currentColor\">\n    <path d=\"M2 30 L30 2 M30 30 L2 2\" />\n  </svg>\n);\n"
  },
  {
    "path": "apps/storybook/stories/accordion.stories.module.css",
    "content": ".root {\n  font-family: sans-serif;\n  &[data-orientation='horizontal'] {\n    display: flex;\n    max-width: 40em;\n    height: 50vh;\n  }\n  &[data-orientation='vertical'] {\n    max-width: 20em;\n  }\n}\n\n.item {\n  &[data-orientation='horizontal'] {\n    display: flex;\n    border-right: 1px solid var(--gray-1);\n  }\n\n  &[data-orientation='vertical'] {\n    border-bottom: 1px solid var(--gray-1);\n  }\n}\n\n.header {\n  margin: 0;\n  &[data-orientation='horizontal'] {\n    height: 100%;\n  }\n}\n\n.trigger {\n  /* because it's a button, we want to stretch it */\n  &[data-orientation='horizontal'] {\n    height: 100%;\n  }\n  &[data-orientation='vertical'] {\n    width: 100%;\n  }\n  text-align: inherit;\n  box-sizing: border-box;\n  appearance: none;\n  border: none;\n  padding: 10px;\n  background-color: black;\n  color: var(--gray-1);\n  font-family: inherit;\n  font-size: 1.2em;\n\n  &:focus {\n    outline: 2px solid var(--red-8);\n    color: var(--red-9);\n  }\n\n  &[data-disabled] {\n    color: var(--gray-9);\n  }\n\n  &[data-state='open'] {\n    background-color: var(--red-9);\n    color: var(--gray-1);\n\n    &:focus {\n      color: var(--gray-12);\n    }\n  }\n}\n\n.content {\n  padding: 10px;\n  line-height: 1.5;\n}\n\n.animatedContent {\n  overflow: hidden;\n  &[data-state='open'] {\n    animation: accordion-slideDown 300ms ease-out;\n  }\n  &[data-state='closed'] {\n    animation: accordion-slideUp 300ms ease-out;\n  }\n}\n\n.animated2DContent {\n  overflow: hidden;\n  &[data-state='open'] {\n    animation: accordion-open2D 1000ms ease-out;\n  }\n  &[data-state='closed'] {\n    animation: accordion-close2D 1000ms ease-out;\n  }\n}\n\n.rootAttr,\n.itemAttr,\n.headerAttr,\n.triggerAttr,\n.contentAttr {\n  background-color: var(--blue-a12);\n  border: 2px solid var(--blue-9);\n  padding: 10px;\n\n  &[data-state='closed'] {\n    border-color: var(--red-9);\n  }\n  &[data-state='open'] {\n    border-color: var(--green-9);\n  }\n  &[data-disabled] {\n    border-style: dashed;\n  }\n  &:disabled {\n    opacity: 0.5;\n  }\n}\n\n.contentAttr {\n  /* ensure we can see the content (because it has `hidden` attribute) */\n  display: block;\n}\n\n@keyframes accordion-slideDown {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n@keyframes accordion-slideUp {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n@keyframes accordion-open2D {\n  from {\n    width: 0;\n    height: 0;\n  }\n  to {\n    width: var(--radix-accordion-content-width);\n    height: var(--radix-accordion-content-height);\n  }\n}\n\n@keyframes accordion-close2D {\n  from {\n    width: var(--radix-accordion-content-width);\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    width: 0;\n    height: 0;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/accordion.stories.tsx",
    "content": "/* eslint-disable jsx-a11y/anchor-is-valid */\nimport * as React from 'react';\nimport { Accordion } from 'radix-ui';\nimport styles from './accordion.stories.module.css';\n\nexport default { title: 'Components/Accordion' };\n\nexport const Single = () => {\n  const [valueOne, setValueOne] = React.useState('one');\n\n  return (\n    <>\n      <h1>Uncontrolled</h1>\n      <Accordion.Root type=\"single\" className={styles.root}>\n        <Accordion.Item className={styles.item} value=\"one\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n            integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n            habitant sed.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"two\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n            porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"three\" disabled>\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat\n            himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"four\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Odio placerat <a href=\"#\">quisque</a> sapien sagittis non sociis ligula penatibus\n            dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.\n            <button>Cool</button>\n          </Accordion.Content>\n        </Accordion.Item>\n      </Accordion.Root>\n\n      <h1>Controlled</h1>\n      <Accordion.Root\n        type=\"single\"\n        value={valueOne}\n        onValueChange={setValueOne}\n        className={styles.root}\n      >\n        <Accordion.Item className={styles.item} value=\"one\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n            integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n            habitant sed.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"two\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n            porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"three\" disabled>\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat\n            himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"four\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Odio placerat <a href=\"#\">quisque</a> sapien sagittis non sociis ligula penatibus\n            dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.\n            <button>Cool</button>\n          </Accordion.Content>\n        </Accordion.Item>\n      </Accordion.Root>\n\n      <h1>Collapsible</h1>\n      <Accordion.Root type=\"single\" className={styles.root} defaultValue=\"one\" collapsible>\n        <Accordion.Item className={styles.item} value=\"one\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n            integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n            habitant sed.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"two\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n            porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"three\" disabled>\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat\n            himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"four\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Odio placerat <a href=\"#\">quisque</a> sapien sagittis non sociis ligula penatibus\n            dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.\n            <button>Cool</button>\n          </Accordion.Content>\n        </Accordion.Item>\n      </Accordion.Root>\n    </>\n  );\n};\n\nexport const Multiple = () => {\n  const [value, setValue] = React.useState(['one', 'two']);\n\n  return (\n    <>\n      <h1>Uncontrolled</h1>\n      <Accordion.Root type=\"multiple\" className={styles.root}>\n        <Accordion.Item className={styles.item} value=\"one\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n            integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n            habitant sed.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"two\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n            porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"three\" disabled>\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat\n            himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"four\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Odio placerat <a href=\"#\">quisque</a> sapien sagittis non sociis ligula penatibus\n            dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.\n            <button>Cool</button>\n          </Accordion.Content>\n        </Accordion.Item>\n      </Accordion.Root>\n\n      <h1>Controlled</h1>\n      <Accordion.Root\n        type=\"multiple\"\n        value={value}\n        onValueChange={setValue}\n        className={styles.root}\n      >\n        <Accordion.Item className={styles.item} value=\"one\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n            integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n            habitant sed.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"two\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n            porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"three\" disabled>\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat\n            himenaeos euismod magna, nec tempor pulvinar eu etiam mattis.\n          </Accordion.Content>\n        </Accordion.Item>\n        <Accordion.Item className={styles.item} value=\"four\">\n          <Accordion.Header className={styles.header}>\n            <Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content className={styles.content}>\n            Odio placerat <a href=\"#\">quisque</a> sapien sagittis non sociis ligula penatibus\n            dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.\n            <button>Cool</button>\n          </Accordion.Content>\n        </Accordion.Item>\n      </Accordion.Root>\n    </>\n  );\n};\n\nexport const Animated = () => {\n  const values = ['One', 'Two', 'Three', 'Four'];\n  const [count, setCount] = React.useState(1);\n  const [hasDynamicContent, setHasDynamicContent] = React.useState(false);\n  const timerRef = React.useRef(0);\n\n  React.useEffect(() => {\n    if (hasDynamicContent) {\n      timerRef.current = window.setTimeout(() => {\n        setCount((prevCount) => {\n          const nextCount = prevCount < 5 ? prevCount + 1 : prevCount;\n          if (nextCount === 5) setHasDynamicContent(false);\n          return nextCount;\n        });\n      }, 3000);\n      return () => {\n        clearTimeout(timerRef.current);\n      };\n    }\n  }, [count, hasDynamicContent]);\n\n  return (\n    <>\n      <label>\n        <input\n          type=\"checkbox\"\n          checked={hasDynamicContent}\n          onChange={(event) => {\n            const checked = event.target.checked;\n            if (checked) setCount(1);\n            setHasDynamicContent(checked);\n          }}\n        />{' '}\n        Dynamic content\n      </label>\n      <br />\n      <br />\n      <h1>Closed by default</h1>\n      <Accordion.Root type=\"single\" className={styles.root}>\n        {values.map((value) => (\n          <Accordion.Item key={value} value={value} className={styles.item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{value}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.animatedContent}>\n              {[...Array(count)].map((_, index) => (\n                <div style={{ padding: 10 }} key={index}>\n                  Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n                  viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque\n                  quam suscipit habitant sed.\n                </div>\n              ))}\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h1>Open by default</h1>\n      <Accordion.Root type=\"single\" className={styles.root} defaultValue=\"One\">\n        {values.map((value) => (\n          <Accordion.Item key={value} value={value} className={styles.item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{value}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.animatedContent}>\n              {[...Array(count)].map((_, index) => (\n                <div style={{ padding: 10 }} key={index}>\n                  Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n                  viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque\n                  quam suscipit habitant sed.\n                </div>\n              ))}\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n    </>\n  );\n};\n\nexport const Animated2D = () => {\n  const values = ['One', 'Two', 'Three', 'Four'];\n\n  return (\n    <>\n      <Accordion.Root type=\"single\" className={styles.root}>\n        {values.map((value) => (\n          <Accordion.Item key={value} value={value} className={styles.item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{value}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.animated2DContent}>\n              <div style={{ padding: 10, background: 'whitesmoke', overflow: 'hidden' }}>\n                <div style={{ width: 'calc(20em - 20px)', height: 100 }}>\n                  Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n                  viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque\n                  quam suscipit habitant sed.\n                </div>\n              </div>\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n    </>\n  );\n};\n\nexport const AnimatedControlled = () => {\n  const [value, setValue] = React.useState(['one', 'two', 'three', 'four']);\n  return (\n    <Accordion.Root type=\"multiple\" value={value} onValueChange={setValue} className={styles.root}>\n      <Accordion.Item className={styles.item} value=\"one\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.animatedContent}>\n          Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n          integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n          habitant sed.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"two\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.animatedContent}>\n          Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n          porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"three\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Three</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.animatedContent}>\n          Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos\n          euismod magna, nec tempor pulvinar eu etiam mattis.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"four\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.animatedContent}>\n          Odio placerat <a href=\"#\">quisque</a> sapien sagittis non sociis ligula penatibus\n          dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.\n          <button>Cool</button>\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion.Root>\n  );\n};\n\nexport const OutsideViewport = () => (\n  <>\n    <p>Scroll down to see tabs</p>\n    <div style={{ height: '150vh' }} />\n    <p>\n      When accordion buttons are focused and the user is navigating via keyboard, the page should\n      not scroll unless the next tab is entering the viewport.\n    </p>\n    <Accordion.Root type=\"single\" className={styles.root}>\n      <Accordion.Item className={styles.item} value=\"one\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.content}>\n          Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n          integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n          habitant sed.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"two\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.content}>\n          Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n          porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"three\" disabled>\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.content}>\n          Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos\n          euismod magna, nec tempor pulvinar eu etiam mattis.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"four\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.content}>\n          Odio placerat <a href=\"#\">quisque</a> sapien sagittis non sociis ligula penatibus\n          dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.\n          <button>Cool</button>\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion.Root>\n    <div style={{ height: '150vh' }} />\n  </>\n);\n\nexport const Horizontal = () => (\n  <>\n    <h1>Horizontal Orientation</h1>\n    <Accordion.Root type=\"single\" className={styles.root} orientation=\"horizontal\">\n      <Accordion.Item className={styles.item} value=\"one\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>One</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.content}>\n          Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate viverra\n          integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam suscipit\n          habitant sed.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"two\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Two</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.content}>\n          Cursus sed mattis commodo fermentum conubia ipsum pulvinar sagittis, diam eget bibendum\n          porta nascetur ac dictum, leo tellus dis integer platea ultrices mi.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"three\" disabled>\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Three (disabled)</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.content}>\n          Sociis hac sapien turpis conubia sagittis justo dui, inceptos penatibus feugiat himenaeos\n          euismod magna, nec tempor pulvinar eu etiam mattis.\n        </Accordion.Content>\n      </Accordion.Item>\n      <Accordion.Item className={styles.item} value=\"four\">\n        <Accordion.Header className={styles.header}>\n          <Accordion.Trigger className={styles.trigger}>Four</Accordion.Trigger>\n        </Accordion.Header>\n        <Accordion.Content className={styles.content}>\n          Odio placerat <a href=\"#\">quisque</a> sapien sagittis non sociis ligula penatibus\n          dignissim vitae, enim vulputate nullam semper potenti etiam volutpat libero.\n          <button>Cool</button>\n        </Accordion.Content>\n      </Accordion.Item>\n    </Accordion.Root>\n  </>\n);\n\nexport const Chromatic = () => {\n  const items = ['One', 'Two', 'Three', 'Four'];\n  return (\n    <>\n      <h1>Uncontrolled</h1>\n      <h2>Single closed</h2>\n      <Accordion.Root type=\"single\" className={styles.root}>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h2>Single open</h2>\n      <Accordion.Root type=\"single\" className={styles.root} defaultValue=\"Two\">\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h2>Multiple closed</h2>\n      <Accordion.Root type=\"multiple\" className={styles.root}>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h2>Multiple open</h2>\n      <Accordion.Root type=\"multiple\" className={styles.root} defaultValue={['One', 'Two']}>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h1>Controlled</h1>\n      <h2>Single open</h2>\n      <Accordion.Root type=\"single\" className={styles.root} value=\"Three\">\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h2>Multiple open</h2>\n      <Accordion.Root type=\"multiple\" className={styles.root} value={['Two', 'Three']}>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h1>Disabled (whole)</h1>\n      <Accordion.Root type=\"single\" className={styles.root} disabled>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h1>Disabled (item)</h1>\n      <h2>Just item</h2>\n      <Accordion.Root type=\"single\" className={styles.root}>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item} disabled={item === 'Two'}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h2>with `disabled=false` on top-level</h2>\n      <Accordion.Root type=\"single\" className={styles.root} disabled={false}>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item} disabled={item === 'Two'}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h1>Force mounted contents</h1>\n      <Accordion.Root type=\"single\" className={styles.root}>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.item} value={item}>\n            <Accordion.Header className={styles.header}>\n              <Accordion.Trigger className={styles.trigger}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.content} forceMount>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h1>State attributes</h1>\n      <h2>Accordion disabled</h2>\n      <Accordion.Root type=\"single\" className={styles.rootAttr} defaultValue=\"Two\" disabled>\n        {items.map((item) => (\n          <Accordion.Item key={item} className={styles.itemAttr} value={item}>\n            <Accordion.Header className={styles.headerAttr}>\n              <Accordion.Trigger className={styles.triggerAttr}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.contentAttr}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h2>Accordion enabled with item override</h2>\n      <Accordion.Root type=\"single\" className={styles.rootAttr} defaultValue=\"Two\" disabled={false}>\n        {items.map((item) => (\n          <Accordion.Item\n            key={item}\n            className={styles.itemAttr}\n            value={item}\n            disabled={['Two', 'Four'].includes(item)}\n          >\n            <Accordion.Header className={styles.headerAttr}>\n              <Accordion.Trigger className={styles.triggerAttr}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.contentAttr}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n\n      <h2>Accordion disabled with item override</h2>\n      <Accordion.Root type=\"single\" className={styles.rootAttr} defaultValue=\"Two\" disabled={true}>\n        {items.map((item) => (\n          <Accordion.Item\n            key={item}\n            className={styles.itemAttr}\n            value={item}\n            disabled={['Two', 'Four'].includes(item) ? false : undefined}\n          >\n            <Accordion.Header className={styles.headerAttr}>\n              <Accordion.Trigger className={styles.triggerAttr}>{item}</Accordion.Trigger>\n            </Accordion.Header>\n            <Accordion.Content className={styles.contentAttr}>\n              {item}: Per erat orci nostra luctus sociosqu mus risus penatibus, duis elit vulputate\n              viverra integer ullamcorper congue curabitur sociis, nisi malesuada scelerisque quam\n              suscipit habitant sed.\n            </Accordion.Content>\n          </Accordion.Item>\n        ))}\n      </Accordion.Root>\n    </>\n  );\n};\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/alert-dialog.stories.module.css",
    "content": ".trigger {\n}\n\n.overlay,\n.overlayAttr {\n  /* ensures overlay is positionned correctly */\n  position: fixed;\n  inset: 0;\n  /* --------- */\n  background-color: var(--gray-12);\n  opacity: 0.2;\n}\n\n.content,\n.chromaticContent,\n.contentAttr {\n  /* ensures good default position for content */\n  position: fixed;\n  top: 0;\n  left: 0;\n  /* --------- */\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--gray-1);\n  min-width: 300px;\n  min-height: 150px;\n  padding: 50px;\n  border-radius: 10px;\n  background-color: var(--gray-1);\n  box-shadow: 0 2px 10px var(--black-a6);\n}\n\n.cancel,\n.action {\n  appearance: none;\n  padding: 10px;\n  border: none;\n}\n\n.cancel {\n  background: var(--gray-3);\n  color: var(--gray-12);\n}\n\n.action {\n  background: var(--red-9);\n  color: var(--gray-1);\n}\n\n.title {\n}\n\n.description {\n}\n\n.chromaticContent {\n  padding: 10px;\n  min-width: auto;\n  min-height: auto;\n}\n\n.triggerAttr .overlayAttr,\n.contentAttr,\n.cancelAttr,\n.actionAttr,\n.titleAttr,\n.descriptionAttr {\n  background-color: var(--blue-a12);\n  border: 2px solid var(--blue-9);\n  padding: 10px;\n  &[data-state='closed'] {\n    border-color: var(--red-9);\n  }\n  &[data-state='open'] {\n    border-color: var(--green-9);\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/alert-dialog.stories.tsx",
    "content": "import * as React from 'react';\nimport { AlertDialog } from 'radix-ui';\nimport styles from './alert-dialog.stories.module.css';\n\nexport default { title: 'Components/AlertDialog' };\n\nexport const Styled = () => (\n  <AlertDialog.Root>\n    <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n    <AlertDialog.Portal>\n      <AlertDialog.Overlay className={styles.overlay} />\n      <AlertDialog.Content className={styles.content}>\n        <AlertDialog.Title className={styles.title}>Are you sure?</AlertDialog.Title>\n        <AlertDialog.Description className={styles.description}>\n          This will do a very dangerous thing. Thar be dragons!\n        </AlertDialog.Description>\n        <AlertDialog.Action className={styles.action}>yolo, do it</AlertDialog.Action>\n        <AlertDialog.Cancel className={styles.cancel}>maybe not</AlertDialog.Cancel>\n      </AlertDialog.Content>\n    </AlertDialog.Portal>\n  </AlertDialog.Root>\n);\n\nexport const Controlled = () => {\n  const [open, setOpen] = React.useState(false);\n  const [housePurchased, setHousePurchased] = React.useState(false);\n\n  return (\n    <div>\n      <div>\n        <img src=\"https://i.ibb.co/K54hsKt/house.jpg\" alt=\"a large white house with a red roof\" />\n      </div>\n      <AlertDialog.Root open={open} onOpenChange={setOpen}>\n        <AlertDialog.Trigger\n          onClick={(e) => {\n            if (housePurchased) {\n              e.preventDefault();\n              setHousePurchased(false);\n            }\n          }}\n        >\n          {housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}\n        </AlertDialog.Trigger>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay className={styles.overlay} />\n          <AlertDialog.Content className={styles.content}>\n            <AlertDialog.Title>Are you sure?</AlertDialog.Title>\n            <AlertDialog.Description>\n              Houses are very expensive and it looks like you only have €20 in the bank. Maybe\n              consult with a financial advisor?\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action} onClick={() => setHousePurchased(true)}>\n              buy it anyway\n            </AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>\n              good point, I'll reconsider\n            </AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n      </AlertDialog.Root>\n    </div>\n  );\n};\n\nexport const Chromatic = () => (\n  <div\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'repeat(4, 1fr)',\n      gridTemplateRows: 'repeat(2, 1fr)',\n      height: '100vh',\n    }}\n  >\n    <div>\n      <h1>Uncontrolled</h1>\n      <h2>Closed</h2>\n      <AlertDialog.Root>\n        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay className={styles.overlay} />\n          <AlertDialog.Content className={styles.chromaticContent}>\n            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.description}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n      </AlertDialog.Root>\n\n      <h2>Open</h2>\n      <AlertDialog.Root defaultOpen>\n        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay\n            className={styles.overlay}\n            style={{ left: 0, bottom: '50%', width: '25%' }}\n          />\n          <AlertDialog.Content\n            className={styles.chromaticContent}\n            style={{ top: '25%', left: '12%' }}\n          >\n            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.description}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n      </AlertDialog.Root>\n    </div>\n\n    <div>\n      <h1>Uncontrolled with reordered parts</h1>\n      <h2>Closed</h2>\n      <AlertDialog.Root>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay className={styles.overlay} />\n          <AlertDialog.Content className={styles.chromaticContent}>\n            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.description}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n      </AlertDialog.Root>\n\n      <h2>Open</h2>\n      <AlertDialog.Root defaultOpen>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay\n            className={styles.overlay}\n            style={{ left: '25%', bottom: '50%', width: '25%' }}\n          />\n          <AlertDialog.Content\n            className={styles.chromaticContent}\n            style={{ top: '25%', left: '37%' }}\n          >\n            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.description}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n      </AlertDialog.Root>\n    </div>\n\n    <div>\n      <h1>Controlled</h1>\n      <h2>Closed</h2>\n      <AlertDialog.Root open={false}>\n        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay className={styles.overlay} />\n          <AlertDialog.Content className={styles.chromaticContent}>\n            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.description}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n      </AlertDialog.Root>\n\n      <h2>Open</h2>\n      <AlertDialog.Root open>\n        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay\n            className={styles.overlay}\n            style={{ left: '50%', bottom: '50%', width: '25%' }}\n          />\n          <AlertDialog.Content\n            className={styles.chromaticContent}\n            style={{ top: '25%', left: '62%' }}\n          >\n            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.description}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n      </AlertDialog.Root>\n    </div>\n\n    <div>\n      <h1>Controlled with reordered parts</h1>\n      <h2>Closed</h2>\n      <AlertDialog.Root open={false}>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay className={styles.overlay} />\n          <AlertDialog.Content className={styles.chromaticContent}>\n            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.description}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n      </AlertDialog.Root>\n\n      <h2>Open</h2>\n      <AlertDialog.Root open>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay\n            className={styles.overlay}\n            style={{ left: '75%', bottom: '50%', width: '25%' }}\n          />\n          <AlertDialog.Content\n            className={styles.chromaticContent}\n            style={{ top: '25%', left: '88%' }}\n          >\n            <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.description}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n        <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>\n      </AlertDialog.Root>\n    </div>\n\n    <div>\n      <h1>State attributes</h1>\n      <h2>Closed</h2>\n      <AlertDialog.Root>\n        <AlertDialog.Trigger className={styles.triggerAttr}>delete everything</AlertDialog.Trigger>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay className={styles.overlayAttr} />\n          <AlertDialog.Content className={styles.contentAttr}>\n            <AlertDialog.Title className={styles.titleAttr}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.descriptionAttr}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.actionAttr}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancelAttr}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n      </AlertDialog.Root>\n\n      <h2>Open</h2>\n      <AlertDialog.Root defaultOpen>\n        <AlertDialog.Trigger className={styles.triggerAttr}>delete everything</AlertDialog.Trigger>\n        <AlertDialog.Portal>\n          <AlertDialog.Overlay className={styles.overlayAttr} style={{ top: '50%' }} />\n          <AlertDialog.Content className={styles.contentAttr} style={{ top: '75%' }}>\n            <AlertDialog.Title className={styles.titleAttr}>Title</AlertDialog.Title>\n            <AlertDialog.Description className={styles.descriptionAttr}>\n              Description\n            </AlertDialog.Description>\n            <AlertDialog.Action className={styles.actionAttr}>Confirm</AlertDialog.Action>\n            <AlertDialog.Cancel className={styles.cancelAttr}>Cancel</AlertDialog.Cancel>\n          </AlertDialog.Content>\n        </AlertDialog.Portal>\n      </AlertDialog.Root>\n    </div>\n  </div>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/arrow.stories.tsx",
    "content": "import { Arrow } from 'radix-ui/internal';\n\nexport default { title: 'Utilities/Arrow' };\n\nconst RECOMMENDED_CSS__ARROW__ROOT = {\n  // better default alignment\n  verticalAlign: 'middle',\n};\n\nexport const Styled = () => (\n  <Arrow.Root style={{ ...RECOMMENDED_CSS__ARROW__ROOT, fill: 'crimson' }} width={20} height={10} />\n);\n\nexport const CustomSizes = () => (\n  <>\n    <Arrow.Root style={{ ...RECOMMENDED_CSS__ARROW__ROOT }} width={40} height={10} />\n    <Arrow.Root style={{ ...RECOMMENDED_CSS__ARROW__ROOT }} width={50} height={30} />\n    <Arrow.Root style={{ ...RECOMMENDED_CSS__ARROW__ROOT }} width={20} height={100} />\n  </>\n);\n\nexport const CustomArrow = () => (\n  <Arrow.Root asChild>\n    <div\n      style={{\n        width: 20,\n        height: 10,\n        borderBottomLeftRadius: 10,\n        borderBottomRightRadius: 10,\n        backgroundColor: 'tomato',\n      }}\n    />\n  </Arrow.Root>\n);\n"
  },
  {
    "path": "apps/storybook/stories/aspect-ratio.stories.module.css",
    "content": ".root {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--red-9);\n  color: var(--gray-1);\n}\n"
  },
  {
    "path": "apps/storybook/stories/aspect-ratio.stories.tsx",
    "content": "import { AspectRatio } from 'radix-ui';\nimport styles from './aspect-ratio.stories.module.css';\n\nexport default { title: 'Components/AspectRatio' };\n\nconst image = (\n  <img\n    src=\"https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&auto=format&fit=crop&w=400&q=80\"\n    alt=\"A house in a forest\"\n    style={{ objectFit: 'cover', width: '100%', height: '100%' }}\n  />\n);\n\nexport const Styled = () => (\n  <div style={{ width: 500 }}>\n    <AspectRatio.Root className={styles.root}>\n      <h1>Default ratio (1/1)</h1>\n    </AspectRatio.Root>\n  </div>\n);\n\nexport const CustomRatios = () => {\n  return (\n    <div style={{ display: 'flex', gap: 20 }}>\n      <div style={{ width: 200 }}>\n        <AspectRatio.Root ratio={1 / 2}>{image}</AspectRatio.Root>\n      </div>\n      <div style={{ width: 200 }}>\n        <AspectRatio.Root>{image}</AspectRatio.Root>\n      </div>\n      <div style={{ width: 200 }}>\n        <AspectRatio.Root ratio={16 / 9}>{image}</AspectRatio.Root>\n      </div>\n      <div style={{ width: 200 }}>\n        <AspectRatio.Root ratio={2 / 1}>{image}</AspectRatio.Root>\n      </div>\n    </div>\n  );\n};\n\nexport const Chromatic = () => (\n  <>\n    <h1>Default ratio</h1>\n    <div style={{ width: 300 }}>\n      <AspectRatio.Root className={styles.root}>\n        <p>Default ratio (1/1)</p>\n      </AspectRatio.Root>\n    </div>\n\n    <h1>Custom ratios</h1>\n    <div style={{ display: 'flex', gap: 20 }}>\n      <div style={{ width: 200 }}>\n        <AspectRatio.Root ratio={1 / 2}>{image}</AspectRatio.Root>\n      </div>\n      <div style={{ width: 200 }}>\n        <AspectRatio.Root>{image}</AspectRatio.Root>\n      </div>\n      <div style={{ width: 200 }}>\n        <AspectRatio.Root ratio={16 / 9}>{image}</AspectRatio.Root>\n      </div>\n      <div style={{ width: 200 }}>\n        <AspectRatio.Root ratio={2 / 1}>{image}</AspectRatio.Root>\n      </div>\n    </div>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/avatar.stories.module.css",
    "content": ".root {\n  /* ensures image/fallback is centered */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  /* ensures image doesn't bleed out */\n  overflow: hidden;\n  /* ensures no selection is possible */\n  user-select: none;\n  /* -------- */\n  border-radius: 9999px;\n  width: 48px;\n  height: 48px;\n}\n\n.image {\n  /* ensures image is full size and not distorted */\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.fallback {\n  /* ensures content inside the fallback is centered */\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* -------- */\n  background-color: var(--gray-12);\n  color: var(--gray-1);\n}\n"
  },
  {
    "path": "apps/storybook/stories/avatar.stories.tsx",
    "content": "import { Avatar } from 'radix-ui';\nimport styles from './avatar.stories.module.css';\nimport React from 'react';\n\nexport default { title: 'Components/Avatar' };\n\nconst src = 'https://picsum.photos/id/1005/400/400';\nconst srcAlternative = 'https://picsum.photos/id/1006/400/400';\nconst srcBroken = 'https://broken.link.com/broken-pic.jpg';\n\nexport const Styled = () => (\n  <>\n    <h1>Without image & with fallback</h1>\n    <Avatar.Root className={styles.root}>\n      <Avatar.Fallback className={styles.fallback}>JS</Avatar.Fallback>\n    </Avatar.Root>\n\n    <h1>With image & with fallback</h1>\n    <Avatar.Root className={styles.root}>\n      <Avatar.Image className={styles.image} alt=\"John Smith\" src={src} />\n      <Avatar.Fallback delayMs={300} className={styles.fallback}>\n        JS\n      </Avatar.Fallback>\n    </Avatar.Root>\n\n    <h1>With image & with fallback (but broken src)</h1>\n    <Avatar.Root className={styles.root}>\n      <Avatar.Image\n        className={styles.image}\n        alt=\"John Smith\"\n        src={srcBroken}\n        onLoadingStatusChange={console.log}\n      />\n      <Avatar.Fallback className={styles.fallback}>\n        <AvatarIcon />\n      </Avatar.Fallback>\n    </Avatar.Root>\n\n    <h1>Changing image src</h1>\n    <SourceChanger sources={[src, srcAlternative, srcBroken]}>\n      {(src) => (\n        <Avatar.Root className={styles.root}>\n          <Avatar.Image className={styles.image} alt=\"John Smith\" src={src} />\n          <Avatar.Fallback delayMs={300} className={styles.fallback}>\n            JS\n          </Avatar.Fallback>\n        </Avatar.Root>\n      )}\n    </SourceChanger>\n  </>\n);\n\nexport const Chromatic = () => (\n  <>\n    <h1>Without image & with fallback</h1>\n    <Avatar.Root className={styles.root}>\n      <Avatar.Fallback className={styles.fallback}>JS</Avatar.Fallback>\n    </Avatar.Root>\n\n    <h1>With image & with fallback</h1>\n    <Avatar.Root className={styles.root}>\n      <Avatar.Image className={styles.image} alt=\"John Smith\" src={src} />\n      <Avatar.Fallback delayMs={300} className={styles.fallback}>\n        JS\n      </Avatar.Fallback>\n    </Avatar.Root>\n\n    <h1>With image & with fallback (but broken src)</h1>\n    <Avatar.Root className={styles.root}>\n      <Avatar.Image className={styles.image} alt=\"John Smith\" src={srcBroken} />\n      <Avatar.Fallback className={styles.fallback}>\n        <AvatarIcon />\n      </Avatar.Fallback>\n    </Avatar.Root>\n\n    <h1>Changing image src</h1>\n    <SourceChanger sources={[src, srcAlternative, srcBroken]}>\n      {(src) => (\n        <Avatar.Root className={styles.root}>\n          <Avatar.Image className={styles.image} alt=\"John Smith\" src={src} />\n          <Avatar.Fallback delayMs={300} className={styles.fallback}>\n            JS\n          </Avatar.Fallback>\n        </Avatar.Root>\n      )}\n    </SourceChanger>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false, delay: 1000 } };\n\nconst AvatarIcon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" width=\"42\" height=\"42\">\n    <path\n      d=\"M50 51.7a22.1 22.1 0 100-44.2 22.1 22.1 0 000 44.2zM87.9 69.3a27.8 27.8 0 00-21.2-16.1 4 4 0 00-2.8.7 23.5 23.5 0 01-27.6 0 4 4 0 00-2.8-.7 27.5 27.5 0 00-21.2 16.1c-.3.6-.2 1.3.1 1.8a52.8 52.8 0 007 8.9 43.4 43.4 0 0056.9 3.8 56.3 56.3 0 008.9-8.8c.9-1.2 1.8-2.5 2.6-3.9.3-.6.3-1.2.1-1.8z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nfunction SourceChanger({\n  sources,\n  children,\n}: {\n  sources: [string, ...string[]];\n  children: (src: string) => React.ReactElement;\n}) {\n  const [src, setSrc] = React.useState(sources[0]);\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      const nextIndex = (sources.indexOf(src) + 1) % sources.length;\n      setSrc(sources[nextIndex]!);\n    }, 1000);\n    return () => clearInterval(interval);\n  }, [sources, src]);\n  return children(src);\n}\n"
  },
  {
    "path": "apps/storybook/stories/checkbox.stories.module.css",
    "content": ".root {\n  /* better default alignment */\n  vertical-align: middle;\n  /* ------ */\n  border: 1px solid var(--gray-4);\n  width: 30px;\n  height: 30px;\n  padding: 4px;\n\n  &:focus {\n    outline: none;\n    border-color: var(--red-9);\n    box-shadow: 0 0 0 1px var(--red-9);\n  }\n\n  &[data-disabled] {\n    opacity: 0.3;\n  }\n}\n\n.indicator {\n  background-color: var(--red-9);\n  display: block;\n  width: 20px;\n  height: 4px;\n  &[data-state='checked'],\n  &[data-state='unchecked'] {\n    height: 20px;\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.animatedIndicator {\n  transition: height 300ms;\n  &[data-state='checked'] {\n    animation: fadeIn 1000ms ease-out;\n  }\n  &[data-state='unchecked'] {\n    animation: fadeOut 1000ms ease-in;\n  }\n}\n\n.rootAttr,\n.indicatorAttr {\n  background-color: var(--blue-a12);\n  border: 2px solid var(--blue-9);\n  padding: 10px;\n  &[data-state='unchecked'] {\n    border-color: var(--red-9);\n  }\n  &[data-state='checked'] {\n    border-color: var(--green-9);\n  }\n  &[data-state='indeterminate'] {\n    border-color: var(--purple-9);\n  }\n  &[data-disabled] {\n    border-style: dashed;\n  }\n  &:disabled {\n    opacity: 0.5;\n  }\n}\n\n.label {\n  /* ensures it can receive vertical margins */\n  display: inline-block;\n  /* better default alignment */\n  vertical-align: middle;\n  /* mimics default `label` tag (as we render a `span`) */\n  cursor: default;\n  display: inline-block;\n}\n"
  },
  {
    "path": "apps/storybook/stories/checkbox.stories.tsx",
    "content": "/* eslint-disable react/jsx-pascal-case */\nimport * as React from 'react';\nimport { Checkbox, Label as LabelPrimitive } from 'radix-ui';\nimport styles from './checkbox.stories.module.css';\n\nexport default { title: 'Components/Checkbox' };\n\nexport const Styled = () => (\n  <>\n    <p>This checkbox is nested inside a label. The state is uncontrolled.</p>\n\n    <h1>Custom label</h1>\n    <Label>\n      Label{' '}\n      <Checkbox.unstable_Provider>\n        <Checkbox.unstable_Trigger className={styles.root}>\n          <Checkbox.Indicator className={styles.indicator} />\n        </Checkbox.unstable_Trigger>\n      </Checkbox.unstable_Provider>\n    </Label>\n\n    <br />\n    <br />\n\n    <h1>Native label</h1>\n    <label>\n      Label{' '}\n      <Checkbox.unstable_Provider>\n        <Checkbox.unstable_Trigger className={styles.root}>\n          <Checkbox.Indicator className={styles.indicator} />\n        </Checkbox.unstable_Trigger>\n      </Checkbox.unstable_Provider>\n    </label>\n\n    <h1>Native label + native checkbox</h1>\n    <label>\n      Label <input type=\"checkbox\" />\n    </label>\n\n    <h1>Custom label + htmlFor</h1>\n    <Label htmlFor=\"one\">Label</Label>\n    <Checkbox.unstable_Provider>\n      <Checkbox.unstable_Trigger className={styles.root} id=\"one\">\n        <Checkbox.Indicator className={styles.indicator} />\n      </Checkbox.unstable_Trigger>\n    </Checkbox.unstable_Provider>\n\n    <br />\n    <br />\n\n    <h1>Native label + htmlFor</h1>\n    <label htmlFor=\"two\">Label</label>\n    <Checkbox.unstable_Provider>\n      <Checkbox.unstable_Trigger className={styles.root} id=\"two\">\n        <Checkbox.Indicator className={styles.indicator} />\n      </Checkbox.unstable_Trigger>\n    </Checkbox.unstable_Provider>\n\n    <h1>Native label + native checkbox</h1>\n    <label htmlFor=\"three\">Label</label>\n    <input type=\"checkbox\" id=\"three\" />\n  </>\n);\n\nexport const Controlled = () => {\n  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>(true);\n\n  return (\n    <>\n      <p>This checkbox is placed adjacent to its label. The state is controlled.</p>\n      <Label htmlFor=\"randBox\">Label</Label>{' '}\n      <Checkbox.unstable_Provider checked={checked} onCheckedChange={setChecked}>\n        <Checkbox.unstable_Trigger className={styles.root} id=\"randBox\">\n          <Checkbox.Indicator className={styles.indicator} />\n        </Checkbox.unstable_Trigger>\n      </Checkbox.unstable_Provider>\n    </>\n  );\n};\n\nexport const Indeterminate = () => {\n  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');\n\n  return (\n    <>\n      <p>\n        <Checkbox.unstable_Provider checked={checked} onCheckedChange={setChecked}>\n          <Checkbox.unstable_Trigger className={styles.root}>\n            <Checkbox.Indicator className={styles.indicator} />\n          </Checkbox.unstable_Trigger>\n        </Checkbox.unstable_Provider>\n      </p>\n\n      <button\n        type=\"button\"\n        onClick={() =>\n          setChecked((prevIsChecked) =>\n            prevIsChecked === 'indeterminate' ? false : 'indeterminate',\n          )\n        }\n      >\n        Toggle indeterminate\n      </button>\n    </>\n  );\n};\n\nexport const WithinForm = () => {\n  const [data, setData] = React.useState({ optional: false, required: false, stopprop: false });\n  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');\n\n  return (\n    <form\n      onSubmit={(event) => event.preventDefault()}\n      onChange={(event) => {\n        const input = event.target as HTMLInputElement;\n        setData((prevData) => ({ ...prevData, [input.name]: input.checked }));\n      }}\n    >\n      <fieldset>\n        <legend>optional checked: {String(data.optional)}</legend>\n        <label>\n          <Checkbox.Root\n            className={styles.root}\n            name=\"optional\"\n            checked={checked}\n            onCheckedChange={setChecked}\n          >\n            <Checkbox.Indicator className={styles.indicator} />\n          </Checkbox.Root>{' '}\n          with label\n        </label>\n        <br />\n        <br />\n\n        <button\n          type=\"button\"\n          onClick={() => {\n            setChecked((v) => (v === 'indeterminate' ? false : 'indeterminate'));\n          }}\n        >\n          Toggle indeterminate\n        </button>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>required checked: {String(data.required)}</legend>\n        <Checkbox.unstable_Provider name=\"required\" required>\n          <Checkbox.unstable_Trigger className={styles.root}>\n            <Checkbox.Indicator className={styles.indicator} />\n          </Checkbox.unstable_Trigger>\n          <Checkbox.unstable_BubbleInput />\n        </Checkbox.unstable_Provider>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>stop propagation checked: {String(data.stopprop)}</legend>\n        <Checkbox.unstable_Provider name=\"stopprop\">\n          <Checkbox.unstable_Trigger\n            className={styles.root}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <Checkbox.Indicator className={styles.indicator} />\n          </Checkbox.unstable_Trigger>\n          <Checkbox.unstable_BubbleInput />\n        </Checkbox.unstable_Provider>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>no bubble input checked: {String(data.stopprop)}</legend>\n        <Checkbox.unstable_Provider name=\"stopprop\">\n          <Checkbox.unstable_Trigger className={styles.root}>\n            <Checkbox.Indicator className={styles.indicator} />\n          </Checkbox.unstable_Trigger>\n        </Checkbox.unstable_Provider>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <button type=\"reset\">Reset</button>\n      <button>Submit</button>\n    </form>\n  );\n};\n\nexport const LegacyStyled = () => (\n  <>\n    <p>This checkbox is nested inside a label. The state is uncontrolled.</p>\n\n    <h1>Custom label</h1>\n    <Label>\n      Label{' '}\n      <Checkbox.Root className={styles.root}>\n        <Checkbox.Indicator className={styles.indicator} />\n      </Checkbox.Root>\n    </Label>\n\n    <br />\n    <br />\n\n    <h1>Native label</h1>\n    <label>\n      Label{' '}\n      <Checkbox.Root className={styles.root}>\n        <Checkbox.Indicator className={styles.indicator} />\n      </Checkbox.Root>\n    </label>\n\n    <h1>Native label + native checkbox</h1>\n    <label>\n      Label <input type=\"checkbox\" />\n    </label>\n\n    <h1>Custom label + htmlFor</h1>\n    <Label htmlFor=\"one\">Label</Label>\n    <Checkbox.Root className={styles.root} id=\"one\">\n      <Checkbox.Indicator className={styles.indicator} />\n    </Checkbox.Root>\n\n    <br />\n    <br />\n\n    <h1>Native label + htmlFor</h1>\n    <label htmlFor=\"two\">Label</label>\n    <Checkbox.Root className={styles.root} id=\"two\">\n      <Checkbox.Indicator className={styles.indicator} />\n    </Checkbox.Root>\n\n    <h1>Native label + native checkbox</h1>\n    <label htmlFor=\"three\">Label</label>\n    <input type=\"checkbox\" id=\"three\" />\n  </>\n);\n\nexport const LegacyControlled = () => {\n  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>(true);\n\n  return (\n    <>\n      <p>This checkbox is placed adjacent to its label. The state is controlled.</p>\n      <Label htmlFor=\"randBox\">Label</Label>{' '}\n      <Checkbox.Root\n        className={styles.root}\n        checked={checked}\n        onCheckedChange={setChecked}\n        id=\"randBox\"\n      >\n        <Checkbox.Indicator className={styles.indicator} />\n      </Checkbox.Root>\n    </>\n  );\n};\n\nexport const LegacyIndeterminate = () => {\n  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');\n\n  return (\n    <>\n      <p>\n        <Checkbox.Root className={styles.root} checked={checked} onCheckedChange={setChecked}>\n          <Checkbox.Indicator className={styles.indicator} />\n        </Checkbox.Root>\n      </p>\n\n      <button\n        type=\"button\"\n        onClick={() =>\n          setChecked((prevIsChecked) =>\n            prevIsChecked === 'indeterminate' ? false : 'indeterminate',\n          )\n        }\n      >\n        Toggle indeterminate\n      </button>\n    </>\n  );\n};\n\nexport const LegacyWithinForm = () => {\n  const [data, setData] = React.useState({ optional: false, required: false, stopprop: false });\n  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');\n\n  return (\n    <form\n      onSubmit={(event) => event.preventDefault()}\n      onChange={(event) => {\n        const input = event.target as HTMLInputElement;\n        setData((prevData) => ({ ...prevData, [input.name]: input.checked }));\n      }}\n    >\n      <fieldset>\n        <legend>optional checked: {String(data.optional)}</legend>\n        <label>\n          <Checkbox.Root\n            className={styles.root}\n            name=\"optional\"\n            checked={checked}\n            onCheckedChange={setChecked}\n          >\n            <Checkbox.Indicator className={styles.indicator} />\n          </Checkbox.Root>{' '}\n          with label\n        </label>\n        <br />\n        <br />\n\n        <button\n          type=\"button\"\n          onClick={() => {\n            setChecked((prevChecked) => {\n              return prevChecked === 'indeterminate' ? false : 'indeterminate';\n            });\n          }}\n        >\n          Toggle indeterminate\n        </button>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>required checked: {String(data.required)}</legend>\n        <Checkbox.Root className={styles.root} name=\"required\" required>\n          <Checkbox.Indicator className={styles.indicator} />\n        </Checkbox.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>stop propagation checked: {String(data.stopprop)}</legend>\n        <Checkbox.Root\n          className={styles.root}\n          name=\"stopprop\"\n          onClick={(event) => event.stopPropagation()}\n        >\n          <Checkbox.Indicator className={styles.indicator} />\n        </Checkbox.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <button type=\"reset\">Reset</button>\n      <button>Submit</button>\n    </form>\n  );\n};\n\nexport const LegacyAnimated = () => {\n  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>('indeterminate');\n\n  return (\n    <>\n      <p>\n        <Checkbox.Root className={styles.root} checked={checked} onCheckedChange={setChecked}>\n          <Checkbox.Indicator className={[styles.indicator, styles.animatedIndicator].join(' ')} />\n        </Checkbox.Root>\n      </p>\n\n      <button\n        type=\"button\"\n        onClick={() =>\n          setChecked((prevIsChecked) =>\n            prevIsChecked === 'indeterminate' ? false : 'indeterminate',\n          )\n        }\n      >\n        Toggle indeterminate\n      </button>\n    </>\n  );\n};\n\nexport const LegacyChromatic = () => (\n  <>\n    <h1>Uncontrolled</h1>\n    <h2>Unchecked</h2>\n    <Checkbox.Root className={styles.root}>\n      <Checkbox.Indicator className={styles.indicator} />\n    </Checkbox.Root>\n\n    <h2>Checked</h2>\n    <Checkbox.Root className={styles.root} defaultChecked>\n      <Checkbox.Indicator className={styles.indicator} />\n    </Checkbox.Root>\n\n    <h1>Controlled</h1>\n    <h2>Unchecked</h2>\n    <Checkbox.Root className={styles.root} checked={false}>\n      <Checkbox.Indicator className={styles.indicator} />\n    </Checkbox.Root>\n\n    <h2>Checked</h2>\n    <Checkbox.Root className={styles.root} checked>\n      <Checkbox.Indicator className={styles.indicator} />\n    </Checkbox.Root>\n\n    <h1>Indeterminate</h1>\n    <Checkbox.Root className={styles.root} checked=\"indeterminate\">\n      <Checkbox.Indicator className={styles.indicator} />\n    </Checkbox.Root>\n\n    <h1>Disabled</h1>\n    <Checkbox.Root className={styles.root} defaultChecked disabled>\n      <Checkbox.Indicator className={styles.indicator} />\n    </Checkbox.Root>\n\n    <h1>Force mounted indicator</h1>\n    <Checkbox.Root className={styles.root}>\n      <Checkbox.Indicator className={styles.indicator} forceMount style={{ height: 20 }} />\n    </Checkbox.Root>\n\n    <h1>State attributes</h1>\n    <h2>Unchecked</h2>\n    <Checkbox.Root className={styles.rootAttr}>\n      <Checkbox.Indicator className={styles.indicatorAttr} />\n    </Checkbox.Root>\n\n    <h2>Checked</h2>\n    <Checkbox.Root className={styles.rootAttr} defaultChecked>\n      <Checkbox.Indicator className={styles.indicatorAttr} />\n    </Checkbox.Root>\n\n    <h2>Indeterminate</h2>\n    <Checkbox.Root className={styles.rootAttr} checked=\"indeterminate\">\n      <Checkbox.Indicator className={styles.indicatorAttr} />\n    </Checkbox.Root>\n\n    <h2>Disabled</h2>\n    <Checkbox.Root className={styles.rootAttr} defaultChecked disabled>\n      <Checkbox.Indicator className={styles.indicatorAttr} />\n    </Checkbox.Root>\n\n    <h2>Force mounted indicator</h2>\n    <Checkbox.Root className={styles.rootAttr}>\n      <Checkbox.Indicator className={styles.indicatorAttr} forceMount style={{ height: 20 }} />\n    </Checkbox.Root>\n  </>\n);\nLegacyChromatic.parameters = { chromatic: { disable: false } };\n\nconst Label = (props: any) => <LabelPrimitive.Root {...props} className={styles.label} />;\n"
  },
  {
    "path": "apps/storybook/stories/collapsible.stories.module.css",
    "content": ".root {\n  max-width: 20em;\n  font-family: sans-serif;\n}\n\n.trigger {\n  /* because it's a button, we want to stretch it */\n  width: 100%;\n  /* and remove center text alignment in favour of inheriting */\n  text-align: inherit;\n  /* ---- */\n  appearance: none;\n  border: none;\n  padding: 10px;\n  background-color: var(--color-black);\n  color: white;\n  font-family: inherit;\n  font-size: 1.2em;\n  --shadow-color: crimson;\n\n  &:focus {\n    outline: none;\n    box-shadow: inset 0 -5px 0 0 var(--shadow-color);\n    color: var(--color-red);\n  }\n\n  &[data-disabled] {\n    color: var(--color-gray300);\n  }\n\n  &[data-state='open'] {\n    background-color: var(--color-red);\n    color: var(--color-white);\n\n    &:focus {\n      --shadow-color: #111;\n      color: var(--color-black);\n    }\n  }\n}\n\n.content {\n  padding: 10px;\n  line-height: 1.5;\n}\n\n@keyframes collapsible-slideDown {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-collapsible-content-height);\n  }\n}\n\n@keyframes collapsible-slideUp {\n  from {\n    height: var(--radix-collapsible-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n@keyframes collapsible-openRight {\n  from {\n    width: 0;\n  }\n  to {\n    width: var(--radix-collapsible-content-width);\n  }\n}\n\n@keyframes collapsible-closeRight {\n  from {\n    width: var(--radix-collapsible-content-width);\n  }\n  to {\n    width: 0;\n  }\n}\n\n.animatedContent {\n  overflow: hidden;\n  &[data-state='open'] {\n    animation: collapsible-slideDown 300ms ease-out;\n  }\n  &[data-state='closed'] {\n    animation: collapsible-slideUp 300ms ease-in;\n  }\n}\n\n.animatedWidthContent {\n  overflow: hidden;\n  &[data-state='open'] {\n    animation: collapsible-openRight 300ms ease-out;\n  }\n  &[data-state='closed'] {\n    animation: collapsible-closeRight 300ms ease-in;\n  }\n}\n\n.rootAttr,\n.triggerAttr,\n.contentAttr {\n  /* ensure we can see the content (because it has `hidden` attribute) */\n  display: block;\n  background-color: rgb(0 0 255 / 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n\n  &[data-state='closed'] {\n    border-color: red;\n  }\n  &[data-state='open'] {\n    border-color: green;\n  }\n  &[data-disabled] {\n    border-style: dashed;\n  }\n  &:disabled {\n    opacity: 0.5;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/collapsible.stories.tsx",
    "content": "import * as React from 'react';\nimport { Collapsible } from 'radix-ui';\nimport styles from './collapsible.stories.module.css';\n\nexport default { title: 'Components/Collapsible' };\n\nexport const Styled = () => (\n  <Collapsible.Root className={styles.root}>\n    <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n    <Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>\n  </Collapsible.Root>\n);\n\nexport const Controlled = () => {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <Collapsible.Root open={open} onOpenChange={setOpen} className={styles.root}>\n      <Collapsible.Trigger className={styles.trigger}>\n        {open ? 'close' : 'open'}\n      </Collapsible.Trigger>\n      <Collapsible.Content className={styles.content} asChild>\n        <article>Content 1</article>\n      </Collapsible.Content>\n    </Collapsible.Root>\n  );\n};\n\nexport const Animated = () => {\n  return (\n    <>\n      <h1>Closed by default</h1>\n      <Collapsible.Root className={styles.root}>\n        <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n        <Collapsible.Content className={styles.animatedContent}>\n          <div style={{ padding: 10 }}>Content 1</div>\n        </Collapsible.Content>\n      </Collapsible.Root>\n\n      <h1>Open by default</h1>\n      <Collapsible.Root defaultOpen className={styles.root}>\n        <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n        <Collapsible.Content className={styles.animatedContent}>\n          <div style={{ padding: 10 }}>Content 1</div>\n        </Collapsible.Content>\n      </Collapsible.Root>\n    </>\n  );\n};\n\nexport const AnimatedHorizontal = () => {\n  return (\n    <Collapsible.Root className={styles.root}>\n      <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.animatedWidthContent}>\n        <div style={{ padding: 10 }}>Content</div>\n      </Collapsible.Content>\n    </Collapsible.Root>\n  );\n};\n\nexport const Chromatic = () => (\n  <>\n    <h1>Uncontrolled</h1>\n    <h2>Closed</h2>\n    <Collapsible.Root className={styles.root}>\n      <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>\n    </Collapsible.Root>\n\n    <h2>Open</h2>\n    <Collapsible.Root className={styles.root} defaultOpen>\n      <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>\n    </Collapsible.Root>\n\n    <h1>Controlled</h1>\n    <h2>Closed</h2>\n    <Collapsible.Root className={styles.root} open={false}>\n      <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>\n    </Collapsible.Root>\n\n    <h2>Open</h2>\n    <Collapsible.Root className={styles.root} open>\n      <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>\n    </Collapsible.Root>\n\n    <h1>Disabled</h1>\n    <Collapsible.Root className={styles.root} disabled>\n      <Collapsible.Trigger className={styles.trigger}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.content}>Content 1</Collapsible.Content>\n    </Collapsible.Root>\n\n    <h1>State attributes</h1>\n    <h2>Closed</h2>\n    <Collapsible.Root className={styles.rootAttr}>\n      <Collapsible.Trigger className={styles.triggerAttr}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.contentAttr}>Content 1</Collapsible.Content>\n    </Collapsible.Root>\n\n    <h2>Open</h2>\n    <Collapsible.Root className={styles.rootAttr} defaultOpen>\n      <Collapsible.Trigger className={styles.triggerAttr}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.contentAttr}>Content 1</Collapsible.Content>\n    </Collapsible.Root>\n\n    <h2>Disabled</h2>\n    <Collapsible.Root className={styles.rootAttr} defaultOpen disabled>\n      <Collapsible.Trigger className={styles.triggerAttr}>Trigger</Collapsible.Trigger>\n      <Collapsible.Content className={styles.contentAttr}>Content 1</Collapsible.Content>\n    </Collapsible.Root>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/collection.stories.tsx",
    "content": "import * as React from 'react';\nimport { Collection as CollectionPrimitive } from 'radix-ui/internal';\n\nconst { createCollection } = CollectionPrimitive;\n\nexport default { title: 'Utilities/Collection' };\n\nexport const Basic = () => (\n  <List>\n    <Item>Red</Item>\n    <Item disabled>Green</Item>\n    <Item>Blue</Item>\n    <LogItems />\n  </List>\n);\n\nexport const WithElementInBetween = () => (\n  <List>\n    <div style={{ fontVariant: 'small-caps' }}>Colors</div>\n    <Item>Red</Item>\n    <Item disabled>Green</Item>\n    <Item>Blue</Item>\n    <div style={{ fontVariant: 'small-caps' }}>Words</div>\n    <Item>Hello</Item>\n    <Item>World</Item>\n    <LogItems />\n  </List>\n);\n\nconst Tomato = () => <Item style={{ color: 'tomato' }}>Tomato</Item>;\n\nexport const WithWrappedItem = () => (\n  <List>\n    <Item>Red</Item>\n    <Item disabled>Green</Item>\n    <Item>Blue</Item>\n    <Tomato />\n    <LogItems />\n  </List>\n);\n\nexport const WithFragment = () => {\n  const countries = (\n    <>\n      <Item>France</Item>\n      <Item disabled>UK</Item>\n      <Item>Spain</Item>\n    </>\n  );\n  return (\n    <List>\n      {countries}\n      <LogItems />\n    </List>\n  );\n};\n\nexport const DynamicInsertion = () => {\n  const [hasTomato, setHasTomato] = React.useState(false);\n  const [, forceUpdate] = React.useState<any>();\n  return (\n    <>\n      <button onClick={() => setHasTomato(!hasTomato)}>\n        {hasTomato ? 'Remove' : 'Add'} Tomato\n      </button>\n      <button onClick={() => forceUpdate({})} style={{ marginLeft: 10 }}>\n        Force Update\n      </button>\n\n      <List>\n        <MemoItems hasTomato={hasTomato} />\n        <LogItems />\n      </List>\n    </>\n  );\n};\n\nfunction WrappedItems({ hasTomato }: any) {\n  return (\n    <>\n      <MemoItem>Red</MemoItem>\n      {hasTomato ? <Tomato /> : null}\n      <MemoItem disabled>Green</MemoItem>\n      <MemoItem>Blue</MemoItem>\n    </>\n  );\n}\n\nexport const WithChangingItem = () => {\n  const [isDisabled, setIsDisabled] = React.useState(false);\n  return (\n    <>\n      <button onClick={() => setIsDisabled(!isDisabled)}>\n        {isDisabled ? 'Enable' : 'Disable'} Green\n      </button>\n\n      <List>\n        <Item>Red</Item>\n        <Item disabled={isDisabled}>Green</Item>\n        <Item>Blue</Item>\n        <LogItems />\n      </List>\n    </>\n  );\n};\n\nexport const Nested = () => (\n  <List>\n    <Item>1</Item>\n    <Item>\n      2\n      <List>\n        <Item>2.1</Item>\n        <Item>2.2</Item>\n        <Item>2.3</Item>\n        <LogItems name=\"items inside 2\" />\n      </List>\n    </Item>\n    <Item>3</Item>\n    <LogItems name=\"top-level items\" />\n  </List>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * List implementation\n * -----------------------------------------------------------------------------------------------*/\n\ntype ItemData = { disabled: boolean };\n\nconst [Collection, useCollection] = createCollection<React.ComponentRef<typeof Item>, ItemData>(\n  'List',\n);\n\nconst List: React.FC<{ children: React.ReactNode }> = (props) => {\n  return (\n    <Collection.Provider scope={undefined}>\n      <Collection.Slot scope={undefined}>\n        <ul {...props} style={{ width: 200 }} />\n      </Collection.Slot>\n    </Collection.Provider>\n  );\n};\n\ntype ItemProps = React.ComponentPropsWithRef<'li'> & {\n  children: React.ReactNode;\n  disabled?: boolean;\n};\n\nfunction Item({ disabled = false, ...props }: ItemProps) {\n  return (\n    <Collection.ItemSlot scope={undefined} disabled={disabled}>\n      <li {...props} style={{ ...props.style, opacity: disabled ? 0.3 : undefined }} />\n    </Collection.ItemSlot>\n  );\n}\n\n// Ensure that our implementation doesn't break if the item list/item is memoized\nconst MemoItem = React.memo(Item);\nconst MemoItems = React.memo(WrappedItems);\n\nfunction LogItems({ name = 'items' }: { name?: string }) {\n  const getItems = useCollection(undefined);\n  React.useEffect(() => console.log(name, getItems()));\n  return null;\n}\n"
  },
  {
    "path": "apps/storybook/stories/context-menu.stories.module.css",
    "content": ".trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 200px;\n  height: 100px;\n  border: 2px dashed var(--color-black);\n  border-radius: 6px;\n  background-color: rgba(0, 0, 0, 0.1);\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);\n  }\n\n  &[data-state='open'] {\n    background-color: lightblue;\n  }\n}\n\n.content {\n  display: inline-block;\n  box-sizing: border-box;\n  min-width: 130px;\n  background-color: var(--color-white);\n  border: 1px solid var(--color-gray100);\n  border-radius: 6px;\n  padding: 5px;\n  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  &:focus-within {\n    border-color: var(--color-black);\n  }\n}\n\n.animatedContent {\n  transform-origin: var(--radix-context-menu-content-transform-origin);\n  &[data-state='open'] {\n    animation: contextMenu-scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n}\n\n.label,\n.item,\n.subTrigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n  height: 25px;\n  padding: 0 10px;\n  color: var(--color-black);\n  border-radius: 3px;\n}\n\n.label {\n  color: var(--color-gray100);\n}\n\n.item,\n.subTrigger {\n  outline: none;\n\n  &[data-highlighted] {\n    background-color: var(--color-black);\n    color: var(--color-white);\n  }\n\n  &[data-disabled] {\n    color: var(--color-gray100);\n  }\n}\n\n.subTrigger {\n  &:not([data-highlighted])[data-state='open'] {\n    background-color: var(--color-gray100);\n    color: var(--color-black);\n  }\n}\n\n.separator {\n  height: 1;\n  margin: 5px 10px;\n  background-color: var(--color-gray100);\n}\n\n@keyframes contextMenu-scaleIn {\n  0% {\n    transform: scale(0) rotateZ(-10deg);\n  }\n  20% {\n    transform: scale(1.1);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/context-menu.stories.tsx",
    "content": "import * as React from 'react';\nimport { ContextMenu } from 'radix-ui';\nimport { foodGroups } from '@repo/test-data/foods';\nimport styles from './context-menu.stories.module.css';\n\nexport default { title: 'Components/ContextMenu' };\n\nexport const Styled = () => (\n  <div\n    style={{\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '200vw',\n      height: '200vh',\n      gap: 20,\n    }}\n  >\n    <ContextMenu.Root>\n      <ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>\n      <ContextMenu.Portal>\n        <ContextMenu.Content className={styles.content} alignOffset={-5}>\n          <ContextMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n            Undo\n          </ContextMenu.Item>\n          <ContextMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n            Redo\n          </ContextMenu.Item>\n          <ContextMenu.Separator className={styles.separator} />\n          <ContextMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n            Cut\n          </ContextMenu.Item>\n          <ContextMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n            Copy\n          </ContextMenu.Item>\n          <ContextMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n            Paste\n          </ContextMenu.Item>\n        </ContextMenu.Content>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  </div>\n);\n\nexport const Modality = () => (\n  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '110vh' }}>\n    <div style={{ display: 'grid', gap: 50 }}>\n      <div style={{ display: 'inline-flex', alignItems: 'center', flexDirection: 'column' }}>\n        <h1>Modal (default)</h1>\n        <ContextMenu.Root>\n          <ContextMenu.Trigger className={styles.trigger} />\n          <ContextMenu.Portal>\n            <ContextMenu.Content className={styles.content} alignOffset={-5}>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n                Undo\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n                Redo\n              </ContextMenu.Item>\n              <ContextMenu.Separator className={styles.separator} />\n              <ContextMenu.Sub>\n                <ContextMenu.SubTrigger className={styles.subTrigger}>\n                  Submenu →\n                </ContextMenu.SubTrigger>\n                <ContextMenu.Portal>\n                  <ContextMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <ContextMenu.Item className={styles.item} onSelect={() => console.log('one')}>\n                      One\n                    </ContextMenu.Item>\n                    <ContextMenu.Item className={styles.item} onSelect={() => console.log('two')}>\n                      Two\n                    </ContextMenu.Item>\n                    <ContextMenu.Separator className={styles.separator} />\n                    <ContextMenu.Sub>\n                      <ContextMenu.SubTrigger className={styles.subTrigger}>\n                        Submenu →\n                      </ContextMenu.SubTrigger>\n                      <ContextMenu.Portal>\n                        <ContextMenu.SubContent\n                          className={styles.content}\n                          sideOffset={12}\n                          alignOffset={-6}\n                        >\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('one')}\n                          >\n                            One\n                          </ContextMenu.Item>\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('two')}\n                          >\n                            Two\n                          </ContextMenu.Item>\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('three')}\n                          >\n                            Three\n                          </ContextMenu.Item>\n                          <ContextMenu.Arrow />\n                        </ContextMenu.SubContent>\n                      </ContextMenu.Portal>\n                    </ContextMenu.Sub>\n                    <ContextMenu.Separator className={styles.separator} />\n                    <ContextMenu.Item className={styles.item} onSelect={() => console.log('three')}>\n                      Three\n                    </ContextMenu.Item>\n                    <ContextMenu.Arrow />\n                  </ContextMenu.SubContent>\n                </ContextMenu.Portal>\n              </ContextMenu.Sub>\n              <ContextMenu.Separator className={styles.separator} />\n              <ContextMenu.Item\n                className={styles.item}\n                disabled\n                onSelect={() => console.log('cut')}\n              >\n                Cut\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n                Copy\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n                Paste\n              </ContextMenu.Item>\n            </ContextMenu.Content>\n          </ContextMenu.Portal>\n        </ContextMenu.Root>\n        <textarea\n          style={{ width: 500, height: 100, marginTop: 10 }}\n          defaultValue=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet.\"\n        />\n      </div>\n      <div style={{ display: 'inline-flex', alignItems: 'center', flexDirection: 'column' }}>\n        <h1>Non modal</h1>\n        <ContextMenu.Root modal={false}>\n          <ContextMenu.Trigger className={styles.trigger} />\n          <ContextMenu.Portal>\n            <ContextMenu.Content className={styles.content} alignOffset={-5}>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n                Undo\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n                Redo\n              </ContextMenu.Item>\n              <ContextMenu.Separator className={styles.separator} />\n              <ContextMenu.Sub>\n                <ContextMenu.SubTrigger className={styles.subTrigger}>\n                  Submenu →\n                </ContextMenu.SubTrigger>\n                <ContextMenu.Portal>\n                  <ContextMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <ContextMenu.Item className={styles.item} onSelect={() => console.log('one')}>\n                      One\n                    </ContextMenu.Item>\n                    <ContextMenu.Item className={styles.item} onSelect={() => console.log('two')}>\n                      Two\n                    </ContextMenu.Item>\n                    <ContextMenu.Separator className={styles.separator} />\n                    <ContextMenu.Sub>\n                      <ContextMenu.SubTrigger className={styles.subTrigger}>\n                        Submenu →\n                      </ContextMenu.SubTrigger>\n                      <ContextMenu.Portal>\n                        <ContextMenu.SubContent\n                          className={styles.content}\n                          sideOffset={12}\n                          alignOffset={-6}\n                        >\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('one')}\n                          >\n                            One\n                          </ContextMenu.Item>\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('two')}\n                          >\n                            Two\n                          </ContextMenu.Item>\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('three')}\n                          >\n                            Three\n                          </ContextMenu.Item>\n                          <ContextMenu.Arrow />\n                        </ContextMenu.SubContent>\n                      </ContextMenu.Portal>\n                    </ContextMenu.Sub>\n                    <ContextMenu.Separator className={styles.separator} />\n                    <ContextMenu.Item className={styles.item} onSelect={() => console.log('three')}>\n                      Three\n                    </ContextMenu.Item>\n                    <ContextMenu.Arrow />\n                  </ContextMenu.SubContent>\n                </ContextMenu.Portal>\n              </ContextMenu.Sub>\n              <ContextMenu.Separator className={styles.separator} />\n              <ContextMenu.Item\n                className={styles.item}\n                disabled\n                onSelect={() => console.log('cut')}\n              >\n                Cut\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n                Copy\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n                Paste\n              </ContextMenu.Item>\n            </ContextMenu.Content>\n          </ContextMenu.Portal>\n        </ContextMenu.Root>\n        <textarea\n          style={{ width: 500, height: 100, marginTop: 10 }}\n          defaultValue=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet.\"\n        />\n      </div>\n    </div>\n  </div>\n);\n\nexport const Submenus = () => {\n  const [rtl, setRtl] = React.useState(false);\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100vh',\n        gap: 20,\n      }}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n        <label style={{ marginBottom: 10 }}>\n          <input\n            type=\"checkbox\"\n            checked={rtl}\n            onChange={(event) => setRtl(event.currentTarget.checked)}\n          />\n          Right-to-left\n        </label>\n        <ContextMenu.Root dir={rtl ? 'rtl' : 'ltr'}>\n          <ContextMenu.Trigger className={styles.trigger}>Right Click Here</ContextMenu.Trigger>\n          <ContextMenu.Portal>\n            <ContextMenu.Content className={styles.content}>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('new-tab')}>\n                New Tab\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('new-window')}>\n                New Window\n              </ContextMenu.Item>\n              <ContextMenu.Separator className={styles.separator} />\n              <ContextMenu.Sub>\n                <ContextMenu.SubTrigger className={styles.subTrigger}>\n                  Bookmarks →\n                </ContextMenu.SubTrigger>\n                <ContextMenu.Portal>\n                  <ContextMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <ContextMenu.Item className={styles.item} onSelect={() => console.log('index')}>\n                      Inbox\n                    </ContextMenu.Item>\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('calendar')}\n                    >\n                      Calendar\n                    </ContextMenu.Item>\n                    <ContextMenu.Separator className={styles.separator} />\n                    <ContextMenu.Sub>\n                      <ContextMenu.SubTrigger className={styles.subTrigger}>\n                        WorkOS →\n                      </ContextMenu.SubTrigger>\n                      <ContextMenu.Portal>\n                        <ContextMenu.SubContent\n                          className={styles.content}\n                          sideOffset={12}\n                          alignOffset={-6}\n                        >\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('stitches')}\n                          >\n                            Stitches\n                          </ContextMenu.Item>\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('composer')}\n                          >\n                            Composer\n                          </ContextMenu.Item>\n                          <ContextMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('radix')}\n                          >\n                            Radix\n                          </ContextMenu.Item>\n                          <ContextMenu.Arrow />\n                        </ContextMenu.SubContent>\n                      </ContextMenu.Portal>\n                    </ContextMenu.Sub>\n                    <ContextMenu.Separator className={styles.separator} />\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('notion')}\n                    >\n                      Notion\n                    </ContextMenu.Item>\n                    <ContextMenu.Arrow />\n                  </ContextMenu.SubContent>\n                </ContextMenu.Portal>\n              </ContextMenu.Sub>\n              <ContextMenu.Sub>\n                <ContextMenu.SubTrigger className={styles.subTrigger} disabled>\n                  History →\n                </ContextMenu.SubTrigger>\n                <ContextMenu.Portal>\n                  <ContextMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('github')}\n                    >\n                      Github\n                    </ContextMenu.Item>\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('google')}\n                    >\n                      Google\n                    </ContextMenu.Item>\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('stack-overflow')}\n                    >\n                      Stack Overflow\n                    </ContextMenu.Item>\n                    <ContextMenu.Arrow />\n                  </ContextMenu.SubContent>\n                </ContextMenu.Portal>\n              </ContextMenu.Sub>\n              <ContextMenu.Sub>\n                <ContextMenu.SubTrigger className={styles.subTrigger}>\n                  Tools →\n                </ContextMenu.SubTrigger>\n                <ContextMenu.Portal>\n                  <ContextMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('extensions')}\n                    >\n                      Extensions\n                    </ContextMenu.Item>\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('task-manager')}\n                    >\n                      Task Manager\n                    </ContextMenu.Item>\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('developer-tools')}\n                    >\n                      Developer Tools\n                    </ContextMenu.Item>\n                    <ContextMenu.Arrow />\n                  </ContextMenu.SubContent>\n                </ContextMenu.Portal>\n              </ContextMenu.Sub>\n              <ContextMenu.Separator className={styles.separator} />\n              <ContextMenu.Item\n                className={styles.item}\n                disabled\n                onSelect={() => console.log('print')}\n              >\n                Print…\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('cast')}>\n                Cast…\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('find')}>\n                Find…\n              </ContextMenu.Item>\n            </ContextMenu.Content>\n          </ContextMenu.Portal>\n        </ContextMenu.Root>\n      </div>\n    </div>\n  );\n};\n\nexport const WithLabels = () => (\n  <div style={{ textAlign: 'center', padding: 50 }}>\n    <ContextMenu.Root>\n      <ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>\n      <ContextMenu.Portal>\n        <ContextMenu.Content className={styles.content} alignOffset={-5}>\n          {foodGroups.map((foodGroup, index) => (\n            <ContextMenu.Group key={index}>\n              {foodGroup.label && (\n                <ContextMenu.Label className={styles.label} key={foodGroup.label}>\n                  {foodGroup.label}\n                </ContextMenu.Label>\n              )}\n              {foodGroup.foods.map((food) => (\n                <ContextMenu.Item\n                  key={food.value}\n                  className={styles.item}\n                  disabled={food.disabled}\n                  onSelect={() => console.log(food.label)}\n                >\n                  {food.label}\n                </ContextMenu.Item>\n              ))}\n              {index < foodGroups.length - 1 && (\n                <ContextMenu.Separator className={styles.separator} />\n              )}\n            </ContextMenu.Group>\n          ))}\n        </ContextMenu.Content>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  </div>\n);\n\nexport const CheckboxItems = () => {\n  const checkboxItems = ['Bold', 'Italic', 'Underline'];\n  const [selection, setSelection] = React.useState<string[]>([]);\n\n  return (\n    <div style={{ textAlign: 'center', padding: 50 }}>\n      <ContextMenu.Root>\n        <ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>\n        <ContextMenu.Portal>\n          <ContextMenu.Content className={styles.content} alignOffset={-5}>\n            <ContextMenu.Item className={styles.item} onSelect={() => console.log('show')}>\n              Show fonts\n            </ContextMenu.Item>\n            <ContextMenu.Item className={styles.item} onSelect={() => console.log('bigger')}>\n              Bigger\n            </ContextMenu.Item>\n            <ContextMenu.Item className={styles.item} onSelect={() => console.log('smaller')}>\n              Smaller\n            </ContextMenu.Item>\n            <ContextMenu.Separator className={styles.separator} />\n            {checkboxItems.map((item) => (\n              <ContextMenu.CheckboxItem\n                key={item}\n                className={styles.item}\n                checked={selection.includes(item)}\n                onCheckedChange={() =>\n                  setSelection((current) =>\n                    current.includes(item)\n                      ? current.filter((el) => el !== item)\n                      : current.concat(item),\n                  )\n                }\n              >\n                {item}\n                <ContextMenu.ItemIndicator>\n                  <TickIcon />\n                </ContextMenu.ItemIndicator>\n              </ContextMenu.CheckboxItem>\n            ))}\n            <ContextMenu.Separator />\n            <ContextMenu.CheckboxItem className={styles.item} disabled>\n              Strikethrough\n              <ContextMenu.ItemIndicator>\n                <TickIcon />\n              </ContextMenu.ItemIndicator>\n            </ContextMenu.CheckboxItem>\n          </ContextMenu.Content>\n        </ContextMenu.Portal>\n      </ContextMenu.Root>\n    </div>\n  );\n};\n\nexport const RadioItems = () => {\n  const files = ['README.md', 'index.js', 'page.css'];\n  const [file, setFile] = React.useState(files[1]);\n\n  return (\n    <div style={{ textAlign: 'center', padding: 50 }}>\n      <ContextMenu.Root>\n        <ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>\n        <ContextMenu.Portal>\n          <ContextMenu.Content className={styles.content} alignOffset={-5}>\n            <ContextMenu.Item className={styles.item} onSelect={() => console.log('minimize')}>\n              Minimize window\n            </ContextMenu.Item>\n            <ContextMenu.Item className={styles.item} onSelect={() => console.log('zoom')}>\n              Zoom\n            </ContextMenu.Item>\n            <ContextMenu.Item className={styles.item} onSelect={() => console.log('smaller')}>\n              Smaller\n            </ContextMenu.Item>\n            <ContextMenu.Separator className={styles.separator} />\n            <ContextMenu.RadioGroup value={file} onValueChange={setFile}>\n              {files.map((file) => (\n                <ContextMenu.RadioItem key={file} className={styles.item} value={file}>\n                  {file}\n                  <ContextMenu.ItemIndicator>\n                    <TickIcon />\n                  </ContextMenu.ItemIndicator>\n                </ContextMenu.RadioItem>\n              ))}\n            </ContextMenu.RadioGroup>\n          </ContextMenu.Content>\n        </ContextMenu.Portal>\n      </ContextMenu.Root>\n      <p>Selected file: {file}</p>\n    </div>\n  );\n};\n\nexport const PreventClosing = () => (\n  <div style={{ textAlign: 'center', padding: 50 }}>\n    <ContextMenu.Root>\n      <ContextMenu.Trigger className={styles.trigger}>Right click here</ContextMenu.Trigger>\n      <ContextMenu.Portal>\n        <ContextMenu.Content className={styles.content} alignOffset={-5}>\n          <ContextMenu.Item className={styles.item} onSelect={() => window.alert('action 1')}>\n            I will close\n          </ContextMenu.Item>\n          <ContextMenu.Item\n            className={styles.item}\n            onSelect={(event) => {\n              event.preventDefault();\n              window.alert('action 1');\n            }}\n          >\n            I won't close\n          </ContextMenu.Item>\n        </ContextMenu.Content>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  </div>\n);\n\nexport const Multiple = () => {\n  const [customColors, setCustomColors] = React.useState<{ [index: number]: string }>({});\n  const [fadedIndexes, setFadedIndexes] = React.useState<number[]>([]);\n  return (\n    <div\n      style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}\n      onContextMenu={(event) => event.preventDefault()}\n    >\n      {Array.from({ length: 100 }, (_, i) => {\n        const customColor = customColors[i];\n        return (\n          <ContextMenu.Root key={i}>\n            <ContextMenu.Portal>\n              <ContextMenu.Content\n                className={[styles.content, styles.animatedContent].join(' ')}\n                alignOffset={-5}\n              >\n                <ContextMenu.Label className={styles.label}>Color</ContextMenu.Label>\n                <ContextMenu.RadioGroup\n                  value={customColor}\n                  onValueChange={(color) =>\n                    setCustomColors((colors) => ({ ...colors, [i]: color }))\n                  }\n                >\n                  <ContextMenu.RadioItem className={styles.item} value=\"royalblue\">\n                    Blue\n                    <ContextMenu.ItemIndicator>\n                      <TickIcon />\n                    </ContextMenu.ItemIndicator>\n                  </ContextMenu.RadioItem>\n                  <ContextMenu.RadioItem className={styles.item} value=\"tomato\">\n                    Red\n                    <ContextMenu.ItemIndicator>\n                      <TickIcon />\n                    </ContextMenu.ItemIndicator>\n                  </ContextMenu.RadioItem>\n                </ContextMenu.RadioGroup>\n                <ContextMenu.Separator className={styles.separator} />\n                <ContextMenu.CheckboxItem\n                  className={styles.item}\n                  checked={fadedIndexes.includes(i)}\n                  onCheckedChange={(faded) =>\n                    setFadedIndexes((indexes) =>\n                      faded ? [...indexes, i] : indexes.filter((index) => index !== i),\n                    )\n                  }\n                >\n                  Fade\n                  <ContextMenu.ItemIndicator>\n                    <TickIcon />\n                  </ContextMenu.ItemIndicator>\n                </ContextMenu.CheckboxItem>\n              </ContextMenu.Content>\n            </ContextMenu.Portal>\n            <ContextMenu.Trigger>\n              <div\n                style={{\n                  flexShrink: 0,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  width: 100,\n                  height: 100,\n                  backgroundColor: customColor ? customColor : '#eeeef0',\n                  color: customColor ? 'white' : '#666670',\n                  fontSize: 32,\n                  borderRadius: 5,\n                  cursor: 'default',\n                  userSelect: 'none',\n                  opacity: fadedIndexes.includes(i) ? 0.5 : 1,\n                }}\n              >\n                {i + 1}\n              </div>\n            </ContextMenu.Trigger>\n          </ContextMenu.Root>\n        );\n      })}\n    </div>\n  );\n};\n\nexport const Nested = () => (\n  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n    <ContextMenu.Root>\n      <ContextMenu.Trigger\n        className={styles.trigger}\n        style={{ padding: 100, backgroundColor: 'royalblue' }}\n      >\n        <ContextMenu.Root>\n          <ContextMenu.Trigger className={styles.trigger} style={{ backgroundColor: 'tomato' }} />{' '}\n          <ContextMenu.Portal>\n            <ContextMenu.Content className={styles.content} alignOffset={-5}>\n              <ContextMenu.Label className={styles.label}>Red box menu</ContextMenu.Label>\n              <ContextMenu.Separator className={styles.separator} />\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('red action1')}>\n                Red action 1\n              </ContextMenu.Item>\n              <ContextMenu.Item className={styles.item} onSelect={() => console.log('red action2')}>\n                Red action 2\n              </ContextMenu.Item>\n              <ContextMenu.Separator className={styles.separator} />\n              <ContextMenu.Sub>\n                <ContextMenu.SubTrigger className={styles.subTrigger}>\n                  Submenu →\n                </ContextMenu.SubTrigger>\n                <ContextMenu.Portal>\n                  <ContextMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('red sub action 1')}\n                    >\n                      Red sub action 1\n                    </ContextMenu.Item>\n                    <ContextMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('red sub action 2')}\n                    >\n                      Red sub action 2\n                    </ContextMenu.Item>\n                    <ContextMenu.Arrow />\n                  </ContextMenu.SubContent>\n                </ContextMenu.Portal>\n              </ContextMenu.Sub>\n            </ContextMenu.Content>\n          </ContextMenu.Portal>\n        </ContextMenu.Root>\n      </ContextMenu.Trigger>\n      <ContextMenu.Portal>\n        <ContextMenu.Content className={styles.content} alignOffset={-5}>\n          <ContextMenu.Label className={styles.label}>Blue box menu</ContextMenu.Label>\n          <ContextMenu.Separator className={styles.separator} />\n          <ContextMenu.Item className={styles.item} onSelect={() => console.log('blue action1')}>\n            Blue action 1\n          </ContextMenu.Item>\n          <ContextMenu.Item className={styles.item} onSelect={() => console.log('blue action2')}>\n            Blue action 2\n          </ContextMenu.Item>\n          <ContextMenu.Separator className={styles.separator} />\n          <ContextMenu.Sub>\n            <ContextMenu.SubTrigger className={styles.subTrigger}>Submenu →</ContextMenu.SubTrigger>\n            <ContextMenu.Portal>\n              <ContextMenu.SubContent className={styles.content} sideOffset={12} alignOffset={-6}>\n                <ContextMenu.Item\n                  className={styles.item}\n                  onSelect={() => console.log('blue sub action 1')}\n                >\n                  Blue sub action 1\n                </ContextMenu.Item>\n                <ContextMenu.Item\n                  className={styles.item}\n                  onSelect={() => console.log('blue sub action 2')}\n                >\n                  Blue sub action 2\n                </ContextMenu.Item>\n                <ContextMenu.Arrow />\n              </ContextMenu.SubContent>\n            </ContextMenu.Portal>\n          </ContextMenu.Sub>\n        </ContextMenu.Content>\n      </ContextMenu.Portal>\n    </ContextMenu.Root>\n  </div>\n);\n\nconst TickIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    width=\"12\"\n    height=\"12\"\n    fill=\"none\"\n    stroke=\"currentcolor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth=\"3\"\n  >\n    <path d=\"M2 20 L12 28 30 4\" />\n  </svg>\n);\n"
  },
  {
    "path": "apps/storybook/stories/dialog.stories.module.css",
    "content": ".trigger {\n}\n\n.overlay {\n  /* ensures overlay is positioned correctly */\n  position: fixed;\n  inset: 0;\n  /* ------ */\n  background-color: rgb(0 0 0 / 0.2);\n}\n\n.scrollableOverlay {\n  overflow: auto;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n}\n\n.contentDefault,\n.contentSheet {\n  /* ensures good default position for content */\n  position: fixed;\n  top: 0;\n  left: 0;\n  /* ------ */\n  min-width: 300px;\n  min-height: 150px;\n  padding: 50px;\n  border-radius: 10px;\n  background-color: white;\n  box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);\n}\n\n.contentDefault {\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.contentScrollable {\n  overflow: auto;\n  max-height: 300px;\n}\n\n.contentInScrollableOverlay {\n  margin-top: 50px;\n  margin-bottom: 50px;\n}\n\n.contentSheet {\n  left: initial;\n  right: 0;\n  min-width: 300px;\n  min-height: 100vh;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.close {\n}\n\n@keyframes dialog-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes dialog-fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes dialog-scaleIn {\n  from {\n    transform: translate(-50%, -50%) scale(0.75);\n  }\n  to {\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n.animatedOverlay {\n  &[data-state='open'] {\n    animation: dialog-fadeIn 300ms ease-out;\n  }\n  &[data-state='closed'] {\n    animation: dialog-fadeOut 300ms ease-in;\n  }\n}\n\n.animatedContent {\n  &[data-state='open'] {\n    animation:\n      dialog-fadeIn 150ms ease-out,\n      dialog-scaleIn 200ms ease-out;\n  }\n  &[data-state='closed'] {\n    animation: dialog-fadeOut 300ms ease-in;\n  }\n}\n\n.duration50 {\n  animation-duration: 50ms;\n}\n\n.chromaticContent {\n  padding: 10px;\n  min-width: auto;\n  min-height: auto;\n}\n\n.triggerAttr,\n.overlayAttr,\n.contentAttr,\n.closeAttr {\n  background-color: rgb(0 0 255 / 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n\n  &[data-state='closed'] {\n    border-color: red;\n  }\n  &[data-state='open'] {\n    border-color: green;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/dialog.stories.tsx",
    "content": "import * as React from 'react';\nimport { Dialog } from 'radix-ui';\nimport styles from './dialog.stories.module.css';\n\nexport default { title: 'Components/Dialog' };\n\nexport const Styled = () => (\n  <Dialog.Root>\n    <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n    <Dialog.Portal>\n      <Dialog.Overlay className={styles.overlay} />\n      <Dialog.Content className={styles.contentDefault}>\n        <Dialog.Title>Booking info</Dialog.Title>\n        <Dialog.Description>Please enter the info for your booking below.</Dialog.Description>\n        <Dialog.Close className={styles.close}>close</Dialog.Close>\n      </Dialog.Content>\n    </Dialog.Portal>\n  </Dialog.Root>\n);\n\nexport const NonModal = () => (\n  <>\n    <Dialog.Root modal={false}>\n      <Dialog.Trigger className={styles.trigger}>open (non-modal)</Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay className={styles.overlay} />\n        <Dialog.Content\n          className={[styles.contentDefault, styles.contentSheet].join(' ')}\n          onInteractOutside={(event) => event.preventDefault()}\n        >\n          <Dialog.Title>Booking info</Dialog.Title>\n          <Dialog.Description>Description</Dialog.Description>\n          <Dialog.Close className={styles.close}>close</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n\n    {Array.from({ length: 5 }, (_, i) => (\n      <div key={i} style={{ marginTop: 20 }}>\n        <textarea\n          style={{ width: 800, height: 400 }}\n          defaultValue=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet, minima expedita alias et fugit voluptate laborum placeat odio dolore ab!\"\n        />\n      </div>\n    ))}\n  </>\n);\n\nexport const Controlled = () => {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <Dialog.Root open={open} onOpenChange={setOpen}>\n      <Dialog.Trigger>{open ? 'close' : 'open'}</Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay className={styles.overlay} />\n        <Dialog.Content className={styles.contentDefault}>\n          <Dialog.Title>Title</Dialog.Title>\n          <Dialog.Description>Description</Dialog.Description>\n          <Dialog.Close>close</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n};\n\nexport const FocusTrap = () => (\n  <>\n    <Dialog.Root>\n      <Dialog.Trigger>open</Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay className={styles.overlay} />\n        <Dialog.Content className={styles.contentDefault}>\n          <Dialog.Close>close</Dialog.Close>\n          <Dialog.Title>Title</Dialog.Title>\n          <Dialog.Description>Description</Dialog.Description>\n          <div>\n            <label htmlFor=\"firstName\">First Name</label>\n            <input type=\"text\" id=\"firstName\" placeholder=\"John\" />\n\n            <label htmlFor=\"lastName\">Last Name</label>\n            <input type=\"text\" id=\"lastName\" placeholder=\"Doe\" />\n\n            <button type=\"submit\">Send</button>\n          </div>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n\n    <p>These elements can't be focused when the dialog is opened.</p>\n    <button type=\"button\">A button</button>\n    <input type=\"text\" placeholder=\"Another focusable element\" />\n  </>\n);\n\nexport const CustomFocus = () => {\n  const firstNameRef = React.useRef<HTMLInputElement>(null);\n  const searchFieldRef = React.useRef<HTMLInputElement>(null);\n  return (\n    <>\n      <Dialog.Root>\n        <Dialog.Trigger>open</Dialog.Trigger>\n        <Dialog.Portal>\n          <Dialog.Overlay className={styles.overlay} />\n          <Dialog.Content\n            className={styles.contentDefault}\n            onOpenAutoFocus={(event) => {\n              event.preventDefault();\n              firstNameRef.current?.focus();\n            }}\n            onCloseAutoFocus={(event) => {\n              event.preventDefault();\n              searchFieldRef.current?.focus();\n            }}\n          >\n            <Dialog.Close>close</Dialog.Close>\n\n            <div>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>\n                The first name input will receive the focus after opening the dialog.\n              </Dialog.Description>\n              <label htmlFor=\"firstName\">First Name</label>\n              <input type=\"text\" id=\"firstName\" placeholder=\"John\" ref={firstNameRef} />\n\n              <label htmlFor=\"lastName\">Last Name</label>\n              <input type=\"text\" id=\"lastName\" placeholder=\"Doe\" />\n\n              <button type=\"submit\">Send</button>\n            </div>\n          </Dialog.Content>\n        </Dialog.Portal>\n      </Dialog.Root>\n\n      <div>\n        <p>The search input will receive the focus after closing the dialog.</p>\n        <input type=\"text\" placeholder=\"Search…\" ref={searchFieldRef} />\n      </div>\n    </>\n  );\n};\n\nexport const NoEscapeDismiss = () => (\n  <Dialog.Root>\n    <Dialog.Trigger>open</Dialog.Trigger>\n    <Dialog.Portal>\n      <Dialog.Overlay className={styles.overlay} />\n      <Dialog.Content\n        className={styles.contentDefault}\n        onEscapeKeyDown={(event) => event.preventDefault()}\n      >\n        <Dialog.Title>Title</Dialog.Title>\n        <Dialog.Description>\n          The first name input will receive the focus after opening the dialog.\n        </Dialog.Description>\n        <Dialog.Close>close</Dialog.Close>\n      </Dialog.Content>\n    </Dialog.Portal>\n  </Dialog.Root>\n);\n\nexport const NoPointerDownOutsideDismiss = () => (\n  <Dialog.Root>\n    <Dialog.Trigger>open</Dialog.Trigger>\n    <Dialog.Portal>\n      <Dialog.Overlay className={styles.overlay} />\n      <Dialog.Content\n        className={styles.contentDefault}\n        onPointerDownOutside={(event) => event.preventDefault()}\n      >\n        <Dialog.Title>Title</Dialog.Title>\n        <Dialog.Description>Description</Dialog.Description>\n        <Dialog.Close>close</Dialog.Close>\n      </Dialog.Content>\n    </Dialog.Portal>\n  </Dialog.Root>\n);\n\nexport const WithPortalContainer = () => {\n  const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);\n  return (\n    <>\n      <Dialog.Root>\n        <Dialog.Trigger>open</Dialog.Trigger>\n        <Dialog.Portal container={portalContainer}>\n          <Dialog.Overlay className={styles.overlay} />\n          <Dialog.Content className={styles.contentDefault}>\n            <Dialog.Title>Title</Dialog.Title>\n            <Dialog.Description>Description</Dialog.Description>\n            <Dialog.Close>close</Dialog.Close>\n          </Dialog.Content>\n        </Dialog.Portal>\n      </Dialog.Root>\n      <div data-portal-container=\"\" ref={setPortalContainer} />\n    </>\n  );\n};\n\nexport const Animated = () => (\n  <Dialog.Root>\n    <Dialog.Trigger>open</Dialog.Trigger>\n    <Dialog.Portal>\n      <Dialog.Overlay className={[styles.overlay, styles.animatedOverlay].join(' ')} />\n      <Dialog.Content className={[styles.contentDefault, styles.animatedContent].join(' ')}>\n        <Dialog.Title>Title</Dialog.Title>\n        <Dialog.Description>Description</Dialog.Description>\n        <Dialog.Close>close</Dialog.Close>\n      </Dialog.Content>\n    </Dialog.Portal>\n  </Dialog.Root>\n);\n\nexport const ForcedMount = () => (\n  <Dialog.Root>\n    <Dialog.Trigger>open</Dialog.Trigger>\n    <Dialog.Portal forceMount>\n      <Dialog.Overlay className={styles.overlay} />\n      <Dialog.Content className={styles.contentDefault}>\n        <Dialog.Title>Title</Dialog.Title>\n        <Dialog.Description>Description</Dialog.Description>\n        <Dialog.Close>close</Dialog.Close>\n      </Dialog.Content>\n    </Dialog.Portal>\n  </Dialog.Root>\n);\n\nexport const InnerScrollable = () => (\n  <Dialog.Root>\n    <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n    <Dialog.Portal>\n      <Dialog.Overlay className={styles.overlay} />\n      <Dialog.Content className={[styles.contentDefault, styles.contentScrollable].join(' ')}>\n        <Dialog.Title>Booking info</Dialog.Title>\n        <Dialog.Description>Please enter the info for your booking below.</Dialog.Description>\n        <div style={{ backgroundColor: '#eee', height: 500 }} />\n        <Dialog.Close className={styles.close}>close</Dialog.Close>\n      </Dialog.Content>\n    </Dialog.Portal>\n  </Dialog.Root>\n);\n\nexport const OuterScrollable = () => (\n  <Dialog.Root>\n    <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n    <div style={{ backgroundColor: '#eee', width: 300, height: 1000 }} />\n    <Dialog.Portal>\n      <Dialog.Overlay className={[styles.overlay, styles.scrollableOverlay].join(' ')}>\n        <Dialog.Content\n          className={[styles.contentDefault, styles.contentInScrollableOverlay].join(' ')}\n        >\n          <Dialog.Title>Booking info</Dialog.Title>\n          <Dialog.Description>Please enter the info for your booking below.</Dialog.Description>\n          <div style={{ backgroundColor: '#eee', height: 500 }} />\n          <Dialog.Close className={styles.close}>close</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Overlay>\n    </Dialog.Portal>\n  </Dialog.Root>\n);\n\nexport const Chromatic = () => (\n  <>\n    <div\n      style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(4, 1fr)',\n        height: '50vh',\n      }}\n    >\n      <div>\n        <h1>Uncontrolled</h1>\n        <h2>Closed</h2>\n        <Dialog.Root>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n          <Dialog.Portal>\n            <Dialog.Overlay className={styles.overlay} />\n            <Dialog.Content className={[styles.contentDefault, styles.chromaticContent].join(' ')}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n        </Dialog.Root>\n\n        <h2>Open</h2>\n        <Dialog.Root defaultOpen>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n          <Dialog.Portal>\n            <Dialog.Overlay\n              className={styles.overlay}\n              style={{ left: 0, bottom: '50%', width: '25%' }}\n            />\n            <Dialog.Content className={styles.chromaticContent} style={{ top: '25%', left: '12%' }}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n        </Dialog.Root>\n      </div>\n\n      <div>\n        <h1>Uncontrolled with reordered parts</h1>\n        <h2>Closed</h2>\n        <Dialog.Root>\n          <Dialog.Portal>\n            <Dialog.Overlay className={styles.overlay} />\n            <Dialog.Content className={styles.chromaticContent}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n        </Dialog.Root>\n\n        <h2>Open</h2>\n        <Dialog.Root defaultOpen>\n          <Dialog.Portal>\n            <Dialog.Overlay\n              className={styles.overlay}\n              style={{ left: '25%', bottom: '50%', width: '25%' }}\n            />\n            <Dialog.Content className={styles.chromaticContent} style={{ top: '25%', left: '37%' }}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n        </Dialog.Root>\n      </div>\n\n      <div>\n        <h1>Controlled</h1>\n        <h2>Closed</h2>\n        <Dialog.Root open={false}>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n          <Dialog.Portal>\n            <Dialog.Overlay className={styles.overlay} />\n            <Dialog.Content className={styles.chromaticContent}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n        </Dialog.Root>\n\n        <h2>Open</h2>\n        <Dialog.Root open>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n          <Dialog.Portal>\n            <Dialog.Overlay\n              className={styles.overlay}\n              style={{ left: '50%', bottom: '50%', width: '25%' }}\n            />\n            <Dialog.Content className={styles.chromaticContent} style={{ top: '25%', left: '62%' }}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n        </Dialog.Root>\n      </div>\n\n      <div>\n        <h1>Controlled with reordered parts</h1>\n        <h2>Closed</h2>\n        <Dialog.Root open={false}>\n          <Dialog.Portal>\n            <Dialog.Overlay className={styles.overlay} />\n            <Dialog.Content className={styles.chromaticContent}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n        </Dialog.Root>\n\n        <h2>Open</h2>\n        <Dialog.Root open>\n          <Dialog.Portal>\n            <Dialog.Overlay\n              className={styles.overlay}\n              style={{ left: '75%', bottom: '50%', width: '25%' }}\n            />\n            <Dialog.Content className={styles.chromaticContent} style={{ top: '25%', left: '88%' }}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n        </Dialog.Root>\n      </div>\n    </div>\n\n    <div\n      style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(2, 1fr)',\n        height: '50vh',\n      }}\n    >\n      <div>\n        <h1>Forced mount</h1>\n        <Dialog.Root>\n          <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n          <Dialog.Portal forceMount>\n            <Dialog.Overlay\n              className={styles.overlay}\n              style={{\n                top: '50%',\n                backgroundColor: 'rgba(0, 0, 0, 0.3)',\n              }}\n            />\n            <Dialog.Content className={styles.chromaticContent} style={{ left: '25%', top: '75%' }}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.close}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n        </Dialog.Root>\n      </div>\n\n      <div>\n        <h1>State attributes</h1>\n        <h2>Closed</h2>\n        <Dialog.Root>\n          <Dialog.Trigger className={styles.triggerAttr}>open</Dialog.Trigger>\n          <Dialog.Portal>\n            <Dialog.Overlay className={styles.overlayAttr} />\n            <Dialog.Content className={[styles.chromaticContent, styles.contentAttr].join(' ')}>\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.closeAttr}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n        </Dialog.Root>\n\n        <h2>Open</h2>\n        <Dialog.Root defaultOpen>\n          <Dialog.Trigger className={styles.triggerAttr}>open</Dialog.Trigger>\n          <Dialog.Portal>\n            <Dialog.Overlay\n              className={[styles.overlay, styles.overlayAttr].join(' ')}\n              style={{ left: '50%', top: '50%' }}\n            />\n            <Dialog.Content\n              className={[styles.chromaticContent, styles.contentAttr].join(' ')}\n              style={{ left: '75%', top: '75%' }}\n            >\n              <Dialog.Title>Title</Dialog.Title>\n              <Dialog.Description>Description</Dialog.Description>\n              <Dialog.Close className={styles.closeAttr}>close</Dialog.Close>\n            </Dialog.Content>\n          </Dialog.Portal>\n        </Dialog.Root>\n      </div>\n    </div>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n\nexport const Cypress = () => {\n  const [modal, setModal] = React.useState(true);\n  const [animated, setAnimated] = React.useState(false);\n  const [count, setCount] = React.useState(0);\n  const [hasDestroyButton, setHasDestroyButton] = React.useState(true);\n\n  return (\n    <>\n      <Dialog.Root modal={modal}>\n        <Dialog.Trigger className={styles.trigger}>open</Dialog.Trigger>\n        <Dialog.Portal>\n          <Dialog.Content\n            className={[\n              styles.contentDefault,\n              animated && styles.animatedContent,\n              animated && styles.duration50,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <Dialog.Title>title</Dialog.Title>\n            <Dialog.Description>description</Dialog.Description>\n            <Dialog.Close className={styles.close}>close</Dialog.Close>\n            {hasDestroyButton && (\n              <div>\n                <button type=\"button\" onClick={() => setHasDestroyButton(false)}>\n                  destroy me\n                </button>\n              </div>\n            )}\n          </Dialog.Content>\n        </Dialog.Portal>\n      </Dialog.Root>\n\n      <br />\n      <br />\n\n      <label>\n        <input\n          type=\"checkbox\"\n          checked={modal}\n          onChange={(event) => setModal(Boolean(event.target.checked))}\n        />{' '}\n        modal\n      </label>\n\n      <br />\n\n      <label>\n        <input\n          type=\"checkbox\"\n          checked={animated}\n          onChange={(event) => setAnimated(Boolean(event.target.checked))}\n        />{' '}\n        animated\n      </label>\n\n      <br />\n\n      <label>\n        count up{' '}\n        <button type=\"button\" onClick={() => setCount((count) => count + 1)}>\n          {count}\n        </button>\n      </label>\n\n      <br />\n\n      <label>\n        name: <input type=\"text\" placeholder=\"name\" />\n      </label>\n    </>\n  );\n};\n"
  },
  {
    "path": "apps/storybook/stories/dismissable-layer.stories.tsx",
    "content": "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { Portal, Slot } from 'radix-ui';\nimport {\n  DismissableLayer as DismissableLayerPrimitive,\n  FocusGuards,\n  FocusScope as FocusScopePrimitive,\n  Popper,\n} from 'radix-ui/internal';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nconst DismissableLayer = DismissableLayerPrimitive.Root;\nconst FocusScope = FocusScopePrimitive.Root;\n\ntype DismissableLayerProps = React.ComponentProps<typeof DismissableLayer>;\ntype FocusScopeProps = React.ComponentProps<typeof FocusScope>;\n\nexport default { title: 'Utilities/DismissableLayer' };\n\nconst SYSTEM_FONT =\n  '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"';\n\nexport const Basic = () => {\n  const [open, setOpen] = React.useState(false);\n  const openButtonRef = React.useRef(null);\n\n  const [dismissOnEscape, setDismissOnEscape] = React.useState(false);\n  const [dismissOnPointerDownOutside, setDismissOnPointerDownOutside] = React.useState(false);\n  const [dismissOnFocusOutside, setDismissOnFocusOutside] = React.useState(false);\n  const [disabledOutsidePointerEvents, setDisableOutsidePointerEvents] = React.useState(false);\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>\n      <h1>DismissableLayer</h1>\n\n      <div style={{ display: 'inline-block', textAlign: 'left', marginBottom: 20 }}>\n        <label style={{ display: 'block' }}>\n          <input\n            type=\"checkbox\"\n            checked={dismissOnEscape}\n            onChange={(event) => setDismissOnEscape(event.target.checked)}\n          />{' '}\n          Dismiss on escape?\n        </label>\n\n        <label style={{ display: 'block' }}>\n          <input\n            type=\"checkbox\"\n            checked={dismissOnPointerDownOutside}\n            onChange={(event) => setDismissOnPointerDownOutside(event.target.checked)}\n          />{' '}\n          Dismiss on pointer down outside?\n        </label>\n\n        <label style={{ display: 'block' }}>\n          <input\n            type=\"checkbox\"\n            checked={dismissOnFocusOutside}\n            onChange={(event) => setDismissOnFocusOutside(event.target.checked)}\n          />{' '}\n          Dismiss on focus outside?\n        </label>\n\n        <hr />\n\n        <label style={{ display: 'block' }}>\n          <input\n            type=\"checkbox\"\n            checked={disabledOutsidePointerEvents}\n            onChange={(event) => setDisableOutsidePointerEvents(event.target.checked)}\n          />{' '}\n          Disable outside pointer events?\n        </label>\n      </div>\n\n      <div style={{ marginBottom: 20 }}>\n        <button ref={openButtonRef} type=\"button\" onClick={() => setOpen((open) => !open)}>\n          {open ? 'Close' : 'Open'} layer\n        </button>\n      </div>\n\n      {open ? (\n        <DismissableLayer\n          onEscapeKeyDown={(event) => {\n            if (dismissOnEscape === false) {\n              event.preventDefault();\n            }\n          }}\n          onPointerDownOutside={(event) => {\n            if (dismissOnPointerDownOutside === false || event.target === openButtonRef.current) {\n              event.preventDefault();\n            }\n          }}\n          onFocusOutside={(event) => {\n            if (dismissOnFocusOutside === false) {\n              event.preventDefault();\n            }\n          }}\n          disableOutsidePointerEvents={disabledOutsidePointerEvents}\n          onDismiss={() => setOpen(false)}\n          style={{\n            display: 'inline-flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            verticalAlign: 'middle',\n            width: 400,\n            height: 300,\n            backgroundColor: 'black',\n            borderRadius: 10,\n            marginBottom: 20,\n          }}\n        >\n          <input type=\"text\" />\n        </DismissableLayer>\n      ) : null}\n\n      <div style={{ marginBottom: 20 }}>\n        <input type=\"text\" defaultValue=\"hello\" style={{ marginRight: 20 }} />\n        <button type=\"button\" onMouseDown={() => alert('hey!')}>\n          hey!\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport const Nested = () => {\n  return (\n    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>\n      <h1>DismissableLayer (nested)</h1>\n      <DismissableBox />\n    </div>\n  );\n};\n\nexport const WithFocusScope = () => {\n  const [open, setOpen] = React.useState(false);\n  const openButtonRef = React.useRef(null);\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>\n      <h1>DismissableLayer + FocusScope</h1>\n      <div style={{ marginBottom: 20 }}>\n        <button ref={openButtonRef} type=\"button\" onClick={() => setOpen((open) => !open)}>\n          {open ? 'Close' : 'Open'} layer\n        </button>\n      </div>\n\n      {open ? (\n        <DismissableLayer\n          asChild\n          onPointerDownOutside={(event) => {\n            if (event.target === openButtonRef.current) {\n              event.preventDefault();\n            }\n          }}\n          disableOutsidePointerEvents\n          onDismiss={() => setOpen(false)}\n        >\n          <FocusScope\n            trapped\n            style={{\n              display: 'inline-flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              verticalAlign: 'middle',\n              width: 400,\n              height: 300,\n              backgroundColor: 'black',\n              borderRadius: 10,\n              marginBottom: 20,\n            }}\n          >\n            <input type=\"text\" />\n          </FocusScope>\n        </DismissableLayer>\n      ) : null}\n\n      <div style={{ marginBottom: 20 }}>\n        <input type=\"text\" defaultValue=\"hello\" style={{ marginRight: 20 }} />\n        <button type=\"button\" onMouseDown={() => alert('hey!')}>\n          hey!\n        </button>\n      </div>\n    </div>\n  );\n};\n\ntype DismissableBoxProps = Omit<DismissableLayerProps, 'children'>;\n\nfunction DismissableBox(props: DismissableBoxProps) {\n  const [open, setOpen] = React.useState(false);\n  const openButtonRef = React.useRef(null);\n\n  return (\n    <DismissableLayer\n      {...props}\n      style={{\n        display: 'inline-block',\n        verticalAlign: 'middle',\n        padding: 20,\n        backgroundColor: 'rgba(0, 0, 0, 0.2)',\n        borderRadius: 10,\n        marginTop: 20,\n        ...props.style,\n      }}\n    >\n      <div>\n        <button ref={openButtonRef} type=\"button\" onClick={() => setOpen((open) => !open)}>\n          {open ? 'Close' : 'Open'} new layer\n        </button>\n      </div>\n\n      {open ? (\n        <DismissableBox\n          onPointerDownOutside={(event) => {\n            if (event.target === openButtonRef.current) {\n              event.preventDefault();\n            }\n          }}\n          onFocusOutside={(event) => event.preventDefault()}\n          onDismiss={() => setOpen(false)}\n        />\n      ) : null}\n    </DismissableLayer>\n  );\n}\n\nexport const DialogExample = () => (\n  <div style={{ height: '300vh', fontFamily: SYSTEM_FONT }}>\n    <h1>Dialog (fully modal example)</h1>\n    <ul style={{ listStyle: 'none', padding: 0, marginBottom: 30 }}>\n      <li>✅ focus should move inside `Dialog` when mounted</li>\n      <li>✅ focus should be trapped inside `Dialog`</li>\n      <li>✅ scrolling outside `Dialog` should be disabled</li>\n      <li>✅ should be able to dismiss `Dialog` on pressing escape</li>\n      <li style={{ marginLeft: 30 }}>✅ focus should return to the open button</li>\n      <li>\n        ✅ interacting outside `Dialog` should be disabled (clicking the \"alert me\" button shouldn't\n        do anything)\n      </li>\n      <li>➕</li>\n      <li>✅ should be able to dismiss `Dialog` when interacting outside</li>\n      <li style={{ marginLeft: 30 }}>✅ focus should return to the open button</li>\n    </ul>\n\n    <div style={{ display: 'flex', gap: 10 }}>\n      <DummyDialog openLabel=\"Open Dialog\" closeLabel=\"Close Dialog\" />\n      <input type=\"text\" defaultValue=\"some input\" />\n      <button type=\"button\" onClick={() => window.alert('clicked!')}>\n        Alert me\n      </button>\n    </div>\n  </div>\n);\n\nexport const PopoverFullyModal = () => (\n  <div style={{ height: '300vh', fontFamily: SYSTEM_FONT }}>\n    <h1>Popover (fully modal example)</h1>\n    <ul style={{ listStyle: 'none', padding: 0, marginBottom: 30 }}>\n      <li>✅ focus should move inside `Popover` when mounted</li>\n      <li>✅ focus should be trapped inside `Popover`</li>\n      <li>✅ scrolling outside `Popover` should be disabled</li>\n      <li>✅ should be able to dismiss `Popover` on pressing escape</li>\n      <li style={{ marginLeft: 30 }}>✅ focus should return to the open button</li>\n      <li>\n        ✅ interacting outside `Popover` should be disabled (clicking the \"alert me\" button\n        shouldn't do anything)\n      </li>\n      <li>➕</li>\n      <li>✅ should be able to dismiss `Popover` when interacting outside</li>\n      <li style={{ marginLeft: 30 }}>✅ focus should return to the open button</li>\n    </ul>\n\n    <div style={{ display: 'flex', gap: 10 }}>\n      <DummyPopover\n        openLabel=\"Open Popover\"\n        closeLabel=\"Close Popover\"\n        disableOutsidePointerEvents\n        preventScroll\n      />\n      <input type=\"text\" defaultValue=\"some input\" />\n      <button type=\"button\" onClick={() => window.alert('clicked!')}>\n        Alert me\n      </button>\n    </div>\n  </div>\n);\n\nexport const PopoverSemiModal = () => {\n  const [color, setColor] = React.useState('royalblue');\n  const changeColorButtonRef = React.useRef(null);\n  return (\n    <div style={{ height: '300vh', fontFamily: SYSTEM_FONT }}>\n      <h1>Popover (semi-modal example)</h1>\n      <ul style={{ listStyle: 'none', padding: 0, marginBottom: 30 }}>\n        <li>✅ focus should move inside `Popover` when mounted</li>\n        <li>✅ focus should be trapped inside `Popover`</li>\n        <li>✅ scrolling outside `Popover` should be allowed</li>\n        <li>✅ should be able to dismiss `Popover` on pressing escape</li>\n        <li style={{ marginLeft: 30 }}>✅ focus should return to the open button</li>\n        <li>\n          ✅ interacting outside `Popover` should be allowed (clicking the \"alert me\" button should\n          trigger)\n        </li>\n        <li>➕</li>\n        <li>\n          ✅ should be able to dismiss `Popover` when interacting outside{' '}\n          <span style={{ fontWeight: 600 }}>unless specified (ie. change color button)</span>\n        </li>\n        <li style={{ marginLeft: 30 }}>\n          ✅ focus should <span style={{ fontWeight: 600 }}>NOT</span> return to the open button\n          when unmounted, natural focus should occur\n        </li>\n      </ul>\n\n      <div style={{ display: 'flex', gap: 10 }}>\n        <DummyPopover\n          color={color}\n          openLabel=\"Open Popover\"\n          closeLabel=\"Close Popover\"\n          onPointerDownOutside={(event) => {\n            if (event.target === changeColorButtonRef.current) {\n              event.preventDefault();\n            }\n          }}\n        />\n        <input type=\"text\" defaultValue=\"some input\" />\n        <button type=\"button\" onClick={() => window.alert('clicked!')}>\n          Alert me\n        </button>\n        <button\n          ref={changeColorButtonRef}\n          type=\"button\"\n          onClick={() =>\n            setColor((prevColor) => (prevColor === 'royalblue' ? 'tomato' : 'royalblue'))\n          }\n        >\n          Change color\n        </button>\n      </div>\n    </div>\n  );\n};\n\nexport const PopoverNonModal = () => (\n  <div style={{ height: '300vh', fontFamily: SYSTEM_FONT }}>\n    <h1>Popover (non modal example)</h1>\n    <ul style={{ listStyle: 'none', padding: 0, marginBottom: 30 }}>\n      <li>✅ focus should move inside `Popover` when mounted</li>\n      <li>\n        ✅ focus should <span style={{ fontWeight: 600 }}>NOT</span> be trapped inside `Popover`\n      </li>\n      <li>✅ scrolling outside `Popover` should be allowed</li>\n      <li>✅ should be able to dismiss `Popover` on pressing escape</li>\n      <li style={{ marginLeft: 30 }}>✅ focus should return to the open button</li>\n      <li>\n        ✅ interacting outside `Popover` should be allowed (clicking the \"alert me\" button should\n        trigger)\n      </li>\n      <li>➕</li>\n      <li>✅ should be able to dismiss `Popover` when clicking outside</li>\n      <li style={{ marginLeft: 30 }}>\n        ✅ focus should <span style={{ fontWeight: 600 }}>NOT</span> return to the open button when\n        unmounted, natural focus should occur\n      </li>\n      <li>✅ should be able to dismiss `Popover` when focus leaves it</li>\n      <li style={{ marginLeft: 30 }}>\n        ❓ focus should move to next tabbable element after open button\n        <div style={{ fontWeight: 600 }}>\n          <span style={{ marginLeft: 20 }}>notes:</span>\n          <ul>\n            <li>\n              I have left this one out for now as I am still unsure in which case it should do this\n            </li>\n            <li>\n              for the moment, focus will be returned to the open button when `FocusScope` unmounts\n            </li>\n            <li>Need to do some more thinking, in the meantime, I think this behavior is ok</li>\n          </ul>\n        </div>\n      </li>\n    </ul>\n\n    <div style={{ display: 'flex', gap: 10 }}>\n      <DummyPopover openLabel=\"Open Popover\" closeLabel=\"Close Popover\" trapped={false} />\n      <input type=\"text\" defaultValue=\"some input\" />\n      <button type=\"button\" onClick={() => window.alert('clicked!')}>\n        Alert me\n      </button>\n    </div>\n  </div>\n);\n\nexport const PopoverInDialog = () => (\n  <div style={{ height: '300vh', fontFamily: SYSTEM_FONT }}>\n    <h1>Popover (semi-modal) in Dialog (fully modal)</h1>\n    <ul style={{ listStyle: 'none', padding: 0, marginBottom: 30 }}>\n      <li>\n        ✅ dismissing `Popover` by pressing escape should{' '}\n        <span style={{ fontWeight: 600 }}>NOT</span> dismiss `Dialog`\n      </li>\n      <li>✅ dismissing `Popover` by clicking outside should also dismiss `Dialog`</li>\n    </ul>\n\n    <div style={{ display: 'flex', gap: 10 }}>\n      <DummyDialog openLabel=\"Open Dialog\" closeLabel=\"Close Dialog\">\n        <DummyPopover openLabel=\"Open Popover\" closeLabel=\"Close Popover\" />\n      </DummyDialog>\n      <input type=\"text\" defaultValue=\"some input\" />\n      <button type=\"button\" onClick={() => window.alert('clicked!')}>\n        Alert me\n      </button>\n    </div>\n  </div>\n);\n\nexport const PopoverNested = () => (\n  <div style={{ height: '300vh', fontFamily: SYSTEM_FONT }}>\n    <h1>Popover (nested example)</h1>\n    <ul style={{ listStyle: 'none', padding: 0, marginBottom: 30 }}>\n      <li>\n        ✅ dismissing a `Popover` by pressing escape should only dismiss that given `Popover`, not\n        its parents\n      </li>\n      <li>\n        ✅ interacting outside the blue `Popover` should only dismiss itself and not its parents\n      </li>\n      <li>✅ interacting outside the red `Popover` should dismiss itself and the black one</li>\n      <li>✅ unless the click wasn't outside the black one</li>\n      <li>\n        ✅ when the blue `Popover` is open, there should be{' '}\n        <span style={{ fontWeight: 600 }}>NO</span> text cursor above the red or black inputs\n      </li>\n      <li>\n        ✅ when the red `Popover` is open, there should be a text cursor above the black input but\n        not the one on the page behind\n      </li>\n    </ul>\n\n    <div style={{ display: 'flex', gap: 10 }}>\n      <DummyPopover\n        disableOutsidePointerEvents\n        onInteractOutside={() => {\n          console.log('interact outside black');\n        }}\n      >\n        <DummyPopover\n          color=\"tomato\"\n          openLabel=\"Open red\"\n          closeLabel=\"Close red\"\n          onInteractOutside={() => {\n            console.log('interact outside red');\n          }}\n        >\n          <DummyPopover\n            color=\"royalblue\"\n            openLabel=\"Open blue\"\n            closeLabel=\"Close blue\"\n            disableOutsidePointerEvents\n            onInteractOutside={() => {\n              console.log('interact outside blue');\n            }}\n          ></DummyPopover>\n        </DummyPopover>\n      </DummyPopover>\n      <input type=\"text\" defaultValue=\"some input\" />\n      <button type=\"button\" onClick={() => window.alert('clicked!')}>\n        Alert me\n      </button>\n    </div>\n  </div>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * Dummy components\n * -----------------------------------------------------------------------------------------------*/\n\ntype DummyDialogProps = {\n  children?: React.ReactNode;\n  openLabel?: string;\n  closeLabel?: string;\n};\n\nfunction DummyDialog({ children, openLabel = 'Open', closeLabel = 'Close' }: DummyDialogProps) {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <>\n      <button type=\"button\" onClick={() => setOpen((prevOpen) => !prevOpen)}>\n        {openLabel}\n      </button>\n      {open ? (\n        <FocusGuards.Root>\n          <Portal.Root asChild>\n            <div\n              style={{\n                position: 'fixed',\n                top: 0,\n                right: 0,\n                bottom: 0,\n                left: 0,\n                pointerEvents: 'none',\n                backgroundColor: 'black',\n                opacity: 0.2,\n              }}\n            />\n          </Portal.Root>\n          <Portal.Root asChild>\n            <RemoveScroll as={Slot.Root}>\n              <DismissableLayer\n                asChild\n                disableOutsidePointerEvents\n                onDismiss={() => setOpen(false)}\n              >\n                <FocusScope\n                  trapped\n                  style={{\n                    boxSizing: 'border-box',\n                    display: 'flex',\n                    alignItems: 'start',\n                    gap: 10,\n                    position: 'fixed',\n                    top: '50%',\n                    left: '50%',\n                    transform: 'translate(-50%, -50%)',\n                    background: 'white',\n                    minWidth: 300,\n                    minHeight: 200,\n                    padding: 40,\n                    borderRadius: 10,\n                    backgroundColor: 'white',\n                    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.12)',\n                  }}\n                >\n                  {children}\n                  <button type=\"button\" onClick={() => setOpen(false)}>\n                    {closeLabel}\n                  </button>\n                  <input type=\"text\" defaultValue=\"hello world\" />\n                </FocusScope>\n              </DismissableLayer>\n            </RemoveScroll>\n          </Portal.Root>\n        </FocusGuards.Root>\n      ) : null}\n    </>\n  );\n}\n\ntype DummyPopoverOwnProps = {\n  children?: React.ReactNode;\n  openLabel?: string;\n  closeLabel?: string;\n  color?: string;\n  preventScroll?: boolean;\n};\ntype DummyPopoverProps = DummyPopoverOwnProps &\n  Omit<FocusScopeProps, 'children'> &\n  Omit<DismissableLayerProps, 'children'>;\n\nfunction DummyPopover({\n  children,\n  openLabel = 'Open',\n  closeLabel = 'Close',\n  color = '#333',\n  trapped = true,\n  onEscapeKeyDown,\n  onPointerDownOutside,\n  onFocusOutside,\n  onInteractOutside,\n  disableOutsidePointerEvents = false,\n  preventScroll = false,\n}: DummyPopoverProps) {\n  const [skipUnmountAutoFocus, setSkipUnmountAutoFocus] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const openButtonRef = React.useRef(null);\n  const ScrollContainer = preventScroll ? RemoveScroll : React.Fragment;\n  const scrollLockWrapperProps = preventScroll ? { as: Slot.Root } : undefined;\n\n  return (\n    <Popper.Root>\n      <Popper.Anchor asChild>\n        <button type=\"button\" ref={openButtonRef} onClick={() => setOpen((prevOpen) => !prevOpen)}>\n          {openLabel}\n        </button>\n      </Popper.Anchor>\n      {open ? (\n        <FocusGuards.Root>\n          <ScrollContainer {...scrollLockWrapperProps}>\n            <Portal.Root asChild>\n              <DismissableLayer\n                asChild\n                disableOutsidePointerEvents={disableOutsidePointerEvents}\n                onEscapeKeyDown={onEscapeKeyDown}\n                onPointerDownOutside={(event) => {\n                  setSkipUnmountAutoFocus(!disableOutsidePointerEvents);\n                  if (event.target === openButtonRef.current) {\n                    event.preventDefault();\n                  } else {\n                    onPointerDownOutside?.(event);\n                  }\n                }}\n                onFocusOutside={onFocusOutside}\n                onInteractOutside={onInteractOutside}\n                onDismiss={() => setOpen(false)}\n              >\n                <FocusScope\n                  asChild\n                  trapped={trapped}\n                  onUnmountAutoFocus={(event) => {\n                    if (skipUnmountAutoFocus) {\n                      event.preventDefault();\n                    }\n                    setSkipUnmountAutoFocus(false);\n                  }}\n                >\n                  <Popper.Content\n                    style={{\n                      filter: 'drop-shadow(0 2px 10px rgba(0, 0, 0, 0.12))',\n                      display: 'flex',\n                      alignItems: 'flex-start',\n                      gap: 10,\n                      background: 'white',\n                      minWidth: 200,\n                      minHeight: 150,\n                      padding: 20,\n                      borderRadius: 4,\n                      backgroundColor: color,\n                    }}\n                    side=\"bottom\"\n                    sideOffset={10}\n                  >\n                    {children}\n                    <button type=\"button\" onClick={() => setOpen(false)}>\n                      {closeLabel}\n                    </button>\n                    <input type=\"text\" defaultValue=\"hello world\" />\n                    <Popper.Arrow width={10} height={4} style={{ fill: color }} offset={20} />\n                  </Popper.Content>\n                </FocusScope>\n              </DismissableLayer>\n            </Portal.Root>\n          </ScrollContainer>\n        </FocusGuards.Root>\n      ) : null}\n    </Popper.Root>\n  );\n}\n\nexport const InPopupWindow = () => {\n  const handlePopupClick = React.useCallback(() => {\n    const popupWindow = window.open(undefined, undefined, 'width=300,height=300,top=100,left=100');\n    if (!popupWindow) {\n      console.error('Failed to open popup window, check your popup blocker settings');\n      return;\n    }\n\n    const containerNode = popupWindow.document.createElement('div');\n    popupWindow.document.body.append(containerNode);\n\n    ReactDOM.createRoot(containerNode).render(<DismissableBox />);\n  }, []);\n  return (\n    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>\n      <button onClick={handlePopupClick}>Open Popup</button>\n    </div>\n  );\n};\n"
  },
  {
    "path": "apps/storybook/stories/dropdown-menu.stories.module.css",
    "content": ".trigger {\n  border: 1px solid $black;\n  border-radius: 6px;\n  background-color: transparent;\n  padding: 5px 10px;\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px rgb(0 0 0 / 0.5);\n  }\n}\n\n.content {\n  display: inline-block;\n  box-sizing: border-box;\n  min-width: 130px;\n  background-color: var(--color-white);\n  border: 1px solid var(--color-gray100);\n  border-radius: 6px;\n  padding: 5px;\n  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  &:focus-within {\n    border-color: var(--color-black);\n  }\n}\n\n.label,\n.item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n  height: 25px;\n  padding: 0 10px;\n  color: var(--color-black);\n  border-radius: 3px;\n}\n\n.label {\n  color: var(--color-gray100);\n}\n\n.item {\n  outline: none;\n\n  &[data-highlighted] {\n    background-color: var(--color-black);\n    color: var(--color-white);\n  }\n\n  &[data-disabled] {\n    color: var(--color-gray100);\n  }\n}\n\n.subTrigger {\n  &:not([data-highlighted])[data-state='open'] {\n    background-color: var(--color-gray100);\n    color: var(--color-black);\n  }\n}\n\n.separator {\n  height: 1;\n  margin: 5px 10px;\n  background-color: var(--color-gray100);\n}\n\n@keyframes dropdownMenu-animateIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes dropdownMenu-animateOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n}\n\n.animatedContent {\n  &[data-state='open'] {\n    animation: dropdownMenu-animateIn 300ms ease;\n  }\n  &[data-state='closed'] {\n    animation: dropdownMenu-animateOut 300ms ease;\n  }\n}\n\n.animatedItemIndicator {\n  &[data-state='checked'] {\n    animation: dropdownMenu-animateIn 300ms ease;\n  }\n  &[data-state='unchecked'] {\n    animation: dropdownMenu-animateOut 300ms ease;\n  }\n}\n\n.grid {\n  display: inline-grid;\n  grid-template-columns: repeat(3, 50px);\n  column-gap: 150px;\n  row-gap: 100px;\n  padding: 100px;\n  border: 1px solid var(--color-black);\n}\n\n.dialog {\n  position: fixed;\n  background: white;\n  border: 1px solid black;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  padding: 30px;\n}\n\n.chromaticTrigger {\n  width: 30px;\n  height: 30px;\n  background-color: tomato;\n  border: 1px solid rgba(0, 0, 0, 0.3);\n}\n.chromaticContent {\n  display: grid;\n  place-content: center;\n  width: 60px;\n  height: 60px;\n  background-color: royalblue;\n  color: var(--color-white);\n  font-size: 10px;\n  border: 1px solid rgb(0 0 0 / 0.3);\n}\n\n.chromaticArrow {\n  fill: var(--color-black);\n}\n\n.triggerAttr,\n.contentAttr,\n.itemAttr,\n.itemIndicatorAttr,\n.checkboxItemAttr,\n.radioGroupAttr,\n.radioItemAttr,\n.separatorAttr,\n.arrowAttr {\n  background-color: rgb(0 0 255 / 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n\n  & [data-disabled] {\n    border-style: dashed;\n  }\n\n  &[data-state='closed'] {\n    border-color: red;\n  }\n  &[data-state='open'] {\n    border-color: green;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/dropdown-menu.stories.tsx",
    "content": "import * as React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { Dialog, DropdownMenu, Tooltip } from 'radix-ui';\nimport { Popper } from 'radix-ui/internal';\nimport { foodGroups } from '@repo/test-data/foods';\nimport styles from './dropdown-menu.stories.module.css';\n\nconst { SIDE_OPTIONS, ALIGN_OPTIONS } = Popper;\n\nexport default { title: 'Components/DropdownMenu' };\n\nconst subTriggerClass = [styles.item, styles.subTrigger].join(' ');\n\nexport const Styled = () => (\n  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}>\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n      <DropdownMenu.Portal>\n        <DropdownMenu.Content className={styles.content} sideOffset={5}>\n          <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n            Undo\n          </DropdownMenu.Item>\n          <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n            Redo\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator className={styles.separator} />\n          <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n            Cut\n          </DropdownMenu.Item>\n          <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n            Copy\n          </DropdownMenu.Item>\n          <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n            Paste\n          </DropdownMenu.Item>\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\n      </DropdownMenu.Portal>\n    </DropdownMenu.Root>\n  </div>\n);\n\nexport const Modality = () => {\n  return (\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '110vh' }}\n    >\n      <div style={{ display: 'grid', gap: 50 }}>\n        <div style={{ display: 'inline-flex', alignItems: 'center', flexDirection: 'column' }}>\n          <h1>Modal (default)</h1>\n          <DropdownMenu.Root>\n            <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n            <DropdownMenu.Portal>\n              <DropdownMenu.Content className={styles.content} sideOffset={5}>\n                <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n                  Undo\n                </DropdownMenu.Item>\n                <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n                  Redo\n                </DropdownMenu.Item>\n                <DropdownMenu.Separator className={styles.separator} />\n                <DropdownMenu.Sub>\n                  <DropdownMenu.SubTrigger className={subTriggerClass}>\n                    Submenu →\n                  </DropdownMenu.SubTrigger>\n                  <DropdownMenu.Portal>\n                    <DropdownMenu.SubContent\n                      className={styles.content}\n                      sideOffset={12}\n                      alignOffset={-6}\n                    >\n                      <DropdownMenu.Item\n                        className={styles.item}\n                        onSelect={() => console.log('one')}\n                      >\n                        One\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Item\n                        className={styles.item}\n                        onSelect={() => console.log('two')}\n                      >\n                        Two\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Item\n                        className={styles.item}\n                        onSelect={() => console.log('three')}\n                      >\n                        Three\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Arrow />\n                    </DropdownMenu.SubContent>\n                  </DropdownMenu.Portal>\n                </DropdownMenu.Sub>\n                <DropdownMenu.Separator className={styles.separator} />\n                <DropdownMenu.Item\n                  className={styles.item}\n                  disabled\n                  onSelect={() => console.log('cut')}\n                >\n                  Cut\n                </DropdownMenu.Item>\n                <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n                  Copy\n                </DropdownMenu.Item>\n                <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n                  Paste\n                </DropdownMenu.Item>\n                <DropdownMenu.Arrow />\n              </DropdownMenu.Content>\n            </DropdownMenu.Portal>\n          </DropdownMenu.Root>\n          <textarea\n            style={{ width: 500, height: 100, marginTop: 10 }}\n            defaultValue=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet.\"\n          />\n        </div>\n        <div style={{ display: 'inline-flex', alignItems: 'center', flexDirection: 'column' }}>\n          <h1>Non modal</h1>\n          <DropdownMenu.Root modal={false}>\n            <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n            <DropdownMenu.Portal>\n              <DropdownMenu.Content className={styles.content} sideOffset={5}>\n                <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n                  Undo\n                </DropdownMenu.Item>\n                <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n                  Redo\n                </DropdownMenu.Item>\n                <DropdownMenu.Separator className={styles.separator} />\n                <DropdownMenu.Sub>\n                  <DropdownMenu.SubTrigger className={subTriggerClass}>\n                    Submenu →\n                  </DropdownMenu.SubTrigger>\n                  <DropdownMenu.Portal>\n                    <DropdownMenu.SubContent\n                      className={styles.content}\n                      sideOffset={12}\n                      alignOffset={-6}\n                    >\n                      <DropdownMenu.Item\n                        className={styles.item}\n                        onSelect={() => console.log('one')}\n                      >\n                        One\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Item\n                        className={styles.item}\n                        onSelect={() => console.log('two')}\n                      >\n                        Two\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Item\n                        className={styles.item}\n                        onSelect={() => console.log('three')}\n                      >\n                        Three\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Arrow />\n                    </DropdownMenu.SubContent>\n                  </DropdownMenu.Portal>\n                </DropdownMenu.Sub>\n                <DropdownMenu.Separator className={styles.separator} />\n                <DropdownMenu.Item\n                  className={styles.item}\n                  disabled\n                  onSelect={() => console.log('cut')}\n                >\n                  Cut\n                </DropdownMenu.Item>\n                <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n                  Copy\n                </DropdownMenu.Item>\n                <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n                  Paste\n                </DropdownMenu.Item>\n                <DropdownMenu.Arrow />\n              </DropdownMenu.Content>\n            </DropdownMenu.Portal>\n          </DropdownMenu.Root>\n          <textarea\n            style={{ width: 500, height: 100, marginTop: 10 }}\n            defaultValue=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet.\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const Submenus = () => {\n  const [rtl, setRtl] = React.useState(false);\n  return (\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n        <label style={{ marginBottom: 10 }}>\n          <input\n            type=\"checkbox\"\n            checked={rtl}\n            onChange={(event) => setRtl(event.currentTarget.checked)}\n          />\n          Right-to-left\n        </label>\n        <DropdownMenu.Root dir={rtl ? 'rtl' : 'ltr'}>\n          <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n          <DropdownMenu.Portal>\n            <DropdownMenu.Content className={styles.content} sideOffset={5}>\n              <DropdownMenu.Item className={styles.item} onSelect={() => console.log('new-tab')}>\n                New Tab\n              </DropdownMenu.Item>\n              <DropdownMenu.Item className={styles.item} onSelect={() => console.log('new-window')}>\n                New Window\n              </DropdownMenu.Item>\n              <DropdownMenu.Separator className={styles.separator} />\n              <DropdownMenu.Sub>\n                <DropdownMenu.SubTrigger className={subTriggerClass}>\n                  Bookmarks →\n                </DropdownMenu.SubTrigger>\n                <DropdownMenu.Portal>\n                  <DropdownMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('index')}\n                    >\n                      Inbox\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('calendar')}\n                    >\n                      Calendar\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator className={styles.separator} />\n                    <DropdownMenu.Sub>\n                      <DropdownMenu.SubTrigger className={subTriggerClass}>\n                        WorkOS →\n                      </DropdownMenu.SubTrigger>\n                      <DropdownMenu.Portal>\n                        <DropdownMenu.SubContent\n                          className={styles.content}\n                          sideOffset={12}\n                          alignOffset={-6}\n                        >\n                          <DropdownMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('stitches')}\n                          >\n                            Stitches\n                          </DropdownMenu.Item>\n                          <DropdownMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('composer')}\n                          >\n                            Composer\n                          </DropdownMenu.Item>\n                          <DropdownMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('radix')}\n                          >\n                            Radix\n                          </DropdownMenu.Item>\n                          <DropdownMenu.Arrow />\n                        </DropdownMenu.SubContent>\n                      </DropdownMenu.Portal>\n                    </DropdownMenu.Sub>\n                    <DropdownMenu.Separator className={styles.separator} />\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('notion')}\n                    >\n                      Notion\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Arrow />\n                  </DropdownMenu.SubContent>\n                </DropdownMenu.Portal>\n              </DropdownMenu.Sub>\n              <DropdownMenu.Sub>\n                <DropdownMenu.SubTrigger className={subTriggerClass} disabled>\n                  History →\n                </DropdownMenu.SubTrigger>\n                <DropdownMenu.Portal>\n                  <DropdownMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('github')}\n                    >\n                      Github\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('google')}\n                    >\n                      Google\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('stack-overflow')}\n                    >\n                      Stack Overflow\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Arrow />\n                  </DropdownMenu.SubContent>\n                </DropdownMenu.Portal>\n              </DropdownMenu.Sub>\n              <DropdownMenu.Sub>\n                <DropdownMenu.SubTrigger className={subTriggerClass}>\n                  Tools →\n                </DropdownMenu.SubTrigger>\n                <DropdownMenu.Portal>\n                  <DropdownMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                  >\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('extensions')}\n                    >\n                      Extensions\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('task-manager')}\n                    >\n                      Task Manager\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('developer-tools')}\n                    >\n                      Developer Tools\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Arrow />\n                  </DropdownMenu.SubContent>\n                </DropdownMenu.Portal>\n              </DropdownMenu.Sub>\n              <DropdownMenu.Separator className={styles.separator} />\n              <DropdownMenu.Item\n                className={styles.item}\n                disabled\n                onSelect={() => console.log('print')}\n              >\n                Print…\n              </DropdownMenu.Item>\n              <DropdownMenu.Item className={styles.item} onSelect={() => console.log('cast')}>\n                Cast…\n              </DropdownMenu.Item>\n              <DropdownMenu.Item className={styles.item} onSelect={() => console.log('find')}>\n                Find…\n              </DropdownMenu.Item>\n              <DropdownMenu.Arrow />\n            </DropdownMenu.Content>\n          </DropdownMenu.Portal>\n        </DropdownMenu.Root>\n      </div>\n    </div>\n  );\n};\n\nexport const WithLabels = () => (\n  <div style={{ textAlign: 'center', padding: 50 }}>\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n      <DropdownMenu.Portal>\n        <DropdownMenu.Content className={styles.content} sideOffset={5}>\n          {foodGroups.map((foodGroup, index) => (\n            <DropdownMenu.Group key={index}>\n              {foodGroup.label && (\n                <DropdownMenu.Label className={styles.label} key={foodGroup.label}>\n                  {foodGroup.label}\n                </DropdownMenu.Label>\n              )}\n              {foodGroup.foods.map((food) => (\n                <DropdownMenu.Item\n                  key={food.value}\n                  className={styles.item}\n                  disabled={food.disabled}\n                  onSelect={() => console.log(food.label)}\n                >\n                  {food.label}\n                </DropdownMenu.Item>\n              ))}\n              {index < foodGroups.length - 1 && (\n                <DropdownMenu.Separator className={styles.separator} />\n              )}\n            </DropdownMenu.Group>\n          ))}\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\n      </DropdownMenu.Portal>\n    </DropdownMenu.Root>\n  </div>\n);\n\nexport const NestedComposition = () => {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100vh',\n      }}\n    >\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5}>\n            <Dialog.Root>\n              <Dialog.Trigger className={styles.item} asChild>\n                <DropdownMenu.Item onSelect={(event) => event.preventDefault()}>\n                  Open dialog\n                </DropdownMenu.Item>\n              </Dialog.Trigger>\n\n              <Dialog.Portal>\n                <Dialog.Content className={styles.dialog}>\n                  <Dialog.Title>Nested dropdown</Dialog.Title>\n                  <DropdownMenu.Root>\n                    <DropdownMenu.Trigger\n                      className={styles.trigger}\n                      style={{ width: '100%', marginBottom: 20 }}\n                    >\n                      Open\n                    </DropdownMenu.Trigger>\n                    <DropdownMenu.Portal>\n                      <DropdownMenu.Content className={styles.content} sideOffset={5}>\n                        <DropdownMenu.Item\n                          className={styles.item}\n                          onSelect={() => console.log('undo')}\n                        >\n                          Undo\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item\n                          className={styles.item}\n                          onSelect={() => console.log('redo')}\n                        >\n                          Redo\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Arrow />\n                      </DropdownMenu.Content>\n                    </DropdownMenu.Portal>\n                  </DropdownMenu.Root>\n                  <Dialog.Close>Close</Dialog.Close>\n                </Dialog.Content>\n              </Dialog.Portal>\n            </Dialog.Root>\n            <DropdownMenu.Item className={styles.item}>Test</DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    </div>\n  );\n};\n\nexport const SingleItemAsDialogTrigger = () => {\n  const dropdownTriggerRef = React.useRef<React.ComponentRef<typeof DropdownMenu.Trigger>>(null);\n  const dropdownTriggerRef2 = React.useRef<React.ComponentRef<typeof DropdownMenu.Trigger>>(null);\n  const isDialogOpenRef = React.useRef(false);\n\n  function handleModalDialogClose(event: Event) {\n    // focus dropdown trigger for accessibility so user doesn't lose their place in the document\n    dropdownTriggerRef.current?.focus();\n    event.preventDefault();\n  }\n\n  function handleNonModalDialogClose(event: Event) {\n    // focus dropdown trigger for accessibility so user doesn't lose their place in the document\n    dropdownTriggerRef2.current?.focus();\n    event.preventDefault();\n    isDialogOpenRef.current = false;\n  }\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100vh',\n      }}\n    >\n      <h1>Modal</h1>\n      <Dialog.Root>\n        <DropdownMenu.Root>\n          <DropdownMenu.Trigger className={styles.trigger} ref={dropdownTriggerRef}>\n            Open\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Portal>\n            <DropdownMenu.Content className={styles.content} sideOffset={5}>\n              <Dialog.Trigger className={styles.item} asChild>\n                <DropdownMenu.Item>Delete</DropdownMenu.Item>\n              </Dialog.Trigger>\n              <DropdownMenu.Item className={styles.item}>Test</DropdownMenu.Item>\n              <DropdownMenu.Arrow />\n            </DropdownMenu.Content>\n          </DropdownMenu.Portal>\n        </DropdownMenu.Root>\n\n        <Dialog.Content className={styles.dialog} onCloseAutoFocus={handleModalDialogClose}>\n          <Dialog.Title>Are you sure?</Dialog.Title>\n          <Dialog.Close>Close</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Root>\n\n      <h1>Non-modal</h1>\n      <Dialog.Root modal={false}>\n        <DropdownMenu.Root modal={false}>\n          <DropdownMenu.Trigger className={styles.trigger} ref={dropdownTriggerRef2}>\n            Open\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Portal>\n            <DropdownMenu.Content\n              className={styles.content}\n              sideOffset={5}\n              onCloseAutoFocus={(event) => {\n                // prevent focusing dropdown trigger when it closes from a dialog trigger\n                if (isDialogOpenRef.current) event.preventDefault();\n              }}\n            >\n              <Dialog.Trigger className={styles.item} asChild>\n                <DropdownMenu.Item onSelect={() => (isDialogOpenRef.current = true)}>\n                  Delete\n                </DropdownMenu.Item>\n              </Dialog.Trigger>\n              <DropdownMenu.Item className={styles.item}>Test</DropdownMenu.Item>\n              <DropdownMenu.Arrow />\n            </DropdownMenu.Content>\n          </DropdownMenu.Portal>\n        </DropdownMenu.Root>\n\n        <Dialog.Content className={styles.dialog} onCloseAutoFocus={handleNonModalDialogClose}>\n          <Dialog.Title>Are you sure?</Dialog.Title>\n          <Dialog.Close>Close</Dialog.Close>`\n        </Dialog.Content>\n      </Dialog.Root>\n    </div>\n  );\n};\n\nexport const MultipleItemsAsDialogTriggers = () => {\n  const [deleteOpen, setDeleteOpen] = React.useState(false);\n  const [switchAccountsOpen, setSwitchAccountsOpen] = React.useState(false);\n  const [deleteOpen2, setDeleteOpen2] = React.useState(false);\n  const [switchAccountsOpen2, setSwitchAccountsOpen2] = React.useState(false);\n  const dropdownTriggerRef = React.useRef<React.ComponentRef<typeof DropdownMenu.Trigger>>(null);\n  const dropdownTriggerRef2 = React.useRef<React.ComponentRef<typeof DropdownMenu.Trigger>>(null);\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: '100vh',\n      }}\n    >\n      <h1>Modal</h1>\n      <Dialog.Root\n        onOpenChange={(open) => {\n          if (!open) {\n            setDeleteOpen(false);\n            setSwitchAccountsOpen(false);\n          }\n        }}\n      >\n        <DropdownMenu.Root>\n          <DropdownMenu.Trigger className={styles.trigger} ref={dropdownTriggerRef}>\n            Open\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Portal>\n            <DropdownMenu.Content className={styles.content} sideOffset={5}>\n              <Dialog.Trigger asChild className={styles.item}>\n                <DropdownMenu.Item onSelect={() => setSwitchAccountsOpen(true)}>\n                  Switch Accounts\n                </DropdownMenu.Item>\n              </Dialog.Trigger>\n              <Dialog.Trigger asChild className={styles.item}>\n                <DropdownMenu.Item onSelect={() => setDeleteOpen(true)}>Delete</DropdownMenu.Item>\n              </Dialog.Trigger>\n              <DropdownMenu.Arrow />\n            </DropdownMenu.Content>\n          </DropdownMenu.Portal>\n        </DropdownMenu.Root>\n\n        <Dialog.Content\n          className={styles.dialog}\n          onCloseAutoFocus={(event) => {\n            // focus dropdown trigger for accessibility so user doesn't lose their place in the document\n            dropdownTriggerRef.current?.focus();\n            event.preventDefault();\n          }}\n        >\n          {switchAccountsOpen && <Dialog.Title>Switch accounts</Dialog.Title>}\n          {deleteOpen && <Dialog.Title>Are you sure?</Dialog.Title>}\n          <Dialog.Close>Close</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Root>\n\n      <h1>Non-modal</h1>\n      <Dialog.Root\n        modal={false}\n        onOpenChange={(open) => {\n          if (!open) {\n            setDeleteOpen2(false);\n            setSwitchAccountsOpen2(false);\n          }\n        }}\n      >\n        <DropdownMenu.Root modal={false}>\n          <DropdownMenu.Trigger className={styles.trigger} ref={dropdownTriggerRef2}>\n            Open\n          </DropdownMenu.Trigger>\n\n          <DropdownMenu.Portal>\n            <DropdownMenu.Content\n              className={styles.content}\n              sideOffset={5}\n              onCloseAutoFocus={(event) => {\n                // prevent focusing dropdown trigger when it closes from a dialog trigger\n                if (deleteOpen2 || switchAccountsOpen2) event.preventDefault();\n              }}\n            >\n              <Dialog.Trigger asChild className={styles.item}>\n                <DropdownMenu.Item onSelect={() => setSwitchAccountsOpen2(true)}>\n                  Switch Accounts\n                </DropdownMenu.Item>\n              </Dialog.Trigger>\n              <Dialog.Trigger asChild className={styles.item}>\n                <DropdownMenu.Item onSelect={() => setDeleteOpen2(true)}>Delete</DropdownMenu.Item>\n              </Dialog.Trigger>\n              <DropdownMenu.Arrow />\n            </DropdownMenu.Content>\n          </DropdownMenu.Portal>\n        </DropdownMenu.Root>\n\n        <Dialog.Content\n          className={styles.dialog}\n          onCloseAutoFocus={(event) => {\n            // focus dropdown trigger for accessibility so user doesn't lose their place in the document\n            dropdownTriggerRef2.current?.focus();\n            event.preventDefault();\n          }}\n        >\n          {switchAccountsOpen2 && <Dialog.Title>Switch accounts</Dialog.Title>}\n          {deleteOpen2 && <Dialog.Title>Are you sure?</Dialog.Title>}\n          <Dialog.Close>Close</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Root>\n    </div>\n  );\n};\n\nexport const CheckboxItems = () => {\n  const options = ['Crows', 'Ravens', 'Magpies', 'Jackdaws'];\n\n  const [selection, setSelection] = React.useState<string[]>([]);\n\n  const handleSelectAll = () => {\n    setSelection((currentSelection) => (currentSelection.length === options.length ? [] : options));\n  };\n\n  return (\n    <div style={{ textAlign: 'center', padding: 50 }}>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5}>\n            <DropdownMenu.Group>\n              <DropdownMenu.CheckboxItem\n                className={styles.item}\n                checked={\n                  selection.length === options.length\n                    ? true\n                    : selection.length\n                      ? 'indeterminate'\n                      : false\n                }\n                onSelect={(e) => e.preventDefault()}\n                onCheckedChange={handleSelectAll}\n              >\n                Select all\n                <DropdownMenu.ItemIndicator>\n                  {selection.length === options.length ? <TickIcon /> : '—'}\n                </DropdownMenu.ItemIndicator>\n              </DropdownMenu.CheckboxItem>\n              <DropdownMenu.Separator className={styles.separator} />\n              {options.map((option) => (\n                <DropdownMenu.CheckboxItem\n                  key={option}\n                  className={styles.item}\n                  checked={selection.includes(option)}\n                  onSelect={(e) => e.preventDefault()}\n                  onCheckedChange={() =>\n                    setSelection((current) =>\n                      current.includes(option)\n                        ? current.filter((el) => el !== option)\n                        : current.concat(option),\n                    )\n                  }\n                >\n                  {option}\n                  <DropdownMenu.ItemIndicator>\n                    <TickIcon />\n                  </DropdownMenu.ItemIndicator>\n                </DropdownMenu.CheckboxItem>\n              ))}\n            </DropdownMenu.Group>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    </div>\n  );\n};\n\nexport const RadioItems = () => {\n  const files = ['README.md', 'index.js', 'page.css'];\n  const [file, setFile] = React.useState(files[1]);\n\n  return (\n    <div style={{ textAlign: 'center', padding: 50 }}>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5}>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('minimize')}>\n              Minimize window\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('zoom')}>\n              Zoom\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('smaller')}>\n              Smaller\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.RadioGroup value={file} onValueChange={setFile}>\n              {files.map((file) => (\n                <DropdownMenu.RadioItem key={file} className={styles.item} value={file}>\n                  {file}\n                  <DropdownMenu.ItemIndicator>\n                    <TickIcon />\n                  </DropdownMenu.ItemIndicator>\n                </DropdownMenu.RadioItem>\n              ))}\n            </DropdownMenu.RadioGroup>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n      <p>Selected file: {file}</p>\n    </div>\n  );\n};\n\nexport const PreventClosing = () => (\n  <div style={{ textAlign: 'center', padding: 50 }}>\n    <DropdownMenu.Root>\n      <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n      <DropdownMenu.Portal>\n        <DropdownMenu.Content className={styles.content} sideOffset={5}>\n          <DropdownMenu.Item className={styles.item} onSelect={() => window.alert('action 1')}>\n            I will close\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            className={styles.item}\n            onSelect={(event) => {\n              event.preventDefault();\n              window.alert('action 1');\n            }}\n          >\n            I won't close\n          </DropdownMenu.Item>\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\n      </DropdownMenu.Portal>\n    </DropdownMenu.Root>\n  </div>\n);\n\nexport const WithTooltip = () => (\n  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}>\n    <DropdownMenu.Root>\n      <Tooltip.Provider>\n        <Tooltip.Root>\n          <Tooltip.Trigger asChild>\n            <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n          </Tooltip.Trigger>\n          <Tooltip.Content>Tooltip content</Tooltip.Content>\n        </Tooltip.Root>\n      </Tooltip.Provider>\n      <DropdownMenu.Portal>\n        <DropdownMenu.Content className={styles.content} sideOffset={5}>\n          <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n            Undo\n          </DropdownMenu.Item>\n          <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n            Redo\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator className={styles.separator} />\n          <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n            Cut\n          </DropdownMenu.Item>\n          <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n            Copy\n          </DropdownMenu.Item>\n          <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n            Paste\n          </DropdownMenu.Item>\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\n      </DropdownMenu.Portal>\n    </DropdownMenu.Root>\n  </div>\n);\n\nexport const InPopupWindow = () => {\n  const handlePopupClick = React.useCallback(() => {\n    const popupWindow = window.open(undefined, undefined, 'width=300,height=300,top=100,left=100');\n    if (!popupWindow) {\n      console.error('Failed to open popup window, check your popup blocker settings');\n      return;\n    }\n\n    const containerNode = popupWindow.document.createElement('div');\n    popupWindow.document.body.append(containerNode);\n\n    ReactDOM.createRoot(containerNode).render(\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal container={containerNode}>\n          <DropdownMenu.Content>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>,\n    );\n  }, []);\n  return (\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}\n    >\n      <button onClick={handlePopupClick}>Open Popup</button>\n    </div>\n  );\n};\n\n// change order slightly for more pleasing visual\nconst SIDES = [...SIDE_OPTIONS.filter((side) => side !== 'bottom'), 'bottom' as const];\n\nexport const Chromatic = () => {\n  const checkboxItems = [\n    { label: 'Bold', state: React.useState(false) },\n    { label: 'Italic', state: React.useState(true) },\n    { label: 'Underline', state: React.useState(false) },\n    { label: 'Strikethrough', state: React.useState(false), disabled: true },\n  ];\n  const files = ['README.md', 'index.js', 'page.css'];\n  const [file, setFile] = React.useState(files[1]);\n\n  return (\n    <div style={{ padding: 200, paddingBottom: 800 }}>\n      <h1>Uncontrolled</h1>\n      <h2>Closed</h2>\n      <DropdownMenu.Root modal={false}>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n              Cut\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n              Copy\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n              Paste\n            </DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n\n      <h2>Open</h2>\n      <DropdownMenu.Root defaultOpen modal={false}>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            className={styles.content}\n            sideOffset={5}\n            avoidCollisions={false}\n            onFocusOutside={(event) => event.preventDefault()}\n          >\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n              Cut\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n              Copy\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n              Paste\n            </DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n\n      <h2 style={{ marginTop: 180 }}>Open with reordered parts</h2>\n      <DropdownMenu.Root defaultOpen modal={false}>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            className={styles.content}\n            sideOffset={5}\n            avoidCollisions={false}\n            onFocusOutside={(event) => event.preventDefault()}\n          >\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n              Cut\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n              Copy\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n              Paste\n            </DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n      </DropdownMenu.Root>\n\n      <h1 style={{ marginTop: 200 }}>Controlled</h1>\n      <h2>Closed</h2>\n      <DropdownMenu.Root open={false} modal={false}>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n              Cut\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n              Copy\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n              Paste\n            </DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n\n      <h2>Open</h2>\n      <DropdownMenu.Root open modal={false}>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n              Cut\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n              Copy\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n              Paste\n            </DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n\n      <h2 style={{ marginTop: 180 }}>Open with reordered parts</h2>\n      <DropdownMenu.Root open modal={false}>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n              Cut\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n              Copy\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n              Paste\n            </DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n      </DropdownMenu.Root>\n\n      <h1 style={{ marginTop: 200 }}>Submenus</h1>\n      <h2>Open</h2>\n      <DropdownMenu.Root open modal={false}>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.Sub open>\n              <DropdownMenu.SubTrigger className={subTriggerClass}>\n                Submenu →\n              </DropdownMenu.SubTrigger>\n              <DropdownMenu.Portal>\n                <DropdownMenu.SubContent\n                  className={styles.content}\n                  sideOffset={12}\n                  alignOffset={-6}\n                  avoidCollisions={false}\n                >\n                  <DropdownMenu.Item className={styles.item} onSelect={() => console.log('one')}>\n                    One\n                  </DropdownMenu.Item>\n\n                  <DropdownMenu.Item className={styles.item} onSelect={() => console.log('two')}>\n                    Two\n                  </DropdownMenu.Item>\n                  <DropdownMenu.Separator className={styles.separator} />\n                  <DropdownMenu.Sub open>\n                    <DropdownMenu.SubTrigger className={subTriggerClass}>\n                      Submenu →\n                    </DropdownMenu.SubTrigger>\n                    <DropdownMenu.Portal>\n                      <DropdownMenu.SubContent\n                        className={styles.content}\n                        sideOffset={12}\n                        alignOffset={-6}\n                        avoidCollisions={false}\n                      >\n                        <DropdownMenu.Item\n                          className={styles.item}\n                          onSelect={() => console.log('one')}\n                        >\n                          One\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item\n                          className={styles.item}\n                          onSelect={() => console.log('two')}\n                        >\n                          Two\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Item\n                          className={styles.item}\n                          onSelect={() => console.log('three')}\n                        >\n                          Three\n                        </DropdownMenu.Item>\n                        <DropdownMenu.Arrow />\n                      </DropdownMenu.SubContent>\n                    </DropdownMenu.Portal>\n                  </DropdownMenu.Sub>\n                  <DropdownMenu.Separator className={styles.separator} />\n                  <DropdownMenu.Item className={styles.item} onSelect={() => console.log('three')}>\n                    Three\n                  </DropdownMenu.Item>\n                  <DropdownMenu.Arrow />\n                </DropdownMenu.SubContent>\n              </DropdownMenu.Portal>\n            </DropdownMenu.Sub>\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.Item className={styles.item} disabled onSelect={() => console.log('cut')}>\n              Cut\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n              Copy\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n              Paste\n            </DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n      </DropdownMenu.Root>\n\n      <h2 style={{ marginTop: 275 }}>RTL</h2>\n      <div dir=\"rtl\">\n        <DropdownMenu.Root open dir=\"rtl\" modal={false}>\n          <DropdownMenu.Portal>\n            <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n              <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n                Undo\n              </DropdownMenu.Item>\n              <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n                Redo\n              </DropdownMenu.Item>\n              <DropdownMenu.Separator className={styles.separator} />\n              <DropdownMenu.Sub open>\n                <DropdownMenu.SubTrigger className={subTriggerClass}>\n                  Submenu →\n                </DropdownMenu.SubTrigger>\n                <DropdownMenu.Portal>\n                  <DropdownMenu.SubContent\n                    className={styles.content}\n                    sideOffset={12}\n                    alignOffset={-6}\n                    avoidCollisions={false}\n                  >\n                    <DropdownMenu.Item className={styles.item} onSelect={() => console.log('one')}>\n                      One\n                    </DropdownMenu.Item>\n\n                    <DropdownMenu.Item className={styles.item} onSelect={() => console.log('two')}>\n                      Two\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator className={styles.separator} />\n                    <DropdownMenu.Sub open>\n                      <DropdownMenu.SubTrigger className={subTriggerClass}>\n                        Submenu →\n                      </DropdownMenu.SubTrigger>\n                      <DropdownMenu.Portal>\n                        <DropdownMenu.SubContent\n                          className={styles.content}\n                          sideOffset={12}\n                          alignOffset={-6}\n                          avoidCollisions={false}\n                        >\n                          <DropdownMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('one')}\n                          >\n                            One\n                          </DropdownMenu.Item>\n                          <DropdownMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('two')}\n                          >\n                            Two\n                          </DropdownMenu.Item>\n                          <DropdownMenu.Item\n                            className={styles.item}\n                            onSelect={() => console.log('three')}\n                          >\n                            Three\n                          </DropdownMenu.Item>\n                          <DropdownMenu.Arrow />\n                        </DropdownMenu.SubContent>\n                      </DropdownMenu.Portal>\n                    </DropdownMenu.Sub>\n                    <DropdownMenu.Separator className={styles.separator} />\n                    <DropdownMenu.Item\n                      className={styles.item}\n                      onSelect={() => console.log('three')}\n                    >\n                      Three\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Arrow />\n                  </DropdownMenu.SubContent>\n                </DropdownMenu.Portal>\n              </DropdownMenu.Sub>\n              <DropdownMenu.Separator className={styles.separator} />\n              <DropdownMenu.Item\n                className={styles.item}\n                disabled\n                onSelect={() => console.log('cut')}\n              >\n                Cut\n              </DropdownMenu.Item>\n              <DropdownMenu.Item className={styles.item} onSelect={() => console.log('copy')}>\n                Copy\n              </DropdownMenu.Item>\n              <DropdownMenu.Item className={styles.item} onSelect={() => console.log('paste')}>\n                Paste\n              </DropdownMenu.Item>\n              <DropdownMenu.Arrow />\n            </DropdownMenu.Content>\n          </DropdownMenu.Portal>\n          <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        </DropdownMenu.Root>\n      </div>\n\n      <h1 style={{ marginTop: 275 }}>Positioning</h1>\n      <h2>No collisions</h2>\n      <h3>Side & Align</h3>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <DropdownMenu.Root key={`${side}-${align}`} open modal={false}>\n              <DropdownMenu.Trigger className={styles.chromaticTrigger} />\n              <DropdownMenu.Portal>\n                <DropdownMenu.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  align={align}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <DropdownMenu.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </DropdownMenu.Content>\n              </DropdownMenu.Portal>\n            </DropdownMenu.Root>\n          )),\n        )}\n      </div>\n\n      <h3>Side offset</h3>\n      <h4>Positive</h4>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <DropdownMenu.Root key={`${side}-${align}`} open modal={false}>\n              <DropdownMenu.Trigger className={styles.chromaticTrigger} />\n              <DropdownMenu.Portal>\n                <DropdownMenu.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  sideOffset={5}\n                  align={align}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <DropdownMenu.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </DropdownMenu.Content>\n              </DropdownMenu.Portal>\n            </DropdownMenu.Root>\n          )),\n        )}\n      </div>\n      <h4>Negative</h4>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <DropdownMenu.Root key={`${side}-${align}`} open modal={false}>\n              <DropdownMenu.Trigger className={styles.chromaticTrigger} />\n              <DropdownMenu.Portal>\n                <DropdownMenu.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  sideOffset={-10}\n                  align={align}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <DropdownMenu.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </DropdownMenu.Content>\n              </DropdownMenu.Portal>\n            </DropdownMenu.Root>\n          )),\n        )}\n      </div>\n\n      <h3>Align offset</h3>\n      <h4>Positive</h4>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <DropdownMenu.Root key={`${side}-${align}`} open modal={false}>\n              <DropdownMenu.Trigger className={styles.chromaticTrigger} />\n              <DropdownMenu.Portal>\n                <DropdownMenu.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  align={align}\n                  alignOffset={20}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <DropdownMenu.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </DropdownMenu.Content>\n              </DropdownMenu.Portal>\n            </DropdownMenu.Root>\n          )),\n        )}\n      </div>\n      <h4>Negative</h4>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <DropdownMenu.Root key={`${side}-${align}`} open modal={false}>\n              <DropdownMenu.Trigger className={styles.chromaticTrigger} />\n              <DropdownMenu.Portal>\n                <DropdownMenu.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  align={align}\n                  alignOffset={-10}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <DropdownMenu.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </DropdownMenu.Content>\n              </DropdownMenu.Portal>\n            </DropdownMenu.Root>\n          )),\n        )}\n      </div>\n\n      <h2>Collisions</h2>\n      <p>See instances on the periphery of the page.</p>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <DropdownMenu.Root key={`${side}-${align}`} open modal={false}>\n            <DropdownMenu.Trigger\n              className={styles.chromaticTrigger}\n              style={{\n                position: 'absolute',\n                [side]: 10,\n                ...((side === 'right' || side === 'left') &&\n                  (align === 'start'\n                    ? { bottom: 10 }\n                    : align === 'center'\n                      ? { top: 'calc(50% - 15px)' }\n                      : { top: 10 })),\n                ...((side === 'top' || side === 'bottom') &&\n                  (align === 'start'\n                    ? { right: 10 }\n                    : align === 'center'\n                      ? { left: 'calc(50% - 15px)' }\n                      : { left: 10 })),\n              }}\n            />\n            <DropdownMenu.Portal>\n              <DropdownMenu.Content className={styles.chromaticContent} side={side} align={align}>\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <DropdownMenu.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </DropdownMenu.Content>\n            </DropdownMenu.Portal>\n          </DropdownMenu.Root>\n        )),\n      )}\n\n      <h2>Relative parent (non-portalled)</h2>\n      <div style={{ position: 'relative' }}>\n        <DropdownMenu.Root open modal={false}>\n          <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n          <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n              Undo\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n              Redo\n            </DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </div>\n\n      <h1 style={{ marginTop: 100 }}>With labels</h1>\n      <DropdownMenu.Root open modal={false}>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n            {foodGroups.map((foodGroup, index) => (\n              <DropdownMenu.Group key={index}>\n                {foodGroup.label && (\n                  <DropdownMenu.Label className={styles.label} key={foodGroup.label}>\n                    {foodGroup.label}\n                  </DropdownMenu.Label>\n                )}\n                {foodGroup.foods.map((food) => (\n                  <DropdownMenu.Item\n                    key={food.value}\n                    className={styles.item}\n                    disabled={food.disabled}\n                    onSelect={() => console.log(food.label)}\n                  >\n                    {food.label}\n                  </DropdownMenu.Item>\n                ))}\n                {index < foodGroups.length - 1 && (\n                  <DropdownMenu.Separator className={styles.separator} />\n                )}\n              </DropdownMenu.Group>\n            ))}\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n\n      <h1 style={{ marginTop: 600 }}>With checkbox and radio items</h1>\n      <DropdownMenu.Root open modal={false}>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('show')}>\n              Show fonts\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('bigger')}>\n              Bigger\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.item} onSelect={() => console.log('smaller')}>\n              Smaller\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separator} />\n            {checkboxItems.map(({ label, state: [checked, setChecked], disabled }) => (\n              <DropdownMenu.CheckboxItem\n                key={label}\n                className={styles.item}\n                checked={checked}\n                onCheckedChange={setChecked}\n                disabled={disabled}\n              >\n                {label}\n                <DropdownMenu.ItemIndicator>\n                  <TickIcon />\n                </DropdownMenu.ItemIndicator>\n              </DropdownMenu.CheckboxItem>\n            ))}\n            <DropdownMenu.Separator className={styles.separator} />\n            <DropdownMenu.RadioGroup value={file} onValueChange={setFile}>\n              {files.map((file) => (\n                <DropdownMenu.RadioItem key={file} className={styles.item} value={file}>\n                  {file}\n                  <DropdownMenu.ItemIndicator>\n                    <TickIcon />\n                  </DropdownMenu.ItemIndicator>\n                </DropdownMenu.RadioItem>\n              ))}\n            </DropdownMenu.RadioGroup>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n\n      <h1 style={{ marginTop: 500 }}>Nested composition</h1>\n\n      <DropdownMenu.Root open modal={false}>\n        <DropdownMenu.Trigger className={styles.trigger}>Open</DropdownMenu.Trigger>\n\n        <DropdownMenu.Content className={styles.content} sideOffset={5} avoidCollisions={false}>\n          <Dialog.Root open modal={false}>\n            <Dialog.Trigger className={styles.item} asChild>\n              <DropdownMenu.Item onSelect={(event) => event.preventDefault()}>\n                Open dialog\n              </DropdownMenu.Item>\n            </Dialog.Trigger>\n\n            <Dialog.Content\n              style={{\n                position: 'absolute',\n                top: 0,\n                left: 150,\n                width: 300,\n                padding: 20,\n                backgroundColor: 'whitesmoke',\n                border: '1px solid black',\n              }}\n            >\n              <Dialog.Title style={{ marginTop: 0 }}>Dropdown in nested dialog</Dialog.Title>\n              <DropdownMenu.Root open modal={false}>\n                <DropdownMenu.Trigger className={styles.trigger} style={{ width: '100%' }}>\n                  Open\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Portal>\n                  <DropdownMenu.Content\n                    className={styles.content}\n                    sideOffset={5}\n                    avoidCollisions={false}\n                  >\n                    <DropdownMenu.Item className={styles.item} onSelect={() => console.log('undo')}>\n                      Undo\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Item className={styles.item} onSelect={() => console.log('redo')}>\n                      Redo\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Arrow />\n                  </DropdownMenu.Content>\n                </DropdownMenu.Portal>\n              </DropdownMenu.Root>\n            </Dialog.Content>\n          </Dialog.Root>\n          <DropdownMenu.Item className={styles.item}>Test</DropdownMenu.Item>\n          <DropdownMenu.Arrow />\n        </DropdownMenu.Content>\n      </DropdownMenu.Root>\n\n      <h1 style={{ marginTop: 500 }}>State attributes</h1>\n      <h2>Closed</h2>\n      <DropdownMenu.Root open={false} modal={false}>\n        <DropdownMenu.Trigger className={styles.triggerAttr}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            className={styles.contentAttr}\n            sideOffset={5}\n            avoidCollisions={false}\n          />\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n\n      <h2>Open</h2>\n      <DropdownMenu.Root open modal={false}>\n        <DropdownMenu.Trigger className={styles.triggerAttr}>Open</DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            className={styles.contentAttr}\n            sideOffset={5}\n            avoidCollisions={false}\n          >\n            <DropdownMenu.Item className={styles.itemAttr} onSelect={() => console.log('show')}>\n              Show fonts\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.itemAttr} onSelect={() => console.log('bigger')}>\n              Bigger\n            </DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.itemAttr} onSelect={() => console.log('smaller')}>\n              Smaller\n            </DropdownMenu.Item>\n            <DropdownMenu.Separator className={styles.separatorAttr} />\n            {checkboxItems.map(({ label, state: [checked, setChecked], disabled }) => (\n              <DropdownMenu.CheckboxItem\n                key={label}\n                className={styles.checkboxItemAttr}\n                checked={checked}\n                onCheckedChange={setChecked}\n                disabled={disabled}\n              >\n                {label}\n                <DropdownMenu.ItemIndicator className={styles.itemIndicatorAttr}>\n                  <TickIcon />\n                </DropdownMenu.ItemIndicator>\n              </DropdownMenu.CheckboxItem>\n            ))}\n            <DropdownMenu.Separator className={styles.separatorAttr} />\n            <DropdownMenu.RadioGroup\n              className={styles.radioGroupAttr}\n              value={file}\n              onValueChange={setFile}\n            >\n              {files.map((file) => (\n                <DropdownMenu.RadioItem key={file} className={styles.radioItemAttr} value={file}>\n                  {file}\n                  <DropdownMenu.ItemIndicator className={styles.itemIndicatorAttr}>\n                    <TickIcon />\n                  </DropdownMenu.ItemIndicator>\n                </DropdownMenu.RadioItem>\n              ))}\n            </DropdownMenu.RadioGroup>\n            <DropdownMenu.Arrow className={styles.arrowAttr} />\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    </div>\n  );\n};\nChromatic.parameters = { chromatic: { disable: false } };\n\nconst TickIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    width=\"12\"\n    height=\"12\"\n    fill=\"none\"\n    stroke=\"currentcolor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth=\"3\"\n  >\n    <path d=\"M2 20 L12 28 30 4\" />\n  </svg>\n);\n"
  },
  {
    "path": "apps/storybook/stories/focus-scope.stories.tsx",
    "content": "import React from 'react';\nimport { FocusScope } from 'radix-ui/internal';\n\nexport default { title: 'Utilities/FocusScope' };\n\nexport const Basic = () => {\n  const [trapped, setTrapped] = React.useState(false);\n  const [hasDestroyButton, setHasDestroyButton] = React.useState(true);\n\n  return (\n    <>\n      <div>\n        <button type=\"button\" onClick={() => setTrapped(true)}>\n          Trap\n        </button>{' '}\n        <input /> <input />\n      </div>\n      {trapped ? (\n        <FocusScope.Root asChild loop={trapped} trapped={trapped}>\n          <form\n            style={{\n              display: 'inline-flex',\n              flexDirection: 'column',\n              gap: 20,\n              padding: 20,\n              margin: 50,\n              maxWidth: 500,\n              border: '2px solid',\n            }}\n          >\n            <input type=\"text\" placeholder=\"First name\" />\n            <input type=\"text\" placeholder=\"Last name\" />\n            <input type=\"number\" placeholder=\"Age\" />\n            {hasDestroyButton && (\n              <div>\n                <button type=\"button\" onClick={() => setHasDestroyButton(false)}>\n                  Destroy me\n                </button>\n              </div>\n            )}\n            <button type=\"button\" onClick={() => setTrapped(false)}>\n              Close\n            </button>\n          </form>\n        </FocusScope.Root>\n      ) : null}\n      <div>\n        <input /> <input />\n      </div>\n    </>\n  );\n};\n\nexport const Multiple = () => {\n  const [trapped1, setTrapped1] = React.useState(false);\n  const [trapped2, setTrapped2] = React.useState(false);\n\n  return (\n    <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>\n      <div>\n        <button type=\"button\" onClick={() => setTrapped1(true)}>\n          Trap 1\n        </button>\n      </div>\n      {trapped1 ? (\n        <FocusScope.Root asChild loop={trapped1} trapped={trapped1}>\n          <form\n            style={{\n              display: 'inline-flex',\n              flexDirection: 'column',\n              gap: 20,\n              padding: 20,\n              maxWidth: 500,\n              border: '2px solid',\n            }}\n          >\n            <h1>One</h1>\n            <input type=\"text\" placeholder=\"First name\" />\n            <input type=\"text\" placeholder=\"Last name\" />\n            <input type=\"number\" placeholder=\"Age\" />\n            <button type=\"button\" onClick={() => setTrapped1(false)}>\n              Close\n            </button>\n          </form>\n        </FocusScope.Root>\n      ) : null}\n\n      <div>\n        <button type=\"button\" onClick={() => setTrapped2(true)}>\n          Trap 2\n        </button>\n      </div>\n      {trapped2 ? (\n        <FocusScope.Root asChild loop={trapped2} trapped={trapped2}>\n          <form\n            style={{\n              display: 'inline-flex',\n              flexDirection: 'column',\n              gap: 20,\n              padding: 20,\n              maxWidth: 500,\n              border: '2px solid',\n            }}\n          >\n            <h1>Two</h1>\n            <input type=\"text\" placeholder=\"First name\" />\n            <input type=\"text\" placeholder=\"Last name\" />\n            <input type=\"number\" placeholder=\"Age\" />\n            <button type=\"button\" onClick={() => setTrapped2(false)}>\n              Close\n            </button>\n          </form>\n        </FocusScope.Root>\n      ) : null}\n      <div>\n        <input />\n      </div>\n    </div>\n  );\n};\n\n// true => default focus, false => no focus, ref => focus element\ntype FocusParam = boolean | React.RefObject<HTMLElement | null>;\n\nexport const WithOptions = () => {\n  const [open, setOpen] = React.useState(false);\n  const [isEmptyForm, setIsEmptyForm] = React.useState(false);\n\n  const [trapFocus, setTrapFocus] = React.useState(false);\n  const [focusOnMount, setFocusOnMount] = React.useState<FocusParam>(false);\n  const [focusOnUnmount, setFocusOnUnmount] = React.useState<FocusParam>(false);\n\n  const ageFieldRef = React.useRef<HTMLInputElement>(null);\n  const nextButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>\n      <h1>FocusScope</h1>\n\n      <div style={{ display: 'inline-block', textAlign: 'left', marginBottom: 20 }}>\n        <label style={{ display: 'block' }}>\n          <input\n            type=\"checkbox\"\n            checked={trapFocus}\n            onChange={(event) => setTrapFocus(event.target.checked)}\n          />{' '}\n          Trap focus?\n        </label>\n        <label style={{ display: 'block' }}>\n          <input\n            type=\"checkbox\"\n            checked={focusOnMount !== false}\n            onChange={(event) => {\n              setFocusOnMount(event.target.checked);\n              if (event.target.checked === false) {\n                setIsEmptyForm(false);\n              }\n            }}\n          />{' '}\n          Focus on mount?\n        </label>\n        {focusOnMount !== false && !isEmptyForm && (\n          <label style={{ display: 'block', marginLeft: 20 }}>\n            <input\n              type=\"checkbox\"\n              checked={focusOnMount !== true}\n              onChange={(event) => setFocusOnMount(event.target.checked ? ageFieldRef : true)}\n            />{' '}\n            on \"age\" field?\n          </label>\n        )}\n        {focusOnMount !== false && (\n          <label style={{ display: 'block', marginLeft: 20 }}>\n            <input\n              type=\"checkbox\"\n              checked={isEmptyForm}\n              onChange={(event) => {\n                setIsEmptyForm(event.target.checked);\n                setFocusOnMount(true);\n              }}\n            />{' '}\n            empty form?\n          </label>\n        )}\n        <label style={{ display: 'block' }}>\n          <input\n            type=\"checkbox\"\n            checked={focusOnUnmount !== false}\n            onChange={(event) => setFocusOnUnmount(event.target.checked)}\n          />{' '}\n          Focus on unmount?\n        </label>\n        {focusOnUnmount !== false && (\n          <label style={{ display: 'block', marginLeft: 20 }}>\n            <input\n              type=\"checkbox\"\n              checked={focusOnUnmount !== true}\n              onChange={(event) => setFocusOnUnmount(event.target.checked ? nextButtonRef : true)}\n            />{' '}\n            on \"next\" button?\n          </label>\n        )}\n      </div>\n\n      <div style={{ marginBottom: 20 }}>\n        <button type=\"button\" onClick={() => setOpen((open) => !open)}>\n          {open ? 'Close' : 'Open'} form in between buttons\n        </button>\n      </div>\n\n      <button type=\"button\" style={{ marginRight: 10 }}>\n        previous\n      </button>\n\n      {open ? (\n        <FocusScope.Root\n          key=\"form\"\n          asChild\n          loop={trapFocus}\n          trapped={trapFocus}\n          onMountAutoFocus={(event) => {\n            if (focusOnMount !== true) {\n              event.preventDefault();\n              if (focusOnMount) focusOnMount.current?.focus();\n            }\n          }}\n          onUnmountAutoFocus={(event) => {\n            if (focusOnUnmount !== true) {\n              event.preventDefault();\n              if (focusOnUnmount) focusOnUnmount.current?.focus();\n            }\n          }}\n        >\n          <form\n            style={{\n              display: 'inline-flex',\n              flexDirection: 'column',\n              gap: 20,\n              padding: 20,\n              margin: 50,\n              maxWidth: 500,\n              border: '2px solid',\n            }}\n          >\n            {!isEmptyForm && (\n              <>\n                <input type=\"text\" placeholder=\"First name\" />\n                <input type=\"text\" placeholder=\"Last name\" />\n                <input ref={ageFieldRef} type=\"number\" placeholder=\"Age\" />\n                <button type=\"button\" onClick={() => setOpen(false)}>\n                  Close\n                </button>\n              </>\n            )}\n          </form>\n        </FocusScope.Root>\n      ) : null}\n\n      <button ref={nextButtonRef} type=\"button\" style={{ marginLeft: 10 }}>\n        next\n      </button>\n    </div>\n  );\n};\n"
  },
  {
    "path": "apps/storybook/stories/form.stories.module.css",
    "content": ".form {\n  & [data-invalid] {\n    color: var(--red-9);\n    outline-color: currentColor;\n  }\n  & [data-valid] {\n    color: var(--green-9);\n    outline-color: currentColor;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/form.stories.tsx",
    "content": "import * as React from 'react';\nimport { Form } from 'radix-ui';\nimport styles from './form.stories.module.css';\n\nexport default { title: 'Components/Form' };\n\nexport const Basic = () => {\n  const [loading, setLoading] = React.useState(false);\n  const [serverErrors, setServerErrors] = React.useState<{ email?: boolean; password?: boolean }>(\n    {},\n  );\n\n  return (\n    <>\n      <Form.Root\n        className={styles.form}\n        onClearServerErrors={() => setServerErrors({})}\n        onSubmit={async (event) => {\n          const form = event.currentTarget;\n          event.preventDefault();\n\n          const formData = new FormData(form);\n\n          setLoading(true);\n          await wait(500);\n          setLoading(false);\n\n          const errors = new Set();\n          if (!(formData.get('email') as string).includes('@gmail.com')) errors.add('email');\n          if (!(formData.get('password') as string).includes('#')) errors.add('password');\n\n          if (errors.size > 0) {\n            setServerErrors(Object.fromEntries([...errors].map((name) => [name, true])));\n            return;\n          }\n\n          window.alert(JSON.stringify(Object.fromEntries(formData), null, 2));\n        }}\n      >\n        <Form.Field name=\"email\" serverInvalid={serverErrors.email}>\n          <Form.Label>Email</Form.Label>\n          <Form.Control\n            type=\"email\"\n            required\n            onChange={() => setServerErrors((prev) => ({ ...prev, email: false }))}\n          />\n          <Form.Message match=\"valueMissing\" />\n          <Form.Message match=\"typeMismatch\" forceMatch={serverErrors.email}>\n            Email is invalid\n          </Form.Message>\n        </Form.Field>\n\n        <Form.Field name=\"password\" serverInvalid={serverErrors.password}>\n          <Form.Label>Password</Form.Label>\n          <Form.Control\n            type=\"password\"\n            required\n            onChange={() => setServerErrors((prev) => ({ ...prev, password: false }))}\n          />\n          <Form.Message match=\"valueMissing\">Password is required</Form.Message>\n          <Form.Message\n            match={(value) => value.match(/.*[0-9]+.*/) === null}\n            forceMatch={serverErrors.password}\n          >\n            Password is not complex enough\n          </Form.Message>\n          {serverErrors.password && <Form.Message>Woops</Form.Message>}\n        </Form.Field>\n\n        <Form.Submit disabled={loading}>Submit</Form.Submit>\n        <button type=\"reset\">Reset</button>\n      </Form.Root>\n    </>\n  );\n};\n\nexport const Cypress = () => {\n  const [data, setData] = React.useState({});\n  const [simulateServerErrors, setSimulateServerErrors] = React.useState(false);\n  const [serverErrors, setServerErrors] = React.useState<{\n    email?: boolean;\n    pin?: boolean;\n    global?: boolean;\n  }>({});\n\n  return (\n    <>\n      <Form.Root\n        className={styles.form}\n        onClearServerErrors={() => setServerErrors({})}\n        onSubmit={async (event) => {\n          event.preventDefault();\n\n          setData({});\n\n          const data = Object.fromEntries(new FormData(event.currentTarget));\n\n          if (simulateServerErrors) {\n            await wait(100);\n            setServerErrors({ email: !data.email, pin: String(data.pin)[3] !== '9', global: true });\n          }\n\n          setData(data);\n        }}\n        onReset={() => setData({})}\n      >\n        <Form.Field name=\"name\">\n          <Form.Label>Name (required)</Form.Label>\n          <Form.Control type=\"text\" required />\n          <Form.Message match=\"valueMissing\" />\n          <Form.Message match=\"valid\">valid!</Form.Message>\n        </Form.Field>\n\n        <Form.Field name=\"age\">\n          <Form.Label>Age (0-99)</Form.Label>\n          <Form.Control type=\"number\" min=\"0\" max=\"99\" step=\"1\" />\n          <Form.Message match=\"rangeOverflow\" />\n          <Form.Message match=\"rangeUnderflow\" />\n          <Form.Message match=\"stepMismatch\" />\n        </Form.Field>\n\n        <Form.Field name=\"email\" serverInvalid={serverErrors.email}>\n          <Form.Label>Email</Form.Label>\n          <Form.Control type=\"email\" />\n          <Form.Message match=\"typeMismatch\" />\n          {serverErrors.email ? (\n            <Form.Message>Email is actually required server side!</Form.Message>\n          ) : null}\n        </Form.Field>\n\n        <Form.Field name=\"password\">\n          <Form.Label>Password</Form.Label>\n          <Form.Control type=\"password\" minLength={8} maxLength={16} />\n          <Form.Message match=\"tooShort\" />\n          <Form.Message match=\"tooLong\" />\n        </Form.Field>\n\n        <Form.Field name=\"pin\" serverInvalid={serverErrors.pin}>\n          <Form.Label>Pin (4 digits)</Form.Label>\n          <Form.Control type=\"text\" pattern=\"\\d{4,4}\" />\n          <Form.Message match=\"patternMismatch\" forceMatch={serverErrors.pin} />\n        </Form.Field>\n\n        <Form.Field name=\"secret\">\n          <Form.Label>Secret 1</Form.Label>\n          <Form.Control type=\"text\" />\n          <Form.Message match={(value) => value !== 'shush'} />\n        </Form.Field>\n\n        <Form.Field name=\"asyncSecret\">\n          <Form.Label>Secret 2</Form.Label>\n          <Form.Control type=\"text\" />\n          <Form.Message\n            match={async (value) => {\n              await wait(100);\n              return value !== 'shush';\n            }}\n          />\n        </Form.Field>\n\n        <Form.Field name=\"country\">\n          <Form.Label htmlFor=\"my-country\">Country</Form.Label>\n          <Form.Control id=\"my-country\" type=\"text\" pattern=\"France|Spain\" />\n          <Form.Message match=\"patternMismatch\">Country should be \"France\" or \"Spain\"</Form.Message>\n        </Form.Field>\n\n        <Form.Submit>submit</Form.Submit>\n        <button type=\"reset\">reset</button>\n      </Form.Root>\n      <pre>Data: {JSON.stringify(data, null, 2)}</pre>\n\n      <label>\n        <input\n          type=\"checkbox\"\n          checked={simulateServerErrors}\n          onChange={(event) => setSimulateServerErrors(event.target.checked)}\n        />{' '}\n        Simulate server errors?\n      </label>\n    </>\n  );\n};\n\nasync function wait(ms: number) {\n  return new Promise((resolve) => setTimeout(resolve, ms));\n}\n"
  },
  {
    "path": "apps/storybook/stories/hover-card.stories.module.css",
    "content": ".content {\n  transform-origin: var(--radix-hover-card-content-transform-origin);\n  /* ----- */\n  background-color: var(--color-gray300);\n  padding: 20px;\n  border-radius: 5px;\n}\n\n.arrow {\n  fill: var(--color-gray300);\n}\n\n@keyframes hoverCard-fadeIn {\n  from {\n    transform: scale(0.9);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes hoverCard-fadeOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.9);\n    opacity: 0;\n  }\n}\n\n.animatedContent {\n  &[data-state='open'] {\n    animation: hoverCard-fadeIn 250ms ease;\n  }\n  &[data-state='closed'] {\n    animation: hoverCard-fadeOut 250ms ease;\n  }\n}\n\n.grid {\n  display: inline-grid;\n  grid-template-columns: repeat(3, 50px);\n  column-gap: 150px;\n  row-gap: 100px;\n  padding: 100px;\n  border: 1px solid black;\n}\n\n.contentAttr,\n.arrowAttr,\n.triggerAttr {\n  background-color: rgb(0 0 255 / 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n\n  &[data-state='closed'] {\n    border-color: red;\n  }\n  &[data-state='open'] {\n    border-color: green;\n  }\n}\n\n.chromaticArrow {\n  fill: black;\n}\n\n.chromaticContent,\n.contentAttr {\n  display: grid;\n  place-content: center;\n  width: 60px;\n  height: 60px;\n  background-color: royalblue;\n  color: white;\n  font-size: 10px;\n  border: 1px solid rgb(0 0 0 / 0.3);\n}\n\n.chromaticTrigger {\n  width: 30px;\n  height: 30px;\n  background-color: tomato;\n  border: 1px solid rgb(0 0 0 / 0.3);\n}\n"
  },
  {
    "path": "apps/storybook/stories/hover-card.stories.tsx",
    "content": "import * as React from 'react';\nimport { Dialog, HoverCard } from 'radix-ui';\nimport { Popper } from 'radix-ui/internal';\nimport styles from './hover-card.stories.module.css';\n\nconst { SIDE_OPTIONS, ALIGN_OPTIONS } = Popper;\n\nexport default { title: 'Components/HoverCard' };\n\nconst contentClass = ({ animated }: { animated?: boolean }) =>\n  [\n    styles.content, ///\n    animated && styles.animatedContent,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\nexport const Basic = () => {\n  return (\n    <div style={{ padding: 50, display: 'flex', justifyContent: 'center' }}>\n      <HoverCard.Root>\n        <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n          trigger\n        </HoverCard.Trigger>\n        <HoverCard.Portal>\n          <HoverCard.Content className={styles.content} sideOffset={5}>\n            <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n            <CardContentPlaceholder />\n          </HoverCard.Content>\n        </HoverCard.Portal>\n      </HoverCard.Root>\n    </div>\n  );\n};\n\nexport const ContainTextSelection = () => {\n  return (\n    <div\n      style={{\n        padding: 50,\n        display: 'flex',\n        justifyContent: 'center',\n        flexDirection: 'column',\n        alignItems: 'center',\n      }}\n    >\n      <div style={{ display: 'flex', gap: 30 }}>\n        <HoverCard.Root>\n          <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n            single\n          </HoverCard.Trigger>\n          <HoverCard.Portal>\n            <HoverCard.Content className={contentClass({ animated: true })} sideOffset={5}>\n              <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n              <div style={{ maxWidth: 400 }}>\n                Text selections will be contained within the content. While a selection is active\n                the content will not dismiss unless the selection is cleared or an outside\n                interaction is performed.\n              </div>\n            </HoverCard.Content>\n          </HoverCard.Portal>\n        </HoverCard.Root>\n\n        <HoverCard.Root>\n          <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n            nested\n          </HoverCard.Trigger>\n          <HoverCard.Portal>\n            <HoverCard.Content className={contentClass({ animated: true })} sideOffset={5}>\n              <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n              <div style={{ maxWidth: 400 }}>\n                Text selections will be contained within the content. While a selection is active\n                the content will not dismiss unless the selection is cleared or an outside\n                interaction is performed.\n              </div>\n\n              <HoverCard.Root>\n                <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n                  nested trigger\n                </HoverCard.Trigger>\n                <HoverCard.Portal>\n                  <HoverCard.Content\n                    className={contentClass({ animated: true })}\n                    sideOffset={5}\n                    style={{ backgroundColor: 'crimson' }}\n                  >\n                    <HoverCard.Arrow\n                      className={styles.arrow}\n                      width={20}\n                      height={10}\n                      style={{ fill: 'crimson' }}\n                    />\n                    <div style={{ maxWidth: 400 }}>\n                      Text selections will be contained within the content. While a selection is\n                      active the content will not dismiss unless the selection is cleared or an\n                      outside interaction is performed.\n                    </div>\n\n                    <HoverCard.Root>\n                      <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n                        nested trigger\n                      </HoverCard.Trigger>\n                      <HoverCard.Portal>\n                        <HoverCard.Content\n                          className={contentClass({ animated: true })}\n                          sideOffset={5}\n                          style={{ backgroundColor: 'green' }}\n                        >\n                          <HoverCard.Arrow\n                            className={styles.arrow}\n                            width={20}\n                            height={10}\n                            style={{ fill: 'green' }}\n                          />\n                          <div style={{ maxWidth: 400 }}>\n                            Text selections will be contained within the content. While a selection\n                            is active the content will not dismiss unless the selection is cleared\n                            or an outside interaction is performed.\n                          </div>\n                        </HoverCard.Content>\n                      </HoverCard.Portal>\n                    </HoverCard.Root>\n                  </HoverCard.Content>\n                </HoverCard.Portal>\n              </HoverCard.Root>\n            </HoverCard.Content>\n          </HoverCard.Portal>\n        </HoverCard.Root>\n      </div>\n      <div style={{ maxWidth: 800 }}>\n        <p>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat mattis malesuada.\n          Fusce elementum vulputate aliquet. Integer fringilla porta eros. Ut ultricies mattis nisi.\n          Sed et tempor massa. Sed non arcu ut velit scelerisque bibendum tempor sed mi. In non\n          consequat sapien. Donec sollicitudin eget tellus ut venenatis. Donec posuere sem ante, nec\n          iaculis arcu varius sit amet. Praesent non tortor quam. Curabitur dapibus justo a commodo\n          ornare.\n        </p>\n        <p>\n          Suspendisse eleifend consequat iaculis. Nunc bibendum velit felis, nec vulputate purus\n          egestas quis. Integer mauris dui, pulvinar non metus id, tristique dignissim elit. Vivamus\n          massa tellus, porttitor id lorem non, molestie aliquam dolor. Pellentesque erat quam,\n          pellentesque non metus id, tempus sagittis massa.\n        </p>\n        <p>\n          Sed at elementum sem, non venenatis leo. Ut vulputate consectetur finibus. Sed nunc\n          lectus, accumsan in nisl et, vehicula pretium nisi. Vivamus vestibulum ante quis urna\n          consequat, ultrices condimentum sem commodo. Pellentesque eget orci laoreet, feugiat purus\n          sed, maximus nisi. Suspendisse commodo venenatis facilisis.\n        </p>\n      </div>\n    </div>\n  );\n};\n\nexport const AsyncUpdate = () => {\n  const [open, setOpen] = React.useState(false);\n  const [contentLoaded, setContentLoaded] = React.useState(false);\n  const timerRef = React.useRef(0);\n\n  const handleOpenChange = React.useCallback((open: boolean) => {\n    clearTimeout(timerRef.current);\n\n    if (open) {\n      timerRef.current = window.setTimeout(() => {\n        setContentLoaded(true);\n      }, 500);\n    } else {\n      setContentLoaded(false);\n    }\n\n    setOpen(open);\n  }, []);\n\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  return (\n    <div style={{ padding: 50, display: 'flex', justifyContent: 'center' }}>\n      <HoverCard.Root open={open} onOpenChange={handleOpenChange}>\n        <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n          trigger\n        </HoverCard.Trigger>\n        <HoverCard.Portal>\n          <HoverCard.Content className={styles.content} sideOffset={5}>\n            <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n            {contentLoaded ? <CardContentPlaceholder /> : 'Loading...'}\n          </HoverCard.Content>\n        </HoverCard.Portal>\n      </HoverCard.Root>\n    </div>\n  );\n};\n\nexport const CustomDurations = () => (\n  <div>\n    <h1>Delay duration</h1>\n    <h2>Default (700ms open, 300ms close)</h2>\n\n    <HoverCard.Root>\n      <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n        trigger\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content}>\n          <CardContentPlaceholder />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h2>Custom (instant, 0ms open, 0ms close)</h2>\n    <HoverCard.Root openDelay={0} closeDelay={0}>\n      <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n        trigger\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content}>\n          <CardContentPlaceholder />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h2>Custom (300ms open, 100ms close)</h2>\n\n    <HoverCard.Root openDelay={300} closeDelay={100}>\n      <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n        trigger\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content}>\n          <CardContentPlaceholder />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  </div>\n);\n\nexport const Controlled = () => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <div style={{ padding: 50, display: 'flex', justifyContent: 'center' }}>\n      <HoverCard.Root open={open} onOpenChange={setOpen}>\n        <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n          trigger\n        </HoverCard.Trigger>\n        <HoverCard.Portal>\n          <HoverCard.Content className={styles.content}>\n            <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n            <CardContentPlaceholder />\n          </HoverCard.Content>\n        </HoverCard.Portal>\n      </HoverCard.Root>\n    </div>\n  );\n};\n\nexport const Layerable = () => (\n  <div style={{ padding: 50, display: 'flex', justifyContent: 'center' }}>\n    <Dialog.Root>\n      <Dialog.Trigger>Open</Dialog.Trigger>\n      <Dialog.Content\n        style={{\n          position: 'fixed',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          background: 'white',\n          border: '1px solid',\n          borderRadius: 4,\n          padding: 20,\n        }}\n      >\n        <Dialog.Title>Some dialog title</Dialog.Title>\n        Some dialog content with a{' '}\n        <HoverCard.Root>\n          <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n            trigger\n          </HoverCard.Trigger>\n          <HoverCard.Portal>\n            <HoverCard.Content className={styles.content} sideOffset={5}>\n              <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n              <CardContentPlaceholder />\n            </HoverCard.Content>\n          </HoverCard.Portal>\n        </HoverCard.Root>{' '}\n        <Dialog.Close>Close</Dialog.Close>\n      </Dialog.Content>\n    </Dialog.Root>\n  </div>\n);\n\nexport const Animated = () => {\n  return (\n    <div style={{ padding: 50, display: 'flex', justifyContent: 'center' }}>\n      <HoverCard.Root>\n        <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n          trigger\n        </HoverCard.Trigger>\n        <HoverCard.Portal>\n          <HoverCard.Content className={contentClass({ animated: true })} sideOffset={10}>\n            <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n            <CardContentPlaceholder />\n          </HoverCard.Content>\n        </HoverCard.Portal>\n      </HoverCard.Root>\n    </div>\n  );\n};\n\nexport const ForcedMount = () => {\n  return (\n    <div style={{ padding: 50, display: 'flex', justifyContent: 'center' }}>\n      <HoverCard.Root>\n        <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n          trigger\n        </HoverCard.Trigger>\n        <HoverCard.Portal forceMount>\n          <HoverCard.Content className={styles.content} sideOffset={10}>\n            <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n            <CardContentPlaceholder />\n          </HoverCard.Content>\n        </HoverCard.Portal>\n      </HoverCard.Root>\n    </div>\n  );\n};\n\nexport const Nested = () => {\n  return (\n    <HoverCard.Root>\n      <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n        trigger level 1\n      </HoverCard.Trigger>\n\n      <HoverCard.Portal>\n        <HoverCard.Content\n          className={styles.content}\n          sideOffset={5}\n          style={{ backgroundColor: 'crimson' }}\n        >\n          <HoverCard.Root>\n            <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n              trigger level 2\n            </HoverCard.Trigger>\n            <HoverCard.Portal>\n              <HoverCard.Content\n                className={styles.content}\n                side=\"top\"\n                align=\"center\"\n                sideOffset={5}\n                style={{ backgroundColor: 'green' }}\n              >\n                <HoverCard.Arrow\n                  className={styles.arrow}\n                  width={20}\n                  height={10}\n                  offset={20}\n                  style={{ fill: 'green' }}\n                />\n                <HoverCard.Root>\n                  <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n                    trigger level 3\n                  </HoverCard.Trigger>\n                  <HoverCard.Portal>\n                    <HoverCard.Content\n                      className={styles.content}\n                      side=\"bottom\"\n                      align=\"start\"\n                      sideOffset={5}\n                      style={{ backgroundColor: 'purple' }}\n                    >\n                      <HoverCard.Arrow\n                        className={styles.arrow}\n                        width={20}\n                        height={10}\n                        offset={20}\n                        style={{ fill: 'purple' }}\n                      />\n                      level 3\n                    </HoverCard.Content>\n                  </HoverCard.Portal>\n                </HoverCard.Root>\n              </HoverCard.Content>\n            </HoverCard.Portal>\n          </HoverCard.Root>\n\n          <HoverCard.Arrow\n            className={styles.arrow}\n            width={20}\n            height={10}\n            offset={20}\n            style={{ fill: 'crimson' }}\n          />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  );\n};\n\nexport const NonPortal = () => {\n  return (\n    <div>\n      <button>button</button>\n      <HoverCard.Root>\n        <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n          trigger\n        </HoverCard.Trigger>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n          <a href=\"#link\">Should not be able to focus me</a>\n          <CardContentPlaceholder />\n        </HoverCard.Content>\n      </HoverCard.Root>\n      <button>button</button>\n    </div>\n  );\n};\n\nexport const WithSlottedTrigger = () => {\n  return (\n    <HoverCard.Root>\n      <HoverCard.Trigger asChild>\n        <button className={styles.trigger} onClick={() => console.log('StyledTrigger click')}>\n          trigger\n        </button>\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n          <CardContentPlaceholder />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  );\n};\n\nexport const WithSlottedContent = () => (\n  <HoverCard.Root>\n    <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n      trigger\n    </HoverCard.Trigger>\n    <HoverCard.Portal>\n      <HoverCard.Content asChild sideOffset={5}>\n        <div className={styles.content}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n          <CardContentPlaceholder />\n        </div>\n      </HoverCard.Content>\n    </HoverCard.Portal>\n  </HoverCard.Root>\n);\n\n// change order slightly for more pleasing visual\nconst SIDES = [...SIDE_OPTIONS.filter((side) => side !== 'bottom'), 'bottom' as const];\n\nexport const Chromatic = () => (\n  <div style={{ padding: 200, paddingBottom: 500 }}>\n    <h1>Uncontrolled</h1>\n    <h2>Closed</h2>\n    <HoverCard.Root>\n      <HoverCard.Trigger className={styles.trigger}>open</HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h2>Open</h2>\n    <HoverCard.Root defaultOpen>\n      <HoverCard.Trigger className={styles.trigger}>open</HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h2 style={{ marginTop: 60 }}>Open with reordered parts</h2>\n    <HoverCard.Root defaultOpen>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          Some content\n          <HoverCard.Arrow className={styles.arrow} offset={10} />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n      <HoverCard.Trigger className={styles.trigger}>open</HoverCard.Trigger>\n    </HoverCard.Root>\n\n    <h1 style={{ marginTop: 100 }}>Controlled</h1>\n    <h2>Closed</h2>\n    <HoverCard.Root open={false}>\n      <HoverCard.Trigger className={styles.trigger}>open</HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h2>Open</h2>\n    <HoverCard.Root open>\n      <HoverCard.Trigger className={styles.trigger}>open</HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h2 style={{ marginTop: 60 }}>Open with reordered parts</h2>\n    <HoverCard.Root open>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          Some content\n          <HoverCard.Arrow className={styles.arrow} offset={10} />\n        </HoverCard.Content>\n      </HoverCard.Portal>\n      <HoverCard.Trigger className={styles.trigger}>open</HoverCard.Trigger>\n    </HoverCard.Root>\n\n    <h1 style={{ marginTop: 100 }}>Force mounted content</h1>\n    <HoverCard.Root>\n      <HoverCard.Trigger className={styles.trigger}>open</HoverCard.Trigger>\n      <HoverCard.Portal forceMount>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h1 style={{ marginTop: 100 }}>Positioning</h1>\n    <h2>No collisions</h2>\n    <h3>Side & Align</h3>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <HoverCard.Root key={`${side}-${align}`} open>\n            <HoverCard.Trigger className={styles.chromaticTrigger} />\n            <HoverCard.Portal>\n              <HoverCard.Content\n                className={styles.chromaticContent}\n                side={side}\n                align={align}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <HoverCard.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </HoverCard.Content>\n            </HoverCard.Portal>\n          </HoverCard.Root>\n        )),\n      )}\n    </div>\n\n    <h3>Side offset</h3>\n    <h4>Positive</h4>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <HoverCard.Root key={`${side}-${align}`} open>\n            <HoverCard.Trigger className={styles.chromaticTrigger} />\n            <HoverCard.Portal>\n              <HoverCard.Content\n                className={styles.chromaticContent}\n                side={side}\n                sideOffset={5}\n                align={align}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <HoverCard.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </HoverCard.Content>\n            </HoverCard.Portal>\n          </HoverCard.Root>\n        )),\n      )}\n    </div>\n    <h4>Negative</h4>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <HoverCard.Root key={`${side}-${align}`} open>\n            <HoverCard.Trigger className={styles.chromaticTrigger} />\n            <HoverCard.Portal>\n              <HoverCard.Content\n                className={styles.chromaticContent}\n                side={side}\n                sideOffset={-10}\n                align={align}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <HoverCard.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </HoverCard.Content>\n            </HoverCard.Portal>\n          </HoverCard.Root>\n        )),\n      )}\n    </div>\n\n    <h3>Align offset</h3>\n    <h4>Positive</h4>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <HoverCard.Root key={`${side}-${align}`} open>\n            <HoverCard.Trigger className={styles.chromaticTrigger} />\n            <HoverCard.Portal>\n              <HoverCard.Content\n                className={styles.chromaticContent}\n                side={side}\n                align={align}\n                alignOffset={20}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <HoverCard.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </HoverCard.Content>\n            </HoverCard.Portal>\n          </HoverCard.Root>\n        )),\n      )}\n    </div>\n    <h4>Negative</h4>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <HoverCard.Root key={`${side}-${align}`} open>\n            <HoverCard.Trigger className={styles.chromaticTrigger} />\n            <HoverCard.Portal>\n              <HoverCard.Content\n                className={styles.chromaticContent}\n                side={side}\n                align={align}\n                alignOffset={-10}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <HoverCard.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </HoverCard.Content>\n            </HoverCard.Portal>\n          </HoverCard.Root>\n        )),\n      )}\n    </div>\n\n    <h2>Collisions</h2>\n    <p>See instances on the periphery of the page.</p>\n    {SIDES.map((side) =>\n      ALIGN_OPTIONS.map((align) => (\n        <HoverCard.Root key={`${side}-${align}`} open>\n          <HoverCard.Trigger\n            className={styles.chromaticTrigger}\n            style={{\n              position: 'absolute',\n              [side]: 10,\n              ...((side === 'right' || side === 'left') &&\n                (align === 'start'\n                  ? { bottom: 10 }\n                  : align === 'center'\n                    ? { top: 'calc(50% - 15px)' }\n                    : { top: 10 })),\n              ...((side === 'top' || side === 'bottom') &&\n                (align === 'start'\n                  ? { right: 10 }\n                  : align === 'center'\n                    ? { left: 'calc(50% - 15px)' }\n                    : { left: 10 })),\n            }}\n          />\n          <HoverCard.Portal>\n            <HoverCard.Content className={styles.chromaticContent} side={side} align={align}>\n              <p style={{ textAlign: 'center' }}>\n                {side}\n                <br />\n                {align}\n              </p>\n              <HoverCard.Arrow className={styles.chromaticArrow} width={20} height={10} />\n            </HoverCard.Content>\n          </HoverCard.Portal>\n        </HoverCard.Root>\n      )),\n    )}\n\n    <h2>Relative parent (non-portalled)</h2>\n    <div style={{ position: 'relative' }}>\n      <HoverCard.Root open>\n        <HoverCard.Trigger href=\"/\" className={styles.trigger}>\n          trigger\n        </HoverCard.Trigger>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Root>\n    </div>\n\n    <h1 style={{ marginTop: 100 }}>With slotted trigger</h1>\n    <HoverCard.Root open>\n      <HoverCard.Trigger asChild>\n        <button className={styles.trigger}>open</button>\n      </HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.content} sideOffset={5}>\n          <HoverCard.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h1 style={{ marginTop: 100 }}>State attributes</h1>\n    <h2>Closed</h2>\n    <HoverCard.Root open={false}>\n      <HoverCard.Trigger className={styles.triggerAttr}>open</HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content className={styles.contentAttr} sideOffset={5} avoidCollisions={false}>\n          <HoverCard.Arrow className={styles.arrowAttr} width={20} height={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n\n    <h2>Open</h2>\n    <HoverCard.Root open>\n      <HoverCard.Trigger className={styles.triggerAttr}>open</HoverCard.Trigger>\n      <HoverCard.Portal>\n        <HoverCard.Content\n          className={styles.contentAttr}\n          side=\"right\"\n          sideOffset={5}\n          avoidCollisions={false}\n        >\n          <HoverCard.Arrow className={styles.arrowAttr} width={20} height={10} />\n          Some content\n        </HoverCard.Content>\n      </HoverCard.Portal>\n    </HoverCard.Root>\n  </div>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n\nfunction CardContentPlaceholder() {\n  return (\n    <div style={{ maxWidth: 400, display: 'flex', alignItems: 'center' }}>\n      <div style={{ width: 60, height: 60, backgroundColor: 'white', borderRadius: 100 }} />\n      <div style={{ marginLeft: 14 }}>\n        <div style={{ width: 200, backgroundColor: 'white', height: 14, borderRadius: 100 }} />\n        <div\n          style={{\n            width: 150,\n            backgroundColor: 'white',\n            height: 14,\n            borderRadius: 100,\n            marginTop: 10,\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"
  },
  {
    "path": "apps/storybook/stories/label.stories.module.css",
    "content": ".root {\n  /* ensures it can receive vertical margins */\n  display: inline-block;\n  /* better default alignment */\n  vertical-align: middle;\n  /* mimics default `label` tag (as we render a `span`) */\n  cursor: default;\n  display: inline-block;\n  border: 1px solid var(--gray-5);\n  padding: 10px;\n}\n\n.control {\n  display: inline-flex;\n  border: 1px solid var(--gray-5);\n  padding: 10px;\n  vertical-align: middle;\n  margin: 0 10px;\n\n  &:hover {\n    background-color: var(--red-9);\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/label.stories.tsx",
    "content": "import { Label as LabelPrimitive } from 'radix-ui';\nimport styles from './label.stories.module.css';\n\nconst Label = LabelPrimitive.Root;\n\nexport default { title: 'Components/Label' };\n\nexport const Styled = () => <Label className={styles.root}>Label</Label>;\n\nexport const WithControl = () => {\n  return (\n    <>\n      <h1>Wrapping control</h1>\n      <Label>\n        <Control className={styles.control} /> Label\n      </Label>\n\n      <h1>Referencing control</h1>\n      <Control id=\"control\" className={styles.control} />\n      <Label htmlFor=\"control\">Label</Label>\n    </>\n  );\n};\n\nexport const WithInputNumber = (_props: any) => {\n  return (\n    <Label>\n      <span>Name:</span>\n      <input type=\"number\" />\n    </Label>\n  );\n};\n\nconst Control = (props: any) => {\n  return (\n    <button className={styles.control} {...props} onClick={() => window.alert('clicked')}>\n      Control\n    </button>\n  );\n};\n"
  },
  {
    "path": "apps/storybook/stories/menu.stories.module.css",
    "content": ".content {\n  display: inline-block;\n  box-sizing: border-box;\n  min-width: 130px;\n  background-color: var(--color-white);\n  border: 1px solid var(--color-gray100);\n  border-radius: 6px;\n  padding: 5px;\n  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  &:focus-within {\n    border-color: var(--color-black);\n  }\n}\n\n.label,\n.item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n  height: 25px;\n  padding: 0 10px;\n  color: var(--color-black);\n  border-radius: 3px;\n}\n\n.label {\n  color: var(--color-gray100);\n}\n\n.item {\n  outline: none;\n\n  &[data-highlighted] {\n    background-color: var(--color-black);\n    color: var(--color-white);\n  }\n\n  &[data-disabled] {\n    color: var(--color-gray100);\n  }\n}\n\n.subTrigger {\n  &:not([data-highlighted])[data-state='open'] {\n    background-color: var(--color-gray100);\n    color: var(--color-black);\n  }\n}\n\n.separator {\n  height: 1;\n  margin: 5px 10px;\n  background-color: var(--color-gray100);\n}\n\n@keyframes menu-animateIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes menu-animateOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n}\n\n.animatedContent {\n  &[data-state='open'] {\n    animation: menu-animateIn 300ms ease;\n  }\n  &[data-state='closed'] {\n    animation: menu-animateOut 300ms ease;\n  }\n}\n\n.animatedItemIndicator {\n  &[data-state='checked'] {\n    animation: menu-animateIn 300ms ease;\n  }\n  &[data-state='unchecked'] {\n    animation: menu-animateOut 300ms ease;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/menu.stories.tsx",
    "content": "import * as React from 'react';\nimport { Direction } from 'radix-ui';\nimport { Menu } from 'radix-ui/internal';\nimport { foodGroups } from '@repo/test-data/foods';\nimport styles from './menu.stories.module.css';\n\nexport default {\n  title: 'Utilities/Menu',\n  excludeStories: ['TickIcon', 'classes'],\n};\n\nexport const Styled = () => (\n  <MenuWithAnchor>\n    <Menu.Item className={styles.item} onSelect={() => window.alert('undo')}>\n      Undo\n    </Menu.Item>\n    <Menu.Item className={styles.item} onSelect={() => window.alert('redo')}>\n      Redo\n    </Menu.Item>\n    <Menu.Separator className={styles.separator} />\n    <Menu.Item className={styles.item} disabled onSelect={() => window.alert('cut')}>\n      Cut\n    </Menu.Item>\n    <Menu.Item className={styles.item} onSelect={() => window.alert('copy')}>\n      Copy\n    </Menu.Item>\n    <Menu.Item className={styles.item} onSelect={() => window.alert('paste')}>\n      Paste\n    </Menu.Item>\n  </MenuWithAnchor>\n);\n\nexport const Submenus = () => {\n  const [open1, setOpen1] = React.useState(false);\n  const [open2, setOpen2] = React.useState(false);\n  const [open3, setOpen3] = React.useState(false);\n  const [open4, setOpen4] = React.useState(false);\n  const [rtl, setRtl] = React.useState(false);\n  const [animated, setAnimated] = React.useState(false);\n\n  React.useEffect(() => {\n    if (rtl) {\n      document.documentElement.setAttribute('dir', 'rtl');\n      return () => document.documentElement.removeAttribute('dir');\n    }\n  }, [rtl]);\n\n  return (\n    <Direction.Provider dir={rtl ? 'rtl' : 'ltr'}>\n      <div style={{ marginBottom: 8, display: 'grid', gridAutoFlow: 'row', gap: 4 }}>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={rtl}\n            onChange={(event) => setRtl(event.currentTarget.checked)}\n          />\n          Right-to-left\n        </label>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={animated}\n            onChange={(event) => setAnimated(event.currentTarget.checked)}\n          />\n          Animated\n        </label>\n      </div>\n      <MenuWithAnchor>\n        <Menu.Item className={styles.item} onSelect={() => window.alert('undo')}>\n          Undo\n        </Menu.Item>\n        <Submenu open={open1} onOpenChange={setOpen1} animated={animated}>\n          <Menu.Item className={styles.item} disabled>\n            Disabled\n          </Menu.Item>\n          <Menu.Item className={styles.item} onSelect={() => window.alert('one')}>\n            One\n          </Menu.Item>\n          <Submenu open={open2} onOpenChange={setOpen2} animated={animated}>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('one')}>\n              One\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('two')}>\n              Two\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('three')}>\n              Three\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('four')}>\n              Four\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('five')}>\n              Five\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('six')}>\n              Six\n            </Menu.Item>\n          </Submenu>\n          <Submenu heading=\"Sub Menu\" open={open3} onOpenChange={setOpen3} animated={animated}>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('one')}>\n              One\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('two')}>\n              Two\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('three')}>\n              Three\n            </Menu.Item>\n          </Submenu>\n          <Menu.Item className={styles.item} onSelect={() => window.alert('two')}>\n            Two\n          </Menu.Item>\n          <Submenu open={open4} onOpenChange={setOpen4} animated={animated} disabled>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('one')}>\n              One\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('two')}>\n              Two\n            </Menu.Item>\n            <Menu.Item className={styles.item} onSelect={() => window.alert('three')}>\n              Three\n            </Menu.Item>\n          </Submenu>\n          <Menu.Item className={styles.item} onSelect={() => window.alert('three')}>\n            Three\n          </Menu.Item>\n        </Submenu>\n\n        <Menu.Separator className={styles.separator} />\n        <Menu.Item className={styles.item} disabled onSelect={() => window.alert('cut')}>\n          Cut\n        </Menu.Item>\n        <Menu.Item className={styles.item} onSelect={() => window.alert('copy')}>\n          Copy\n        </Menu.Item>\n        <Menu.Item className={styles.item} onSelect={() => window.alert('paste')}>\n          Paste\n        </Menu.Item>\n      </MenuWithAnchor>\n    </Direction.Provider>\n  );\n};\n\nexport const WithLabels = () => (\n  <MenuWithAnchor>\n    {foodGroups.map((foodGroup, index) => (\n      <Menu.Group key={index}>\n        {foodGroup.label && (\n          <Menu.Label className={styles.label} key={foodGroup.label}>\n            {foodGroup.label}\n          </Menu.Label>\n        )}\n        {foodGroup.foods.map((food) => (\n          <Menu.Item\n            key={food.value}\n            className={styles.item}\n            disabled={food.disabled}\n            onSelect={() => window.alert(food.label)}\n          >\n            {food.label}\n          </Menu.Item>\n        ))}\n        {index < foodGroups.length - 1 && <Menu.Separator className={styles.separator} />}\n      </Menu.Group>\n    ))}\n  </MenuWithAnchor>\n);\n\nconst suits = [\n  { emoji: '♥️', label: 'Hearts' },\n  { emoji: '♠️', label: 'Spades' },\n  { emoji: '♦️', label: 'Diamonds' },\n  { emoji: '♣️', label: 'Clubs' },\n];\n\nexport const Typeahead = () => (\n  <>\n    <h1>Testing ground for typeahead behaviour</h1>\n\n    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 100 }}>\n      <div>\n        <h2>Text labels</h2>\n        <div style={{ marginBottom: 20 }}>\n          <p>\n            For comparison\n            <br />\n            try the closed select below\n          </p>\n          <select>\n            {foodGroups.map((foodGroup, index) => (\n              <React.Fragment key={index}>\n                {foodGroup.foods.map((food) => (\n                  <option key={food.value} value={food.value} disabled={food.disabled}>\n                    {food.label}\n                  </option>\n                ))}\n              </React.Fragment>\n            ))}\n          </select>\n        </div>\n        <WithLabels />\n      </div>\n\n      <div>\n        <h2>Complex children</h2>\n        <p>(relying on `.textContent` — default)</p>\n        <MenuWithAnchor>\n          {suits.map((suit) => (\n            <Menu.Item key={suit.emoji} className={styles.item}>\n              {suit.label}\n              <span role=\"img\" aria-label={suit.label}>\n                {suit.emoji}\n              </span>\n            </Menu.Item>\n          ))}\n        </MenuWithAnchor>\n      </div>\n\n      <div>\n        <h2>Complex children</h2>\n        <p>(with explicit `textValue` prop)</p>\n        <MenuWithAnchor>\n          {suits.map((suit) => (\n            <Menu.Item key={suit.emoji} className={styles.item} textValue={suit.label}>\n              <span role=\"img\" aria-label={suit.label}>\n                {suit.emoji}\n              </span>\n              {suit.label}\n            </Menu.Item>\n          ))}\n        </MenuWithAnchor>\n      </div>\n    </div>\n  </>\n);\n\nexport const CheckboxItems = () => {\n  const options = ['Crows', 'Ravens', 'Magpies', 'Jackdaws'];\n\n  const [selection, setSelection] = React.useState<string[]>([]);\n\n  const handleSelectAll = () => {\n    setSelection((currentSelection) => (currentSelection.length === options.length ? [] : options));\n  };\n\n  return (\n    <MenuWithAnchor>\n      <Menu.CheckboxItem\n        className={styles.item}\n        checked={\n          selection.length === options.length ? true : selection.length ? 'indeterminate' : false\n        }\n        onCheckedChange={handleSelectAll}\n      >\n        Select all\n        <Menu.ItemIndicator>\n          {selection.length === options.length ? <TickIcon /> : '—'}\n        </Menu.ItemIndicator>\n      </Menu.CheckboxItem>\n      <Menu.Separator className={styles.separator} />\n      {options.map((option) => (\n        <Menu.CheckboxItem\n          key={option}\n          className={styles.item}\n          checked={selection.includes(option)}\n          onCheckedChange={() =>\n            setSelection((current) =>\n              current.includes(option)\n                ? current.filter((el) => el !== option)\n                : current.concat(option),\n            )\n          }\n        >\n          {option}\n          <Menu.ItemIndicator>\n            <TickIcon />\n          </Menu.ItemIndicator>\n        </Menu.CheckboxItem>\n      ))}\n    </MenuWithAnchor>\n  );\n};\n\nexport const RadioItems = () => {\n  const files = ['README.md', 'index.js', 'page.css'];\n  const [file, setFile] = React.useState(files[1]);\n\n  return (\n    <MenuWithAnchor>\n      <Menu.Item className={styles.item} onSelect={() => window.alert('minimize')}>\n        Minimize window\n      </Menu.Item>\n      <Menu.Item className={styles.item} onSelect={() => window.alert('zoom')}>\n        Zoom\n      </Menu.Item>\n      <Menu.Item className={styles.item} onSelect={() => window.alert('smaller')}>\n        Smaller\n      </Menu.Item>\n      <Menu.Separator className={styles.separator} />\n      <Menu.RadioGroup value={file} onValueChange={setFile}>\n        {files.map((file) => (\n          <Menu.RadioItem key={file} className={styles.item} value={file}>\n            {file}\n            <Menu.ItemIndicator>\n              <TickIcon />\n            </Menu.ItemIndicator>\n          </Menu.RadioItem>\n        ))}\n      </Menu.RadioGroup>\n    </MenuWithAnchor>\n  );\n};\n\nexport const Animated = () => {\n  const files = ['README.md', 'index.js', 'page.css'];\n  const [file, setFile] = React.useState(files[1]);\n  const [open, setOpen] = React.useState(true);\n  const checkboxItems = [\n    { label: 'Bold', state: React.useState(false) },\n    { label: 'Italic', state: React.useState(true) },\n    { label: 'Underline', state: React.useState(false) },\n    { label: 'Strikethrough', state: React.useState(false), disabled: true },\n  ];\n\n  return (\n    <>\n      <label>\n        <input type=\"checkbox\" checked={open} onChange={(event) => setOpen(event.target.checked)} />{' '}\n        open\n      </label>\n      <br />\n      <br />\n      <MenuWithAnchor className={styles.animatedContent} open={open}>\n        {checkboxItems.map(({ label, state: [checked, setChecked], disabled }) => (\n          <Menu.CheckboxItem\n            key={label}\n            className={styles.item}\n            checked={checked}\n            onCheckedChange={setChecked}\n            disabled={disabled}\n          >\n            {label}\n            <Menu.ItemIndicator className={styles.animatedItemIndicator}>\n              <TickIcon />\n            </Menu.ItemIndicator>\n          </Menu.CheckboxItem>\n        ))}\n        <Menu.RadioGroup value={file} onValueChange={setFile}>\n          {files.map((file) => (\n            <Menu.RadioItem key={file} className={styles.item} value={file}>\n              {file}\n              <Menu.ItemIndicator className={styles.animatedItemIndicator}>\n                <TickIcon />\n              </Menu.ItemIndicator>\n            </Menu.RadioItem>\n          ))}\n        </Menu.RadioGroup>\n      </MenuWithAnchor>\n    </>\n  );\n};\n\ntype MenuProps = Omit<\n  React.ComponentProps<typeof Menu.Root> & React.ComponentProps<typeof Menu.Content>,\n  'trapFocus' | 'onCloseAutoFocus' | 'disableOutsidePointerEvents' | 'disableOutsideScroll'\n>;\n\nconst MenuWithAnchor: React.FC<MenuProps> = (props) => {\n  const { open = true, children, ...contentProps } = props;\n  return (\n    <Menu.Root open={open} onOpenChange={() => {}} modal={false}>\n      {/* inline-block allows anchor to move when rtl changes on document */}\n      <Menu.Anchor style={{ display: 'inline-block' }} />\n      <Menu.Portal>\n        <Menu.Content\n          className={styles.content}\n          onCloseAutoFocus={(event) => event.preventDefault()}\n          align=\"start\"\n          {...contentProps}\n        >\n          {children}\n        </Menu.Content>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n};\n\nconst Submenu: React.FC<MenuProps & { animated: boolean; disabled?: boolean; heading?: string }> = (\n  props,\n) => {\n  const {\n    heading = 'Submenu',\n    open = true,\n    onOpenChange,\n    children,\n    animated,\n    disabled,\n    ...contentProps\n  } = props;\n  return (\n    <Menu.Sub open={open} onOpenChange={onOpenChange}>\n      <Menu.SubTrigger className={[styles.item, styles.subTrigger].join(' ')} disabled={disabled}>\n        {heading} →\n      </Menu.SubTrigger>\n      <Menu.Portal>\n        <Menu.SubContent\n          className={[animated && styles.animatedContent, styles.content].filter(Boolean).join(' ')}\n          {...contentProps}\n        >\n          {children}\n        </Menu.SubContent>\n      </Menu.Portal>\n    </Menu.Sub>\n  );\n};\n\nconst TickIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    width=\"12\"\n    height=\"12\"\n    fill=\"none\"\n    stroke=\"currentcolor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth=\"3\"\n  >\n    <path d=\"M2 20 L12 28 30 4\" />\n  </svg>\n);\n"
  },
  {
    "path": "apps/storybook/stories/menubar.stories.module.css",
    "content": ".root {\n  border: 1px solid var(--gray-4);\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.trigger {\n  padding: 6px 16px;\n  border: 0;\n  background-color: transparent;\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  border-radius: 4px;\n  outline: none;\n  &[data-highlighted] {\n    background-color: var(--gray-4);\n  }\n  &[data-state='open'] {\n    background-color: var(--gray-12);\n    color: var(--gray-1);\n  }\n}\n\n.content {\n  display: inline-block;\n  box-sizing: border-box;\n  min-width: 130px;\n  background-color: var(--color-white);\n  border: 1px solid var(--color-gray100);\n  border-radius: 6px;\n  padding: 5px;\n  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  &:focus-within {\n    border-color: var(--color-black);\n  }\n}\n\n.label,\n.item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n  height: 25px;\n  padding: 0 10px;\n  color: var(--color-black);\n  border-radius: 3px;\n}\n\n.label {\n  color: var(--color-gray100);\n}\n\n.item {\n  outline: none;\n\n  &[data-highlighted] {\n    background-color: var(--color-black);\n    color: var(--color-white);\n  }\n\n  &[data-disabled] {\n    color: var(--color-gray100);\n  }\n}\n\n.subTrigger {\n  &:not([data-highlighted])[data-state='open'] {\n    background-color: var(--color-gray100);\n    color: var(--color-black);\n  }\n}\n\n.separator {\n  height: 1;\n  margin: 5px 10px;\n  background-color: var(--color-gray100);\n}\n\n@keyframes menu-animateIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes menu-animateOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n}\n\n.animatedContent {\n  &[data-state='open'] {\n    animation: menu-animateIn 300ms ease;\n  }\n  &[data-state='closed'] {\n    animation: menu-animateOut 300ms ease;\n  }\n}\n\n.animatedItemIndicator {\n  &[data-state='checked'] {\n    animation: menu-animateIn 300ms ease;\n  }\n  &[data-state='unchecked'] {\n    animation: menu-animateOut 300ms ease;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/menubar.stories.tsx",
    "content": "import * as React from 'react';\nimport { Menubar } from 'radix-ui';\nimport { foodGroups } from '@repo/test-data/foods';\nimport styles from './menubar.stories.module.css';\n\nconst subTriggerClass = [styles.item, styles.subTrigger].join(' ');\n\nexport default { title: 'Components/Menubar' };\n\nexport const Styled = () => {\n  const [loop, setLoop] = React.useState(false);\n  const [rtl, setRtl] = React.useState(false);\n  const dir = rtl ? 'rtl' : 'ltr';\n  const checkOptions = [\n    'Always Show Bookmarks Bar',\n    'Always Show Toolbar in Fullscreen',\n    'Always Show Full URLs',\n  ];\n  const [checkedSelection, setCheckedSelection] = React.useState([checkOptions[1]!]);\n\n  const radioOptions = ['Andy', 'Benoît', 'Colm', 'Jenna', 'Pedro'];\n  const [radioSelection, setRadioSelection] = React.useState(radioOptions[1]);\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        flexDirection: 'column',\n        paddingTop: 50,\n      }}\n    >\n      <div style={{ display: 'flex', gap: 25, marginBottom: 20 }}>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={rtl}\n            onChange={(event) => setRtl(event.currentTarget.checked)}\n          />\n          Right-to-left\n        </label>\n\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={loop}\n            onChange={(event) => setLoop(event.currentTarget.checked)}\n          />\n          Loop\n        </label>\n      </div>\n\n      <div dir={dir}>\n        <Menubar.Root className={styles.root} loop={loop} dir={dir}>\n          <Menubar.Menu>\n            <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>\n            <Menubar.Portal>\n              <Menubar.Content className={styles.content} sideOffset={2}>\n                <Menubar.Item className={styles.item}>New Tab</Menubar.Item>\n                <Menubar.Item className={styles.item}>New Window</Menubar.Item>\n                <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Sub>\n                  <Menubar.SubTrigger className={subTriggerClass}>\n                    Share <span>→</span>\n                  </Menubar.SubTrigger>\n                  <Menubar.Portal>\n                    <Menubar.SubContent className={styles.content} alignOffset={-6}>\n                      <Menubar.Item className={styles.item}>Email Link</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Messages</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Airdrop</Menubar.Item>\n                    </Menubar.SubContent>\n                  </Menubar.Portal>\n                </Menubar.Sub>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Item className={styles.item}>Print…</Menubar.Item>\n              </Menubar.Content>\n            </Menubar.Portal>\n          </Menubar.Menu>\n\n          <Menubar.Menu>\n            <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n            <Menubar.Portal>\n              <Menubar.Content className={styles.content} sideOffset={2}>\n                <Menubar.Item className={styles.item}>Undo</Menubar.Item>\n                <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Sub>\n                  <Menubar.SubTrigger className={subTriggerClass}>\n                    Find <span>→</span>\n                  </Menubar.SubTrigger>\n\n                  <Menubar.Portal>\n                    <Menubar.SubContent className={styles.content} alignOffset={-6}>\n                      <Menubar.Item className={styles.item}>Search the web…</Menubar.Item>\n                      <Menubar.Separator className={styles.separator} />\n                      <Menubar.Item className={styles.item}>Find…</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Find Next</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Find Previous</Menubar.Item>\n                      <Menubar.Sub>\n                        <Menubar.SubTrigger className={subTriggerClass}>\n                          Advanced <span>→</span>\n                        </Menubar.SubTrigger>\n\n                        <Menubar.Portal>\n                          <Menubar.SubContent className={styles.content} alignOffset={-6}>\n                            <Menubar.Item className={styles.item}>Regex</Menubar.Item>\n                            <Menubar.Item className={styles.item}>Replace</Menubar.Item>\n                          </Menubar.SubContent>\n                        </Menubar.Portal>\n                      </Menubar.Sub>\n                    </Menubar.SubContent>\n                  </Menubar.Portal>\n                </Menubar.Sub>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n                <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n                <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n              </Menubar.Content>\n            </Menubar.Portal>\n          </Menubar.Menu>\n\n          <Menubar.Menu>\n            <Menubar.Trigger className={styles.trigger}>View</Menubar.Trigger>\n            <Menubar.Portal>\n              <Menubar.Content className={styles.content} sideOffset={2}>\n                {checkOptions.map((option) => (\n                  <Menubar.CheckboxItem\n                    key={option}\n                    className={styles.item}\n                    checked={checkedSelection.includes(option)}\n                    onCheckedChange={() =>\n                      setCheckedSelection((current) =>\n                        current.includes(option)\n                          ? current.filter((el) => el !== option)\n                          : current.concat(option),\n                      )\n                    }\n                  >\n                    {option}\n                    <Menubar.ItemIndicator style={{ marginLeft: 10 }}>\n                      <TickIcon />\n                    </Menubar.ItemIndicator>\n                  </Menubar.CheckboxItem>\n                ))}\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Item className={styles.item}>Reload</Menubar.Item>\n                <Menubar.Item className={styles.item}>Force Reload</Menubar.Item>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Item className={styles.item}>Toggle Fullscreen</Menubar.Item>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Item className={styles.item}>Hide Sidebar</Menubar.Item>\n              </Menubar.Content>\n            </Menubar.Portal>\n          </Menubar.Menu>\n\n          <Menubar.Menu>\n            <Menubar.Trigger className={styles.trigger}>Profiles</Menubar.Trigger>\n            <Menubar.Portal>\n              <Menubar.Content className={styles.content} sideOffset={2}>\n                <Menubar.RadioGroup value={radioSelection} onValueChange={setRadioSelection}>\n                  {radioOptions.map((option) => (\n                    <Menubar.RadioItem key={option} className={styles.item} value={option}>\n                      {option}\n                      <Menubar.ItemIndicator style={{ marginLeft: 10 }}>\n                        <TickIcon />\n                      </Menubar.ItemIndicator>\n                    </Menubar.RadioItem>\n                  ))}\n                </Menubar.RadioGroup>\n              </Menubar.Content>\n            </Menubar.Portal>\n          </Menubar.Menu>\n\n          <Menubar.Menu>\n            <Menubar.Trigger className={styles.trigger}>History</Menubar.Trigger>\n            <Menubar.Portal>\n              <Menubar.Content className={styles.content} sideOffset={2}>\n                <Menubar.Label className={styles.label}>Work</Menubar.Label>\n                <Menubar.Item className={styles.item}>Radix</Menubar.Item>\n                <Menubar.Item className={styles.item}>Github</Menubar.Item>\n                <Menubar.Item className={styles.item}>WorkOS</Menubar.Item>\n                <Menubar.Label className={styles.label}>Community</Menubar.Label>\n                <Menubar.Item className={styles.item}>Twitter</Menubar.Item>\n                <Menubar.Item className={styles.item}>Discord</Menubar.Item>\n                <Menubar.Item className={styles.item}>Slack</Menubar.Item>\n              </Menubar.Content>\n            </Menubar.Portal>\n          </Menubar.Menu>\n        </Menubar.Root>\n      </div>\n    </div>\n  );\n};\n\nexport const Cypress = () => {\n  const [loop, setLoop] = React.useState(false);\n  const [rtl, setRtl] = React.useState(false);\n  const [portalled, setPortalled] = React.useState(false);\n\n  const dir = rtl ? 'rtl' : 'ltr';\n  const Portal = portalled ? Menubar.Portal : React.Fragment;\n\n  return (\n    <div\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        flexDirection: 'column',\n        paddingTop: 50,\n      }}\n    >\n      <div style={{ display: 'flex', gap: 25, marginBottom: 20 }}>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={rtl}\n            onChange={(event) => setRtl(event.currentTarget.checked)}\n          />\n          Right-to-left\n        </label>\n\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={loop}\n            onChange={(event) => setLoop(event.currentTarget.checked)}\n          />\n          Loop\n        </label>\n\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={portalled}\n            onChange={(event) => setPortalled(event.currentTarget.checked)}\n          />\n          Portalled\n        </label>\n      </div>\n      <div dir={dir}>\n        <Menubar.Root className={styles.root} loop={loop} dir={dir}>\n          <Menubar.Menu>\n            <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>\n            <Portal>\n              <Menubar.Content className={styles.content} sideOffset={2}>\n                <Menubar.Item className={styles.item}>New Tab</Menubar.Item>\n                <Menubar.Item className={styles.item}>New Window</Menubar.Item>\n                <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Sub>\n                  <Menubar.SubTrigger className={subTriggerClass}>\n                    Share <span>→</span>\n                  </Menubar.SubTrigger>\n                  <Menubar.SubContent className={styles.content} alignOffset={-6}>\n                    <Menubar.Item className={styles.item}>Email Link</Menubar.Item>\n                    <Menubar.Item className={styles.item}>Messages</Menubar.Item>\n                    <Menubar.Item className={styles.item}>Airdrop</Menubar.Item>\n                  </Menubar.SubContent>\n                </Menubar.Sub>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Item className={styles.item}>Print…</Menubar.Item>\n              </Menubar.Content>\n            </Portal>\n          </Menubar.Menu>\n\n          <Menubar.Menu>\n            <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n            <Portal>\n              <Menubar.Content className={styles.content} sideOffset={2}>\n                <Menubar.Item className={styles.item} disabled>\n                  Undo\n                </Menubar.Item>\n                <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Sub>\n                  <Menubar.SubTrigger className={subTriggerClass}>\n                    Find <span>→</span>\n                  </Menubar.SubTrigger>\n                  <Portal>\n                    <Menubar.SubContent className={styles.content} alignOffset={-6}>\n                      <Menubar.Item className={styles.item}>Search the web…</Menubar.Item>\n                      <Menubar.Separator className={styles.separator} />\n                      <Menubar.Item className={styles.item}>Find…</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Find Next</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Find Previous</Menubar.Item>\n                      <Menubar.Sub>\n                        <Menubar.SubTrigger className={subTriggerClass}>\n                          Advanced <span>→</span>\n                        </Menubar.SubTrigger>\n\n                        <Portal>\n                          <Menubar.SubContent className={styles.content} alignOffset={-6}>\n                            <Menubar.Item className={styles.item}>Regex</Menubar.Item>\n                            <Menubar.Item className={styles.item}>Replace</Menubar.Item>\n                          </Menubar.SubContent>\n                        </Portal>\n                      </Menubar.Sub>\n                    </Menubar.SubContent>\n                  </Portal>\n                </Menubar.Sub>\n\n                <Menubar.Sub>\n                  <Menubar.SubTrigger className={subTriggerClass} disabled>\n                    Speech <span>→</span>\n                  </Menubar.SubTrigger>\n                  <Portal>\n                    <Menubar.SubContent className={styles.content} alignOffset={-6}>\n                      <Menubar.Item className={styles.item}>Start Speaking</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Stop Speaking</Menubar.Item>\n                    </Menubar.SubContent>\n                  </Portal>\n                </Menubar.Sub>\n\n                <Menubar.Sub>\n                  <Menubar.SubTrigger className={subTriggerClass}>\n                    Substitutions <span>→</span>\n                  </Menubar.SubTrigger>\n                  <Portal>\n                    <Menubar.SubContent className={styles.content} alignOffset={-6}>\n                      <Menubar.Item className={styles.item}>Smart Quotes</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Smart Dashes</Menubar.Item>\n                    </Menubar.SubContent>\n                  </Portal>\n                </Menubar.Sub>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n                <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n                <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n              </Menubar.Content>\n            </Portal>\n          </Menubar.Menu>\n\n          <Menubar.Menu>\n            <Menubar.Trigger className={styles.trigger}>History</Menubar.Trigger>\n            <Portal>\n              <Menubar.Content className={styles.content} sideOffset={2}>\n                <Menubar.Item className={styles.item}>Radix</Menubar.Item>\n                <Menubar.Item className={styles.item}>Github</Menubar.Item>\n                <Menubar.Item className={styles.item}>WorkOS</Menubar.Item>\n              </Menubar.Content>\n            </Portal>\n          </Menubar.Menu>\n        </Menubar.Root>\n      </div>\n    </div>\n  );\n};\n\nexport const Chromatic = () => {\n  const checkboxItems = [\n    { label: 'Bold', state: React.useState(false) },\n    { label: 'Italic', state: React.useState(true) },\n    { label: 'Underline', state: React.useState(false) },\n    { label: 'Strikethrough', state: React.useState(false), disabled: true },\n  ];\n  const files = ['README.md', 'index.js', 'page.css'];\n  const [file, setFile] = React.useState(files[1]);\n\n  return (\n    <div style={{ padding: 200, paddingTop: 50, paddingBottom: 800 }}>\n      <h1>Uncontrolled</h1>\n      <h2>Closed</h2>\n      <Menubar.Root className={styles.root}>\n        <Menubar.Menu>\n          <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item}>New Tab</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Window</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n\n              <Menubar.Item className={styles.item}>Print…</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n\n        <Menubar.Menu>\n          <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item} disabled>\n                Undo\n              </Menubar.Item>\n              <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n              <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n              <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n      </Menubar.Root>\n\n      <h2>Open</h2>\n      <Menubar.Root defaultValue=\"file\" className={styles.root}>\n        <Menubar.Menu value=\"file\">\n          <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content\n              className={styles.content}\n              onFocusOutside={(event) => event.preventDefault()}\n              avoidCollisions={false}\n              sideOffset={2}\n            >\n              <Menubar.Item className={styles.item}>New Tab</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Window</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n\n              <Menubar.Item className={styles.item}>Print…</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n\n        <Menubar.Menu value=\"edit\">\n          <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item} disabled>\n                Undo\n              </Menubar.Item>\n              <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n              <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n              <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n      </Menubar.Root>\n\n      <h1 style={{ marginTop: 180 }}>Controlled</h1>\n      <h2>Closed</h2>\n      <Menubar.Root value=\"\" className={styles.root}>\n        <Menubar.Menu value=\"file\">\n          <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item}>New Tab</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Window</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n\n              <Menubar.Item className={styles.item}>Print…</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n\n        <Menubar.Menu value=\"edit\">\n          <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item} disabled>\n                Undo\n              </Menubar.Item>\n              <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n              <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n              <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n      </Menubar.Root>\n\n      <h2>Open</h2>\n      <Menubar.Root value=\"file\" className={styles.root}>\n        <Menubar.Menu value=\"file\">\n          <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item}>New Tab</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Window</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n\n              <Menubar.Item className={styles.item}>Print…</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n\n        <Menubar.Menu value=\"edit\">\n          <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item} disabled>\n                Undo\n              </Menubar.Item>\n              <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n              <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n              <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n      </Menubar.Root>\n\n      <h1 style={{ marginTop: 200 }}>Submenus</h1>\n      <Menubar.Root value=\"edit\" className={styles.root}>\n        <Menubar.Menu value=\"file\">\n          <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item}>New Tab</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Window</Menubar.Item>\n              <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n\n              <Menubar.Item className={styles.item}>Print…</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n\n        <Menubar.Menu value=\"edit\">\n          <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item} disabled>\n                Undo\n              </Menubar.Item>\n              <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.Sub open>\n                <Menubar.SubTrigger className={subTriggerClass}>\n                  Find <span>→</span>\n                </Menubar.SubTrigger>\n                <Menubar.Portal>\n                  <Menubar.SubContent\n                    className={styles.content}\n                    sideOffset={10}\n                    alignOffset={-6}\n                    avoidCollisions={false}\n                  >\n                    <Menubar.Item className={styles.item}>Search the web…</Menubar.Item>\n                    <Menubar.Separator className={styles.separator} />\n                    <Menubar.Item className={styles.item}>Find…</Menubar.Item>\n                    <Menubar.Item className={styles.item}>Find Next</Menubar.Item>\n                    <Menubar.Item className={styles.item}>Find Previous</Menubar.Item>\n                    <Menubar.Sub open>\n                      <Menubar.SubTrigger className={subTriggerClass}>\n                        Advanced <span>→</span>\n                      </Menubar.SubTrigger>\n\n                      <Menubar.Portal>\n                        <Menubar.SubContent\n                          className={styles.content}\n                          sideOffset={10}\n                          alignOffset={-6}\n                          avoidCollisions={false}\n                        >\n                          <Menubar.Item className={styles.item}>Regex</Menubar.Item>\n                          <Menubar.Item className={styles.item}>Replace</Menubar.Item>\n                          <Menubar.Arrow />\n                        </Menubar.SubContent>\n                      </Menubar.Portal>\n                    </Menubar.Sub>\n                    <Menubar.Arrow />\n                  </Menubar.SubContent>\n                </Menubar.Portal>\n              </Menubar.Sub>\n\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n              <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n              <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n      </Menubar.Root>\n\n      <h2 style={{ marginTop: 250 }}>RTL</h2>\n      <div dir=\"rtl\">\n        <Menubar.Root value=\"edit\" className={styles.root} dir=\"rtl\">\n          <Menubar.Menu value=\"file\">\n            <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>\n            <Menubar.Portal>\n              <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n                <Menubar.Item className={styles.item}>New Tab</Menubar.Item>\n                <Menubar.Item className={styles.item}>New Window</Menubar.Item>\n                <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>\n                <Menubar.Separator className={styles.separator} />\n\n                <Menubar.Item className={styles.item}>Print…</Menubar.Item>\n              </Menubar.Content>\n            </Menubar.Portal>\n          </Menubar.Menu>\n\n          <Menubar.Menu value=\"edit\">\n            <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n            <Menubar.Portal>\n              <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n                <Menubar.Item className={styles.item} disabled>\n                  Undo\n                </Menubar.Item>\n                <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Sub open>\n                  <Menubar.SubTrigger className={subTriggerClass}>\n                    Find <span>→</span>\n                  </Menubar.SubTrigger>\n                  <Menubar.Portal>\n                    <Menubar.SubContent\n                      className={styles.content}\n                      sideOffset={10}\n                      alignOffset={-6}\n                      avoidCollisions={false}\n                    >\n                      <Menubar.Item className={styles.item}>Search the web…</Menubar.Item>\n                      <Menubar.Separator className={styles.separator} />\n                      <Menubar.Item className={styles.item}>Find…</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Find Next</Menubar.Item>\n                      <Menubar.Item className={styles.item}>Find Previous</Menubar.Item>\n                      <Menubar.Sub open>\n                        <Menubar.SubTrigger className={subTriggerClass}>\n                          Advanced <span>→</span>\n                        </Menubar.SubTrigger>\n\n                        <Menubar.Portal>\n                          <Menubar.SubContent\n                            className={styles.content}\n                            sideOffset={10}\n                            alignOffset={-6}\n                            avoidCollisions={false}\n                          >\n                            <Menubar.Item className={styles.item}>Regex</Menubar.Item>\n                            <Menubar.Item className={styles.item}>Replace</Menubar.Item>\n                            <Menubar.Arrow />\n                          </Menubar.SubContent>\n                        </Menubar.Portal>\n                      </Menubar.Sub>\n                      <Menubar.Arrow />\n                    </Menubar.SubContent>\n                  </Menubar.Portal>\n                </Menubar.Sub>\n\n                <Menubar.Separator className={styles.separator} />\n                <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n                <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n                <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n              </Menubar.Content>\n            </Menubar.Portal>\n          </Menubar.Menu>\n        </Menubar.Root>\n      </div>\n\n      <h2 style={{ marginTop: 250 }}>With labels</h2>\n      <Menubar.Root value=\"food\" className={styles.root}>\n        <Menubar.Menu value=\"food\">\n          <Menubar.Trigger className={styles.trigger}>Food</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              {foodGroups.map((foodGroup, index) => (\n                <Menubar.Group key={index}>\n                  {foodGroup.label && (\n                    <Menubar.Label className={styles.label} key={foodGroup.label}>\n                      {foodGroup.label}\n                    </Menubar.Label>\n                  )}\n                  {foodGroup.foods.map((food) => (\n                    <Menubar.Item\n                      key={food.value}\n                      className={styles.item}\n                      disabled={food.disabled}\n                      onSelect={() => console.log(food.label)}\n                    >\n                      {food.label}\n                    </Menubar.Item>\n                  ))}\n                  {index < foodGroups.length - 1 && (\n                    <Menubar.Separator className={styles.separator} />\n                  )}\n                </Menubar.Group>\n              ))}\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n\n        <Menubar.Menu value=\"edit\">\n          <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item} disabled>\n                Undo\n              </Menubar.Item>\n              <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n              <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n              <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n      </Menubar.Root>\n\n      <h2 style={{ marginTop: 600 }}>With checkbox and radio items</h2>\n      <Menubar.Root value=\"items\" className={styles.root}>\n        <Menubar.Menu value=\"items\">\n          <Menubar.Trigger className={styles.trigger}>Items</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item} onSelect={() => console.log('show')}>\n                Show fonts\n              </Menubar.Item>\n              <Menubar.Item className={styles.item} onSelect={() => console.log('bigger')}>\n                Bigger\n              </Menubar.Item>\n              <Menubar.Item className={styles.item} onSelect={() => console.log('smaller')}>\n                Smaller\n              </Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n              {checkboxItems.map(({ label, state: [checked, setChecked], disabled }) => (\n                <Menubar.CheckboxItem\n                  key={label}\n                  className={styles.item}\n                  checked={checked}\n                  onCheckedChange={setChecked}\n                  disabled={disabled}\n                >\n                  {label}\n                  <Menubar.ItemIndicator>\n                    <TickIcon />\n                  </Menubar.ItemIndicator>\n                </Menubar.CheckboxItem>\n              ))}\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.RadioGroup value={file} onValueChange={setFile}>\n                {files.map((file) => (\n                  <Menubar.RadioItem key={file} className={styles.item} value={file}>\n                    {file}\n                    <Menubar.ItemIndicator>\n                      <TickIcon />\n                    </Menubar.ItemIndicator>\n                  </Menubar.RadioItem>\n                ))}\n              </Menubar.RadioGroup>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n\n        <Menubar.Menu value=\"edit\">\n          <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>\n          <Menubar.Portal>\n            <Menubar.Content className={styles.content} avoidCollisions={false} sideOffset={2}>\n              <Menubar.Item className={styles.item} disabled>\n                Undo\n              </Menubar.Item>\n              <Menubar.Item className={styles.item}>Redo</Menubar.Item>\n              <Menubar.Separator className={styles.separator} />\n              <Menubar.Item className={styles.item}>Cut</Menubar.Item>\n              <Menubar.Item className={styles.item}>Copy</Menubar.Item>\n              <Menubar.Item className={styles.item}>Paste</Menubar.Item>\n            </Menubar.Content>\n          </Menubar.Portal>\n        </Menubar.Menu>\n      </Menubar.Root>\n    </div>\n  );\n};\nChromatic.parameters = { chromatic: { disable: false } };\n\nconst TickIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    width=\"12\"\n    height=\"12\"\n    fill=\"none\"\n    stroke=\"currentcolor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth=\"3\"\n  >\n    <path d=\"M2 20 L12 28 30 4\" />\n  </svg>\n);\n"
  },
  {
    "path": "apps/storybook/stories/navigation-menu.stories.module.css",
    "content": ".list {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.borderdList {\n  background-color: #f3f4f5;\n  border: 1px solid #d4d6d8;\n  padding: 25px;\n  border-radius: 8px;\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\n@keyframes navigationMenu-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes navigationMenu-fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes navigationMenu-scaleIn {\n  from {\n    transform: scale(0.9);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes navigationMenu-scaleOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n}\n\n@keyframes navigationMenu-enterFromRight {\n  from {\n    transform: translate3d(200px, 0, 0);\n    opacity: 0;\n  }\n  to {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n}\n\n@keyframes navigationMenu-enterFromLeft {\n  from {\n    transform: translate3d(-200px, 0, 0);\n    opacity: 0;\n  }\n  to {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n}\n\n@keyframes navigationMenu-exitToRight {\n  from {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  to {\n    transform: translate3d(200px, 0, 0);\n    opacity: 0;\n  }\n}\n\n@keyframes navigationMenu-exitToLeft {\n  from {\n    transform: translate3d(0, 0, 0);\n    opacity: 1;\n  }\n  to {\n    transform: translate3d(-200px, 0, 0);\n    opacity: 0;\n  }\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\n.mainList {\n  all: unset;\n  list-style: none;\n  display: flex;\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n}\n\n.expandableItem {\n  position: relative;\n}\n\n.trigger,\n.link,\n.submenusSubTrigger {\n  padding: 10px 16px;\n  font-weight: bold;\n}\n\n.trigger {\n  display: flex;\n  align-items: center;\n  border: 0;\n  background: transparent;\n  font-size: inherit;\n  gap: 4px;\n\n  & > svg {\n    transition: transform 200ms ease;\n  }\n\n  &[data-state='open'] > svg {\n    transform: rotate(-180deg);\n  }\n}\n\n.link {\n  color: inherit;\n  text-decoration: none;\n  display: block;\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\n.basicContent {\n  position: absolute;\n  top: 100%;\n  width: max-content;\n  left: 0;\n  margin-top: 5px;\n  gap: 20px;\n  border-radius: 10px;\n  background-color: white;\n  padding: 20px;\n  transform-origin: top left;\n  box-shadow:\n    0 10px 100px -20px rgba(50, 50, 93, 0.25),\n    0 30px 60px -30px rgba(0, 0, 0, 0.3);\n  z-index: 1;\n\n  [dir='rtl'] & {\n    left: unset;\n    right: 0;\n    transform-origin: top right;\n  }\n\n  &[data-state='open'] {\n    animation: navigationMenu-scaleIn 250ms ease;\n  }\n  &[data-state='closed'] {\n    animation: navigationMenu-scaleOut 250ms ease;\n  }\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\n.viewportIndicator {\n  display: flex;\n  justify-content: center;\n  height: 10px;\n  bottom: -30px;\n  z-index: 1;\n  transition:\n    transform,\n    width,\n    250ms ease;\n  overflow: hidden;\n\n  &[data-state='visible'] {\n    animation: navigationMenu-fadeIn 250ms ease;\n  }\n  &[data-state='hidden'] {\n    animation: navigationMenu-fadeOut 250ms ease;\n  }\n}\n\n.viewportInnerIndicator {\n  position: relative;\n  top: 4px;\n  width: 20px;\n  height: 20px;\n  background-color: white;\n  transform: rotate(45deg);\n  border-radius: 3px;\n}\n\n.viewportViewport {\n  position: relative;\n  background-color: white;\n  transition:\n    width,\n    height,\n    300ms ease;\n  width: var(--radix-navigation-menu-viewport-width);\n  height: var(--radix-navigation-menu-viewport-height);\n  transform-origin: top center;\n  overflow: hidden;\n  margin-top: 15px;\n  border-radius: 8px;\n  box-shadow:\n    0 50px 100px -20px rgba(50, 50, 93, 0.25),\n    0 30px 60px -30px rgba(0, 0, 0, 0.3);\n  &[data-state='open'] {\n    animation: navigationMenu-scaleIn 300ms ease;\n  }\n  &[data-state='closed'] {\n    animation: navigationMenu-scaleOut 300ms ease;\n  }\n}\n\n.viewportContent {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: grid;\n  gap: 20px;\n  padding: 40px;\n\n  &[data-motion='from-start'] {\n    animation: navigationMenu-enterFromLeft 250ms ease;\n  }\n  &[data-motion='from-end'] {\n    animation: navigationMenu-enterFromRight 250ms ease;\n  }\n  &[data-motion='to-start'] {\n    animation: navigationMenu-exitToLeft 250ms ease;\n  }\n  &[data-motion='to-end'] {\n    animation: navigationMenu-exitToRight 250ms ease;\n  }\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\n.submenusRoot {\n  display: grid;\n  width: 100%;\n  max-width: 800px;\n  gap: 20px;\n\n  &[data-orientation='vertical'] {\n    grid-template-columns: 0.3fr 1fr;\n  }\n\n  &[data-orientation='horizontal'] {\n    justify-items: center;\n    margin-top: -10px;\n  }\n}\n\n.submenusViewport {\n  position: absolute;\n  left: 0;\n  top: 100%;\n  border-top: 1px solid #dcdfe3;\n  transform-origin: top center;\n  width: 100vw;\n  background-color: white;\n  height: var(--radix-navigation-menu-viewport-height);\n  transition: height 300ms ease;\n  overflow: hidden;\n  box-shadow:\n    0 50px 100px -20px rgba(50, 50, 93, 0.1),\n    0 30px 60px -30px rgba(0, 0, 0, 0.2);\n\n  &[data-state='open'] {\n    animation: navigationMenu-fadeIn 250ms ease;\n  }\n  &[data-state='closed'] {\n    animation: navigationMenu-fadeOut 250ms ease;\n  }\n}\n\n.submenusContent {\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding-top: 35px;\n  padding-bottom: 35px;\n  &[data-motion='from-start'] {\n    animation: navigationMenu-enterFromLeft 250ms ease;\n  }\n  &[data-motion='from-end'] {\n    animation: navigationMenu-enterFromRight 250ms ease;\n  }\n  &[data-motion='to-start'] {\n    animation: navigationMenu-exitToLeft 250ms ease;\n  }\n  &[data-motion='to-end'] {\n    animation: navigationMenu-exitToRight 250ms ease;\n  }\n}\n\n.submenusSubContent {\n  display: grid;\n  gap: 20px;\n  width: 100%;\n}\n\n.submenusSubViewport {\n  width: 100%;\n}\n\n.submenusSubTrigger {\n  position: relative;\n  display: flex;\n  align-items: center;\n  border: 0;\n  background: transparent;\n  font-size: inherit;\n  width: 100%;\n  border-radius: 4px;\n  &[data-state='open'] {\n    background-color: #f3f4f5;\n  }\n}\n\n.submenusSubIndicator {\n  background-color: black;\n  border-radius: 4px;\n\n  &[data-orientation='vertical'] {\n    width: 3px;\n    transition:\n      transform,\n      height,\n      250ms ease;\n    [dir='ltr'] & {\n      right: 0;\n    }\n    [dir='rtl'] {\n      left: 0;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    height: 3px;\n    bottom: 0;\n    transition:\n      transform,\n      width,\n      250ms ease;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/navigation-menu.stories.tsx",
    "content": "import * as React from 'react';\nimport { NavigationMenu, Direction } from 'radix-ui';\nimport styles from './navigation-menu.stories.module.css';\n\nexport default { title: 'Components/NavigationMenu' };\n\nexport const Basic = () => {\n  return (\n    <StoryFrame>\n      <NavigationMenu.Root>\n        <NavigationMenu.List className={styles.mainList}>\n          <NavigationMenu.Item className={styles.expandableItem}>\n            <TriggerWithIndicator>Products</TriggerWithIndicator>\n            <NavigationMenu.Content className={styles.basicContent}>\n              <LinkGroup\n                bordered={false}\n                items={[\n                  'Fusce pellentesque',\n                  'Aliquam porttitor',\n                  'Pellentesque',\n                  'Fusce pellentesque',\n                  'Aliquam porttitor',\n                  'Pellentesque',\n                ]}\n              />\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item className={styles.expandableItem}>\n            <TriggerWithIndicator>Company</TriggerWithIndicator>\n            <NavigationMenu.Content className={styles.basicContent}>\n              <LinkGroup\n                bordered={false}\n                items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n              />\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item className={styles.expandableItem}>\n            <TriggerWithIndicator disabled>Developers</TriggerWithIndicator>\n            <NavigationMenu.Content className={styles.basicContent}>\n              <LinkGroup bordered={false} items={['Aliquam porttitor', 'Pellentesque']} />\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item>\n            <NavigationMenu.Link href=\"#example\" className={styles.link}>\n              Link\n            </NavigationMenu.Link>\n          </NavigationMenu.Item>\n        </NavigationMenu.List>\n      </NavigationMenu.Root>\n    </StoryFrame>\n  );\n};\n\nexport const CustomDurations = () => {\n  return (\n    <div\n      style={{\n        minHeight: '100vh',\n        backgroundColor: '#e5e8eb',\n        paddingBottom: 150,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n      }}\n    >\n      <h1>Delay duration</h1>\n      <h2>Default (200ms)</h2>\n      <DurationNavigation />\n\n      <h2>Custom (0ms = instant open)</h2>\n      <DurationNavigation delayDuration={0} />\n\n      <h2>Custom (700ms)</h2>\n      <DurationNavigation delayDuration={700} />\n\n      <h1 style={{ marginTop: 50 }}>Skip delay duration</h1>\n      <h2>Default (300ms to move from one trigger to another)</h2>\n      <DurationNavigation />\n\n      <h2>Custom (0ms to move from one trigger to another = never skip)</h2>\n      <DurationNavigation skipDelayDuration={0} />\n\n      <h2>Custom (2000ms to move from one trigger to another)</h2>\n      <DurationNavigation delayDuration={500} skipDelayDuration={2000} />\n    </div>\n  );\n};\n\nexport const Viewport = () => {\n  return (\n    <StoryFrame>\n      <NavigationMenu.Root>\n        <NavigationMenu.List className={styles.mainList}>\n          <NavigationMenu.Item>\n            <TriggerWithIndicator>Products</TriggerWithIndicator>\n            <NavigationMenu.Content\n              className={styles.viewportContent}\n              style={{\n                gridTemplateColumns: '1fr 2fr',\n                width: 600,\n              }}\n            >\n              <LinkGroup\n                items={[\n                  'Fusce pellentesque',\n                  'Aliquam porttitor',\n                  'Pellentesque',\n                  'Fusce pellentesque',\n                  'Aliquam porttitor',\n                  'Pellentesque',\n                ]}\n              />\n\n              <LinkGroup items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']} />\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item>\n            <TriggerWithIndicator>Company</TriggerWithIndicator>\n            <NavigationMenu.Content\n              className={styles.viewportContent}\n              style={{\n                gridTemplateColumns: '1fr 1fr',\n                width: 450,\n              }}\n            >\n              <LinkGroup\n                items={[\n                  'Fusce pellentesque',\n                  'Aliquam porttitor',\n                  'Pellentesque',\n                  'Aliquam porttitor',\n                ]}\n              />\n\n              <LinkGroup items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']} />\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item>\n            <TriggerWithIndicator disabled>Developers</TriggerWithIndicator>\n            <NavigationMenu.Content\n              className={styles.viewportContent}\n              style={{\n                gridTemplateColumns: '1.6fr 1fr',\n                width: 650,\n              }}\n            >\n              <LinkGroup items={['Donec quis dui', 'Vestibulum']} />\n              <LinkGroup items={['Fusce pellentesque', 'Aliquam porttitor']} />\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item>\n            <NavigationMenu.Link href=\"#example\" className={styles.link}>\n              Link\n            </NavigationMenu.Link>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Indicator className={styles.viewportIndicator}>\n            <div className={styles.viewportInnerIndicator} />\n          </NavigationMenu.Indicator>\n        </NavigationMenu.List>\n\n        <div\n          style={{\n            position: 'absolute',\n            display: 'flex',\n            justifyContent: 'center',\n            width: '100%',\n            top: '100%',\n            left: 0,\n          }}\n        >\n          <NavigationMenu.Viewport className={styles.viewportViewport} />\n        </div>\n      </NavigationMenu.Root>\n    </StoryFrame>\n  );\n};\n\nexport const Submenus = () => {\n  return (\n    <StoryFrame>\n      <NavigationMenu.Root>\n        <NavigationMenu.List className={styles.mainList}>\n          <NavigationMenu.Item>\n            <TriggerWithIndicator>Products</TriggerWithIndicator>\n            <NavigationMenu.Content className={styles.submenusContent}>\n              <NavigationMenu.Sub className={styles.submenusRoot} defaultValue=\"extensibility\">\n                <NavigationMenu.List className={styles.mainList}>\n                  <NavigationMenu.Item value=\"extensibility\">\n                    <NavigationMenu.Trigger className={styles.submenusSubTrigger}>\n                      Extensibility\n                    </NavigationMenu.Trigger>\n\n                    <NavigationMenu.Content\n                      className={styles.submenusSubContent}\n                      style={{\n                        gridTemplateColumns: '1.5fr 1fr 1fr',\n                      }}\n                    >\n                      <LinkGroup items={['Donec quis dui', 'Vestibulum', 'Nunc dignissim']} />\n                      <LinkGroup\n                        items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n                      />\n                      <LinkGroup\n                        items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n                      />\n                    </NavigationMenu.Content>\n                  </NavigationMenu.Item>\n\n                  <NavigationMenu.Item value=\"security\">\n                    <NavigationMenu.Trigger className={styles.submenusSubTrigger}>\n                      Security\n                    </NavigationMenu.Trigger>\n                    <NavigationMenu.Content\n                      className={styles.submenusSubContent}\n                      style={{\n                        gridTemplateColumns: '1fr 1fr 1fr',\n                      }}\n                    >\n                      <LinkGroup\n                        items={[\n                          'Fusce pellentesque',\n                          'Aliquam porttitor',\n                          'Pellentesque',\n                          'Vestibulum',\n                        ]}\n                      />\n                      <LinkGroup\n                        items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n                      />\n                      <LinkGroup items={['Fusce pellentesque', 'Aliquam porttitor']} />\n                    </NavigationMenu.Content>\n                  </NavigationMenu.Item>\n\n                  <NavigationMenu.Item value=\"authentication\">\n                    <NavigationMenu.Trigger className={styles.submenusSubTrigger}>\n                      Authentication\n                    </NavigationMenu.Trigger>\n\n                    <NavigationMenu.Content\n                      className={styles.submenusSubContent}\n                      style={{\n                        gridTemplateColumns: '1.5fr 1fr 1fr',\n                      }}\n                    >\n                      <LinkGroup items={['Donec quis dui', 'Vestibulum', 'Nunc dignissim']} />\n                      <LinkGroup\n                        items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n                      />\n                      <LinkGroup\n                        items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n                      />\n                    </NavigationMenu.Content>\n                  </NavigationMenu.Item>\n\n                  <NavigationMenu.Indicator className={styles.submenusSubIndicator} />\n                </NavigationMenu.List>\n\n                <NavigationMenu.Viewport className={styles.submenusSubViewport} />\n              </NavigationMenu.Sub>\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item>\n            <TriggerWithIndicator>Company</TriggerWithIndicator>\n            <NavigationMenu.Content className={styles.submenusContent}>\n              <NavigationMenu.Sub\n                className={styles.submenusRoot}\n                orientation=\"vertical\"\n                defaultValue=\"customers\"\n              >\n                <NavigationMenu.List className={styles.mainList}>\n                  <NavigationMenu.Item value=\"customers\">\n                    <NavigationMenu.Trigger className={styles.submenusSubTrigger}>\n                      Customers\n                    </NavigationMenu.Trigger>\n\n                    <NavigationMenu.Content\n                      className={styles.submenusSubContent}\n                      style={{\n                        gridTemplateColumns: '1.5fr 1fr',\n                      }}\n                    >\n                      <LinkGroup items={['Donec quis dui', 'Vestibulum', 'Nunc dignissim']} />\n                      <LinkGroup\n                        items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n                      />\n                    </NavigationMenu.Content>\n                  </NavigationMenu.Item>\n\n                  <NavigationMenu.Item value=\"partners\">\n                    <NavigationMenu.Trigger className={styles.submenusSubTrigger}>\n                      Partners\n                    </NavigationMenu.Trigger>\n                    <NavigationMenu.Content\n                      className={styles.submenusSubContent}\n                      style={{\n                        gridTemplateColumns: '1fr 1fr',\n                      }}\n                    >\n                      <LinkGroup\n                        items={[\n                          'Fusce pellentesque',\n                          'Aliquam porttitor',\n                          'Pellentesque',\n                          'Vestibulum',\n                        ]}\n                      />\n                      <LinkGroup\n                        items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n                      />\n                    </NavigationMenu.Content>\n                  </NavigationMenu.Item>\n\n                  <NavigationMenu.Item value=\"enterprise\">\n                    <NavigationMenu.Trigger className={styles.submenusSubTrigger}>\n                      Enterprise\n                    </NavigationMenu.Trigger>\n\n                    <NavigationMenu.Content\n                      className={styles.submenusSubContent}\n                      style={{\n                        gridTemplateColumns: '1.5fr 1fr',\n                      }}\n                    >\n                      <LinkGroup items={['Donec quis dui', 'Vestibulum', 'Nunc dignissim']} />\n                      <LinkGroup\n                        items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n                      />\n                    </NavigationMenu.Content>\n                  </NavigationMenu.Item>\n\n                  <NavigationMenu.Indicator className={styles.submenusSubIndicator} />\n                </NavigationMenu.List>\n\n                <NavigationMenu.Viewport className={styles.submenusSubViewport} />\n              </NavigationMenu.Sub>\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item>\n            <TriggerWithIndicator disabled>Developers</TriggerWithIndicator>\n            <NavigationMenu.Content\n              className={styles.submenusSubContent}\n              style={{ gridTemplateColumns: '1fr 1fr' }}\n            >\n              <LinkGroup items={['Donec quis dui', 'Vestibulum']} />\n              <LinkGroup items={['Fusce pellentesque', 'Aliquam porttitor']} />\n            </NavigationMenu.Content>\n          </NavigationMenu.Item>\n\n          <NavigationMenu.Item>\n            <NavigationMenu.Link href=\"#example\" className={styles.link}>\n              Link\n            </NavigationMenu.Link>\n          </NavigationMenu.Item>\n        </NavigationMenu.List>\n\n        <NavigationMenu.Viewport className={styles.submenusViewport} />\n      </NavigationMenu.Root>\n    </StoryFrame>\n  );\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst StoryFrame: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [rtl, setRtl] = React.useState(false);\n\n  return (\n    <div style={{ height: '100vh', backgroundColor: '#e5e8eb' }}>\n      <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 20, paddingBottom: 30 }}>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={rtl}\n            onChange={(event) => setRtl(event.currentTarget.checked)}\n          />\n          Right-to-left\n        </label>\n      </div>\n      <Direction.Provider dir={rtl ? 'rtl' : 'ltr'}>\n        <div dir={rtl ? 'rtl' : 'ltr'}>\n          <div\n            style={{\n              position: 'relative',\n              display: 'flex',\n              boxSizing: 'border-box',\n              alignItems: 'center',\n              padding: '15px 20px',\n              justifyContent: 'space-between',\n              width: '100%',\n              backgroundColor: 'white',\n              boxShadow: '0 50px 100px -20px rgba(50,50,93,0.1),0 30px 60px -30px rgba(0,0,0,0.2)',\n            }}\n          >\n            <button>Logo</button>\n            {children}\n            <button>Login</button>\n          </div>\n          <div style={{ maxWidth: 800, margin: 'auto', lineHeight: 1.5, paddingTop: 25 }}>\n            <h2>Test page content</h2>\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus odio, vestibulum\n              in dictum et, <a href=\"#example\">sagittis vel nibh</a>. Fusce placerat arcu lorem, a\n              scelerisque odio fringilla sit amet. Suspendisse volutpat sed diam ut cursus. Nulla\n              facilisi. Ut at volutpat nibh. Nullam justo mi, elementum vitae ex eu,{' '}\n              <a href=\"#example\">gravida dictum metus</a>. Morbi vulputate consectetur cursus. Fusce\n              vitae nisi nunc. Suspendisse pellentesque aliquet tincidunt. Aenean molestie pulvinar\n              ipsum.\n            </p>\n\n            <button>Button</button>\n          </div>\n        </div>\n      </Direction.Provider>\n    </div>\n  );\n};\n\nconst DurationNavigation = (props: React.ComponentProps<typeof NavigationMenu.Root>) => {\n  return (\n    <NavigationMenu.Root\n      {...props}\n      style={{ backgroundColor: 'white', borderRadius: 500, padding: '2px 12px', ...props.style }}\n    >\n      <NavigationMenu.List className={styles.mainList}>\n        <NavigationMenu.Item className={styles.expandableItem}>\n          <TriggerWithIndicator>Products</TriggerWithIndicator>\n          <NavigationMenu.Content className={styles.basicContent}>\n            <LinkGroup\n              bordered={false}\n              items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n            />\n          </NavigationMenu.Content>\n        </NavigationMenu.Item>\n\n        <NavigationMenu.Item className={styles.expandableItem}>\n          <TriggerWithIndicator>Company</TriggerWithIndicator>\n          <NavigationMenu.Content className={styles.basicContent}>\n            <LinkGroup\n              bordered={false}\n              items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n            />\n          </NavigationMenu.Content>\n        </NavigationMenu.Item>\n\n        <NavigationMenu.Item className={styles.expandableItem}>\n          <TriggerWithIndicator>Developers</TriggerWithIndicator>\n          <NavigationMenu.Content className={styles.basicContent}>\n            <LinkGroup\n              bordered={false}\n              items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n            />\n          </NavigationMenu.Content>\n        </NavigationMenu.Item>\n\n        <NavigationMenu.Item className={styles.expandableItem}>\n          <TriggerWithIndicator>About</TriggerWithIndicator>\n          <NavigationMenu.Content className={styles.basicContent}>\n            <LinkGroup\n              bordered={false}\n              items={['Fusce pellentesque', 'Aliquam porttitor', 'Pellentesque']}\n            />\n          </NavigationMenu.Content>\n        </NavigationMenu.Item>\n      </NavigationMenu.List>\n    </NavigationMenu.Root>\n  );\n};\n\nconst TriggerWithIndicator: React.FC<{ children?: React.ReactNode; disabled?: boolean }> = ({\n  children,\n  disabled,\n}) => {\n  return (\n    <NavigationMenu.Trigger className={styles.trigger} disabled={disabled}>\n      {children}\n      <CaretDownIcon />\n    </NavigationMenu.Trigger>\n  );\n};\n\nconst CaretDownIcon = () => (\n  <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    ></path>\n  </svg>\n);\n\nconst LinkGroup: React.FC<{ items: string[]; bordered?: boolean }> = ({\n  items,\n  bordered = true,\n}) => {\n  return (\n    <ul className={[bordered && styles.borderdList, styles.list].filter(Boolean).join(' ')}>\n      {items.map((item, i) => (\n        <li key={i}>\n          <NavigationMenu.Link\n            href=\"#example\"\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              color: 'black',\n            }}\n          >\n            {item}\n          </NavigationMenu.Link>\n        </li>\n      ))}\n    </ul>\n  );\n};\n"
  },
  {
    "path": "apps/storybook/stories/one-time-password-field.stories.module.css",
    "content": ".viewport {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  width: 100vw;\n  justify-content: center;\n  align-items: center;\n}\n\n.form {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.selectField {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.otpRoot {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n:where(.otpRoot) input:not([type='hidden']) {\n  --border-color: #ddd;\n  --focus-ring-color: dodgerblue;\n  height: 3rem;\n  width: 2rem;\n  text-align: center;\n  font-size: 1em;\n  padding: 0;\n  box-shadow: none;\n  border: 2px solid var(--border-color);\n  border-radius: 4px;\n}\n\n:where(.otpRoot[data-state='invalid']) input:not([type='hidden']) {\n  --focus-ring-color: tomato;\n  --border-color: crimson;\n}\n\n:where(.otpRoot[data-state='valid']) input:not([type='hidden']) {\n  --focus-ring-color: limegreen;\n  --border-color: green;\n}\n\n:where(.otpRoot[data-state='valid']) input:focus {\n  outline: 2px solid var(--focus-ring-color);\n  outline-offset: 0;\n}\n\n.errorMessage {\n}\n\n.separator {\n  height: calc(100% - 8px);\n  width: 1px;\n  background-color: #ddd;\n}\n\n.output {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  font-family: monospace;\n  padding: 1rem;\n  background-color: var(--gray-4);\n  border: 1px solid var(--gray-6);\n  border-radius: 4px;\n\n  &:where([data-state='valid']) {\n    background-color: var(--green-5);\n    border-color: var(--green-6);\n  }\n\n  &:where([data-state='invalid']) {\n    background-color: var(--red-5);\n    border-color: var(--red-6);\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/one-time-password-field.stories.tsx",
    "content": "import * as React from 'react';\nimport { unstable_OneTimePasswordField as OneTimePasswordField, Separator } from 'radix-ui';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport dialogStyles from './dialog.stories.module.css';\nimport type { Meta, StoryObj } from '@storybook/react-webpack5';\nimport { userEvent, within, expect } from 'storybook/test';\nimport styles from './one-time-password-field.stories.module.css';\n\nexport default {\n  title: 'Components/OneTimePasswordField',\n} satisfies Meta<typeof OneTimePasswordField.Root>;\n\ntype Story = StoryObj<typeof OneTimePasswordField.Root>;\n\ntype FormState = { type: 'idle' } | { type: 'valid' } | { type: 'invalid'; error: string };\n\nconst VALID_CODE = '123456';\n\nconst sharedStoryProps = {\n  argTypes: {\n    placeholder: {\n      control: { type: 'text' },\n    },\n    validationType: {\n      options: ['numeric', 'alphanumeric', 'alpha', 'none'],\n      control: { type: 'select' },\n    },\n    autoFocus: {\n      control: { type: 'boolean' },\n    },\n    autoSubmit: {\n      control: { type: 'boolean' },\n    },\n  },\n} satisfies Story;\n\nexport const Uncontrolled = {\n  ...sharedStoryProps,\n  render: (args) => <UncontrolledImpl {...args} />,\n} satisfies Story;\n\nfunction UncontrolledImpl(props: OneTimePasswordField.OneTimePasswordFieldProps) {\n  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [formState, setFormState] = React.useState<FormState>({ type: 'idle' });\n\n  return (\n    <div className={styles.viewport}>\n      <form\n        className={styles.form}\n        onSubmit={(event) => {\n          const formData = new FormData(event.currentTarget);\n          const code = formData.get('code') as string;\n          event.preventDefault();\n          if (code.length === VALID_CODE.length && code !== VALID_CODE) {\n            setFormState({ type: 'invalid', error: 'Invalid code' });\n          }\n          //\n          else if (code.length !== VALID_CODE.length) {\n            setFormState({ type: 'invalid', error: 'Please fill in all fields' });\n          }\n          //\n          else if (Math.random() > 0.675) {\n            setFormState({ type: 'invalid', error: 'Server error' });\n          }\n          //\n          else {\n            setFormState({ type: 'valid' });\n            setShowSuccessMessage(true);\n          }\n        }}\n      >\n        <div className={styles.field}>\n          <OneTimePasswordField.Root\n            data-state={formState.type}\n            className={styles.otpRoot}\n            ref={rootRef}\n            {...props}\n          >\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n\n            <OneTimePasswordField.HiddenInput name=\"code\" />\n          </OneTimePasswordField.Root>\n          {formState.type === 'invalid' && <ErrorMessage>{formState.error}</ErrorMessage>}\n        </div>\n        <button type=\"reset\">Reset form</button>\n        <button>Submit</button>\n      </form>\n      <Dialog\n        open={showSuccessMessage}\n        onOpenChange={setShowSuccessMessage}\n        title=\"Password match\"\n        content=\"Success!\"\n      />\n    </div>\n  );\n}\n\nexport const Controlled = {\n  ...sharedStoryProps,\n  render: (args) => <ControlledImpl {...args} />,\n} satisfies Story;\n\nfunction ControlledImpl(props: OneTimePasswordField.OneTimePasswordFieldProps) {\n  const [error, setError] = React.useState<string | null>(null);\n  const [code, setCode] = React.useState('');\n  const [showSuccessMessage, setShowSuccessMessage] = React.useState(false);\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const VALID_CODE = '123456';\n  const isInvalid = code.length === VALID_CODE.length ? code !== VALID_CODE : false;\n  const isValid = code.length === VALID_CODE.length ? code === VALID_CODE : false;\n  return (\n    <div className={styles.viewport}>\n      <form\n        className={styles.form}\n        onSubmit={(event) => {\n          event.preventDefault();\n          if (isInvalid) {\n            setError('Invalid code');\n          }\n\n          //\n          else if (code.length !== VALID_CODE.length) {\n            setError('Please fill in all fields');\n          }\n\n          //\n          else if (Math.random() > 0.675) {\n            setError('Server error');\n          }\n\n          //\n          else {\n            setShowSuccessMessage(true);\n          }\n        }}\n      >\n        <div className={styles.field}>\n          <OneTimePasswordField.Root\n            data-state={error || isInvalid ? 'invalid' : isValid ? 'valid' : undefined}\n            className={styles.otpRoot}\n            ref={rootRef}\n            onValueChange={(value) => setCode(value)}\n            value={code}\n            {...props}\n          >\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n            <Separator.Root orientation=\"vertical\" className={styles.separator} />\n            <OneTimePasswordField.Input />\n\n            <OneTimePasswordField.HiddenInput name=\"code\" />\n          </OneTimePasswordField.Root>\n          {error && <ErrorMessage>{error}</ErrorMessage>}\n        </div>\n        <button type=\"button\" onClick={() => setCode('')}>\n          Reset state\n        </button>\n        <button type=\"reset\">Reset form</button>\n        <button>Submit</button>\n        <output\n          data-state={error || isInvalid ? 'invalid' : isValid ? 'valid' : undefined}\n          className={styles.output}\n        >\n          {code || 'code'}\n        </output>\n      </form>\n      <Dialog\n        open={showSuccessMessage}\n        onOpenChange={setShowSuccessMessage}\n        title=\"Password match\"\n        content=\"Success!\"\n      />\n    </div>\n  );\n}\n\nexport const PastedAndDeletedControlled: Story = {\n  render: (args) => <ControlledImpl {...args} />,\n  name: 'Pasted and deleted (controlled test)',\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const inputs = canvas.getAllByRole<HTMLInputElement>('textbox', {\n      hidden: false,\n    });\n\n    const firstInput = inputs[0]!;\n    expect(firstInput).toBeInTheDocument();\n    await userEvent.click(firstInput);\n    await userEvent.paste('123123');\n    expect(getInputValues(inputs)).toBe('1,2,3,1,2,3');\n    await userEvent.keyboard('{backspace}{backspace}{backspace}{backspace}{backspace}');\n    expect(getInputValues(inputs)).toBe('1,,,,,');\n    await userEvent.keyboard('{backspace}');\n    expect(getInputValues(inputs)).toBe(',,,,,');\n  },\n};\n\nexport const PastedAndDeletedUncontrolled: Story = {\n  render: (args) => <UncontrolledImpl {...args} />,\n  name: 'Pasted and deleted (uncontrolled test)',\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const inputs = canvas.getAllByRole<HTMLInputElement>('textbox', {\n      hidden: false,\n    });\n\n    const firstInput = inputs[0]!;\n    expect(firstInput).toBeInTheDocument();\n    await userEvent.click(firstInput);\n    await userEvent.paste('123123');\n    expect(getInputValues(inputs)).toBe('1,2,3,1,2,3');\n    await userEvent.keyboard('{backspace}{backspace}{backspace}{backspace}{backspace}');\n    expect(getInputValues(inputs)).toBe('1,,,,,');\n    await userEvent.keyboard('{backspace}');\n    // With the current bug, the actual behavior is 1,2,3,1,2,3\n    expect(getInputValues(inputs)).toBe(',,,,,');\n\n    // if we keep deleting while the first input is focused, we eventually get ,2,3,1,2,3\n  },\n};\n\nfunction ErrorMessage({ children }: { children: string }) {\n  return <div className={styles.errorMessage}>{children}</div>;\n}\n\nfunction Dialog({\n  trigger,\n  title = 'Hello!',\n  content,\n  open,\n  onOpenChange,\n}: {\n  title?: string;\n  content: string;\n  trigger?: React.ReactNode;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}) {\n  const lastFocusedRef = React.useRef<HTMLElement | null>(null);\n  React.useLayoutEffect(() => {\n    lastFocusedRef.current = document.activeElement as HTMLElement;\n  }, []);\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      {trigger}\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay className={dialogStyles.overlay} />\n        <DialogPrimitive.Content className={dialogStyles.contentDefault}>\n          <DialogPrimitive.Title>{title}</DialogPrimitive.Title>\n          <DialogPrimitive.Description>{content}</DialogPrimitive.Description>\n          <DialogPrimitive.Close className={dialogStyles.close}>close</DialogPrimitive.Close>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nfunction getInputValues(inputs: HTMLInputElement[]) {\n  return inputs.map((input) => input.value).join(',');\n}\n"
  },
  {
    "path": "apps/storybook/stories/password-toggle-field.stories.module.css",
    "content": ".viewport {\n  --easing: cubic-bezier(0.165, 0.84, 0.44, 1);\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n  width: 100vw;\n  justify-content: center;\n  align-items: center;\n\n  margin: 0;\n  padding: 24px;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    'Segoe UI',\n    Roboto,\n    Oxygen,\n    Ubuntu,\n    Cantarell,\n    'Open Sans',\n    'Helvetica Neue',\n    sans-serif;\n  font-size: 14px;\n}\n\n.field {\n  --_field-height: 1.75rem;\n  display: flex;\n  width: 300px;\n  max-width: 100%;\n  border: 1px solid #ddd;\n  height: var(--_field-height);\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n}\n\n.field:has(.input:focus) {\n  outline: 1px solid dodgerblue;\n  border-color: dodgerblue;\n}\n\n.input {\n  all: unset;\n  flex: 1 1 auto;\n  height: 100%;\n  vertical-align: center;\n  padding: 0 0.5rem;\n}\n\n.toggle {\n  all: unset;\n  height: var(--_field-height);\n  aspect-ratio: 1;\n  flex: 0 0 var(--_field-height);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.toggle:focus-visible {\n  outline: 2px solid dodgerblue;\n  outline-offset: -4px;\n}\n"
  },
  {
    "path": "apps/storybook/stories/password-toggle-field.stories.tsx",
    "content": "import * as React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react-webpack5';\nimport { useArgs } from 'storybook/preview-api';\nimport { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';\nimport styles from './password-toggle-field.stories.module.css';\n\nexport default {\n  title: 'Components/PasswordToggleField',\n  component: PasswordToggleField.Root,\n} satisfies Meta<typeof PasswordToggleField.Root>;\n\ntype Story = StoryObj<typeof PasswordToggleField.Root>;\ntype StoryArgs = Exclude<Story['args'], undefined>;\n\nexport const Uncontrolled = {\n  argTypes: {\n    children: { table: { disable: true } },\n    defaultVisible: { table: { disable: true } },\n    visible: { table: { disable: true } },\n  },\n  render: function Uncontrolled(args) {\n    return (\n      <div className={styles.viewport}>\n        <PasswordToggleField.Root {...args}>\n          <div className={styles.field}>\n            <PasswordToggleField.Input className={styles.input} />\n            <PasswordToggleField.Toggle className={styles.toggle}>\n              <PasswordToggleField.Icon\n                className={styles.toggleIcon}\n                visible={<EyeOpenIcon />}\n                hidden={<EyeClosedIcon />}\n              />\n            </PasswordToggleField.Toggle>\n          </div>\n        </PasswordToggleField.Root>\n      </div>\n    );\n  },\n} satisfies Story;\n\nexport const Controlled = {\n  argTypes: {\n    children: { table: { disable: true } },\n    defaultVisible: { table: { disable: true } },\n    visible: { control: { type: 'boolean' } },\n  },\n  args: {\n    visible: false,\n  },\n  render: function Controlled(args) {\n    const [{ visible }, updateArgs] = useArgs<StoryArgs>();\n    return (\n      <div className={styles.viewport}>\n        <PasswordToggleField.Root\n          {...args}\n          visible={visible}\n          onVisiblityChange={(visible) => updateArgs({ visible })}\n        >\n          <div className={styles.field}>\n            <PasswordToggleField.Input className={styles.input} />\n            <PasswordToggleField.Toggle className={styles.toggle}>\n              <PasswordToggleField.Icon\n                className={styles.toggleIcon}\n                visible={<EyeOpenIcon />}\n                hidden={<EyeClosedIcon />}\n              />\n            </PasswordToggleField.Toggle>\n          </div>\n        </PasswordToggleField.Root>\n      </div>\n    );\n  },\n} satisfies Story;\n\nexport const InsideForm = {\n  argTypes: {\n    children: { table: { disable: true } },\n    defaultVisible: { table: { disable: true } },\n    visible: { control: { type: 'boolean' } },\n  },\n  args: {\n    visible: false,\n  },\n  render: function InsideForm(args) {\n    const [{ visible }, updateArgs] = useArgs<StoryArgs>();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    return (\n      <div className={styles.viewport}>\n        <form\n          onSubmit={(event) => {\n            event.preventDefault();\n            // should be reset on submit, so this should always be hidden\n            window.alert(`Submitted! Field is ${visible ? 'visible' : 'hidden'}`);\n            inputRef.current?.focus();\n          }}\n        >\n          <PasswordToggleField.Root\n            visible={visible}\n            onVisiblityChange={(visible) => updateArgs({ visible })}\n            {...args}\n          >\n            <div className={styles.field}>\n              <PasswordToggleField.Input ref={inputRef} className={styles.input} />\n              <PasswordToggleField.Toggle className={styles.toggle}>\n                <PasswordToggleField.Icon\n                  className={styles.toggleIcon}\n                  visible={<EyeOpenIcon />}\n                  hidden={<EyeClosedIcon />}\n                />\n              </PasswordToggleField.Toggle>\n            </div>\n          </PasswordToggleField.Root>\n          <button>Submit</button>\n        </form>\n      </div>\n    );\n  },\n} satisfies Story;\n\nconst EyeClosedIcon = () => (\n  <svg\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 10.9999 7.50001 10.9999C6.99965 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.3989 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 9.99991 7.50001 9.99991C10.3078 9.99991 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst EyeOpenIcon = () => (\n  <svg\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"currentColor\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z\"\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n"
  },
  {
    "path": "apps/storybook/stories/popover.stories.module.css",
    "content": ".trigger {\n}\n\n.content {\n  transform-origin: var(--radix-popover-content-transform-origin);\n  background-color: var(--color-gray300);\n  padding: 20px;\n  border-radius: 5px;\n}\n\n.close {\n}\n\n.arrow {\n  fill: var(--color-gray300);\n}\n\n@keyframes popover-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes popover-fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.animatedContent {\n  &[data-state='open'] {\n    animation: popover-fadeIn 300ms ease-out;\n  }\n  &[data-state='closed'] {\n    animation: popover-fadeOut 300ms ease-in;\n  }\n}\n\n.grid {\n  display: inline-grid;\n  grid-template-columns: repeat(3, 50px);\n  column-gap: 150px;\n  row-gap: 100px;\n  padding: 100px;\n  border: 1px solid black;\n}\n\n.chromaticTrigger {\n  box-sizing: border-box;\n  width: 30px;\n  height: 30px;\n  background-color: tomato;\n  border: 1px solid rgba(0, 0, 0, 0.3);\n}\n\n.contentAttr,\n.chromaticContent {\n  box-sizing: border-box;\n  display: grid;\n  place-content: center;\n  width: 60px;\n  height: 60px;\n  background-color: royalblue;\n  color: white;\n  font-size: 10px;\n  border: 1px solid rgba(0, 0, 0, 0.3);\n}\n\n.chromaticArrow {\n  fill: black;\n}\n\n.triggerAttr,\n.contentAttr,\n.arrowAttr,\n.closeAttr {\n  background-color: rgba(0, 0, 255, 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n  &[data-state='closed'] {\n    border-color: red;\n  }\n  &[data-state='open'] {\n    border-color: green;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/popover.stories.tsx",
    "content": "import * as React from 'react';\nimport { Popover } from 'radix-ui';\nimport { Popper } from 'radix-ui/internal';\nimport styles from './popover.stories.module.css';\n\nconst { SIDE_OPTIONS, ALIGN_OPTIONS } = Popper;\n\nexport default { title: 'Components/Popover' };\n\nexport const Styled = () => {\n  return (\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}\n    >\n      <Popover.Root>\n        <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content className={styles.content} sideOffset={5}>\n            <Popover.Close className={styles.close}>close</Popover.Close>\n            <Popover.Arrow className={styles.arrow} width={20} height={10} />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n      <input />\n    </div>\n  );\n};\n\n// Original issue: https://github.com/radix-ui/primitives/issues/2128\nexport const Boundary = () => {\n  const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <div\n      style={{\n        border: '3px dashed red',\n        width: '200px',\n        height: '200px',\n      }}\n      ref={setBoundary}\n    >\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <button>open</button>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            style={{\n              boxSizing: 'border-box',\n              borderRadius: '8px',\n              padding: '8px',\n              color: 'white',\n              backgroundColor: 'black',\n              width: 'var(--radix-popper-available-width)',\n              height: 'var(--radix-popper-available-height)',\n            }}\n            sideOffset={5}\n            collisionBoundary={boundary}\n          >\n            out of bound out of bound out of bound out of bound out of bound out of bound out of\n            bound out of bound out of bound\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </div>\n  );\n};\n\nexport const Modality = () => {\n  return (\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '110vh' }}\n    >\n      <div style={{ display: 'grid', gap: 50 }}>\n        <div style={{ display: 'inline-flex', alignItems: 'center', flexDirection: 'column' }}>\n          <h1>Non modal (default)</h1>\n          <Popover.Root>\n            <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n            <Popover.Portal>\n              <Popover.Content className={styles.content} sideOffset={5}>\n                <Popover.Close className={styles.close}>close</Popover.Close>\n                <Popover.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n              </Popover.Content>\n            </Popover.Portal>\n          </Popover.Root>\n          <textarea\n            style={{ width: 500, height: 100, marginTop: 10 }}\n            defaultValue=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet.\"\n          />\n        </div>\n        <div style={{ display: 'inline-flex', alignItems: 'center', flexDirection: 'column' }}>\n          <h1>Modal</h1>\n          <Popover.Root modal>\n            <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n            <Popover.Portal>\n              <Popover.Content className={styles.content} sideOffset={5}>\n                <Popover.Close className={styles.close}>close</Popover.Close>\n                <Popover.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n              </Popover.Content>\n            </Popover.Portal>\n          </Popover.Root>\n          <textarea\n            style={{ width: 500, height: 100, marginTop: 10 }}\n            defaultValue=\"Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat nobis at ipsa, nihil tempora debitis maxime dignissimos non amet.\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport const Controlled = () => {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '50vh' }}\n    >\n      <Popover.Root open={open} onOpenChange={setOpen}>\n        <Popover.Trigger className={styles.trigger}>{open ? 'close' : 'open'}</Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content className={styles.content}>\n            <Popover.Close className={styles.close}>close</Popover.Close>\n            <Popover.Arrow className={styles.arrow} width={20} height={10} />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </div>\n  );\n};\n\nexport const Animated = () => {\n  return (\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}\n    >\n      <Popover.Root>\n        <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            className={[styles.content, styles.animatedContent].join(' ')}\n            sideOffset={10}\n          >\n            <Popover.Close className={styles.close}>close</Popover.Close>\n            <Popover.Arrow className={styles.arrow} width={20} height={10} />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </div>\n  );\n};\n\nexport const ForcedMount = () => {\n  return (\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}\n    >\n      <Popover.Root>\n        <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n        <Popover.Portal forceMount>\n          <Popover.Content className={styles.content} sideOffset={10}>\n            <Popover.Close className={styles.close}>close</Popover.Close>\n            <Popover.Arrow className={styles.arrow} width={20} height={10} />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </div>\n  );\n};\n\nexport const Nested = () => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  return (\n    <div\n      style={{\n        height: '300vh',\n        width: '300vw',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <button\n        type=\"button\"\n        style={{ position: 'fixed', top: 10, left: 10 }}\n        onClick={() => buttonRef.current?.focus()}\n      >\n        Focus popover button\n      </button>\n\n      <Popover.Root>\n        <Popover.Trigger className={styles.trigger} ref={buttonRef}>\n          Open popover\n        </Popover.Trigger>\n\n        <Popover.Portal>\n          <Popover.Content\n            className={styles.content}\n            sideOffset={5}\n            style={{ backgroundColor: 'crimson' }}\n          >\n            <Popover.Root>\n              <Popover.Trigger className={styles.trigger}>Open nested popover</Popover.Trigger>\n              <Popover.Portal>\n                <Popover.Content\n                  className={styles.content}\n                  side=\"top\"\n                  align=\"center\"\n                  sideOffset={5}\n                  style={{ backgroundColor: 'green' }}\n                >\n                  <Popover.Close className={styles.close}>close</Popover.Close>\n                  <Popover.Arrow\n                    className={styles.arrow}\n                    width={20}\n                    height={10}\n                    offset={20}\n                    style={{ fill: 'green' }}\n                  />\n                </Popover.Content>\n              </Popover.Portal>\n            </Popover.Root>\n\n            <Popover.Close className={styles.close} style={{ marginLeft: 10 }}>\n              close\n            </Popover.Close>\n            <Popover.Arrow\n              className={styles.arrow}\n              width={20}\n              height={10}\n              offset={20}\n              style={{ fill: 'crimson' }}\n            />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </div>\n  );\n};\n\nexport const CustomAnchor = () => (\n  <Popover.Root>\n    <Popover.Anchor\n      style={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n        width: 250,\n        padding: 20,\n        margin: 100,\n        backgroundColor: '#eee',\n      }}\n    >\n      Item <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n    </Popover.Anchor>\n    <Popover.Portal>\n      <Popover.Content\n        className={styles.content}\n        side=\"right\"\n        sideOffset={1}\n        align=\"start\"\n        style={{ borderRadius: 0, width: 200, height: 100 }}\n      >\n        <Popover.Close>close</Popover.Close>\n      </Popover.Content>\n    </Popover.Portal>\n  </Popover.Root>\n);\n\nexport const WithSlottedTrigger = () => {\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <button className={styles.trigger} onClick={() => console.log('StyledTrigger click')}>\n          open\n        </button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content className={styles.content} sideOffset={5}>\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n// change order slightly for more pleasing visual\nconst SIDES = [...SIDE_OPTIONS.filter((side) => side !== 'bottom'), 'bottom' as const];\n\nexport const Chromatic = () => (\n  <div style={{ padding: 200, paddingBottom: 500 }}>\n    <h1>Uncontrolled</h1>\n    <h2>Closed</h2>\n    <Popover.Root>\n      <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content className={styles.content} sideOffset={5}>\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h2>Open</h2>\n    <Popover.Root defaultOpen>\n      <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          className={styles.content}\n          sideOffset={5}\n          onFocusOutside={(event) => event.preventDefault()}\n        >\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h2 style={{ marginTop: 100 }}>Open with reordered parts</h2>\n    <Popover.Root defaultOpen>\n      <Popover.Portal>\n        <Popover.Content\n          className={styles.content}\n          sideOffset={5}\n          onFocusOutside={(event) => event.preventDefault()}\n        >\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n      <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n    </Popover.Root>\n\n    <h1 style={{ marginTop: 100 }}>Controlled</h1>\n    <h2>Closed</h2>\n    <Popover.Root open={false}>\n      <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content className={styles.content} sideOffset={5}>\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h2>Open</h2>\n    <Popover.Root open>\n      <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content className={styles.content} sideOffset={5}>\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h2 style={{ marginTop: 100 }}>Open with reordered parts</h2>\n    <Popover.Root open>\n      <Popover.Content className={styles.content} sideOffset={5}>\n        <Popover.Close className={styles.close}>close</Popover.Close>\n        <Popover.Arrow className={styles.arrow} width={20} height={10} />\n      </Popover.Content>\n      <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n    </Popover.Root>\n\n    <h1 style={{ marginTop: 100 }}>Force mounted content</h1>\n    <Popover.Root>\n      <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n      <Popover.Portal forceMount>\n        <Popover.Content className={styles.content} sideOffset={5}>\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h1 style={{ marginTop: 100 }}>Anchor</h1>\n    <h2>Controlled</h2>\n    <Popover.Root open>\n      <Popover.Anchor style={{ padding: 20, background: 'gainsboro' }}>\n        <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n      </Popover.Anchor>\n      <Popover.Portal>\n        <Popover.Content className={styles.content}>\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h2>Uncontrolled</h2>\n    <Popover.Root defaultOpen>\n      <Popover.Anchor style={{ padding: 20, background: 'gainsboro' }}>\n        <Popover.Trigger className={styles.trigger}>open</Popover.Trigger>\n      </Popover.Anchor>\n      <Popover.Portal>\n        <Popover.Content\n          className={styles.content}\n          onFocusOutside={(event) => event.preventDefault()}\n        >\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h1 style={{ marginTop: 100 }}>Positioning</h1>\n    <h2>No collisions</h2>\n    <h3>Side & Align</h3>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <Popover.Root key={`${side}-${align}`} open>\n            <Popover.Trigger className={styles.chromaticTrigger} />\n            <Popover.Portal>\n              <Popover.Content\n                className={styles.chromaticContent}\n                side={side}\n                align={align}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <Popover.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </Popover.Content>\n            </Popover.Portal>\n          </Popover.Root>\n        )),\n      )}\n    </div>\n\n    <h3>Side offset</h3>\n    <h4>Positive</h4>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <Popover.Root key={`${side}-${align}`} open>\n            <Popover.Trigger className={styles.chromaticTrigger} />\n            <Popover.Portal>\n              <Popover.Content\n                className={styles.chromaticContent}\n                side={side}\n                sideOffset={5}\n                align={align}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <Popover.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </Popover.Content>\n            </Popover.Portal>\n          </Popover.Root>\n        )),\n      )}\n    </div>\n    <h4>Negative</h4>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <Popover.Root key={`${side}-${align}`} open>\n            <Popover.Trigger className={styles.chromaticTrigger} />\n            <Popover.Portal>\n              <Popover.Content\n                className={styles.chromaticContent}\n                side={side}\n                sideOffset={-10}\n                align={align}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <Popover.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </Popover.Content>\n            </Popover.Portal>\n          </Popover.Root>\n        )),\n      )}\n    </div>\n\n    <h3>Align offset</h3>\n    <h4>Positive</h4>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <Popover.Root key={`${side}-${align}`} open>\n            <Popover.Trigger className={styles.chromaticTrigger} />\n            <Popover.Portal>\n              <Popover.Content\n                className={styles.chromaticContent}\n                side={side}\n                align={align}\n                alignOffset={20}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <Popover.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </Popover.Content>\n            </Popover.Portal>\n          </Popover.Root>\n        )),\n      )}\n    </div>\n    <h4>Negative</h4>\n    <div className={styles.grid}>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <Popover.Root key={`${side}-${align}`} open>\n            <Popover.Trigger className={styles.chromaticTrigger} />\n            <Popover.Portal>\n              <Popover.Content\n                className={styles.chromaticContent}\n                side={side}\n                align={align}\n                alignOffset={-10}\n                avoidCollisions={false}\n              >\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <Popover.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </Popover.Content>\n            </Popover.Portal>\n          </Popover.Root>\n        )),\n      )}\n    </div>\n\n    <h2>Collisions</h2>\n    <p>See instances on the periphery of the page.</p>\n    {SIDES.map((side) =>\n      ALIGN_OPTIONS.map((align) => (\n        <Popover.Root key={`${side}-${align}`} open>\n          <Popover.Trigger\n            className={styles.chromaticTrigger}\n            style={{\n              position: 'absolute',\n              [side]: 10,\n              ...((side === 'right' || side === 'left') &&\n                (align === 'start'\n                  ? { bottom: 10 }\n                  : align === 'center'\n                    ? { top: 'calc(50% - 15px)' }\n                    : { top: 10 })),\n              ...((side === 'top' || side === 'bottom') &&\n                (align === 'start'\n                  ? { right: 10 }\n                  : align === 'center'\n                    ? { left: 'calc(50% - 15px)' }\n                    : { left: 10 })),\n            }}\n          />\n          <Popover.Portal>\n            <Popover.Content className={styles.chromaticContent} side={side} align={align}>\n              <p style={{ textAlign: 'center' }}>\n                {side}\n                <br />\n                {align}\n              </p>\n              <Popover.Arrow className={styles.chromaticArrow} width={20} height={10} />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      )),\n    )}\n\n    <h2>Relative parent (non-portalled)</h2>\n    <div style={{ position: 'relative' }}>\n      <Popover.Root open>\n        <Popover.Trigger asChild>\n          <button className={styles.trigger}>open</button>\n        </Popover.Trigger>\n        <Popover.Content className={styles.content} sideOffset={5}>\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n        </Popover.Content>\n      </Popover.Root>\n    </div>\n\n    <h1 style={{ marginTop: 100 }}>With slotted trigger</h1>\n    <Popover.Root open>\n      <Popover.Trigger asChild>\n        <button className={styles.trigger}>open</button>\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content className={styles.content} sideOffset={5}>\n          <Popover.Close className={styles.close}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h1 style={{ marginTop: 100 }}>State attributes</h1>\n    <h2>Closed</h2>\n    <Popover.Root open={false}>\n      <Popover.Trigger className={styles.triggerAttr}>open</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content className={styles.contentAttr} sideOffset={5} avoidCollisions={false}>\n          <Popover.Close className={styles.closeAttr}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrowAttr} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n\n    <h2>Open</h2>\n    <Popover.Root open>\n      <Popover.Trigger className={styles.triggerAttr}>open</Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content\n          className={styles.contentAttr}\n          side=\"right\"\n          sideOffset={5}\n          avoidCollisions={false}\n        >\n          <Popover.Close className={styles.closeAttr}>close</Popover.Close>\n          <Popover.Arrow className={styles.arrowAttr} width={20} height={10} />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  </div>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/popper.stories.module.css",
    "content": ".content {\n  transform-origin: var(--radix-popper-transform-origin);\n  background-color: var(--color-gray100);\n  padding: 10px;\n  border-radius: 10px;\n}\n\n.contentSmall {\n  width: 100px;\n  height: 50px;\n}\n\n.contentLarge {\n  width: 300px;\n  height: 150px;\n}\n\n.anchor {\n  background-color: hotpink;\n}\n\n.anchorSmall {\n  width: 50px;\n  height: 50px;\n}\n\n.anchorLarge {\n  width: 100px;\n  height: 100px;\n}\n\n.arrow {\n  fill: var(--color-gray100);\n}\n\n@keyframes popper-rotateIn {\n  0% {\n    transform: scale(0) rotateZ(calc(var(--direction, 0) * 45deg));\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.animatedContent {\n  &[data-side='top'] {\n    --direction: 1;\n  }\n  &[data-side='bottom'] {\n    --direction: -1;\n  }\n  animation: popper-rotateIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n}\n"
  },
  {
    "path": "apps/storybook/stories/popper.stories.tsx",
    "content": "import * as React from 'react';\nimport { Portal } from 'radix-ui';\nimport { Popper } from 'radix-ui/internal';\nimport styles from './popper.stories.module.css';\n\nexport default { title: 'Utilities/Popper' };\n\nexport const Styled = () => {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <Scrollable>\n      <Popper.Root>\n        <Popper.Anchor className={styles.anchor} onClick={() => setOpen(true)}>\n          open\n        </Popper.Anchor>\n\n        {open && (\n          <Popper.Content className={styles.content} sideOffset={5}>\n            <button onClick={() => setOpen(false)}>close</button>\n            <Popper.Arrow className={styles.arrow} width={20} height={10} />\n          </Popper.Content>\n        )}\n      </Popper.Root>\n    </Scrollable>\n  );\n};\n\nexport const WithCustomArrow = () => {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <Scrollable>\n      <Popper.Root>\n        <Popper.Anchor className={styles.anchor} onClick={() => setOpen(true)}>\n          open\n        </Popper.Anchor>\n\n        {open && (\n          <Popper.Content className={styles.content} side=\"right\" sideOffset={5}>\n            <button onClick={() => setOpen(false)}>close</button>\n            <Popper.Arrow asChild offset={20}>\n              <CustomArrow width={20} height={10} />\n            </Popper.Arrow>\n          </Popper.Content>\n        )}\n      </Popper.Root>\n    </Scrollable>\n  );\n};\n\nexport const Animated = () => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Scrollable>\n      <Popper.Root>\n        <Popper.Anchor className={styles.anchor} onClick={() => setOpen(true)}>\n          open\n        </Popper.Anchor>\n\n        {open && (\n          <Portal.Root asChild>\n            <Popper.Content\n              className={[styles.content, styles.animatedContent].join(' ')}\n              sideOffset={5}\n            >\n              <button onClick={() => setOpen(false)}>close</button>\n              <Popper.Arrow className={styles.arrow} width={20} height={10} offset={25} />\n            </Popper.Content>\n          </Portal.Root>\n        )}\n      </Popper.Root>\n    </Scrollable>\n  );\n};\n\nexport const WithPortal = () => {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <Scrollable>\n      <Popper.Root>\n        <Popper.Anchor className={styles.anchor} onClick={() => setOpen(true)}>\n          open\n        </Popper.Anchor>\n\n        {open && (\n          <Portal.Root asChild>\n            <Popper.Content className={styles.content} sideOffset={5}>\n              <button onClick={() => setOpen(false)}>close</button>\n              <Popper.Arrow className={styles.arrow} width={20} height={10} />\n            </Popper.Content>\n          </Portal.Root>\n        )}\n      </Popper.Root>\n    </Scrollable>\n  );\n};\n\nexport const WithUpdatePositionStrategyAlways = () => {\n  const [open, setOpen] = React.useState(false);\n  const [left, setLeft] = React.useState(0);\n  React.useEffect(() => {\n    const intervalId = setInterval(() => {\n      setLeft((prev) => (prev + 50) % 300);\n    }, 500);\n    return () => clearInterval(intervalId);\n  }, []);\n  return (\n    <Scrollable>\n      <Popper.Root>\n        <Popper.Anchor\n          className={styles.anchor}\n          onClick={() => setOpen(true)}\n          style={{ marginLeft: left }}\n        >\n          open\n        </Popper.Anchor>\n\n        {open && (\n          <Portal.Root asChild>\n            <Popper.Content\n              className={styles.content}\n              sideOffset={5}\n              updatePositionStrategy=\"always\"\n            >\n              <button onClick={() => setOpen(false)}>close</button>\n              <Popper.Arrow className={styles.arrow} width={20} height={10} />\n            </Popper.Content>\n          </Portal.Root>\n        )}\n      </Popper.Root>\n    </Scrollable>\n  );\n};\n\nexport const Chromatic = () => {\n  const [scrollContainer1, setScrollContainer1] = React.useState<HTMLDivElement | null>(null);\n  const [scrollContainer2, setScrollContainer2] = React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <div style={{ paddingBottom: 500 }}>\n      <header\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 150,\n\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          right: 0,\n\n          backgroundColor: 'grey',\n          border: '1px solid black',\n        }}\n      >\n        <h1>In fixed header</h1>\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>1</Popper.Anchor>\n          <Popper.Content className={contentClass({ size: 'small' })} sideOffset={5}>\n            <Popper.Arrow className={styles.arrow} width={10} height={5} />1\n          </Popper.Content>\n        </Popper.Root>\n\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>2</Popper.Anchor>\n          <Portal.Root asChild>\n            <Popper.Content className={contentClass({ size: 'small' })} sideOffset={5}>\n              <Popper.Arrow className={styles.arrow} width={10} height={5} />2 (portalled)\n            </Popper.Content>\n          </Portal.Root>\n        </Popper.Root>\n      </header>\n\n      <div\n        style={{\n          marginTop: 100,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 150,\n          border: '1px solid black',\n        }}\n      >\n        <h1>In normal page flow</h1>\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>3</Popper.Anchor>\n          <Popper.Content className={contentClass({ size: 'small' })} sideOffset={5}>\n            <Popper.Arrow className={styles.arrow} width={10} height={5} />3\n          </Popper.Content>\n        </Popper.Root>\n\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>4</Popper.Anchor>\n          <Portal.Root asChild>\n            <Popper.Content className={contentClass({ size: 'small' })} sideOffset={5}>\n              <Popper.Arrow className={styles.arrow} width={10} height={5} />4 (portalled)\n            </Popper.Content>\n          </Portal.Root>\n        </Popper.Root>\n      </div>\n\n      <div\n        style={{\n          position: 'relative',\n          marginTop: 50,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 150,\n          border: '1px solid black',\n        }}\n      >\n        <h1>In relative parent</h1>\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>5</Popper.Anchor>\n          <Popper.Content className={contentClass({ size: 'small' })} sideOffset={5}>\n            <Popper.Arrow className={styles.arrow} width={10} height={5} />5\n          </Popper.Content>\n        </Popper.Root>\n\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>6</Popper.Anchor>\n          <Portal.Root asChild>\n            <Popper.Content className={contentClass({ size: 'small' })} sideOffset={5}>\n              <Popper.Arrow className={styles.arrow} width={10} height={5} />6 (portalled)\n            </Popper.Content>\n          </Portal.Root>\n        </Popper.Root>\n      </div>\n\n      <div\n        style={{\n          marginTop: 50,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 150,\n          border: '1px solid black',\n          transform: 'translate3d(100px, 0, 0)',\n        }}\n      >\n        <h1>In translated parent</h1>\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>7</Popper.Anchor>\n          <Popper.Content className={contentClass({ size: 'small' })} sideOffset={5}>\n            <Popper.Arrow className={styles.arrow} width={10} height={5} />7\n          </Popper.Content>\n        </Popper.Root>\n\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>8</Popper.Anchor>\n          <Portal.Root asChild>\n            <Popper.Content className={contentClass({ size: 'small' })} sideOffset={5}>\n              <Popper.Arrow className={styles.arrow} width={10} height={5} />8 (portalled)\n            </Popper.Content>\n          </Portal.Root>\n        </Popper.Root>\n      </div>\n\n      <div style={{ display: 'flex', gap: 100 }}>\n        <div>\n          <h1>In scrolling container</h1>\n          <div\n            ref={setScrollContainer1}\n            style={{ width: 400, height: 600, overflow: 'auto', border: '1px solid black' }}\n          >\n            <div style={{ height: 2000 }}>\n              {Array.from({ length: 10 }, (_, i) => (\n                <div\n                  key={i}\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    gap: 150,\n                    paddingBottom: 100,\n                  }}\n                >\n                  <Popper.Root>\n                    <Popper.Anchor className={anchorClass({ size: 'small' })}>\n                      9.{i + 1}\n                    </Popper.Anchor>\n                    <Popper.Content\n                      className={contentClass({ size: 'small' })}\n                      sideOffset={5}\n                      hideWhenDetached\n                      collisionBoundary={scrollContainer1}\n                    >\n                      <Popper.Arrow className={styles.arrow} width={10} height={5} />\n                      9.{i + 1}\n                    </Popper.Content>\n                  </Popper.Root>\n\n                  <Popper.Root>\n                    <Popper.Anchor className={anchorClass({ size: 'small' })}>\n                      10.{i + 1}\n                    </Popper.Anchor>\n                    <Portal.Root asChild>\n                      <Popper.Content\n                        className={contentClass({ size: 'small' })}\n                        sideOffset={5}\n                        hideWhenDetached\n                        collisionBoundary={scrollContainer1}\n                      >\n                        <Popper.Arrow className={styles.arrow} width={10} height={5} />\n                        10.{i + 1} (portalled)\n                      </Popper.Content>\n                    </Portal.Root>\n                  </Popper.Root>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        <div>\n          <h1>With position sticky</h1>\n          <div\n            ref={setScrollContainer2}\n            style={{ width: 400, height: 600, overflow: 'auto', border: '1px solid black' }}\n          >\n            <div style={{ height: 2000 }}>\n              {Array.from({ length: 10 }, (_, i) => (\n                <div\n                  key={i}\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    gap: 150,\n                    paddingBottom: 100,\n                    position: 'sticky',\n                    top: 0,\n                  }}\n                >\n                  <Popper.Root>\n                    <Popper.Anchor className={anchorClass({ size: 'small' })}>\n                      9.{i + 1}\n                    </Popper.Anchor>\n                    <Popper.Content\n                      className={contentClass({ size: 'small' })}\n                      sideOffset={5}\n                      hideWhenDetached\n                      collisionBoundary={scrollContainer2}\n                    >\n                      <Popper.Arrow className={styles.arrow} width={10} height={5} />\n                      9.{i + 1}\n                    </Popper.Content>\n                  </Popper.Root>\n\n                  <Popper.Root>\n                    <Popper.Anchor className={anchorClass({ size: 'small' })}>\n                      10.{i + 1}\n                    </Popper.Anchor>\n                    <Portal.Root asChild>\n                      <Popper.Content\n                        className={contentClass({ size: 'small' })}\n                        sideOffset={5}\n                        hideWhenDetached\n                        collisionBoundary={scrollContainer2}\n                      >\n                        <Popper.Arrow className={styles.arrow} width={10} height={5} />\n                        10.{i + 1} (portalled)\n                      </Popper.Content>\n                    </Portal.Root>\n                  </Popper.Root>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        style={{\n          marginTop: 50,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 150,\n          border: '1px solid black',\n        }}\n      >\n        <h1>Logical \"start\" alignment (LTR)</h1>\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>11</Popper.Anchor>\n          <Popper.Content align=\"start\" className={contentClass({ size: 'small' })} sideOffset={5}>\n            <Popper.Arrow className={styles.arrow} width={10} height={5} />\n            11\n          </Popper.Content>\n        </Popper.Root>\n\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>12</Popper.Anchor>\n          <Portal.Root asChild>\n            <Popper.Content\n              align=\"start\"\n              className={contentClass({ size: 'small' })}\n              sideOffset={5}\n            >\n              <Popper.Arrow className={styles.arrow} width={10} height={5} />\n              12 (portalled)\n            </Popper.Content>\n          </Portal.Root>\n        </Popper.Root>\n      </div>\n      <div\n        style={{\n          marginTop: 50,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 150,\n          border: '1px solid black',\n        }}\n      >\n        <h1>Logical \"start\" alignment (RTL)</h1>\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>13</Popper.Anchor>\n          <Popper.Content\n            align=\"start\"\n            className={contentClass({ size: 'small' })}\n            sideOffset={5}\n            dir=\"rtl\"\n          >\n            <Popper.Arrow className={styles.arrow} width={10} height={5} />\n            13\n          </Popper.Content>\n        </Popper.Root>\n\n        <Popper.Root>\n          <Popper.Anchor className={anchorClass({ size: 'small' })}>14</Popper.Anchor>\n          <Portal.Root asChild>\n            <Popper.Content\n              align=\"start\"\n              className={contentClass({ size: 'small' })}\n              sideOffset={5}\n              dir=\"rtl\"\n            >\n              <Popper.Arrow className={styles.arrow} width={10} height={5} />\n              14 (portalled)\n            </Popper.Content>\n          </Portal.Root>\n        </Popper.Root>\n      </div>\n    </div>\n  );\n};\nChromatic.parameters = { chromatic: { disable: false } };\n\nconst Scrollable = (props: any) => (\n  <div\n    style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '200vh' }}\n    {...props}\n  />\n);\n\nconst CustomArrow = (props: any) => (\n  <div\n    {...props}\n    style={{\n      ...props.style,\n      width: 20,\n      height: 10,\n      borderBottomLeftRadius: 10,\n      borderBottomRightRadius: 10,\n      backgroundColor: 'tomato',\n    }}\n  />\n);\n\nfunction anchorClass(props: { size: 'small' | 'large' }) {\n  return [\n    styles.anchor,\n    props.size === 'small' && styles.anchorSmall,\n    props.size === 'large' && styles.anchorLarge,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\nfunction contentClass(props: { size: 'small' | 'large' }) {\n  return [\n    styles.content,\n    props.size === 'small' && styles.contentSmall,\n    props.size === 'large' && styles.contentLarge,\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n"
  },
  {
    "path": "apps/storybook/stories/portal.stories.tsx",
    "content": "import * as React from 'react';\nimport { Portal } from 'radix-ui';\n\nexport default { title: 'Utilities/Portal' };\n\nexport const Base = () => (\n  <div\n    style={{\n      maxWidth: 300,\n      maxHeight: 200,\n      overflow: 'auto',\n      border: '1px solid',\n    }}\n  >\n    <h1>This content is rendered in the main DOM tree</h1>\n    <p>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos porro, est ex quia itaque facere\n      fugit necessitatibus aut enim. Nisi rerum quae, repellat in perspiciatis explicabo laboriosam\n      necessitatibus eius pariatur.\n    </p>\n\n    <Portal.Root>\n      <h1>This content is rendered in a portal (another DOM tree)</h1>\n      <p>\n        Because of the portal, it can appear in a different DOM tree from the main one (by default a\n        new element inside the body), even though it is part of the same React tree.\n      </p>\n    </Portal.Root>\n  </div>\n);\n\nexport const CustomContainer = () => {\n  const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <>\n      <div style={{ maxWidth: 300, padding: 10, margin: 10, border: '1px solid' }}>\n        <h1>Container A</h1>\n        <Portal.Root asChild container={portalContainer}>\n          <p>\n            This content is rendered in a portal inside Container A but appears inside Container B\n            because we have used Container B as a container element for the Portal.\n          </p>\n        </Portal.Root>\n      </div>\n\n      <div\n        ref={setPortalContainer}\n        style={{ maxWidth: 300, padding: 10, margin: 10, border: '1px solid' }}\n      >\n        <h1>Container B</h1>\n      </div>\n    </>\n  );\n};\n\nexport const Chromatic = () => {\n  const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <div style={{ padding: 150 }}>\n      <h1>Default (append to body)</h1>\n      <div style={{ padding: 10, margin: 10, border: '1px solid blue' }}>\n        <p>Container A</p>\n\n        <Portal.Root asChild>\n          <div\n            style={{\n              padding: 10,\n              margin: 10,\n              border: '1px solid blue',\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              zIndex: 9999999,\n            }}\n          >\n            <p>This content is rendered in a portal (another DOM tree)</p>\n            <p>\n              Because of the portal, it can appear in a different DOM tree from the main one (by\n              default a new element inside the body), even though it is part of the same React tree.\n            </p>\n          </div>\n        </Portal.Root>\n      </div>\n\n      <h1>Custom container</h1>\n      <div style={{ padding: 10, margin: 10, border: '1px solid green' }}>\n        <p>Container B</p>\n        <Portal.Root asChild container={portalContainer}>\n          <div style={{ padding: 10, margin: 10, border: '1px solid green' }}>\n            <p>\n              This content is rendered in a portal inside Container B but appears inside Container C\n              because we have used Container C as a container element for the Portal.\n            </p>\n          </div>\n        </Portal.Root>\n      </div>\n\n      <div ref={setPortalContainer} style={{ padding: 10, margin: 10, border: '1px solid' }}>\n        <p>Container C</p>\n      </div>\n\n      <h1>zIndex and order</h1>\n      <p>See squares in the top-left</p>\n      <Portal.Root asChild>\n        <div\n          style={{\n            width: 20,\n            height: 20,\n            backgroundColor: 'red',\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            zIndex: 9999999,\n          }}\n        />\n      </Portal.Root>\n      <Portal.Root asChild>\n        <div\n          style={{\n            width: 20,\n            height: 20,\n            backgroundColor: 'green',\n            marginLeft: 10,\n            marginTop: 10,\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            zIndex: 9999999,\n          }}\n        />\n      </Portal.Root>\n      <Portal.Root asChild>\n        <div\n          style={{\n            width: 20,\n            height: 20,\n            backgroundColor: 'blue',\n            marginLeft: 20,\n            marginTop: 20,\n            position: 'absolute',\n            top: 0,\n            left: 0,\n            zIndex: 9999999,\n          }}\n        />\n      </Portal.Root>\n    </div>\n  );\n};\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/presence.stories.module.css",
    "content": "@keyframes presence-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes presence-fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes presence-slideUp {\n  from {\n    transform: translateY(30px);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes presence-slideDown {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(30px);\n  }\n}\n\n.mountAnimation {\n  animation: presence-fadeIn 3s ease-out;\n}\n\n.unmountAnimation {\n  &[data-state='closed'] {\n    animation: presence-fadeOut 3s ease-in;\n  }\n}\n\n.multipleMountAnimations {\n  animation:\n    presence-fadeIn 6s cubic-bezier(0.22, 1, 0.36, 1),\n    presence-slideUp 6s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.openAndCloseAnimation {\n  &[data-state='open'] {\n    animation: presence-fadeIn 3s ease-out;\n  }\n  &[data-state='closed'] {\n    animation: presence-fadeOut 3s ease-in;\n  }\n}\n\n.multipleOpenAndCloseAnimations {\n  &[data-state='open'] {\n    animation:\n      presence-fadeIn 3s cubic-bezier(0.22, 1, 0.36, 1),\n      presence-slideUp 1s cubic-bezier(0.22, 1, 0.36, 1);\n  }\n  &[data-state='closed'] {\n    animation:\n      presence-fadeOut 3s cubic-bezier(0.22, 1, 0.36, 1),\n      presence-slideDown 1s cubic-bezier(0.22, 1, 0.36, 1);\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/presence.stories.tsx",
    "content": "import * as React from 'react';\nimport { Presence } from 'radix-ui/internal';\nimport styles from './presence.stories.module.css';\n\nexport default { title: 'Utilities/Presence' };\n\nexport const Basic = () => {\n  const [open, setOpen] = React.useState(true);\n\n  return (\n    <>\n      <button onClick={() => setOpen((prevOpen) => !prevOpen)}>toggle</button>\n\n      <Presence.Root present={open}>\n        <div>Content</div>\n      </Presence.Root>\n    </>\n  );\n};\n\nexport const WithMountAnimation = () => <Animation className={styles.mountAnimation} />;\nexport const WithUnmountAnimation = () => <Animation className={styles.unmountAnimation} />;\nexport const WithMultipleMountAnimations = () => (\n  <Animation className={styles.multipleMountAnimations} />\n);\nexport const WithOpenAndCloseAnimation = () => (\n  <Animation className={styles.openAndCloseAnimation} />\n);\nexport const WithMultipleOpenAndCloseAnimations = () => (\n  <Animation className={styles.multipleOpenAndCloseAnimations} />\n);\n\nexport const WithDeferredMountAnimation = () => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const timerRef = React.useRef(0);\n  const [open, setOpen] = React.useState(false);\n  const [animate, setAnimate] = React.useState(false);\n\n  React.useEffect(() => {\n    if (open) {\n      timerRef.current = window.setTimeout(() => setAnimate(true), 150);\n    } else {\n      setAnimate(false);\n      window.clearTimeout(timerRef.current);\n    }\n  }, [open]);\n\n  return (\n    <>\n      <p>\n        Deferred animation should unmount correctly when toggled. Content will flash briefly while\n        we wait for animation to be applied.\n      </p>\n      <Toggles nodeRef={ref} open={open} onOpenChange={setOpen} />\n      <Presence.Root present={open}>\n        <div className={animate ? styles.mountAnimation : undefined} ref={ref}>\n          Content\n        </div>\n      </Presence.Root>\n    </>\n  );\n};\n\nfunction Animation(props: React.ComponentProps<'div'>) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <>\n      <Toggles nodeRef={ref} open={open} onOpenChange={setOpen} />\n      <Presence.Root present={open}>\n        <div {...props} data-state={open ? 'open' : 'closed'} ref={ref}>\n          Content\n        </div>\n      </Presence.Root>\n    </>\n  );\n}\n\nfunction Toggles({ open, onOpenChange, nodeRef }: any) {\n  function handleToggleVisibility() {\n    const node = nodeRef.current;\n    if (node) {\n      if (node.style.display === 'none') {\n        node.style.display = 'block';\n      } else {\n        node.style.display = 'none';\n      }\n    }\n  }\n\n  return (\n    <form style={{ display: 'flex', marginBottom: 30 }}>\n      <fieldset>\n        <legend>Mount</legend>\n        <button type=\"button\" onClick={() => onOpenChange(!open)}>\n          toggle\n        </button>\n      </fieldset>\n      <fieldset>\n        <legend>Visibility (triggers cancel event)</legend>\n        <button type=\"button\" onClick={handleToggleVisibility}>\n          toggle\n        </button>\n      </fieldset>\n    </form>\n  );\n}\n"
  },
  {
    "path": "apps/storybook/stories/progress.stories.module.css",
    "content": ".root {\n  width: 400px;\n  height: 20px;\n  max-width: 100%;\n  border: 5px solid var(--gray-12);\n  background-color: var(--gray-3);\n}\n\n.indicator,\n.chromaticIndicatorClass {\n  width: 0;\n  height: 100%;\n  background-color: var(--red-9);\n  transition: background 150ms ease-out;\n  &[data-state='indeterminate'] {\n    background-color: var(--gray-8);\n  }\n  &[data-state='complete'] {\n    background-color: var(--green-9);\n  }\n  &::before {\n    content: attr(data-value);\n  }\n  &::after {\n    content: attr(data-max);\n  }\n}\n\n.rootAttr,\n.indicatorAttr {\n  background-color: var(--blue-a12);\n  border: 2px solid var(--blue-9);\n  padding: 10px;\n\n  &[data-state='loading'] {\n    border-color: var(--red-9);\n  }\n  &[data-state='indeterminate'] {\n    border-color: var(--purple-9);\n  }\n  &[data-state='complete'] {\n    border-color: var(--green-9);\n  }\n}\n\n.indicatorAttr {\n  &::before {\n    content: attr(data-value);\n  }\n  &::after {\n    content: attr(data-max);\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/progress.stories.tsx",
    "content": "import * as React from 'react';\nimport { Progress } from 'radix-ui';\nimport styles from './progress.stories.module.css';\n\nexport default {\n  title: 'Components/Progress',\n};\n\nexport const Styled = () => {\n  const max = 150;\n  const [value, percentage, setValue] = useProgressValueState(0, max);\n  const toggleIndeterminate = useIndeterminateToggle(value, setValue);\n  return (\n    <div>\n      <Progress.Root className={styles.root} value={value} max={max}>\n        <Progress.Indicator\n          className={styles.indicator}\n          style={{ width: percentage != null ? `${percentage}%` : undefined }}\n        />\n      </Progress.Root>\n      <hr />\n      <button onClick={toggleIndeterminate}>Toggle Indeterminate</button>\n      <ProgressRange value={value} setValue={setValue} max={max} />\n    </div>\n  );\n};\n\nexport const Chromatic = () => (\n  <>\n    <h1>Loading (not started)</h1>\n    <Progress.Root className={styles.root} value={0}>\n      <Progress.Indicator className={styles.chromaticIndicator}>/</Progress.Indicator>\n    </Progress.Root>\n\n    <h1>Loading (started)</h1>\n    <Progress.Root className={styles.root} value={30}>\n      <Progress.Indicator className={styles.chromaticIndicator}>/</Progress.Indicator>\n    </Progress.Root>\n\n    <h1>Indeterminate</h1>\n    <Progress.Root className={styles.root}>\n      <Progress.Indicator className={styles.chromaticIndicator}>/</Progress.Indicator>\n    </Progress.Root>\n\n    <h1>Complete</h1>\n    <Progress.Root className={styles.root} value={100}>\n      <Progress.Indicator className={styles.chromaticIndicator}>/</Progress.Indicator>\n    </Progress.Root>\n\n    <h1>State attributes</h1>\n    <h2>Loading (started)</h2>\n    <Progress.Root className={styles.rootAttr} value={30}>\n      <Progress.Indicator className={styles.indicatorAttr}>/</Progress.Indicator>\n    </Progress.Root>\n\n    <h2>Indeterminate</h2>\n    <Progress.Root className={styles.rootAttr}>\n      <Progress.Indicator className={styles.indicatorAttr}>/</Progress.Indicator>\n    </Progress.Root>\n\n    <h2>Complete</h2>\n    <Progress.Root className={styles.rootAttr} value={100}>\n      <Progress.Indicator className={styles.indicatorAttr}>/</Progress.Indicator>\n    </Progress.Root>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n\nfunction ProgressRange({ value, setValue, max = 100 }: any) {\n  const previousValueRef = usePreviousValueRef(value);\n  return (\n    <input\n      type=\"range\"\n      disabled={value == null}\n      value={value == null ? previousValueRef.current : value}\n      max={max}\n      min={0}\n      onChange={(e) => {\n        const val = Number(e.target.value);\n        if (!isNaN(val)) {\n          setValue(val);\n        }\n      }}\n    />\n  );\n}\n\ntype ProgressValue = number | null;\nfunction useProgressValueState(initialState: ProgressValue | (() => ProgressValue), max = 100) {\n  const [value, setValue] = React.useState<number | null>(initialState);\n  const precentage = value != null ? Math.round((value / max) * 100) : null;\n  return [value, precentage, setValue] as const;\n}\n\nfunction useIndeterminateToggle(\n  value: ProgressValue,\n  setValue: React.Dispatch<React.SetStateAction<ProgressValue>>,\n) {\n  const previousValueRef = usePreviousValueRef(value);\n  const toggleIndeterminate = React.useCallback(\n    function setIndeterminate() {\n      setValue((val) => {\n        if (val == null) {\n          return previousValueRef.current;\n        }\n        return null;\n      });\n    },\n    [previousValueRef, setValue],\n  );\n  return toggleIndeterminate;\n}\n\nfunction usePreviousValueRef(value: ProgressValue) {\n  const previousValueRef = React.useRef<number>(value || 0);\n  React.useEffect(() => {\n    if (value != null) {\n      previousValueRef.current = value;\n    }\n  });\n  return previousValueRef;\n}\n"
  },
  {
    "path": "apps/storybook/stories/radio-group.stories.module.css",
    "content": ".root {\n}\n\n.item {\n  vertical-align: middle;\n  width: 30px;\n  height: 30px;\n  display: inline-grid;\n  padding: 0;\n  place-items: center;\n  border: 1px solid var(--color-gray300);\n  border-radius: 9999px;\n\n  &:focus {\n    outline: none;\n    border-color: var(--color-red);\n    box-shadow: 0 0 0 1px var(--color-red);\n  }\n\n  ,\n  &[data-disabled] {\n    opacity: 0.5;\n  }\n}\n\n.indicator {\n  width: 18px;\n  height: 18px;\n  background-color: var(--color-red);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: inherit;\n}\n\n.animatedIndicator {\n  &[data-state='checked'] {\n    animation: radioGroup-fadeIn 300ms ease-out;\n  }\n  &[data-state='unchecked'] {\n    animation: radioGroup-fadeOut 300ms ease-in;\n  }\n}\n\n.rootAttr,\n.itemAttr,\n.indicatorAttr {\n  background-color: rgba(0, 0, 255, 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n\n  &[tabindex='0'] {\n    box-shadow: inset 0 0 0 2px yellow;\n  }\n  &:disabled {\n    opacity: 0.5;\n  }\n  &[data-disabled] {\n    border-style: dashed;\n  }\n  &[data-state='unchecked'] {\n    border-color: red;\n  }\n  &[data-state='checked'] {\n    border-color: green;\n  }\n}\n\n.label {\n  /* ensures it can receive vertical margins */\n  display: inline-block;\n  /* better default alignment */\n  vertical-align: middle;\n  /* mimics default `label` tag (as we render a `span`) */\n  cursor: default;\n  display: inline-block;\n}\n\n@keyframes radioGroup-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes radioGroup-fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/radio-group.stories.tsx",
    "content": "import * as React from 'react';\nimport { Direction, Label as LabelPrimitive, RadioGroup } from 'radix-ui';\nimport styles from './radio-group.stories.module.css';\n\nexport default { title: 'Components/RadioGroup' };\n\nexport const LegacyStyled = () => (\n  <Label>\n    Favourite pet\n    <RadioGroup.Root className={styles.root} defaultValue=\"1\">\n      <Label>\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        Cat\n      </Label>{' '}\n      <Label>\n        <RadioGroup.Item className={styles.item} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        Dog\n      </Label>{' '}\n      <Label>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        Rabbit\n      </Label>\n    </RadioGroup.Root>\n  </Label>\n);\n\nexport const LegacyControlled = () => {\n  const [value, setValue] = React.useState('2');\n\n  return (\n    <RadioGroup.Root className={styles.root} value={value} onValueChange={setValue}>\n      <RadioGroup.Item className={styles.item} value=\"1\">\n        <RadioGroup.Indicator className={styles.indicator} />\n      </RadioGroup.Item>\n      <RadioGroup.Item className={styles.item} value=\"2\">\n        <RadioGroup.Indicator className={styles.indicator} />\n      </RadioGroup.Item>\n      <RadioGroup.Item className={styles.item} value=\"3\">\n        <RadioGroup.Indicator className={styles.indicator} />\n      </RadioGroup.Item>\n    </RadioGroup.Root>\n  );\n};\n\nexport const LegacyUnset = () => (\n  <Label>\n    Favourite pet\n    <RadioGroup.Root className={styles.root}>\n      <Label>\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        Cat\n      </Label>{' '}\n      <Label>\n        <RadioGroup.Item className={styles.item} value=\"2\" disabled>\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        Dog\n      </Label>{' '}\n      <Label>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        Rabbit\n      </Label>\n    </RadioGroup.Root>\n  </Label>\n);\n\nexport const LegacyWithinForm = () => {\n  const [data, setData] = React.useState({ optional: '', required: '', stopprop: '' });\n\n  return (\n    <form\n      onSubmit={(event) => event.preventDefault()}\n      onChange={(event) => {\n        const radio = event.target as HTMLInputElement;\n        setData((prevData) => ({ ...prevData, [radio.name]: radio.value }));\n      }}\n    >\n      <fieldset>\n        <legend>optional value: {data.optional}</legend>\n        <RadioGroup.Root className={styles.root} name=\"optional\">\n          <RadioGroup.Item className={styles.item} value=\"1\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n          <RadioGroup.Item className={styles.item} value=\"2\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n          <RadioGroup.Item className={styles.item} value=\"3\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n        </RadioGroup.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>required value: {data.required}</legend>\n        <RadioGroup.Root className={styles.root} name=\"required\" required>\n          <RadioGroup.Item className={styles.item} value=\"1\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n          <RadioGroup.Item className={styles.item} value=\"2\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n          <RadioGroup.Item className={styles.item} value=\"3\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n        </RadioGroup.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>stop propagation value: {data.stopprop}</legend>\n        <RadioGroup.Root className={styles.root} name=\"stopprop\">\n          <RadioGroup.Item\n            className={styles.item}\n            value=\"1\"\n            onClick={(event) => event.stopPropagation()}\n          >\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n          <RadioGroup.Item\n            className={styles.item}\n            value=\"2\"\n            onClick={(event) => event.stopPropagation()}\n          >\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n          <RadioGroup.Item\n            className={styles.item}\n            value=\"3\"\n            onClick={(event) => event.stopPropagation()}\n          >\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n        </RadioGroup.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <button>Submit</button>\n    </form>\n  );\n};\n\nexport const LegacyAnimated = () => {\n  const indicatorClass = [styles.indicator, styles.animatedIndicator].join(' ');\n  return (\n    <Label>\n      Favourite pet\n      <RadioGroup.Root className={styles.root} defaultValue=\"1\">\n        <Label>\n          <RadioGroup.Item className={styles.item} value=\"1\">\n            <RadioGroup.Indicator className={indicatorClass} />\n          </RadioGroup.Item>\n          Cat\n        </Label>{' '}\n        <Label>\n          <RadioGroup.Item className={styles.item} value=\"2\">\n            <RadioGroup.Indicator className={indicatorClass} />\n          </RadioGroup.Item>\n          Dog\n        </Label>{' '}\n        <Label>\n          <RadioGroup.Item className={styles.item} value=\"3\">\n            <RadioGroup.Indicator className={indicatorClass} />\n          </RadioGroup.Item>\n          Rabbit\n        </Label>\n      </RadioGroup.Root>\n    </Label>\n  );\n};\n\nexport const LegacyChromatic = () => {\n  const manualFocusRef = React.useRef<React.ComponentRef<typeof RadioGroup.Item>>(null);\n\n  React.useEffect(() => {\n    manualFocusRef.current?.focus();\n  }, []);\n\n  return (\n    <>\n      <h1>Uncontrolled</h1>\n      <h2>Unset</h2>\n      <RadioGroup.Root className={styles.root}>\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h2>Set</h2>\n      <RadioGroup.Root className={styles.root} defaultValue=\"3\">\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h1>Controlled</h1>\n      <h2>Unset</h2>\n      <RadioGroup.Root className={styles.root} value={null}>\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h2>Set</h2>\n      <RadioGroup.Root className={styles.root} value=\"3\">\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h1>Disabled item</h1>\n      <RadioGroup.Root className={styles.root}>\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\" disabled>\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h1>Disabled root</h1>\n      <RadioGroup.Root className={styles.root} disabled>\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        {/* Not possible to set `disabled` back to `false` since it's set on the root (this item\n            should still be disabled). */}\n        <RadioGroup.Item className={styles.item} value=\"2\" disabled={false}>\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h1>All items disabled</h1>\n      <RadioGroup.Root className={styles.root}>\n        <RadioGroup.Item className={styles.item} value=\"1\" disabled>\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\" disabled>\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\" disabled>\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h1>Manual focus into group</h1>\n      <RadioGroup.Root className={styles.root}>\n        <RadioGroup.Item className={styles.item} value=\"1\" ref={manualFocusRef}>\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h1>Force mounted indicator</h1>\n      <RadioGroup.Root className={styles.root}>\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} forceMount />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicator} forceMount />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} forceMount />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h1>Direction</h1>\n      <h2>Prop</h2>\n      <RadioGroup.Root className={styles.root} defaultValue=\"1\" dir=\"rtl\">\n        <RadioGroup.Item className={styles.item} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.item} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicator} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h2>Inherited</h2>\n      <Direction.Provider dir=\"rtl\">\n        <RadioGroup.Root className={styles.root} defaultValue=\"1\">\n          <RadioGroup.Item className={styles.item} value=\"1\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n          <RadioGroup.Item className={styles.item} value=\"2\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n          <RadioGroup.Item className={styles.item} value=\"3\">\n            <RadioGroup.Indicator className={styles.indicator} />\n          </RadioGroup.Item>\n        </RadioGroup.Root>\n      </Direction.Provider>\n\n      <h1>State attributes</h1>\n      <h2>Default</h2>\n      <RadioGroup.Root className={styles.rootAttr} defaultValue=\"3\">\n        <RadioGroup.Item className={styles.itemAttr} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h2>Disabled item</h2>\n      <RadioGroup.Root className={styles.rootAttr} defaultValue=\"3\">\n        <RadioGroup.Item className={styles.itemAttr} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"2\" disabled>\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <RadioGroup.Root className={styles.rootAttr} defaultValue=\"2\">\n        <RadioGroup.Item className={styles.itemAttr} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"2\" disabled>\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h2>Disabled root</h2>\n      <RadioGroup.Root className={styles.rootAttr} defaultValue=\"3\" disabled>\n        <RadioGroup.Item className={styles.itemAttr} value=\"1\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"2\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"3\">\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n\n      <h2>All items disabled</h2>\n      <RadioGroup.Root className={styles.rootAttr} defaultValue=\"3\">\n        <RadioGroup.Item className={styles.itemAttr} value=\"1\" disabled>\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"2\" disabled>\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n        <RadioGroup.Item className={styles.itemAttr} value=\"3\" disabled>\n          <RadioGroup.Indicator className={styles.indicatorAttr} />\n        </RadioGroup.Item>\n      </RadioGroup.Root>\n    </>\n  );\n};\nLegacyChromatic.parameters = { chromatic: { disable: false } };\n\nconst Label = (props: any) => <LabelPrimitive.Root {...props} className={styles.label} />;\n"
  },
  {
    "path": "apps/storybook/stories/roving-focus-group.stories.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers, RovingFocus } from 'radix-ui/internal';\n\ntype RovingFocusGroupProps = React.ComponentProps<typeof RovingFocus.Root>;\n\nexport default { title: 'Utilities/RovingFocusGroup' };\n\nexport const Basic = () => {\n  const [dir, setDir] = React.useState<RovingFocusGroupProps['dir']>('ltr');\n\n  return (\n    <div dir={dir}>\n      <h1>\n        Direction: {dir}{' '}\n        <button type=\"button\" onClick={() => setDir((prev) => (prev === 'ltr' ? 'rtl' : 'ltr'))}>\n          Toggle to {dir === 'ltr' ? 'rtl' : 'ltr'}\n        </button>\n      </h1>\n\n      <h2>no orientation (both) + no looping</h2>\n      <ButtonGroup dir={dir} defaultValue=\"two\">\n        <Button value=\"one\">One</Button>\n        <Button value=\"two\">Two</Button>\n        <Button disabled value=\"three\">\n          Three\n        </Button>\n        <Button value=\"four\">Four</Button>\n      </ButtonGroup>\n\n      <h2>no orientation (both) + looping</h2>\n      <ButtonGroup dir={dir} loop>\n        <Button value=\"hidden\" style={{ display: 'none' }}>\n          Hidden\n        </Button>\n        <Button value=\"one\">One</Button>\n        <Button value=\"two\">Two</Button>\n        <Button disabled value=\"three\">\n          Three\n        </Button>\n        <Button value=\"four\">Four</Button>\n      </ButtonGroup>\n\n      <h2>horizontal orientation + no looping</h2>\n      <ButtonGroup orientation=\"horizontal\" dir={dir}>\n        <Button value=\"one\">One</Button>\n        <Button value=\"two\">Two</Button>\n        <Button disabled value=\"three\">\n          Three\n        </Button>\n        <Button value=\"four\">Four</Button>\n      </ButtonGroup>\n\n      <h2>horizontal orientation + looping</h2>\n      <ButtonGroup orientation=\"horizontal\" dir={dir} loop>\n        <Button value=\"one\">One</Button>\n        <Button value=\"two\">Two</Button>\n        <Button disabled value=\"three\">\n          Three\n        </Button>\n        <Button value=\"four\">Four</Button>\n      </ButtonGroup>\n\n      <h2>vertical orientation + no looping</h2>\n      <ButtonGroup orientation=\"vertical\" dir={dir}>\n        <Button value=\"one\">One</Button>\n        <Button value=\"two\">Two</Button>\n        <Button disabled value=\"three\">\n          Three\n        </Button>\n        <Button value=\"four\">Four</Button>\n      </ButtonGroup>\n\n      <h2>vertical orientation + looping</h2>\n      <ButtonGroup orientation=\"vertical\" dir={dir} loop>\n        <Button value=\"one\">One</Button>\n        <Button value=\"two\">Two</Button>\n        <Button disabled value=\"three\">\n          Three\n        </Button>\n        <Button value=\"four\">Four</Button>\n      </ButtonGroup>\n    </div>\n  );\n};\n\nexport const Nested = () => (\n  <ButtonGroup orientation=\"vertical\" loop>\n    <Button value=\"1\">1</Button>\n\n    <div style={{ display: 'flex', flexDirection: 'column' }}>\n      <Button value=\"2\" style={{ marginBottom: 10 }}>\n        2\n      </Button>\n\n      <ButtonGroup orientation=\"horizontal\" loop>\n        <Button value=\"2.1\">2.1</Button>\n        <Button value=\"2.2\">2.2</Button>\n        <Button disabled value=\"2.3\">\n          2.3\n        </Button>\n        <Button value=\"2.4\">2.4</Button>\n      </ButtonGroup>\n    </div>\n\n    <Button value=\"3\" disabled>\n      3\n    </Button>\n    <Button value=\"4\">4</Button>\n  </ButtonGroup>\n);\n\nexport const EdgeCases = () => {\n  const [extra, setExtra] = React.useState(false);\n  const [disabled, setDisabled] = React.useState(false);\n  const [hidden, setHidden] = React.useState(false);\n  const [disabled3To5, setDisabled3To5] = React.useState(false);\n\n  return (\n    <>\n      <button onClick={() => setExtra((x) => !x)}>Add/remove extra</button>\n      <button onClick={() => setDisabled((x) => !x)}>Disable/Enable \"One\"</button>\n      <button onClick={() => setHidden((x) => !x)}>Hide/show \"One\"</button>\n      <button onClick={() => setDisabled3To5((x) => !x)}>Disable/Enable \"Three\" to \"Five\"</button>\n      <hr />\n\n      <ButtonGroup>\n        {extra ? <Button value=\"extra\">Extra</Button> : null}\n        <Button value=\"one\" disabled={disabled} style={{ display: hidden ? 'none' : undefined }}>\n          One\n        </Button>\n        <Button value=\"two\" disabled>\n          Two\n        </Button>\n        <Button value=\"three\" disabled={disabled3To5}>\n          Three\n        </Button>\n        <Button value=\"four\" disabled={disabled3To5} style={{ display: 'none' }}>\n          Four\n        </Button>\n        <Button value=\"five\" disabled={disabled3To5}>\n          Five\n        </Button>\n      </ButtonGroup>\n\n      <hr />\n      <button type=\"button\">Focusable outside of group</button>\n    </>\n  );\n};\n\nconst ButtonGroupContext = React.createContext<{\n  value?: string;\n  setValue: React.Dispatch<React.SetStateAction<string | undefined>>;\n}>({} as any);\n\ntype ButtonGroupProps = Omit<React.ComponentPropsWithRef<'div'>, 'defaultValue'> &\n  RovingFocusGroupProps & { defaultValue?: string };\n\nconst ButtonGroup = ({ defaultValue, ...props }: ButtonGroupProps) => {\n  const [value, setValue] = React.useState(defaultValue);\n  return (\n    <ButtonGroupContext.Provider value={{ value, setValue }}>\n      <RovingFocus.Root\n        {...props}\n        style={{\n          ...props.style,\n          display: 'inline-flex',\n          flexDirection: props.orientation === 'vertical' ? 'column' : 'row',\n          gap: 10,\n        }}\n      />\n    </ButtonGroupContext.Provider>\n  );\n};\n\ntype ButtonProps = Omit<React.ComponentPropsWithRef<'button'>, 'value'> & { value?: string };\n\nconst Button = (props: ButtonProps) => {\n  const { value: contextValue, setValue } = React.useContext(ButtonGroupContext);\n  const isSelected =\n    contextValue !== undefined && props.value !== undefined && contextValue === props.value;\n\n  return (\n    <RovingFocus.Item asChild active={isSelected} focusable={!props.disabled}>\n      <button\n        {...props}\n        style={{\n          ...props.style,\n          border: '1px solid',\n          borderColor: '#ccc',\n          padding: '5px 10px',\n          borderRadius: 5,\n          ...(isSelected\n            ? {\n                borderColor: 'black',\n                backgroundColor: 'black',\n                color: 'white',\n              }\n            : {}),\n        }}\n        onClick={props.disabled ? undefined : () => setValue(props.value)}\n        onFocus={composeEventHandlers(props.onFocus, (event) => {\n          if (contextValue !== undefined) {\n            event.target.click();\n          }\n        })}\n      />\n    </RovingFocus.Item>\n  );\n};\n"
  },
  {
    "path": "apps/storybook/stories/scroll-area.stories.module.css",
    "content": ".root,\n:global(:root) {\n  --scroll-area-scrollbar-size: 8px;\n}\n\n.scrollArea {\n  width: 100%;\n  height: 100%;\n  border: 1px solid black;\n}\n\n.scrollAreaViewport {\n  width: 100%;\n  height: 100%;\n}\n\n.scrollbar {\n  display: flex;\n  /* ensures no selection */\n  user-select: none;\n  /* disable browser handling of all panning and zooming gestures on touch devices */\n  touch-action: none;\n  transition: background 160ms ease-out;\n  padding: 2px;\n  background: rgba(0, 0, 0, 0.3);\n  &:hover {\n    background: rgba(0, 0, 0, 0.5);\n  }\n  &[data-orientation='vertical'] {\n    width: var(--scroll-area-scrollbar-size);\n  }\n  &[data-orientation='horizontal'] {\n    flex-direction: column;\n    height: var(--scroll-area-scrollbar-size);\n  }\n}\n\n.thumb {\n  flex: 1;\n  /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */\n  position: relative;\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    height: 100%;\n    min-width: 44px;\n    min-height: 44px;\n  }\n  background: black;\n  border-radius: var(--scroll-area-scrollbar-size);\n}\n\n.corner {\n  background: rgba(0, 0, 0, 0.3);\n  position: relative;\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background: black;\n    width: var(--scroll-area-scrollbar-size);\n    height: var(--scroll-area-scrollbar-size);\n    border-radius: var(--scroll-area-scrollbar-size);\n  }\n}\n\n.animatedThumb {\n  &[data-state='visible'] {\n    animation: scrollArea-fadeIn 300ms ease;\n  }\n  &[data-state='hidden'] {\n    animation: scrollArea-fadeOut 300ms ease;\n  }\n}\n\n@keyframes scrollArea-fadeIn {\n  from {\n    transform: scale(0.2);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes scrollArea-fadeOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.2);\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/scroll-area.stories.tsx",
    "content": "import * as React from 'react';\nimport { Direction, ScrollArea } from 'radix-ui';\nimport styles from './scroll-area.stories.module.css';\n\nexport default { title: 'Components/ScrollArea' };\n\nexport const Basic = () => {\n  const [props, setProps] = React.useState({} as any);\n  return (\n    <div className={styles.root}>\n      <div style={{ margin: '20px auto', width: 'max-content', textAlign: 'center' }}>\n        <form\n          onChange={(event) => {\n            const formData = new FormData(event.currentTarget);\n            const entries = (formData as any).entries();\n            const cleanup = [...entries].map(([key, value]: any) => [key, value || undefined]);\n            const props = Object.fromEntries(cleanup);\n            setProps(props);\n          }}\n        >\n          <label>\n            type:{' '}\n            <select name=\"type\">\n              <option></option>\n              <option>always</option>\n              <option>auto</option>\n              <option>scroll</option>\n              <option>hover</option>\n            </select>\n          </label>{' '}\n          <label>\n            dir:{' '}\n            <select name=\"dir\">\n              <option></option>\n              <option>ltr</option>\n              <option>rtl</option>\n            </select>\n          </label>{' '}\n          <label>\n            scrollHideDelay: <input type=\"number\" name=\"scrollHideDelay\" />\n          </label>\n        </form>\n      </div>\n\n      <ScrollAreaStory\n        {...props}\n        key={props.type}\n        style={{ width: 800, height: 800, margin: '30px auto' }}\n      >\n        {Array.from({ length: 30 }).map((_, index) => (\n          <Copy key={index} />\n        ))}\n      </ScrollAreaStory>\n    </div>\n  );\n};\n\nexport const Resizable = () => (\n  <div\n    className={styles.root}\n    style={{\n      width: 800,\n      height: 800,\n      padding: 20,\n      resize: 'both',\n      border: '1px solid gray',\n      overflow: 'hidden',\n    }}\n  >\n    <ScrollAreaStory style={{ width: '100%', height: '100%' }}>\n      {Array.from({ length: 30 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n  </div>\n);\n\nexport const ContentChange = () => {\n  const [verticalCount, setVerticalCount] = React.useState(1);\n  const [horizontalCount, setHorizontalCount] = React.useState(1);\n  return (\n    <div className={styles.root}>\n      <button onClick={() => setVerticalCount((count) => count + 1)}>Add vertical content</button>\n      <button onClick={() => setHorizontalCount((count) => count + 1)}>\n        Increase horizontal size\n      </button>\n      <ScrollAreaStory type=\"always\" style={{ width: 800, height: 800 }}>\n        {Array.from({ length: verticalCount }).map((_, index) => (\n          <Copy key={index} style={{ width: 300 * horizontalCount + 'px' }} />\n        ))}\n      </ScrollAreaStory>\n    </div>\n  );\n};\n\nexport const Animated = () => {\n  return (\n    <div className={styles.root}>\n      <ScrollAreaStory animated style={{ width: 800, height: 800 }}>\n        {Array.from({ length: 30 }).map((_, index) => (\n          <Copy key={index} />\n        ))}\n      </ScrollAreaStory>\n    </div>\n  );\n};\n\nexport const Chromatic = () => (\n  <div className={styles.root}>\n    <h1>Vertical</h1>\n    <h2>Auto with overflow</h2>\n    <ScrollAreaStory type=\"auto\" vertical horizontal={false}>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Auto without overflow</h2>\n    <ScrollAreaStory type=\"auto\" vertical horizontal={false}>\n      <Copy style={{ height: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Always with overflow</h2>\n    <ScrollAreaStory type=\"always\" vertical horizontal={false}>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Always without overflow</h2>\n    <ScrollAreaStory type=\"always\" vertical horizontal={false}>\n      <Copy style={{ height: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Scroll with overflow</h2>\n    <ScrollAreaStory type=\"scroll\" vertical horizontal={false}>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Scroll without overflow</h2>\n    <ScrollAreaStory type=\"scroll\" vertical horizontal={false}>\n      <Copy style={{ height: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Hover with overflow</h2>\n    <ScrollAreaStory type=\"hover\" vertical horizontal={false}>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Hover without overflow</h2>\n    <ScrollAreaStory type=\"hover\" vertical horizontal={false}>\n      <Copy style={{ height: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h1>Horizontal</h1>\n    <h2>Auto with overflow</h2>\n    <ScrollAreaStory type=\"auto\" vertical={false} horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Auto without overflow</h2>\n    <ScrollAreaStory type=\"auto\" vertical={false} horizontal>\n      <Copy style={{ width: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Always with overflow</h2>\n    <ScrollAreaStory type=\"always\" vertical={false} horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Always without overflow</h2>\n    <ScrollAreaStory type=\"always\" vertical={false} horizontal>\n      <Copy style={{ width: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Scroll with overflow</h2>\n    <ScrollAreaStory type=\"scroll\" vertical={false} horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Scroll without overflow</h2>\n    <ScrollAreaStory type=\"scroll\" vertical={false} horizontal>\n      <Copy style={{ width: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Hover with overflow</h2>\n    <ScrollAreaStory type=\"hover\" vertical={false} horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Hover without overflow</h2>\n    <ScrollAreaStory type=\"hover\" vertical={false} horizontal>\n      <Copy style={{ width: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h1>Both</h1>\n    <h2>Auto with overflow</h2>\n    <ScrollAreaStory type=\"auto\" vertical horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Auto with horizontal overflow</h2>\n    <ScrollAreaStory type=\"auto\" vertical horizontal>\n      {Array.from({ length: 1 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Auto with vertical overflow</h2>\n    <ScrollAreaStory type=\"auto\" vertical horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} style={{ width: 50, overflow: 'hidden' }} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Auto without overflow</h2>\n    <ScrollAreaStory type=\"auto\" vertical horizontal>\n      <Copy style={{ width: 50, height: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Always with overflow</h2>\n    <ScrollAreaStory type=\"always\" vertical horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Always without overflow</h2>\n    <ScrollAreaStory type=\"always\" vertical horizontal>\n      <Copy style={{ width: 50, height: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Scroll with overflow</h2>\n    <ScrollAreaStory type=\"scroll\" vertical horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Scroll without overflow</h2>\n    <ScrollAreaStory type=\"scroll\" vertical horizontal>\n      <Copy style={{ width: 50, height: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Hover with overflow</h2>\n    <ScrollAreaStory type=\"hover\" vertical horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Hover without overflow</h2>\n    <ScrollAreaStory type=\"hover\" vertical horizontal>\n      <Copy style={{ width: 50, height: 50, overflow: 'hidden' }} />\n    </ScrollAreaStory>\n\n    <h2>Hover with horizontal overflow</h2>\n    <ScrollAreaStory type=\"hover\" vertical horizontal>\n      {Array.from({ length: 1 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Hover with vertical overflow</h2>\n    <ScrollAreaStory type=\"hover\" vertical horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} style={{ width: 50, overflow: 'hidden' }} />\n      ))}\n    </ScrollAreaStory>\n\n    <h1>Min thumb size</h1>\n    <ScrollAreaStory type=\"always\" vertical horizontal>\n      {Array.from({ length: 100 }).map((_, index) => (\n        <Copy key={index} style={{ width: 10000 }} />\n      ))}\n    </ScrollAreaStory>\n\n    <h1>RTL</h1>\n    <h2>Prop</h2>\n    <ScrollAreaStory type=\"always\" dir=\"rtl\" vertical horizontal>\n      {Array.from({ length: 10 }).map((_, index) => (\n        <Copy key={index} />\n      ))}\n    </ScrollAreaStory>\n\n    <h2>Inherited</h2>\n    <Direction.Provider dir=\"rtl\">\n      <ScrollAreaStory type=\"always\" vertical horizontal>\n        {Array.from({ length: 10 }).map((_, index) => (\n          <Copy key={index} />\n        ))}\n      </ScrollAreaStory>\n    </Direction.Provider>\n  </div>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n\nconst DYNAMIC_CONTENT_DELAY = 2000;\n\nexport const ChromaticDynamicContentBeforeLoaded = () => {\n  const [showContent, setShowContent] = React.useState(false);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      setShowContent(true);\n    }, DYNAMIC_CONTENT_DELAY);\n  }, []);\n\n  return (\n    <div className={styles.root}>\n      <h1>Always</h1>\n      <ScrollAreaStory type=\"always\" style={{ width: 500, height: 250 }}>\n        {showContent ? (\n          Array.from({ length: 30 }).map((_, index) => <Copy key={index} />)\n        ) : (\n          <h1>Loading...</h1>\n        )}\n      </ScrollAreaStory>\n\n      <h1>Hover</h1>\n      <ScrollAreaStory type=\"hover\" style={{ width: 500, height: 250 }}>\n        {showContent ? (\n          Array.from({ length: 30 }).map((_, index) => <Copy key={index} />)\n        ) : (\n          <h1>Loading...</h1>\n        )}\n      </ScrollAreaStory>\n\n      <h1>Scroll</h1>\n      <ScrollAreaStory type=\"scroll\" style={{ width: 500, height: 250 }}>\n        {showContent ? (\n          Array.from({ length: 30 }).map((_, index) => <Copy key={index} />)\n        ) : (\n          <h1>Loading...</h1>\n        )}\n      </ScrollAreaStory>\n\n      <h1>Auto</h1>\n      <ScrollAreaStory type=\"auto\" style={{ width: 500, height: 250 }}>\n        {showContent ? (\n          Array.from({ length: 30 }).map((_, index) => <Copy key={index} />)\n        ) : (\n          <h1>Loading...</h1>\n        )}\n      </ScrollAreaStory>\n    </div>\n  );\n};\nChromaticDynamicContentBeforeLoaded.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticDynamicContentAfterLoaded = () => <ChromaticDynamicContentBeforeLoaded />;\nChromaticDynamicContentAfterLoaded.parameters = {\n  chromatic: { disable: false, delay: DYNAMIC_CONTENT_DELAY },\n};\n\nconst ScrollAreaStory = ({\n  children,\n  animated = false,\n  vertical = true,\n  horizontal = true,\n  ...props\n}: any) => (\n  <ScrollArea.Root\n    {...props}\n    className={styles.scrollArea}\n    style={{ width: 200, height: 200, ...props.style }}\n  >\n    <ScrollArea.Viewport className={styles.scrollAreaViewport}>{children}</ScrollArea.Viewport>\n    {vertical && (\n      <ScrollArea.Scrollbar className={styles.scrollbar} orientation=\"vertical\">\n        <ScrollArea.Thumb\n          className={[animated && styles.animatedThumb, styles.thumb].filter(Boolean).join(' ')}\n        />\n      </ScrollArea.Scrollbar>\n    )}\n    {horizontal && (\n      <ScrollArea.Scrollbar className={styles.scrollbar} orientation=\"horizontal\">\n        <ScrollArea.Thumb\n          className={[animated && styles.animatedThumb, styles.thumb].filter(Boolean).join(' ')}\n        />\n      </ScrollArea.Scrollbar>\n    )}\n    <ScrollArea.Corner className={styles.corner} />\n  </ScrollArea.Root>\n);\n\nconst Copy = (props: any) => (\n  <p style={{ width: 4000, marginTop: 0, ...props.style }}>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet eros iaculis, bibendum\n    tellus ac, lobortis odio. Aliquam bibendum elit est, in iaculis est commodo id. Donec pulvinar\n    est libero. Proin consectetur pellentesque molestie. Fusce mi ante, ullamcorper eu ante finibus,\n    finibus pellentesque turpis. Mauris convallis, leo in vulputate varius, sapien lectus suscipit\n    eros, ac semper odio sapien sit amet magna. Sed mattis turpis et lacinia ultrices. Nulla a\n    commodo mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n    ridiculus mus. Pellentesque id tempor metus. Pellentesque faucibus tortor non nisi maximus\n    dignissim. Etiam leo nisi, molestie a porttitor at, euismod a libero. Nullam placerat tristique\n    enim nec pulvinar. Sed eleifend dictum nulla a aliquam. Sed tempus ipsum eget urna posuere\n    aliquam. Nulla maximus tortor dui, sed laoreet odio aliquet ac. Vestibulum dolor orci, lacinia\n    finibus vehicula eget, posuere ac lectus. Quisque non felis at ipsum scelerisque condimentum. In\n    pharetra semper arcu, ut hendrerit sem auctor vel. Aliquam non lacinia elit, a facilisis ante.\n    Praesent eget eros augue. Praesent nunc orci, ullamcorper non pulvinar eu, elementum id nibh.\n    Nam id lorem euismod, sodales augue quis, porttitor magna. Vivamus ut nisl velit. Nam ultrices\n    maximus felis, quis ullamcorper quam luctus et.\n  </p>\n);\n"
  },
  {
    "path": "apps/storybook/stories/select.stories.module.css",
    "content": ".trigger {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  border: 1px solid var(--color-black);\n  border-radius: 6px;\n  background-color: transparent;\n  height: 50px;\n  padding: 5px 15px;\n  font-family: -apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  line-height: 1;\n  overflow: hidden;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);\n  }\n}\n\n.content {\n  background-color: var(--color-white);\n  border: 1px solid var(--color-gray100);\n  border-radius: 6px;\n  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);\n  position: relative;\n  &:focus-within {\n    border-color: var(--color-black);\n  }\n  min-width: var(--radix-select-trigger-width);\n  max-height: var(--radix-select-content-available-height);\n}\n\n.contentWithPadding {\n  padding: 5px;\n}\n\n.viewport {\n  padding: 5px;\n}\n\n.group {\n}\n\n.label,\n.item {\n  display: flex;\n  align-items: center;\n  line-height: 1;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n  height: 25px;\n  padding: 0 25px;\n  font-family: -apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  color: var(--color-black);\n  border-radius: 3px;\n}\n\n.label {\n  color: var(--color-gray300);\n  font-weight: 500;\n}\n\n.item {\n  position: relative;\n  outline: none;\n  &:active {\n    background-color: var(--color-gray100);\n  }\n\n  &[data-highlighted] {\n    background-color: var(--color-black);\n    color: white;\n  }\n\n  &[data-disabled] {\n    color: var(--color-gray100);\n  }\n  [dir='rtl'] & {\n    font-size: 16px;\n    font-weight: bold;\n  }\n}\n\n.itemInGroup {\n  padding-left: 35px;\n}\n\n.indicator {\n  position: absolute;\n  left: 6px;\n  top: 6px;\n  & :global(svg) {\n    display: block;\n  }\n  [dir='rtl'] & {\n    left: auto;\n    right: 6px;\n  }\n}\n\n.scrollButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: 25px;\n  background-color: var(--color-white);\n  color: var(--color-black);\n  cursor: default;\n  user-select: none;\n}\n\n.scrollUpButton {\n  border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n}\n\n.scrollDownButton {\n  border-top: 1px solid rgba(0, 0, 0, 0.2);\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n}\n\n.separator {\n  height: 1px;\n  margin: 5px -5px;\n  background-color: var(--color-gray100);\n}\n"
  },
  {
    "path": "apps/storybook/stories/select.stories.tsx",
    "content": "import * as React from 'react';\nimport { Dialog, Select, Label as LabelPrimitive } from 'radix-ui';\nimport { foodGroups } from '@repo/test-data/foods';\nimport styles from './select.stories.module.css';\n\nconst Label = LabelPrimitive.Root;\n\nexport default { title: 'Components/Select' };\n\nconst scrollUpButtonClass = [styles.scrollUpButton, styles.scrollButton].join(' ');\nconst scrollDownButtonClass = [styles.scrollDownButton, styles.scrollButton].join(' ');\n\nconst POSITIONS = ['item-aligned', 'popper'] as const;\n\nexport const Styled = () => (\n  <div style={{ display: 'flex', gap: 20, padding: 50 }}>\n    {POSITIONS.map((position) => (\n      <Label key={position}>\n        Choose a number:\n        <Select.Root defaultValue=\"two\">\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content} position={position} sideOffset={5}>\n              <Select.Viewport className={styles.viewport}>\n                <Select.Item className={styles.item} value=\"one\">\n                  <Select.ItemText>\n                    One<span aria-hidden> 👍</span>\n                  </Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"two\">\n                  <Select.ItemText>\n                    Two<span aria-hidden> 👌</span>\n                  </Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"three\">\n                  <Select.ItemText>\n                    Three<span aria-hidden> 🤘</span>\n                  </Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              </Select.Viewport>\n              <Select.Arrow />\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n    ))}\n  </div>\n);\n\nexport const Controlled = () => {\n  const [value, setValue] = React.useState('uk');\n  return (\n    <div style={{ display: 'flex', gap: 20, padding: 50 }}>\n      {POSITIONS.map((position) => (\n        <Label key={position}>\n          Choose a country:\n          <Select.Root value={value} onValueChange={setValue}>\n            <Select.Trigger className={styles.trigger}>\n              <Select.Value\n                aria-label={\n                  value === 'fr'\n                    ? 'France'\n                    : value === 'uk'\n                      ? 'United Kingdom'\n                      : value === 'es'\n                        ? 'Spain'\n                        : undefined\n                }\n              >\n                {value === 'fr' ? '🇫🇷' : value === 'uk' ? '🇬🇧' : value === 'es' ? '🇪🇸' : null}\n              </Select.Value>\n              <Select.Icon />\n            </Select.Trigger>\n            <Select.Portal>\n              <Select.Content className={styles.content} position={position} sideOffset={5}>\n                <Select.Viewport className={styles.viewport}>\n                  <Select.Item className={styles.item} value=\"fr\">\n                    <Select.ItemText>\n                      France<span aria-hidden> 🇫🇷</span>\n                    </Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                  <Select.Item className={styles.item} value=\"uk\">\n                    <Select.ItemText>\n                      United Kingdom<span aria-hidden> 🇬🇧</span>\n                    </Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                  <Select.Item className={styles.item} value=\"es\">\n                    <Select.ItemText>\n                      Spain<span aria-hidden> 🇪🇸</span>\n                    </Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                </Select.Viewport>\n                <Select.Arrow />\n              </Select.Content>\n            </Select.Portal>\n          </Select.Root>\n        </Label>\n      ))}\n    </div>\n  );\n};\n\nexport const Position = () => (\n  <div\n    style={{\n      display: 'flex',\n      gap: 20,\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '300vw',\n      height: '300vh',\n    }}\n  >\n    {POSITIONS.map((position) => (\n      <Label key={position}>\n        Choose an item:\n        <Select.Root defaultValue=\"item-25\">\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content} position={position} sideOffset={5}>\n              <Select.ScrollUpButton className={scrollUpButtonClass}>▲</Select.ScrollUpButton>\n              <Select.Viewport className={styles.viewport}>\n                {Array.from({ length: 50 }, (_, i) => {\n                  const value = `item-${i + 1}`;\n                  return (\n                    <Select.Item\n                      key={value}\n                      className={styles.item}\n                      value={value}\n                      disabled={i > 5 && i < 9}\n                    >\n                      <Select.ItemText>item {i + 1}</Select.ItemText>\n                      <Select.ItemIndicator className={styles.indicator}>\n                        <TickIcon />\n                      </Select.ItemIndicator>\n                    </Select.Item>\n                  );\n                })}\n              </Select.Viewport>\n              <Select.ScrollDownButton className={scrollDownButtonClass}>▼</Select.ScrollDownButton>\n              <Select.Arrow />\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n    ))}\n  </div>\n);\n\nexport const NoDefaultValue = () => (\n  <div\n    style={{\n      display: 'flex',\n      gap: 20,\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: '100vh',\n    }}\n  >\n    {POSITIONS.map((position) => (\n      <Label key={position}>\n        Choose a number:\n        <Select.Root>\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value placeholder=\"Pick an option\" />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content} position={position} sideOffset={5}>\n              <Select.Viewport className={styles.viewport}>\n                <Select.Item className={styles.item} value=\"one\" disabled>\n                  <Select.ItemText>One</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"two\">\n                  <Select.ItemText>Two</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"three\">\n                  <Select.ItemText>Three</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              </Select.Viewport>\n              <Select.Arrow />\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n    ))}\n  </div>\n);\n\nexport const Typeahead = () => (\n  <div\n    style={{\n      display: 'flex',\n      gap: 20,\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: '300vh',\n    }}\n  >\n    {POSITIONS.map((position) => (\n      <Label key={position}>\n        Favourite food:\n        <Select.Root defaultValue=\"banana\">\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content} position={position} sideOffset={5}>\n              <Select.ScrollUpButton className={scrollUpButtonClass}>▲</Select.ScrollUpButton>\n              <Select.Viewport className={styles.viewport}>\n                {foodGroups.map((foodGroup) =>\n                  foodGroup.foods.map((food) => (\n                    <Select.Item key={food.value} className={styles.item} value={food.value}>\n                      <Select.ItemText>{food.label}</Select.ItemText>\n                      <Select.ItemIndicator className={styles.indicator}>\n                        <TickIcon />\n                      </Select.ItemIndicator>\n                    </Select.Item>\n                  )),\n                )}\n              </Select.Viewport>\n              <Select.ScrollDownButton className={scrollDownButtonClass}>▼</Select.ScrollDownButton>\n              <Select.Arrow />\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n    ))}\n  </div>\n);\n\nexport const WithGroups = () => (\n  <div\n    style={{\n      display: 'flex',\n      gap: 20,\n      alignItems: 'center',\n      justifyContent: 'center',\n      height: '300vh',\n    }}\n  >\n    {POSITIONS.map((position) => (\n      <Label key={position}>\n        Favourite food:\n        <Select.Root defaultValue=\"banana\">\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content} position={position} sideOffset={5}>\n              <Select.ScrollUpButton className={scrollUpButtonClass}>▲</Select.ScrollUpButton>\n              <Select.Viewport className={styles.viewport}>\n                {foodGroups.map((foodGroup, index) => {\n                  const hasLabel = foodGroup.label !== undefined;\n                  return (\n                    <React.Fragment key={index}>\n                      <Select.Group className={styles.group}>\n                        {hasLabel && (\n                          <Select.Label className={styles.label} key={foodGroup.label}>\n                            {foodGroup.label}\n                          </Select.Label>\n                        )}\n                        {foodGroup.foods.map((food) => (\n                          <Select.Item\n                            key={food.value}\n                            className={[hasLabel && styles.itemInGroup, styles.item]\n                              .filter(Boolean)\n                              .join(' ')}\n                            value={food.value}\n                          >\n                            <Select.ItemText>{food.label}</Select.ItemText>\n                            <Select.ItemIndicator className={styles.indicator}>\n                              <TickIcon />\n                            </Select.ItemIndicator>\n                          </Select.Item>\n                        ))}\n                      </Select.Group>\n                      {index < foodGroups.length - 1 && (\n                        <Select.Separator className={styles.separator} />\n                      )}\n                    </React.Fragment>\n                  );\n                })}\n              </Select.Viewport>\n              <Select.ScrollDownButton className={scrollDownButtonClass}>▼</Select.ScrollDownButton>\n              <Select.Arrow />\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n    ))}\n  </div>\n);\n\nexport const Labelling = () => {\n  const content = (\n    <Select.Portal>\n      <Select.Content className={styles.content}>\n        <Select.Viewport className={styles.viewport}>\n          <Select.Item className={styles.item} value=\"0-18\">\n            <Select.ItemText>0 to 18</Select.ItemText>\n            <Select.ItemIndicator className={styles.indicator}>\n              <TickIcon />\n            </Select.ItemIndicator>\n          </Select.Item>\n          <Select.Item className={styles.item} value=\"18-40\">\n            <Select.ItemText>18 to 40</Select.ItemText>\n            <Select.ItemIndicator className={styles.indicator}>\n              <TickIcon />\n            </Select.ItemIndicator>\n          </Select.Item>\n          <Select.Item className={styles.item} value=\"40+\">\n            <Select.ItemText>Over 40</Select.ItemText>\n            <Select.ItemIndicator className={styles.indicator}>\n              <TickIcon />\n            </Select.ItemIndicator>\n          </Select.Item>\n        </Select.Viewport>\n      </Select.Content>\n    </Select.Portal>\n  );\n  return (\n    <div style={{ padding: 50 }}>\n      <h1>`Label` wrapping</h1>\n      <Label>\n        What is your age?\n        <Select.Root defaultValue=\"18-40\">\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value />\n            <Select.Icon />\n          </Select.Trigger>\n          {content}\n        </Select.Root>\n      </Label>\n\n      <h1>`Label` with `htmlFor`</h1>\n      <Label htmlFor=\"age-Label\">What is your age?</Label>\n      <Select.Root defaultValue=\"18-40\">\n        <Select.Trigger className={styles.trigger} id=\"age-Label\">\n          <Select.Value />\n          <Select.Icon />\n        </Select.Trigger>\n        {content}\n      </Select.Root>\n\n      <h1>`aria-labelledby`</h1>\n      <div id=\"age-aria-labelledby\">What is your age?</div>\n      <Select.Root defaultValue=\"18-40\">\n        <Select.Trigger className={styles.trigger} aria-labelledby=\"age-aria-labelledby\">\n          <Select.Value />\n          <Select.Icon />\n        </Select.Trigger>\n        {content}\n      </Select.Root>\n\n      <h1>`aria-label`</h1>\n      <Select.Root defaultValue=\"18-40\">\n        <Select.Trigger className={styles.trigger} aria-label=\"What is your age?\">\n          <Select.Value />\n          <Select.Icon />\n        </Select.Trigger>\n        {content}\n      </Select.Root>\n    </div>\n  );\n};\n\nexport const RightToLeft = () => (\n  <div style={{ display: 'flex', gap: 20, padding: 50 }} dir=\"rtl\">\n    {POSITIONS.map((position) => (\n      <Label key={position}>\n        اختر فاكهة:\n        <Select.Root defaultValue=\"two\" dir=\"rtl\">\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content} position={position} sideOffset={5}>\n              <Select.Viewport className={styles.viewport}>\n                <Select.Item className={styles.item} value=\"one\">\n                  <Select.ItemText>\n                    تفاح<span aria-hidden> 🍎</span>\n                  </Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"two\">\n                  <Select.ItemText>\n                    حفنة من الموز<span aria-hidden> 🍌</span>\n                  </Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"three\">\n                  <Select.ItemText>\n                    الفراولة<span aria-hidden> 🍓</span>\n                  </Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              </Select.Viewport>\n              <Select.Arrow />\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n    ))}\n  </div>\n);\n\nexport const WithinForm = () => {\n  const [data, setData] = React.useState({});\n\n  function handleChange(event: React.FormEvent<HTMLFormElement>) {\n    const formData = new FormData(event.currentTarget);\n    setData(Object.fromEntries((formData as any).entries()));\n  }\n\n  return (\n    <form\n      style={{ padding: 50 }}\n      onSubmit={(event) => {\n        handleChange(event);\n        event.preventDefault();\n      }}\n      onChange={handleChange}\n    >\n      <Label style={{ display: 'block' }}>\n        Name\n        <input name=\"name\" autoComplete=\"name\" style={{ display: 'block' }} />\n      </Label>\n      <br />\n      <Label style={{ display: 'block' }}>\n        Country\n        <Select.Root name=\"country\" autoComplete=\"country\" defaultValue=\"fr\">\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content}>\n              <Select.Viewport className={styles.viewport}>\n                <Select.Item className={styles.item} value=\"fr\">\n                  <Select.ItemText>France</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"uk\">\n                  <Select.ItemText>United Kingdom</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"es\">\n                  <Select.ItemText>Spain</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              </Select.Viewport>\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n      <br />\n      <button type=\"submit\">Submit</button>\n      <br />\n      <pre>{JSON.stringify(data, null, 2)}</pre>\n    </form>\n  );\n};\n\nexport const DisabledWithinForm = () => {\n  const [data, setData] = React.useState({});\n\n  function handleChange(event: React.FormEvent<HTMLFormElement>) {\n    const formData = new FormData(event.currentTarget);\n    setData(Object.fromEntries((formData as any).entries()));\n  }\n\n  return (\n    <form\n      style={{ padding: 50 }}\n      onSubmit={(event) => {\n        handleChange(event);\n        event.preventDefault();\n      }}\n      onChange={handleChange}\n    >\n      <Label style={{ display: 'block' }}>\n        Name\n        <input name=\"name\" autoComplete=\"name\" style={{ display: 'block' }} />\n      </Label>\n      <br />\n      <Label style={{ display: 'block' }}>\n        Country\n        <Select.Root name=\"country\" autoComplete=\"country\" defaultValue=\"fr\" disabled>\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content}>\n              <Select.Viewport className={styles.viewport}>\n                <Select.Item className={styles.item} value=\"fr\">\n                  <Select.ItemText>France</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"uk\">\n                  <Select.ItemText>United Kingdom</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"es\">\n                  <Select.ItemText>Spain</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              </Select.Viewport>\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n      <br />\n      <button type=\"submit\">Submit</button>\n      <br />\n      <pre>{JSON.stringify(data, null, 2)}</pre>\n    </form>\n  );\n};\n\nexport const RequiredWithinForm = () => {\n  const [data, setData] = React.useState({});\n\n  function handleChange(event: React.FormEvent<HTMLFormElement>) {\n    const formData = new FormData(event.currentTarget);\n    setData(Object.fromEntries((formData as any).entries()));\n  }\n\n  return (\n    <form\n      style={{ padding: 50 }}\n      onSubmit={(event) => {\n        handleChange(event);\n        event.preventDefault();\n      }}\n      onChange={handleChange}\n    >\n      <Label style={{ display: 'block' }}>\n        Name\n        <input name=\"name\" autoComplete=\"name\" style={{ display: 'block' }} />\n      </Label>\n      <br />\n      <Label style={{ display: 'block' }}>\n        Country\n        <Select.Root required name=\"country\" autoComplete=\"country\">\n          <Select.Trigger className={styles.trigger}>\n            <Select.Value placeholder=\"Pick an option\" />\n            <Select.Icon />\n          </Select.Trigger>\n          <Select.Portal>\n            <Select.Content className={styles.content}>\n              <Select.Viewport className={styles.viewport}>\n                <Select.Item className={styles.item} value=\"fr\">\n                  <Select.ItemText>France</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"uk\">\n                  <Select.ItemText>United Kingdom</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n                <Select.Item className={styles.item} value=\"es\">\n                  <Select.ItemText>Spain</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              </Select.Viewport>\n            </Select.Content>\n          </Select.Portal>\n        </Select.Root>\n      </Label>\n      <br />\n      <button type=\"submit\">Submit</button>\n      <br />\n      <pre>{JSON.stringify(data, null, 2)}</pre>\n    </form>\n  );\n};\n\nexport const WithinDialog = () => (\n  <div style={{ height: '120vh' }}>\n    <Dialog.Root>\n      <Dialog.Trigger>Open Dialog</Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay />\n        <Dialog.Content aria-describedby={undefined} style={{ position: 'fixed', top: 100 }}>\n          <Dialog.Title>A select in a dialog</Dialog.Title>\n          <Label>\n            Choose a number:\n            <Select.Root defaultValue=\"2\">\n              <Select.Trigger className={styles.trigger}>\n                <Select.Value />\n                <Select.Icon />\n              </Select.Trigger>\n              <Select.Portal>\n                <Select.Content className={styles.content}>\n                  <Select.ScrollUpButton className={scrollUpButtonClass}>▲</Select.ScrollUpButton>\n                  <Select.Viewport className={styles.viewport}>\n                    {Array.from({ length: 30 }, (_, i) => (\n                      <Select.Item key={i} className={styles.item} value={String(i)}>\n                        <Select.ItemText>Item {i}</Select.ItemText>\n                        <Select.ItemIndicator className={styles.indicator}>\n                          <TickIcon />\n                        </Select.ItemIndicator>\n                      </Select.Item>\n                    ))}\n                  </Select.Viewport>\n                  <Select.ScrollDownButton className={scrollDownButtonClass}>\n                    ▼\n                  </Select.ScrollDownButton>\n                </Select.Content>\n              </Select.Portal>\n            </Select.Root>\n          </Label>\n          <Dialog.Close>Close Dialog</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  </div>\n);\n\nexport const WithVeryLongSelectItems = () => (\n  <div style={{ paddingLeft: 300 }}>\n    <Label>\n      What is the meaning of life?\n      <Select.Root defaultValue=\"1\">\n        <Select.Trigger className={styles.trigger}>\n          <Select.Value />\n          <Select.Icon />\n        </Select.Trigger>\n        <Select.Portal>\n          <Select.Content className={styles.content}>\n            <Select.ScrollUpButton className={scrollUpButtonClass}>▲</Select.ScrollUpButton>\n            <Select.Viewport className={styles.viewport}>\n              {[\n                'The meaning of life is a complex topic that has been the subject of much philosophical, scientific, and theological speculation, with no definitive answer. The meaning of life can be interpreted in many different ways, depending on individual beliefs, values, and experiences.',\n                '42',\n              ].map((opt, i) => (\n                <Select.Item\n                  key={opt}\n                  className={styles.item}\n                  value={String(i)}\n                  // style={{ maxWidth: 500 }}\n                >\n                  <Select.ItemText>{opt}</Select.ItemText>\n                  <Select.ItemIndicator className={styles.indicator}>\n                    <TickIcon />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              ))}\n            </Select.Viewport>\n            <Select.ScrollDownButton className={scrollDownButtonClass}>▼</Select.ScrollDownButton>\n          </Select.Content>\n        </Select.Portal>\n      </Select.Root>\n    </Label>\n  </div>\n);\n\nexport const ChromaticShortOptionsPaddedContent = () => (\n  <ChromaticStoryShortOptions paddedElement=\"content\" />\n);\nChromaticShortOptionsPaddedContent.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticShortOptionsPaddedViewport = () => (\n  <ChromaticStoryShortOptions paddedElement=\"viewport\" />\n);\nChromaticShortOptionsPaddedViewport.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticLongOptionsPaddedContent = () => (\n  <ChromaticStoryLongOptions paddedElement=\"content\" />\n);\nChromaticLongOptionsPaddedContent.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticLongOptionsPaddedViewport = () => (\n  <ChromaticStoryLongOptions paddedElement=\"viewport\" />\n);\nChromaticLongOptionsPaddedViewport.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticTopFirstPaddedContent = () => (\n  <ChromaticStoryTopFirst paddedElement=\"content\" />\n);\nChromaticTopFirstPaddedContent.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticTopFirstPaddedViewport = () => (\n  <ChromaticStoryTopFirst paddedElement=\"viewport\" />\n);\nChromaticTopFirstPaddedViewport.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticBottomLastPaddedContent = () => (\n  <ChromaticStoryBottomLast paddedElement=\"content\" />\n);\nChromaticBottomLastPaddedContent.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticBottomLastPaddedViewport = () => (\n  <ChromaticStoryBottomLast paddedElement=\"viewport\" />\n);\nChromaticBottomLastPaddedViewport.parameters = { chromatic: { disable: false } };\n\nexport const ChromaticNoDefaultValue = () => (\n  <div\n    style={{\n      display: 'grid',\n      height: '100vh',\n      placeItems: 'center',\n      gridTemplateColumns: 'repeat(2, 1fr)',\n    }}\n  >\n    <Select.Root open>\n      <Select.Trigger className={styles.trigger}>\n        <Select.Value />\n        <Select.Icon />\n      </Select.Trigger>\n      <Select.Portal>\n        <Select.Content className={styles.content} style={{ opacity: 0.7 }}>\n          <Select.ScrollUpButton className={scrollUpButtonClass}>▲</Select.ScrollUpButton>\n          <Select.Viewport className={styles.viewport}>\n            {Array.from({ length: 10 }, (_, i) => (\n              <Select.Item key={i} className={styles.item} value={String(i)} disabled={i < 5}>\n                <Select.ItemText>{String(i)}</Select.ItemText>\n                <Select.ItemIndicator className={styles.indicator}>\n                  <TickIcon />\n                </Select.ItemIndicator>\n              </Select.Item>\n            ))}\n          </Select.Viewport>\n          <Select.ScrollDownButton className={scrollDownButtonClass}>▼</Select.ScrollDownButton>\n        </Select.Content>\n      </Select.Portal>\n    </Select.Root>\n\n    <Select.Root open>\n      <Select.Trigger className={styles.trigger}>\n        <Select.Value placeholder=\"Pick an option\" />\n        <Select.Icon />\n      </Select.Trigger>\n      <Select.Portal>\n        <Select.Content className={styles.content} style={{ opacity: 0.7 }}>\n          <Select.ScrollUpButton className={scrollUpButtonClass}>▲</Select.ScrollUpButton>\n          <Select.Viewport className={styles.viewport}>\n            {Array.from({ length: 10 }, (_, i) => (\n              <Select.Item key={i} className={styles.item} value={String(i)} disabled={i < 5}>\n                <Select.ItemText>{String(i)}</Select.ItemText>\n                <Select.ItemIndicator className={styles.indicator}>\n                  <TickIcon />\n                </Select.ItemIndicator>\n              </Select.Item>\n            ))}\n          </Select.Viewport>\n          <Select.ScrollDownButton className={scrollDownButtonClass}>▼</Select.ScrollDownButton>\n        </Select.Content>\n      </Select.Portal>\n    </Select.Root>\n  </div>\n);\nChromaticNoDefaultValue.parameters = { chromatic: { disable: false } };\n\nexport const Cypress = () => {\n  const [data, setData] = React.useState<{ size?: 'S' | 'M' | 'L' }>({});\n  const [model, setModel] = React.useState<string | undefined>('');\n\n  function handleChange(event: React.FormEvent<HTMLFormElement>) {\n    const formData = new FormData(event.currentTarget);\n    setData(Object.fromEntries((formData as any).entries()));\n  }\n\n  return (\n    <>\n      <form\n        style={{ padding: 50 }}\n        onSubmit={(event) => {\n          handleChange(event);\n          event.preventDefault();\n        }}\n        onChange={handleChange}\n      >\n        <Label>\n          choose a size:\n          <Select.Root defaultValue=\"M\" name=\"size\">\n            <Select.Trigger className={styles.trigger}>\n              <Select.Value />\n              <Select.Icon />\n            </Select.Trigger>\n            <Select.Portal>\n              <Select.Content className={styles.content}>\n                <Select.Viewport className={styles.viewport}>\n                  <Select.Item className={styles.item} value=\"S\">\n                    <Select.ItemText>Small</Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                  <Select.Item className={styles.item} value=\"M\">\n                    <Select.ItemText>Medium</Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                  <Select.Item className={styles.item} value=\"L\">\n                    <Select.ItemText>Large</Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                </Select.Viewport>\n              </Select.Content>\n            </Select.Portal>\n          </Select.Root>\n        </Label>\n        <button type=\"submit\" style={{ width: 100, height: 50 }}>\n          buy\n        </button>\n        {data.size ? <p>You picked t-shirt size {data.size}</p> : null}\n      </form>\n\n      <hr />\n\n      <div style={{ padding: 50 }}>\n        <Label>\n          choose a model\n          <Select.Root name=\"model\" value={model} onValueChange={setModel}>\n            <Select.Trigger className={styles.trigger}>\n              <Select.Value placeholder=\"…\" />\n              <Select.Icon />\n            </Select.Trigger>\n            <Select.Portal>\n              <Select.Content className={styles.content}>\n                <Select.Viewport className={styles.viewport}>\n                  <Select.Item className={styles.item} value=\"S\">\n                    <Select.ItemText>Model S</Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                  <Select.Item className={styles.item} value=\"3\">\n                    <Select.ItemText>Modal 3</Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                  <Select.Item className={styles.item} value=\"X\">\n                    <Select.ItemText>Model X</Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                  <Select.Item className={styles.item} value=\"Y\">\n                    <Select.ItemText>Model Y</Select.ItemText>\n                    <Select.ItemIndicator className={styles.indicator}>\n                      <TickIcon />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                </Select.Viewport>\n              </Select.Content>\n            </Select.Portal>\n          </Select.Root>\n        </Label>\n\n        <button type=\"button\" style={{ width: 100, height: 50 }} onClick={() => setModel('')}>\n          unset\n        </button>\n      </div>\n    </>\n  );\n};\n\ntype PaddedElement = 'content' | 'viewport';\n\ninterface ChromaticSelectProps extends React.ComponentProps<typeof Select.Trigger> {\n  count?: number;\n  paddedElement?: PaddedElement;\n  selected: number;\n}\n\nconst ChromaticSelect = ({\n  count = 5,\n  paddedElement = 'content',\n  selected,\n  ...props\n}: ChromaticSelectProps) => (\n  <Select.Root defaultValue={String(selected)} open>\n    <Select.Trigger className={styles.trigger} {...props}>\n      <Select.Value />\n      <Select.Icon />\n    </Select.Trigger>\n    <Select.Portal>\n      <Select.Content\n        className={[paddedElement === 'content' && styles.contentWithPadding, styles.contentClass]\n          .filter(Boolean)\n          .join(' ')}\n        style={{ opacity: 0.7 }}\n      >\n        <Select.ScrollUpButton\n          className={scrollUpButtonClass}\n          style={paddedElement === 'content' ? { marginTop: -5 } : undefined}\n        >\n          ▲\n        </Select.ScrollUpButton>\n        <Select.Viewport className={paddedElement === 'viewport' ? styles.viewport : undefined}>\n          {Array.from({ length: count }, (_, i) => (\n            <Select.Item key={i} className={styles.item} value={String(i)}>\n              <Select.ItemText>{String(i)}</Select.ItemText>\n              <Select.ItemIndicator className={styles.indicator}>\n                <TickIcon />\n              </Select.ItemIndicator>\n            </Select.Item>\n          ))}\n        </Select.Viewport>\n        <Select.ScrollDownButton\n          className={scrollDownButtonClass}\n          style={paddedElement === 'content' ? { marginBottom: -5 } : undefined}\n        >\n          ▼\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select.Portal>\n  </Select.Root>\n);\n\nconst SelectShort = React.forwardRef<\n  React.ComponentRef<typeof ChromaticSelect>,\n  React.ComponentProps<typeof ChromaticSelect>\n>(({ count = 9, ...props }, forwardedRef) => (\n  <ChromaticSelect count={count} {...props} ref={forwardedRef} />\n));\n\nconst SelectLong = React.forwardRef<\n  React.ComponentRef<typeof ChromaticSelect>,\n  React.ComponentProps<typeof ChromaticSelect>\n>(({ count = 50, ...props }, forwardedRef) => (\n  <ChromaticSelect count={count} {...props} ref={forwardedRef} />\n));\n\nconst ChromaticStoryShortOptions = ({ paddedElement }: { paddedElement: PaddedElement }) => (\n  <div\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'repeat(5, 1fr)',\n      gridTemplateRows: 'repeat(3, 1fr)',\n      height: '100vh',\n      placeItems: 'center',\n    }}\n  >\n    <SelectShort paddedElement={paddedElement} selected={0} style={{ alignSelf: 'start' }} />\n    <SelectShort paddedElement={paddedElement} selected={2} style={{ alignSelf: 'start' }} />\n    <SelectShort paddedElement={paddedElement} selected={4} style={{ alignSelf: 'start' }} />\n    <SelectShort paddedElement={paddedElement} selected={6} style={{ alignSelf: 'start' }} />\n    <SelectShort paddedElement={paddedElement} selected={8} style={{ alignSelf: 'start' }} />\n\n    <SelectShort paddedElement={paddedElement} selected={0} />\n    <SelectShort paddedElement={paddedElement} selected={2} />\n    <SelectShort paddedElement={paddedElement} selected={4} />\n    <SelectShort paddedElement={paddedElement} selected={6} />\n    <SelectShort paddedElement={paddedElement} selected={8} />\n\n    <SelectShort paddedElement={paddedElement} selected={0} style={{ alignSelf: 'end' }} />\n    <SelectShort paddedElement={paddedElement} selected={2} style={{ alignSelf: 'end' }} />\n    <SelectShort paddedElement={paddedElement} selected={4} style={{ alignSelf: 'end' }} />\n    <SelectShort paddedElement={paddedElement} selected={6} style={{ alignSelf: 'end' }} />\n    <SelectShort paddedElement={paddedElement} selected={8} style={{ alignSelf: 'end' }} />\n  </div>\n);\n\nconst ChromaticStoryLongOptions = ({ paddedElement }: { paddedElement: PaddedElement }) => (\n  <div\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'repeat(15, 1fr)',\n      gridTemplateRows: 'repeat(3, 1fr)',\n      height: '100vh',\n      placeItems: 'center',\n    }}\n  >\n    <SelectLong paddedElement={paddedElement} selected={0} style={{ alignSelf: 'start' }} />\n    <SelectLong paddedElement={paddedElement} selected={25} style={{ alignSelf: 'start' }} />\n    <SelectLong paddedElement={paddedElement} selected={49} style={{ alignSelf: 'start' }} />\n\n    <SelectLong paddedElement={paddedElement} selected={0} style={{ gridRow: 1, gridColumn: 4 }} />\n    <SelectLong paddedElement={paddedElement} selected={25} style={{ gridRow: 1, gridColumn: 5 }} />\n    <SelectLong paddedElement={paddedElement} selected={49} style={{ gridRow: 1, gridColumn: 6 }} />\n\n    <SelectLong paddedElement={paddedElement} selected={0} style={{ gridRow: 2, gridColumn: 7 }} />\n    <SelectLong paddedElement={paddedElement} selected={25} style={{ gridRow: 2, gridColumn: 8 }} />\n    <SelectLong paddedElement={paddedElement} selected={49} style={{ gridRow: 2, gridColumn: 9 }} />\n\n    <SelectLong paddedElement={paddedElement} selected={0} style={{ gridRow: 3, gridColumn: 10 }} />\n    <SelectLong\n      paddedElement={paddedElement}\n      selected={25}\n      style={{ gridRow: 3, gridColumn: 11 }}\n    />\n    <SelectLong\n      paddedElement={paddedElement}\n      selected={49}\n      style={{ gridRow: 3, gridColumn: 12 }}\n    />\n\n    <SelectLong\n      paddedElement={paddedElement}\n      selected={0}\n      style={{ gridRow: 3, gridColumn: 13, alignSelf: 'end' }}\n    />\n    <SelectLong\n      paddedElement={paddedElement}\n      selected={25}\n      style={{ gridRow: 3, gridColumn: 14, alignSelf: 'end' }}\n    />\n    <SelectLong\n      paddedElement={paddedElement}\n      selected={49}\n      style={{ gridRow: 3, gridColumn: 15, alignSelf: 'end' }}\n    />\n  </div>\n);\n\nconst ChromaticStoryTopFirst = ({ paddedElement }: { paddedElement: PaddedElement }) => (\n  <div style={{ display: 'flex', height: '100vh' }}>\n    <SelectShort paddedElement={paddedElement} selected={0} />\n  </div>\n);\n\nconst ChromaticStoryBottomLast = ({ paddedElement }: { paddedElement: PaddedElement }) => (\n  <div style={{ display: 'flex', height: '100vh', alignItems: 'flex-end' }}>\n    <SelectShort paddedElement={paddedElement} selected={8} />\n  </div>\n);\n\nconst TickIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    width=\"12\"\n    height=\"12\"\n    fill=\"none\"\n    stroke=\"currentcolor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth=\"3\"\n  >\n    <path d=\"M2 20 L12 28 30 4\" />\n  </svg>\n);\n"
  },
  {
    "path": "apps/storybook/stories/separator.stories.module.css",
    "content": ".root {\n  border: none;\n  background-color: var(--color-red);\n\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: 100%;\n    margin: 20px 0;\n  }\n\n  &[data-orientation='vertical'] {\n    height: 100px;\n    width: 1px;\n    margin: 0 20px;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/separator.stories.tsx",
    "content": "import { Separator } from 'radix-ui';\nimport styles from './separator.stories.module.css';\n\nexport default { title: 'Components/Separator' };\n\nexport const Styled = () => (\n  <>\n    <h1>Horizontal</h1>\n    <p>The following separator is horizontal and has semantic meaning.</p>\n    <Separator.Root className={styles.root} orientation=\"horizontal\" />\n    <p>\n      The following separator is horizontal and is purely decorative. Assistive technology will\n      ignore this element.\n    </p>\n    <Separator.Root className={styles.root} orientation=\"horizontal\" decorative />\n\n    <h1>Vertical</h1>\n    <div style={{ display: 'flex', alignItems: 'center' }}>\n      <p>The following separator is vertical and has semantic meaning.</p>\n      <Separator.Root className={styles.root} orientation=\"vertical\" />\n      <p>\n        The following separator is vertical and is purely decorative. Assistive technology will\n        ignore this element.\n      </p>\n      <Separator.Root className={styles.root} orientation=\"vertical\" decorative />\n    </div>\n  </>\n);\n"
  },
  {
    "path": "apps/storybook/stories/slider.stories.module.css",
    "content": ".root,\n.rootAttr {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  /* ensures no selection */\n  user-select: none;\n  /* disable browser handling of all panning and zooming gestures on touch devices */\n  touch-action: none;\n}\n\n.root {\n  &[data-orientation='horizontal'] {\n    height: 25px;\n  }\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n    width: 25px;\n  }\n  &[data-disabled] {\n    opacity: 0.5;\n  }\n}\n\n.track,\n.trackAttr {\n  position: relative;\n  /* ensures full width in horizontal orientation, ignored in vertical orientation */\n  flex-grow: 1;\n}\n\n.track {\n  background: gainsboro;\n  border-radius: 4px;\n  &[data-orientation='horizontal'] {\n    height: 4px;\n  }\n  &[data-orientation='vertical'] {\n    width: 4px;\n    height: 300px;\n  }\n}\n\n.range,\n.rangeAttr {\n  position: absolute;\n  /* good default for both orientation (match track width/height respectively) */\n  &[data-orientation='horizontal'] {\n    height: 100%;\n  }\n  &[data-orientation='vertical'] {\n    width: 100%;\n  }\n}\n\n.range {\n  background: var(--color-black);\n  border-radius: inherit;\n}\n\n.thumb,\n.thumbAttr {\n  /* ensures the thumb is sizeable */\n  display: block;\n\n  /* Add recommended target size regardless of styled size */\n  &::before {\n    content: '';\n    position: absolute;\n    z-index: -1;\n    width: 44px;\n    height: 44px;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n}\n\n.thumb {\n  border-radius: 25px;\n  width: 25px;\n  height: 25px;\n  background-color: var(--color-black);\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--color-red);\n  }\n\n  display: inline-grid;\n  place-items: center;\n  &:after {\n    content: attr(aria-valuenow);\n    position: relative;\n    font-size: 10px;\n    color: white;\n  }\n}\n\n.rootAttr,\n.trackAttr,\n.rangeAttr,\n.thumbAttr {\n  background-color: rgba(0, 0, 255, 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n\n  &[data-disabled] {\n    border-style: dashed;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/slider.stories.tsx",
    "content": "import * as React from 'react';\nimport { Direction, Slider } from 'radix-ui';\nimport serialize from 'form-serialize';\nimport styles from './slider.stories.module.css';\n\nexport default { title: 'Components/Slider' };\n\nexport const Styled = () => (\n  <Slider.Root className={styles.root}>\n    <Slider.Track className={styles.track}>\n      <Slider.Range className={styles.range} />\n    </Slider.Track>\n    <Slider.Thumb className={styles.thumb} />\n  </Slider.Root>\n);\n\nexport const WithOnValueCommit = () => (\n  <>\n    <Slider.Root className={styles.root} defaultValue={[20]} onValueCommit={console.log}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n    <p>Check the console for the `onValueCommit` log</p>\n  </>\n);\n\nexport const RightToLeft = () => (\n  <Slider.Root className={styles.root} dir=\"rtl\">\n    <Slider.Track className={styles.track}>\n      <Slider.Range className={styles.range} />\n    </Slider.Track>\n    <Slider.Thumb className={styles.thumb} />\n  </Slider.Root>\n);\n\nexport const Horizontal = () => (\n  <div style={{ display: 'flex', flexDirection: 'column', gap: 50 }}>\n    <Slider.Root\n      className={styles.root}\n      defaultValue={[10, 30]}\n      minStepsBetweenThumbs={1}\n      onValueChange={(value) => console.log(value)}\n    >\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <Slider.Root className={styles.root} defaultValue={[10]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n  </div>\n);\n\nexport const Vertical = () => (\n  <div style={{ display: 'flex', gap: 50 }}>\n    <Slider.Root className={styles.root} defaultValue={[10, 30]} orientation=\"vertical\">\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <Slider.Root className={styles.root} defaultValue={[10]} orientation=\"vertical\">\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n  </div>\n);\n\nexport const Inversions = () => (\n  <>\n    <h1>Inversions</h1>\n    <h2>Horizontal</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <div style={{ flex: 1 }}>\n        <h3>LTR</h3>\n        <h4>default</h4>\n        <Slider.Root className={styles.root} defaultValue={[20]}>\n          <Slider.Track className={styles.track}>\n            <Slider.Range className={styles.range} />\n          </Slider.Track>\n          <Slider.Thumb className={styles.thumb} />\n        </Slider.Root>\n\n        <h4>Inverted</h4>\n        <Slider.Root className={styles.root} defaultValue={[20]} inverted>\n          <Slider.Track className={styles.track}>\n            <Slider.Range className={styles.range} />\n          </Slider.Track>\n          <Slider.Thumb className={styles.thumb} />\n        </Slider.Root>\n      </div>\n\n      <div style={{ flex: 1 }}>\n        <h3>RTL</h3>\n        <h4>Default</h4>\n        <Slider.Root className={styles.root} defaultValue={[20]} dir=\"rtl\">\n          <Slider.Track className={styles.track}>\n            <Slider.Range className={styles.range} />\n          </Slider.Track>\n          <Slider.Thumb className={styles.thumb} />\n        </Slider.Root>\n\n        <h4>Inverted</h4>\n        <Slider.Root className={styles.root} defaultValue={[20]} dir=\"rtl\" inverted>\n          <Slider.Track className={styles.track}>\n            <Slider.Range className={styles.range} />\n          </Slider.Track>\n          <Slider.Thumb className={styles.thumb} />\n        </Slider.Root>\n      </div>\n    </div>\n\n    <h2>Vertical</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <div style={{ flex: 1 }}>\n        <h3>LTR</h3>\n        <div style={{ display: 'flex', gap: 50 }}>\n          <div>\n            <h4>Default</h4>\n            <Slider.Root className={styles.root} defaultValue={[20]} orientation=\"vertical\">\n              <Slider.Track className={styles.track}>\n                <Slider.Range className={styles.range} />\n              </Slider.Track>\n              <Slider.Thumb className={styles.thumb} />\n            </Slider.Root>\n          </div>\n\n          <div>\n            <h4>Inverted</h4>\n            <Slider.Root\n              className={styles.root}\n              defaultValue={[20]}\n              orientation=\"vertical\"\n              inverted\n            >\n              <Slider.Track className={styles.track}>\n                <Slider.Range className={styles.range} />\n              </Slider.Track>\n              <Slider.Thumb className={styles.thumb} />\n            </Slider.Root>\n          </div>\n        </div>\n      </div>\n\n      <div style={{ flex: 1 }}>\n        <h3>RTL</h3>\n        <div style={{ display: 'flex', gap: 50 }}>\n          <div>\n            <h4>Default</h4>\n            <Slider.Root\n              className={styles.root}\n              defaultValue={[20]}\n              dir=\"rtl\"\n              orientation=\"vertical\"\n            >\n              <Slider.Track className={styles.track}>\n                <Slider.Range className={styles.range} />\n              </Slider.Track>\n              <Slider.Thumb className={styles.thumb} />\n            </Slider.Root>\n          </div>\n\n          <div>\n            <h4>Inverted</h4>\n            <Slider.Root\n              className={styles.root}\n              defaultValue={[20]}\n              dir=\"rtl\"\n              orientation=\"vertical\"\n              inverted\n            >\n              <Slider.Track className={styles.track}>\n                <Slider.Range className={styles.range} />\n              </Slider.Track>\n              <Slider.Thumb className={styles.thumb} />\n            </Slider.Root>\n          </div>\n        </div>\n      </div>\n    </div>\n  </>\n);\n\nexport const WithMinimumStepsBetweenThumbs = () => (\n  <Slider.Root className={styles.root} defaultValue={[10, 30]} minStepsBetweenThumbs={3}>\n    <Slider.Track className={styles.track}>\n      <Slider.Range className={styles.range} />\n    </Slider.Track>\n    <Slider.Thumb className={styles.thumb} />\n    <Slider.Thumb className={styles.thumb} />\n  </Slider.Root>\n);\n\nexport const WithMultipleRanges = () => {\n  const [minStepsBetweenThumbs, setMinStepsBetweenThumbs] = React.useState(0);\n\n  return (\n    <>\n      <label>\n        Minimum steps between thumbs:{' '}\n        <input\n          type=\"number\"\n          value={minStepsBetweenThumbs}\n          onChange={(event) => setMinStepsBetweenThumbs(Number(event.target.value))}\n          style={{ width: 30 }}\n        />\n      </label>\n\n      <br />\n      <br />\n\n      <Slider.Root\n        className={styles.root}\n        defaultValue={[10, 15, 20, 80]}\n        minStepsBetweenThumbs={minStepsBetweenThumbs}\n      >\n        <Slider.Track className={styles.track}>\n          <Slider.Range className={styles.range} />\n        </Slider.Track>\n        <Slider.Thumb className={styles.thumb} />\n        <Slider.Thumb className={styles.thumb} />\n        <Slider.Thumb className={styles.thumb} />\n        <Slider.Thumb className={styles.thumb} />\n      </Slider.Root>\n    </>\n  );\n};\n\nexport const SmallSteps = () => {\n  const [value, setValue] = React.useState([0.1]);\n  return (\n    <>\n      <Slider.Root\n        className={styles.root}\n        value={value}\n        onValueChange={setValue}\n        min={0.1}\n        max={0.2}\n        step={0.003}\n      >\n        <Slider.Track className={styles.track}>\n          <Slider.Range className={styles.range} />\n        </Slider.Track>\n        <Slider.Thumb className={styles.thumb} />\n      </Slider.Root>\n      <div>{value}</div>\n    </>\n  );\n};\n\nexport const WithinForm = () => {\n  const [data, setData] = React.useState({\n    single: [0],\n    multiple: [10, 15, 20, 80],\n    price: {\n      min: 30,\n      max: 70,\n    },\n  });\n  return (\n    <form\n      onSubmit={(event) => {\n        event.preventDefault();\n        console.log(serialize(event.currentTarget, { hash: true }));\n      }}\n      onChange={(event) => {\n        const formData = serialize(event.currentTarget, { hash: true });\n        setData(formData as any);\n      }}\n    >\n      <fieldset>\n        <legend>Single value: {String(data.single)}</legend>\n        <Slider.Root name=\"single\" defaultValue={data.single} className={styles.root}>\n          <Slider.Track className={styles.track}>\n            <Slider.Range className={styles.range} />\n          </Slider.Track>\n          <Slider.Thumb className={styles.thumb} />\n        </Slider.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>Multiple value: {String(data.multiple)}</legend>\n        <Slider.Root name=\"multiple\" defaultValue={data.multiple} className={styles.root}>\n          <Slider.Track className={styles.track}>\n            <Slider.Range className={styles.range} />\n          </Slider.Track>\n          <Slider.Thumb className={styles.thumb} />\n          <Slider.Thumb className={styles.thumb} />\n          <Slider.Thumb className={styles.thumb} />\n          <Slider.Thumb className={styles.thumb} />\n        </Slider.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>Multiple values (with named thumbs): {JSON.stringify(data.price)}</legend>\n        <Slider.Root defaultValue={[data.price.min, data.price.max]} className={styles.root}>\n          <Slider.Track className={styles.track}>\n            <Slider.Range className={styles.range} />\n          </Slider.Track>\n          <Slider.Thumb className={styles.thumb} name=\"price[min]\" />\n          <Slider.Thumb className={styles.thumb} name=\"price[max]\" />\n        </Slider.Root>\n      </fieldset>\n\n      <button type=\"submit\">Submit</button>\n    </form>\n  );\n};\n\nexport const Strict = () => (\n  <React.StrictMode>\n    <Slider.Root className={styles.root}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n    <Slider.Root className={styles.root} defaultValue={[10, 15, 20, 80]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n  </React.StrictMode>\n);\n\nexport const Chromatic = () => (\n  <>\n    <h1>Uncontrolled</h1>\n    <h2>LTR</h2>\n    <Slider.Root className={styles.root} defaultValue={[20]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n    <Slider.Root className={styles.root} defaultValue={[10, 30]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h2>RTL</h2>\n    <Slider.Root className={styles.root} defaultValue={[20]} dir=\"rtl\">\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n    <Slider.Root className={styles.root} defaultValue={[10, 30]} dir=\"rtl\">\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h2>Multiple ranges</h2>\n    <Slider.Root className={styles.root} defaultValue={[10, 15, 20, 80]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h1>Controlled</h1>\n    <h2>LTR</h2>\n    <Slider.Root className={styles.root} value={[20]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n    <Slider.Root className={styles.root} value={[10, 30]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h1>Direction</h1>\n    <h2>Prop</h2>\n    <Slider.Root className={styles.root} value={[20]} dir=\"rtl\">\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n    <Slider.Root className={styles.root} value={[10, 30]} dir=\"rtl\">\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h2>Inherited</h2>\n    <Direction.Provider dir=\"rtl\">\n      <Slider.Root className={styles.root} value={[20]}>\n        <Slider.Track className={styles.track}>\n          <Slider.Range className={styles.range} />\n        </Slider.Track>\n        <Slider.Thumb className={styles.thumb} />\n      </Slider.Root>\n      <Slider.Root className={styles.root} value={[10, 30]}>\n        <Slider.Track className={styles.track}>\n          <Slider.Range className={styles.range} />\n        </Slider.Track>\n        <Slider.Thumb className={styles.thumb} />\n        <Slider.Thumb className={styles.thumb} />\n      </Slider.Root>\n    </Direction.Provider>\n\n    <h1>Scenarios</h1>\n    <h2>Extremes</h2>\n    <Slider.Root className={styles.root} defaultValue={[0, 100]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h2>0 case</h2>\n    <Slider.Root className={styles.root} defaultValue={[0]} min={-100} max={100}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h2>Multiple ranges</h2>\n    <Slider.Root className={styles.root} value={[10, 15, 20, 80]}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h2>Vertical</h2>\n    <div style={{ display: 'flex' }}>\n      <Slider.Root className={styles.root} defaultValue={[10, 30]} orientation=\"vertical\">\n        <Slider.Track className={styles.track}>\n          <Slider.Range className={styles.range} />\n        </Slider.Track>\n        <Slider.Thumb className={styles.thumb} />\n        <Slider.Thumb className={styles.thumb} />\n      </Slider.Root>\n      <Slider.Root className={styles.root} defaultValue={[20]} orientation=\"vertical\">\n        <Slider.Track className={styles.track}>\n          <Slider.Range className={styles.range} />\n        </Slider.Track>\n        <Slider.Thumb className={styles.thumb} />\n      </Slider.Root>\n    </div>\n\n    <h2>Out of bound value (negative)</h2>\n    <Slider.Root className={styles.root} defaultValue={[-9000]} min={0} max={100}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h2>Out of bound value (positive)</h2>\n    <Slider.Root className={styles.root} defaultValue={[9000]} min={0} max={100}>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <h1>Disabled</h1>\n    <Slider.Root className={styles.root} defaultValue={[20]} disabled>\n      <Slider.Track className={styles.track}>\n        <Slider.Range className={styles.range} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumb} />\n    </Slider.Root>\n\n    <Inversions />\n\n    <h1>State attributes</h1>\n    <h2>Default</h2>\n    <Slider.Root className={styles.rootAttr} defaultValue={[20]}>\n      <Slider.Track className={styles.trackAttr}>\n        <Slider.Range className={styles.rangeAttr} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumbAttr} />\n    </Slider.Root>\n\n    <h2>Disabled</h2>\n    <Slider.Root className={styles.rootAttr} defaultValue={[20]} disabled>\n      <Slider.Track className={styles.trackAttr}>\n        <Slider.Range className={styles.rangeAttr} />\n      </Slider.Track>\n      <Slider.Thumb className={styles.thumbAttr} />\n    </Slider.Root>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/slot.stories.tsx",
    "content": "import * as React from 'react';\nimport { Slot } from 'radix-ui';\nimport type { Meta, StoryObj } from '@storybook/react-webpack5';\n\nexport default { title: 'Utilities/Slot' } satisfies Meta<typeof Slot.Root>;\n\ntype Story = StoryObj<typeof Slot.Root>;\n\nexport const WithoutSlottable = {\n  render: () => (\n    <SlotWithoutSlottable>\n      <b data-slot-element>hello</b>\n    </SlotWithoutSlottable>\n  ),\n} satisfies Story;\n\nexport const WithSlottable = () => (\n  <SlotWithSlottable>\n    <b data-slot-element>hello</b>\n  </SlotWithSlottable>\n);\n\nexport const WithComposedEvents = () => (\n  <>\n    <h1>Should log both</h1>\n    <SlotWithPreventableEvent>\n      <button onClick={() => console.log('button click')}>Slot event not prevented</button>\n    </SlotWithPreventableEvent>\n\n    <h1>Should log \"button click\"</h1>\n    <SlotWithPreventableEvent>\n      <button\n        onClick={(event) => {\n          console.log('button click');\n          event.preventDefault();\n        }}\n      >\n        Slot event prevented\n      </button>\n    </SlotWithPreventableEvent>\n\n    <h1>Should log both</h1>\n    <SlotWithoutPreventableEvent>\n      <button onClick={() => console.log('button click')}>Slot event not prevented</button>\n    </SlotWithoutPreventableEvent>\n\n    <h1>Should log both</h1>\n    <SlotWithoutPreventableEvent>\n      <button\n        onClick={(event) => {\n          console.log('button click');\n          event.preventDefault();\n        }}\n      >\n        Slot event prevented\n      </button>\n    </SlotWithoutPreventableEvent>\n  </>\n);\n\nexport const ButtonAsLink = () => (\n  <>\n    <h1>Button with left/right icons</h1>\n    <Button\n      iconLeft={<MockIcon color=\"tomato\" />}\n      iconRight={<MockIcon color=\"royalblue\" />}\n      ref={console.log}\n    >\n      Button <em>text</em>\n    </Button>\n\n    <h1>Button with left/right icons as link (asChild)</h1>\n    <Button\n      asChild\n      iconLeft={<MockIcon color=\"tomato\" />}\n      iconRight={<MockIcon color=\"royalblue\" />}\n      ref={console.log}\n    >\n      <a href=\"https://radix-ui.com\">\n        Button <em>text</em>\n      </a>\n    </Button>\n  </>\n);\n\nconst LazyButton = React.lazy(async () => {\n  await wait(1000);\n  return {\n    default: ({ children, ...props }: React.ComponentProps<'button'>) => (\n      <button {...props}>{children}</button>\n    ),\n  };\n});\n\nexport const WithLazyComponent = () => {\n  return (\n    <React.Suspense fallback={<div>Loading...</div>}>\n      <Slot.Root data-slot-root onClick={() => console.log('click')}>\n        <LazyButton data-slot-lazy>Click me</LazyButton>\n      </Slot.Root>\n    </React.Suspense>\n  );\n};\n\nexport const Chromatic = () => (\n  <>\n    <h1>Without Slottable</h1>\n\n    <h2>\n      One consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithoutSlottable>\n        <b data-slot-element>hello</b>\n      </SlotWithoutSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      Multiple consumer child - <span aria-hidden>🔴</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithoutSlottable>\n        <b data-slot-element>hello</b>\n        <b data-slot-element>hello</b>\n      </SlotWithoutSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      Null consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithoutSlottable>{null}</SlotWithoutSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      Empty consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithoutSlottable></SlotWithoutSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      False consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithoutSlottable>{false}</SlotWithoutSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      False internal child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithFalseInternalChild>\n        <b data-slot-element>hello</b>\n      </SlotWithFalseInternalChild>\n    </ErrorBoundary>\n\n    <h2>\n      Null internal child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithNullInternalChild>\n        <b data-slot-element>hello</b>\n      </SlotWithNullInternalChild>\n    </ErrorBoundary>\n\n    <h2>\n      String consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithoutSlottable>test</SlotWithoutSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      Number consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithoutSlottable>{1}</SlotWithoutSlottable>\n    </ErrorBoundary>\n\n    <h1>With Slottable</h1>\n\n    <h2>\n      One consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithSlottable>\n        <b data-slot-element>hello</b>\n      </SlotWithSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      Multiple consumer child - <span aria-hidden>🔴</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithSlottable>\n        <b data-slot-element>hello</b>\n        <b data-slot-element>hello</b>\n      </SlotWithSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      Null consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithSlottable>{null}</SlotWithSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      String consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithSlottable>test</SlotWithSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      Number consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithSlottable>{1}</SlotWithSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      Empty consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithSlottable></SlotWithSlottable>\n    </ErrorBoundary>\n\n    <h2>\n      False consumer child - <span aria-hidden>✅</span>\n    </h2>\n    <ErrorBoundary>\n      <SlotWithSlottable>{false}</SlotWithSlottable>\n    </ErrorBoundary>\n\n    <h2>Button with left/right icons</h2>\n    <Button iconLeft={<MockIcon color=\"tomato\" />} iconRight={<MockIcon color=\"royalblue\" />}>\n      Button <em>text</em>\n    </Button>\n\n    <h2>Button with left/right icons as link (asChild)</h2>\n    <Button\n      asChild\n      iconLeft={<MockIcon color=\"tomato\" />}\n      iconRight={<MockIcon color=\"royalblue\" />}\n    >\n      <a href=\"https://radix-ui.com\">\n        Button <em>text</em>\n      </a>\n    </Button>\n\n    <h1>With callback-dependent rendering</h1>\n    <h2>Component not passing callback</h2>\n    <p>Should NOT have delete button next to component</p>\n    <Slot.Root>\n      <MockTag>Component</MockTag>\n    </Slot.Root>\n    <h2>Component passing `undefined` callback</h2>\n    <p>Should NOT have delete button next to component</p>\n    <Slot.Root>\n      <MockTag onDelete={undefined}>Component</MockTag>\n    </Slot.Root>\n    <h2>Component passing callback</h2>\n    <p>Should have delete button next to component</p>\n    <Slot.Root>\n      <MockTag onDelete={() => alert('Delete')}>Component</MockTag>\n    </Slot.Root>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n\n/* ---------------------------------------------------------------------------------------------- */\n\nclass ErrorBoundary extends React.Component<any, { hasError: boolean }> {\n  constructor(props: any) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError() {\n    return { hasError: true };\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return <div style={{ background: 'red', color: 'white', padding: 10 }}>Error</div>;\n    }\n    return this.props.children;\n  }\n}\n\n/* Also verifying that props and ref types don't error */\nconst SlotWithoutSlottable = (props: React.ComponentPropsWithRef<'div'>) => (\n  <Slot.Root {...props} className=\"test\" />\n);\n\nconst SlotWithSlottable = ({ children, ...props }: any) => (\n  <Slot.Root {...props}>\n    <Slot.Slottable>{children}</Slot.Slottable>\n    <span>world</span>\n  </Slot.Root>\n);\n\nconst SlotWithFalseInternalChild = ({ children, ...props }: any) => (\n  <Slot.Root {...props}>{false && children}</Slot.Root>\n);\n\nconst SlotWithNullInternalChild = ({ children, ...props }: any) => (\n  <Slot.Root {...props}>{false ? children : null}</Slot.Root>\n);\n\nconst SlotWithPreventableEvent = (props: any) => (\n  <Slot.Root\n    {...props}\n    onClick={(event) => {\n      props.onClick?.(event);\n      if (!event.defaultPrevented) {\n        console.log(event.target);\n      }\n    }}\n  />\n);\n\nconst SlotWithoutPreventableEvent = (props: any) => (\n  <Slot.Root\n    {...props}\n    onClick={(event) => {\n      props.onClick?.(event);\n      console.log(event.target);\n    }}\n  />\n);\n\nconst Button = ({\n  children,\n  asChild = false,\n  iconLeft,\n  iconRight,\n  ...props\n}: React.ComponentProps<'button'> & {\n  asChild?: boolean;\n  iconLeft?: React.ReactNode;\n  iconRight?: React.ReactNode;\n}) => {\n  const Comp = asChild ? Slot.Root : 'button';\n  return (\n    <Comp\n      {...props}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 5,\n        border: '1px solid black',\n        padding: 10,\n        backgroundColor: 'white',\n        fontFamily: 'apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif',\n        fontSize: 14,\n        borderRadius: 3,\n        ...props.style,\n      }}\n    >\n      {iconLeft}\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {iconRight}\n    </Comp>\n  );\n};\n\nconst MockIcon = ({ color = 'tomato', ...props }: React.ComponentProps<'span'>) => (\n  <span\n    {...props}\n    style={{\n      display: 'inline-block',\n      width: 10,\n      height: 10,\n      backgroundColor: color,\n      ...props.style,\n    }}\n  />\n);\n\nconst MockTag = ({\n  onDelete,\n  ...props\n}: React.ComponentProps<'div'> & {\n  onDelete?: () => void;\n}) => {\n  return (\n    <div {...props}>\n      {props.children} {onDelete ? <button onClick={onDelete}>delete</button> : null}\n    </div>\n  );\n};\n\nasync function wait(ms: number) {\n  return new Promise((resolve) => setTimeout(resolve, ms));\n}\n"
  },
  {
    "path": "apps/storybook/stories/switch.stories.module.css",
    "content": ".root,\n:global(:root) {\n  --_switch-width: 50px;\n  --_switch-thumb-width: 20px;\n  --_switch-gap: 4px;\n}\n\n.root {\n  /* better default alignment */\n  vertical-align: middle;\n  /* ensures thumb is not horizontally centered (default in `button`) */\n  text-align: left;\n  /* ------ */\n  outline: none;\n  border: none;\n  width: var(--_switch-width);\n  padding: var(--_switch-gap);\n  border-radius: 9999px;\n  background-color: var(--color-gray300);\n  transition: background-color 166ms ease-out;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--color-black);\n  }\n\n  &[data-state='checked'] {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n\n  &[data-disabled] {\n    opacity: 0.5;\n  }\n}\n\n.thumb {\n  /* ensures thumb is sizeable/can receive vertical margins */\n  display: inline-block;\n  /* ensures thumb is vertically centered */\n  vertical-align: middle;\n  /* ------ */\n  width: var(--_switch-thumb-width);\n  height: var(--_switch-thumb-width);\n  background-color: var(--color-white);\n  border-radius: 9999px;\n  transition: transform 166ms ease-out;\n  &[data-state='checked'] {\n    transform: translateX(\n      calc(var(--_switch-width) - var(--_switch-gap) * 2 - var(--_switch-thumb-width))\n    );\n  }\n}\n\n.rootAttr,\n.thumbAttr {\n  background-color: rgba(0, 0, 255, 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n  &[data-state='unchecked'] {\n    border-color: red;\n  }\n  &[data-state='checked'] {\n    border-color: green;\n  }\n  &[data-state='indeterminate'] {\n    border-color: purple;\n  }\n  &[data-disabled] {\n    border-style: dashed;\n  }\n  &:disabled {\n    opacity: 0.5;\n  }\n}\n\n.label {\n  /* ensures it can receive vertical margins */\n  display: inline-block;\n  /* better default alignment */\n  vertical-align: middle;\n  /* mimics default `label` tag (as we render a `span`) */\n  cursor: default;\n  display: inline-block;\n}\n"
  },
  {
    "path": "apps/storybook/stories/switch.stories.tsx",
    "content": "import * as React from 'react';\nimport { Label as LabelPrimitive, Switch } from 'radix-ui';\nimport styles from './switch.stories.module.css';\n\nexport default { title: 'Components/Switch' };\n\nexport const Styled = () => (\n  <>\n    <p>This switch is nested inside a label. The state is uncontrolled.</p>\n    <Label>\n      This is the label{' '}\n      <Switch.Root className={styles.root}>\n        <Switch.Thumb className={styles.thumb} />\n      </Switch.Root>\n    </Label>\n  </>\n);\n\nexport const Controlled = () => {\n  const [checked, setChecked] = React.useState(true);\n\n  return (\n    <>\n      <p>This switch is placed adjacent to its label. The state is controlled.</p>\n      <Label htmlFor=\"randBox\">This is the label</Label>{' '}\n      <Switch.Root\n        className={styles.root}\n        checked={checked}\n        onCheckedChange={setChecked}\n        id=\"randBox\"\n      >\n        <Switch.Thumb className={styles.thumb} />\n      </Switch.Root>\n    </>\n  );\n};\n\nexport const WithinForm = () => {\n  const [data, setData] = React.useState({ optional: false, required: false, stopprop: false });\n  const [checked, setChecked] = React.useState(false);\n\n  return (\n    <form\n      onSubmit={(event) => event.preventDefault()}\n      onChange={(event) => {\n        const input = event.target as HTMLInputElement;\n        setData((prevData) => ({ ...prevData, [input.name]: input.checked }));\n      }}\n    >\n      <fieldset>\n        <legend>optional checked: {String(data.optional)}</legend>\n        <label>\n          <Switch.Root\n            className={styles.root}\n            name=\"optional\"\n            checked={checked}\n            onCheckedChange={setChecked}\n          >\n            <Switch.Thumb className={styles.thumb} />\n          </Switch.Root>{' '}\n          with label\n        </label>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>required checked: {String(data.required)}</legend>\n        <Switch.Root className={styles.root} name=\"required\" required>\n          <Switch.Thumb className={styles.thumb} />\n        </Switch.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <fieldset>\n        <legend>stop propagation checked: {String(data.stopprop)}</legend>\n        <Switch.Root\n          className={styles.root}\n          name=\"stopprop\"\n          onClick={(event) => event.stopPropagation()}\n        >\n          <Switch.Thumb className={styles.thumb} />\n        </Switch.Root>\n      </fieldset>\n\n      <br />\n      <br />\n\n      <button>Submit</button>\n    </form>\n  );\n};\n\nexport const Chromatic = () => (\n  <>\n    <h1>Uncontrolled</h1>\n    <h2>Off</h2>\n    <Switch.Root className={styles.root}>\n      <Switch.Thumb className={styles.thumb} />\n    </Switch.Root>\n\n    <h2>On</h2>\n    <Switch.Root className={styles.root} defaultChecked>\n      <Switch.Thumb className={styles.thumb} />\n    </Switch.Root>\n\n    <h1>Controlled</h1>\n    <h2>Off</h2>\n    <Switch.Root className={styles.root} checked={false}>\n      <Switch.Thumb className={styles.thumb} />\n    </Switch.Root>\n\n    <h2>On</h2>\n    <Switch.Root className={styles.root} checked>\n      <Switch.Thumb className={styles.thumb} />\n    </Switch.Root>\n\n    <h1>Disabled</h1>\n    <Switch.Root className={styles.root} disabled>\n      <Switch.Thumb className={styles.thumb} />\n    </Switch.Root>\n\n    <h1>State attributes</h1>\n    <h2>Unchecked</h2>\n    <Switch.Root className={styles.rootAttr}>\n      <Switch.Thumb className={styles.thumbAttr} />\n    </Switch.Root>\n\n    <h2>Checked</h2>\n    <Switch.Root className={styles.rootAttr} defaultChecked>\n      <Switch.Thumb className={styles.thumbAttr} />\n    </Switch.Root>\n\n    <h2>Disabled</h2>\n    <Switch.Root className={styles.rootAttr} defaultChecked disabled>\n      <Switch.Thumb className={styles.thumbAttr} />\n    </Switch.Root>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n\nconst Label = (props: any) => <LabelPrimitive.Root {...props} className={styles.label} />;\n"
  },
  {
    "path": "apps/storybook/stories/tabs.stories.module.css",
    "content": ".root {\n  /* ensures things are layed out correctly by default */\n  display: flex;\n  &[data-orientation='horizontal'] {\n    flexdirection: column;\n  }\n  /* ---------- */\n  border: 1px solid #eee;\n  font-family:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  max-width: 20rem;\n}\n\n.list {\n  flex-shrink: 0;\n  /* ensures things are layed out correctly by default */\n  display: flex;\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n  /* ---------- */\n  background-color: #eee;\n}\n\n.trigger {\n  all: unset;\n  flex-shrink: 0;\n  /* ---------- */\n  padding: 0.4em 0.6em;\n  font-weight: 500;\n  line-height: 1;\n  user-select: none;\n\n  &[data-orientation='horizontal'] {\n    border-top: 4px solid transparent;\n    border-bottom: 4px solid var(--border-color, transparent);\n  }\n\n  &[data-orientation='vertical'] {\n    padding: 0.6em;\n    border-right: 4px solid var(--border-color, transparent);\n  }\n\n  &[data-disabled] {\n    color: var(--color-gray300);\n  }\n\n  &[data-state='active'] {\n    --border-color: crimson;\n  }\n\n  &:focus {\n    --border-color: #111;\n    outline: 1px solid var(--border-color);\n    &[data-state='active'] {\n      --border-color: crimson;\n    }\n  }\n}\n\n.content {\n  flex-grow: 1;\n  /* ---------- */\n  padding: 1em;\n  font-weight: 300;\n  font-size: 0.85em;\n  line-height: 1.65;\n  &[data-orientation='horizontal'] {\n    border-top: none;\n  }\n  &[data-orientation='vertical'] {\n    border-left: none;\n  }\n}\n\n@keyframes show {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0px);\n  }\n}\n\n.animatedContent {\n  &[data-state='active'] {\n    animation: tabs--show 400ms ease;\n  }\n}\n\n.contentAttr {\n  /* ensure we can see the content (because it has `hidden` attribute) */\n  display: block;\n}\n\n.rootAttr,\n.contentAttr,\n.listAttr,\n.triggerAttr {\n  background-color: rgb(0 0 255 / 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n  &:disabled {\n    opacity: 0.5;\n  }\n  &[data-disabled] {\n    border-style: dashed;\n  }\n\n  &[data-state='inactive'] {\n    border-color: red;\n  }\n  &[data-state='active'] {\n    border-color: green;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/tabs.stories.tsx",
    "content": "import { Direction, Tabs } from 'radix-ui';\nimport styles from './tabs.stories.module.css';\n\nexport default { title: 'Components/Tabs' };\n\nconst animatedContentClass = [styles.content, styles.animatedContent].join(' ');\n\nexport const Styled = () => (\n  <>\n    <h1>Horizontal (automatic activation)</h1>\n    <Tabs.Root defaultValue=\"tab1\" className={styles.root}>\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={styles.content}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={styles.content}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={styles.content}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n\n    <h1>Vertical (manual activation)</h1>\n    <Tabs.Root\n      defaultValue=\"tab1\"\n      className={styles.root}\n      orientation=\"vertical\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={styles.content}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={styles.content}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={styles.content}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n  </>\n);\n\nexport const Animated = () => (\n  <>\n    <h1>Horizontal (automatic activation)</h1>\n    <Tabs.Root defaultValue=\"tab1\" className={styles.root}>\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n\n      <Tabs.Content value=\"tab1\" className={animatedContentClass}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={animatedContentClass}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={animatedContentClass}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n\n    <h1>Vertical (manual activation)</h1>\n    <Tabs.Root\n      defaultValue=\"tab1\"\n      className={styles.root}\n      orientation=\"vertical\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={animatedContentClass}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={animatedContentClass}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={animatedContentClass}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n  </>\n);\n\nexport const Chromatic = () => (\n  <>\n    <h1>Uncontrolled</h1>\n    <Tabs.Root defaultValue=\"tab3\" className={styles.root}>\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={styles.content}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={styles.content}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={styles.content}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n\n    <h1>Controlled</h1>\n    <Tabs.Root value=\"tab3\" className={styles.root}>\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={styles.content}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={styles.content}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={styles.content}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n\n    <h1>Vertical</h1>\n    <Tabs.Root\n      defaultValue=\"tab3\"\n      className={styles.root}\n      orientation=\"vertical\"\n      activationMode=\"manual\"\n    >\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={styles.content}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={styles.content}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={styles.content}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n\n    <h1>Direction</h1>\n    <h2>Prop</h2>\n    <Tabs.Root defaultValue=\"tab3\" dir=\"rtl\" className={styles.root}>\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={styles.content}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={styles.content}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={styles.content}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n\n    <h2>Inherited</h2>\n    <Direction.Provider dir=\"rtl\">\n      <Tabs.Root defaultValue=\"tab3\" className={styles.root}>\n        <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n          <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n            Tab 1\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n            Tab 2\n          </Tabs.Trigger>\n          <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n            Tab 3\n          </Tabs.Trigger>\n        </Tabs.List>\n        <Tabs.Content value=\"tab1\" className={styles.content}>\n          Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem\n          himenaeos integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida\n          elementum pellentesque volutpat dictum ipsum.\n        </Tabs.Content>\n        <Tabs.Content value=\"tab2\" className={styles.content}>\n          You'll never find me!\n        </Tabs.Content>\n        <Tabs.Content value=\"tab3\" className={styles.content}>\n          Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n          quam tempus pretium.\n        </Tabs.Content>\n      </Tabs.Root>\n    </Direction.Provider>\n\n    <h1>Animated</h1>\n    <p>Should not animate on initial mount</p>\n    <Tabs.Root value=\"tab1\" className={styles.root}>\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content\n        value=\"tab1\"\n        className={animatedContentClass}\n        style={{ animationDuration: '3000ms' }}\n      >\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={animatedContentClass}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={animatedContentClass}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n\n    <h1>Force mounted contents</h1>\n    <Tabs.Root className={styles.root}>\n      <Tabs.List aria-label=\"tabs example\" className={styles.list}>\n        <Tabs.Trigger value=\"tab1\" className={styles.trigger}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" className={styles.trigger}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.trigger}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={styles.content} forceMount>\n        Tab 1 content\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={styles.content} forceMount>\n        Tab 2 content\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={styles.content} forceMount>\n        Tab 3 content\n      </Tabs.Content>\n    </Tabs.Root>\n\n    <h1>State attributes</h1>\n    <Tabs.Root defaultValue=\"tab3\" className={styles.rootAttr}>\n      <Tabs.List aria-label=\"tabs example\" className={styles.listAttr}>\n        <Tabs.Trigger value=\"tab1\" className={styles.triggerAttr}>\n          Tab 1\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab2\" disabled className={styles.triggerAttr}>\n          Tab 2\n        </Tabs.Trigger>\n        <Tabs.Trigger value=\"tab3\" className={styles.triggerAttr}>\n          Tab 3\n        </Tabs.Trigger>\n      </Tabs.List>\n      <Tabs.Content value=\"tab1\" className={styles.contentAttr}>\n        Dis metus rhoncus sit convallis sollicitudin vel cum, hac purus tincidunt eros sem himenaeos\n        integer, faucibus varius nullam nostra bibendum consectetur mollis, gravida elementum\n        pellentesque volutpat dictum ipsum.\n      </Tabs.Content>\n      <Tabs.Content value=\"tab2\" className={styles.contentAttr}>\n        You'll never find me!\n      </Tabs.Content>\n      <Tabs.Content value=\"tab3\" className={styles.contentAttr}>\n        Ut nisi elementum metus semper mauris dui fames accumsan aenean, maecenas ac sociis dolor\n        quam tempus pretium.\n      </Tabs.Content>\n    </Tabs.Root>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/toast.stories.module.css",
    "content": ".viewport,\n:global(:root) {\n  --_viewport-padding: 10px;\n}\n\n.viewport {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 1px solid;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: var(--_viewport-padding);\n  gap: var(--_viewport-padding);\n  list-style: none;\n}\n\n.root {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  width: 230px;\n  border-radius: 4px;\n  border: 1px solid black;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\n  padding: 10px;\n  font-size: 12px;\n}\n\n.errorRoot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.animatedRoot {\n  &[data-state='open'] {\n    animation: toast-fadeIn 200ms ease-out;\n  }\n  &[data-state='closed'] {\n    animation: toast-fadeOut 200ms ease-out;\n  }\n  &[data-swipe='move'] {\n    transform: translate(var(--radix-toast-swipe-move-x), var(--radix-toast-swipe-move-y));\n  }\n  &[data-swipe='cancel'] {\n    transform: translate(0, 0);\n    transition: transform 200ms ease-out;\n  }\n  &[data-swipe='end'] {\n    animation-duration: 300ms;\n    animation-timing-function: ease-out;\n    &[data-swipe-direction='right'] {\n      animation-name: toast-slideRight;\n    }\n    &[data-swipe-direction='left'] {\n      animation-name: toast-slideLeft;\n    }\n    &[data-swipe-direction='up'] {\n      animation-name: toast-slideUp;\n    }\n    &[data-swipe-direction='down'] {\n      animation-name: toast-slideDown;\n    }\n  }\n}\n\n.header {\n  padding: 5px 10px;\n  margin: -10px -10px 10px;\n  background: black;\n  color: white;\n  position: relative;\n  height: 22px;\n  display: flex;\n  align-items: center;\n}\n\n.successHeader {\n  background: green;\n}\n\n.title {\n  font-size: inherit;\n  font-weight: normal;\n}\n\n.description {\n  margin: 0;\n}\n\n.button,\n.close {\n  border: 1px solid black;\n  border-radius: 4px;\n  background: gainsboro;\n  font-family: inherit;\n  padding: 2px 5px;\n  &:hover,\n  &:focus {\n    background: royalblue;\n    border-color: darkblue;\n    color: white;\n  }\n}\n\n.close {\n  position: absolute;\n  top: 50%;\n  right: 5px;\n  transform: translateY(-50%);\n  width: 18px;\n  height: 18px;\n  padding: 0;\n}\n\n@keyframes toast-fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes toast-fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes toast-slideRight {\n  from {\n    transform: translateX(var(--radix-toast-swipe-end-x));\n  }\n  to {\n    transform: translateX(calc(100% + var(--_viewport-padding)));\n  }\n}\n\n@keyframes toast-slideLeft {\n  from {\n    transform: translateX(var(--radix-toast-swipe-end-x));\n  }\n  to {\n    transform: translateX(calc(-100% - var(--_viewport-padding)));\n  }\n}\n\n@keyframes toast-slideUp {\n  from {\n    transform: translateY(var(--radix-toast-swipe-end-y));\n  }\n  to {\n    transform: translateY(calc(-100% - var(--_viewport-padding)));\n  }\n}\n\n@keyframes toast-slideDown {\n  from {\n    transform: translateY(var(--radix-toast-swipe-end-y));\n  }\n  to {\n    transform: translateY(calc(100% + var(--_viewport-padding)));\n  }\n}\n\n@keyframes toast-loading {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0%);\n  }\n}\n\n.progressBar {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 2px;\n  overflow: hidden;\n  background-color: var(--color-gray100);\n}\n\n.progressBarInner {\n  height: 100%;\n  background-color: var(--color-green);\n  animation-name: toast-loading;\n  animation-timing-function: linear;\n}\n\n.chromaticViewport {\n  display: inline-flex;\n  border: 5px solid royalblue;\n  flex-direction: column;\n  padding: var(--_viewport-padding);\n  gap: var(--_viewport-padding);\n}\n"
  },
  {
    "path": "apps/storybook/stories/toast.stories.tsx",
    "content": "import * as React from 'react';\nimport { Dialog, Toast } from 'radix-ui';\nimport styles from './toast.stories.module.css';\n\nexport default { title: 'Components/Toast' };\n\nexport const Styled = () => (\n  <Toast.Provider>\n    <ToastUpgradeAvailable />\n    <Toast.Viewport className={styles.viewport} />\n  </Toast.Provider>\n);\n\nexport const Controlled = () => {\n  const [hasUpgrade, setHasUpgrade] = React.useState(false);\n  const [isSubscribed, setIsSubscribed] = React.useState(false);\n  const [savedCount, setSavedCount] = React.useState(0);\n  const [errorCount, setErrorCount] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!hasUpgrade) {\n      const timer = window.setTimeout(() => setHasUpgrade(true), 10000);\n      return () => window.clearTimeout(timer);\n    }\n  }, [hasUpgrade]);\n\n  return (\n    <Toast.Provider>\n      <button onClick={() => setIsSubscribed(true)}>subscribe</button>\n      <button onClick={() => setErrorCount((count) => count + 1)}>error</button>\n      <button onClick={() => setSavedCount((count) => count + 1)}>save</button>\n      <ToastUpgradeAvailable open={hasUpgrade} onOpenChange={setHasUpgrade} />\n      <ToastSubscribeSuccess open={isSubscribed} onOpenChange={setIsSubscribed} />\n\n      {[...Array(errorCount)].map((_, index) => (\n        <Toast.Root key={index} className={[styles.root, styles.errorRoot].join(' ')}>\n          <Toast.Description>There was an error</Toast.Description>\n          <Toast.Action\n            className={styles.button}\n            altText=\"Resubmit the form to try again.\"\n            onClick={() => console.log('try again')}\n          >\n            Try again\n          </Toast.Action>\n        </Toast.Root>\n      ))}\n\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast.Root key={index} className={styles.root}>\n          <Toast.Description>Successfully saved</Toast.Description>\n        </Toast.Root>\n      ))}\n\n      <Toast.Viewport className={styles.viewport} />\n    </Toast.Provider>\n  );\n};\n\nexport const FromDialog = () => {\n  const [open, setOpen] = React.useState(false);\n  return (\n    <Toast.Provider>\n      <Dialog.Root>\n        <Dialog.Trigger>Open</Dialog.Trigger>\n        <Dialog.Overlay />\n        <Dialog.Content style={{ border: '1px solid', width: 300, padding: 30 }}>\n          <Dialog.Title style={{ margin: 0 }}>Title</Dialog.Title>\n          <Dialog.Description>Description</Dialog.Description>\n          <button onClick={() => setOpen(true)}>Open toast</button>\n          <Dialog.Close>Close</Dialog.Close>\n        </Dialog.Content>\n      </Dialog.Root>\n\n      <Toast.Root\n        open={open}\n        onOpenChange={setOpen}\n        className={[styles.root, styles.errorRoot].join(' ')}\n      >\n        <Toast.Description>There was an error</Toast.Description>\n        <Toast.Action\n          className={styles.button}\n          altText=\"Resubmit the form to try again.\"\n          onClick={() => console.log('try again')}\n        >\n          Try again\n        </Toast.Action>\n      </Toast.Root>\n\n      <Toast.Viewport className={styles.viewport} />\n    </Toast.Provider>\n  );\n};\n\nexport const Promise = () => {\n  const [saving, setSaving] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n\n  React.useEffect(() => {\n    if (saving) {\n      const timer = window.setTimeout(() => setSaving(false), 2000);\n      return () => window.clearTimeout(timer);\n    }\n  }, [saving]);\n\n  return (\n    <Toast.Provider>\n      <form\n        onSubmit={(event) => {\n          setSaving(true);\n          setOpen(true);\n          event.preventDefault();\n        }}\n      >\n        <button>Save</button>\n        <Toast.Root\n          className={styles.root}\n          duration={saving ? Infinity : 2000}\n          open={open}\n          onOpenChange={setOpen}\n        >\n          {saving ? (\n            <Toast.Description>Saving&hellip;</Toast.Description>\n          ) : (\n            <Toast.Description>Saved!</Toast.Description>\n          )}\n        </Toast.Root>\n      </form>\n\n      <Toast.Viewport className={styles.viewport} />\n    </Toast.Provider>\n  );\n};\n\nexport const KeyChange = () => {\n  const [toastOneCount, setToastOneCount] = React.useState(0);\n  const [toastTwoCount, setToastTwoCount] = React.useState(0);\n\n  return (\n    <Toast.Provider>\n      <button onClick={() => setToastOneCount((count) => count + 1)}>Open toast one</button>\n      <button onClick={() => setToastTwoCount((count) => count + 1)}>Open toast two</button>\n\n      {toastOneCount > 0 && (\n        <Toast.Root key={'one-' + String(toastOneCount)} className={styles.root}>\n          <Toast.Description>Toast one</Toast.Description>\n        </Toast.Root>\n      )}\n\n      {toastTwoCount > 0 && (\n        <Toast.Root key={'two-' + String(toastTwoCount)} className={styles.root}>\n          <Toast.Description>Toast two</Toast.Description>\n        </Toast.Root>\n      )}\n\n      <Toast.Viewport className={styles.viewport} />\n    </Toast.Provider>\n  );\n};\n\nexport const PauseResumeProps = () => {\n  const [toastCount, setToastCount] = React.useState(0);\n\n  return (\n    <Toast.Provider>\n      <button onClick={() => setToastCount((count) => count + 1)}>Add toast</button>\n\n      {[...Array(toastCount)].map((_, index) => (\n        <ToastWithProgress key={index} />\n      ))}\n\n      <Toast.Viewport className={styles.viewport} />\n    </Toast.Provider>\n  );\n};\n\ntype Direction = React.ComponentProps<typeof Toast.Provider>['swipeDirection'];\n\nexport const Animated = () => {\n  const [open, setOpen] = React.useState(false);\n  const [swipeDirection, setSwipeDirection] = React.useState<Direction>('right');\n  const timerRef = React.useRef(0);\n  return (\n    <Toast.Provider\n      swipeDirection={swipeDirection}\n      swipeThreshold={(['up', 'down'] as Direction[]).includes(swipeDirection) ? 25 : undefined}\n    >\n      <button\n        onClick={() => {\n          setOpen(false);\n          window.clearTimeout(timerRef.current);\n          timerRef.current = window.setTimeout(() => setOpen(true), 150);\n        }}\n      >\n        Open\n      </button>\n      <select\n        value={swipeDirection}\n        onChange={(event) => {\n          setSwipeDirection(event.currentTarget.value as Direction);\n        }}\n      >\n        <option value=\"right\">Slide right</option>\n        <option value=\"left\">Slide left</option>\n        <option value=\"up\">Slide up</option>\n        <option value=\"down\">Slide down</option>\n      </select>\n      <Toast.Root\n        className={[styles.root, styles.animatedRoot].join(' ')}\n        open={open}\n        onOpenChange={setOpen}\n      >\n        <Toast.Description>Swipe me {swipeDirection}</Toast.Description>\n        <Toast.Close className={styles.button}>Dismiss</Toast.Close>\n      </Toast.Root>\n      <Toast.Viewport className={styles.viewport} />\n    </Toast.Provider>\n  );\n};\n\nexport const Cypress = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Toast.Provider>\n      <button onClick={() => setCount((count) => count + 1)}>Add toast</button>\n      <div\n        style={{ display: 'flex', justifyContent: 'space-between', maxWidth: 700, margin: 'auto' }}\n      >\n        <button>Focusable before viewport</button>\n\n        {[...Array(count)].map((_, index) => {\n          const identifier = index + 1;\n          return (\n            <Toast.Root\n              key={index}\n              open\n              className={styles.root}\n              data-testid={`toast-${identifier}`}\n            >\n              <Toast.Title className={styles.title}>Toast {identifier} title</Toast.Title>\n              <Toast.Description className={styles.description}>\n                Toast {identifier} description\n              </Toast.Description>\n\n              <Toast.Close className={styles.button} aria-label=\"Close\">\n                Toast button {identifier}.1\n              </Toast.Close>\n              <Toast.Action\n                altText=\"Go and perform an action\"\n                className={styles.button}\n                style={{ marginTop: 10 }}\n              >\n                Toast button {identifier}.2\n              </Toast.Action>\n            </Toast.Root>\n          );\n        })}\n        <Toast.Viewport className={styles.viewport} />\n\n        <button>Focusable after viewport</button>\n      </div>\n    </Toast.Provider>\n  );\n};\n\nconst SNAPSHOT_DELAY = 300;\n\nexport const Chromatic = () => {\n  const [open, setOpen] = React.useState(true);\n  return (\n    <>\n      <h1>Order</h1>\n      <Toast.Provider duration={Infinity}>\n        <Toast.Root className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast 1</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Root className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast 2</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n\n      <h1>Uncontrolled</h1>\n\n      <h2>Open</h2>\n      <Toast.Provider>\n        <Toast.Root duration={Infinity} className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n\n      <h2>Closed</h2>\n      <Toast.Provider>\n        <Toast.Root defaultOpen={false} duration={Infinity} className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Title</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>\n            Uncontrolled foreground closed\n          </Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n\n      <h1>Controlled</h1>\n\n      <h2>Open</h2>\n      <Toast.Provider>\n        <Toast.Root open duration={Infinity} className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n\n      <h2>Closed</h2>\n      <Toast.Provider>\n        <Toast.Root open={false} duration={Infinity} className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n\n      <h1>Dismissed</h1>\n      <h2>Uncontrolled</h2>\n      <Toast.Provider>\n        <Toast.Root duration={SNAPSHOT_DELAY - 100} className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n\n      <h2>Controlled</h2>\n      <Toast.Provider>\n        <Toast.Root\n          duration={SNAPSHOT_DELAY - 100}\n          open={open}\n          onOpenChange={setOpen}\n          className={styles.root}\n        >\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n\n      <h1>Provider</h1>\n      <h2>Duration</h2>\n      <Toast.Provider duration={SNAPSHOT_DELAY - 100}>\n        <Toast.Root className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n\n      <h2>Duration overridden</h2>\n      <Toast.Provider duration={Infinity}>\n        <Toast.Root duration={SNAPSHOT_DELAY - 100} className={styles.root}>\n          <div className={styles.header}>\n            <Toast.Title className={styles.title}>Toast</Toast.Title>\n            <Toast.Close className={styles.close}>×</Toast.Close>\n          </div>\n          <Toast.Description className={styles.description}>Description</Toast.Description>\n          <Toast.Action altText=\"alternative\" className={styles.button} style={{ marginTop: 10 }}>\n            Action\n          </Toast.Action>\n        </Toast.Root>\n        <Toast.Viewport className={styles.chromaticViewport}></Toast.Viewport>\n      </Toast.Provider>\n    </>\n  );\n};\nChromatic.parameters = { chromatic: { disable: false, delay: SNAPSHOT_DELAY } };\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst ToastUpgradeAvailable = (props: React.ComponentProps<typeof Toast.Root>) => (\n  <Toast.Root className={styles.root} {...props}>\n    <div className={styles.header}>\n      <Toast.Title className={styles.title}>Upgrade available</Toast.Title>\n      <Toast.Close className={styles.close} aria-label=\"Close\">\n        <span aria-hidden>×</span>\n      </Toast.Close>\n    </div>\n    <Toast.Description className={styles.description}>\n      We've just released Radix version 3.0\n    </Toast.Description>\n    <Toast.Action\n      altText=\"Goto account settings to upgrade\"\n      className={styles.button}\n      style={{ marginTop: 10 }}\n    >\n      Upgrade\n    </Toast.Action>\n  </Toast.Root>\n);\n\nconst ToastSubscribeSuccess = (props: React.ComponentProps<typeof Toast.Root>) => (\n  <Toast.Root className={styles.root} {...props}>\n    <div className={[styles.header, styles.successHeader].join(' ')}>\n      <Toast.Title className={styles.title}>Success!</Toast.Title>\n      <Toast.Close className={styles.close} aria-label=\"Close\">\n        <span aria-hidden>×</span>\n      </Toast.Close>\n    </div>\n    <Toast.Description className={styles.description}>\n      You have subscribed. We'll be in touch.\n    </Toast.Description>\n  </Toast.Root>\n);\n\nconst ToastWithProgress = (props: React.ComponentProps<typeof Toast.Root>) => {\n  const [paused, setPaused] = React.useState(false);\n  const duration = 3000;\n\n  return (\n    <Toast.Root\n      className={styles.root}\n      duration={duration}\n      onPause={() => setPaused(true)}\n      onResume={() => setPaused(false)}\n      {...props}\n    >\n      <Toast.Description>Successfully saved</Toast.Description>\n      <div className={styles.progressBar}>\n        <div\n          className={styles.progressBarInner}\n          style={{\n            animationDuration: duration - 100 + 'ms',\n            animationPlayState: paused ? 'paused' : 'running',\n          }}\n        />\n      </div>\n    </Toast.Root>\n  );\n};\n"
  },
  {
    "path": "apps/storybook/stories/toggle-group.stories.module.css",
    "content": ".root {\n  display: inline-flex;\n  gap: 5px;\n  padding: 5px;\n  &[data-orientation='vertical'] {\n    flex-direction: 'column';\n  }\n}\n\n.item {\n  border: 1px solid var(--color-black);\n  border-radius: 6px;\n  padding: 5px 10px;\n  font-size: 13px;\n  background-color: var(--color-white);\n  color: var(--color-black);\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n  }\n\n  &[data-state='on'] {\n    background-color: var(--color-black);\n    color: var(--color-white);\n  }\n}\n\n.itemAttr {\n  background-color: rgba(0, 0, 255, 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n\n  &[data-state='off'] {\n    border-color: red;\n  }\n  &[data-state='on'] {\n    border-color: green;\n  }\n  &[data-disabled] {\n    border-style: dashed;\n  }\n  &:disabled {\n    opacity: 0.5;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/toggle-group.stories.tsx",
    "content": "import * as React from 'react';\nimport { Direction, ToggleGroup } from 'radix-ui';\nimport styles from './toggle-group.stories.module.css';\n\nexport default {\n  title: 'Components/ToggleGroup',\n};\n\nexport const Single = () => {\n  const [value, setValue] = React.useState<string>();\n  return (\n    <>\n      <h1>Uncontrolled</h1>\n      <ToggleGroup.Root type=\"single\" className={styles.root} aria-label=\"Options\" defaultValue=\"1\">\n        <ToggleGroup.Item value=\"1\" className={styles.item}>\n          Option 1\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"2\" className={styles.item}>\n          Option 2\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"3\" className={styles.item}>\n          Option 3\n        </ToggleGroup.Item>\n      </ToggleGroup.Root>\n\n      <h1>Controlled</h1>\n      <ToggleGroup.Root\n        type=\"single\"\n        className={styles.root}\n        aria-label=\"Options\"\n        value={value}\n        onValueChange={setValue}\n      >\n        <ToggleGroup.Item value=\"1\" className={styles.item}>\n          Option 1\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"2\" className={styles.item}>\n          Option 2\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"3\" className={styles.item}>\n          Option 3\n        </ToggleGroup.Item>\n      </ToggleGroup.Root>\n    </>\n  );\n};\n\nexport const Vertical = () => {\n  return (\n    <ToggleGroup.Root\n      type=\"single\"\n      orientation=\"vertical\"\n      className={styles.root}\n      aria-label=\"Options\"\n      defaultValue=\"1\"\n    >\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item}>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n  );\n};\n\nexport const Multiple = () => {\n  const [value, setValue] = React.useState<string[]>([]);\n  return (\n    <>\n      <h1>Uncontrolled</h1>\n      <ToggleGroup.Root\n        type=\"multiple\"\n        className={styles.root}\n        aria-label=\"Options\"\n        defaultValue={['1']}\n      >\n        <ToggleGroup.Item value=\"1\" className={styles.item}>\n          Option 1\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"2\" className={styles.item}>\n          Option 2\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"3\" className={styles.item}>\n          Option 3\n        </ToggleGroup.Item>\n      </ToggleGroup.Root>\n\n      <h1>Controlled</h1>\n      <ToggleGroup.Root\n        type=\"multiple\"\n        className={styles.root}\n        aria-label=\"Options\"\n        value={value}\n        onValueChange={setValue}\n      >\n        <ToggleGroup.Item value=\"1\" className={styles.item}>\n          Option 1\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"2\" className={styles.item}>\n          Option 2\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"3\" className={styles.item}>\n          Option 3\n        </ToggleGroup.Item>\n      </ToggleGroup.Root>\n    </>\n  );\n};\n\nexport const Chromatic = () => (\n  <>\n    <h1>Single</h1>\n    <h2>Off</h2>\n    <ToggleGroup.Root type=\"single\" className={styles.root}>\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item} disabled>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h2>On</h2>\n    <ToggleGroup.Root type=\"single\" className={styles.root} defaultValue=\"1\">\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item} disabled>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h2>Disabled</h2>\n    <ToggleGroup.Root type=\"single\" className={styles.root} disabled>\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item}>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h1>Multiple</h1>\n    <h2>Off</h2>\n    <ToggleGroup.Root type=\"multiple\" className={styles.root}>\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item} disabled>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h2>One on</h2>\n    <ToggleGroup.Root type=\"multiple\" className={styles.root} defaultValue={['1']}>\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item} disabled>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h2>One and two on</h2>\n    <ToggleGroup.Root type=\"multiple\" className={styles.root} defaultValue={['1', '2']}>\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item}>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h2>Disabled</h2>\n    <ToggleGroup.Root type=\"multiple\" className={styles.root} disabled>\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item}>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h1>Direction</h1>\n    <h2>Prop</h2>\n    <ToggleGroup.Root type=\"single\" className={styles.root} defaultValue=\"1\" dir=\"rtl\">\n      <ToggleGroup.Item value=\"1\" className={styles.item}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.item}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.item} disabled>\n        Option 3\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h2>Inherited</h2>\n    <Direction.Provider dir=\"rtl\">\n      <ToggleGroup.Root type=\"single\" className={styles.root} defaultValue=\"1\">\n        <ToggleGroup.Item value=\"1\" className={styles.item}>\n          Option 1\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"2\" className={styles.item}>\n          Option 2\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"3\" className={styles.item} disabled>\n          Option 3\n        </ToggleGroup.Item>\n      </ToggleGroup.Root>\n    </Direction.Provider>\n\n    <h1>State attributes</h1>\n    <h2>Group disabled</h2>\n    <ToggleGroup.Root type=\"multiple\" className={styles.root} defaultValue={['1', '2']} disabled>\n      <ToggleGroup.Item value=\"1\" className={styles.itemAttr}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.itemAttr}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.itemAttr}>\n        Option 3\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"4\" className={styles.itemAttr}>\n        Option 4\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h2>Group enabled with button override</h2>\n    <ToggleGroup.Root\n      type=\"multiple\"\n      className={styles.root}\n      defaultValue={['1', '2']}\n      disabled={false}\n    >\n      <ToggleGroup.Item value=\"1\" className={styles.itemAttr}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.itemAttr} disabled>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.itemAttr}>\n        Option 3\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"4\" className={styles.itemAttr} disabled>\n        Option 4\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n\n    <h2>Group disabled with button override</h2>\n    <ToggleGroup.Root\n      type=\"multiple\"\n      className={styles.root}\n      defaultValue={['1', '2']}\n      disabled={true}\n    >\n      <ToggleGroup.Item value=\"1\" className={styles.itemAttr}>\n        Option 1\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"2\" className={styles.itemAttr} disabled={false}>\n        Option 2\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"3\" className={styles.itemAttr}>\n        Option 3\n      </ToggleGroup.Item>\n      <ToggleGroup.Item value=\"4\" className={styles.itemAttr} disabled={false}>\n        Option 4\n      </ToggleGroup.Item>\n    </ToggleGroup.Root>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/toggle.stories.module.css",
    "content": ".root {\n  padding: 6px;\n  line-height: 1;\n  border: none;\n  font-family: sans-serif;\n  font-weight: bold;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--color-black);\n  }\n\n  &[data-disabled] {\n    opacity: 0.5;\n  }\n\n  &[data-state='off'] {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n\n  &[data-state='on'] {\n    background-color: var(--color-green);\n    color: var(--color-white);\n  }\n}\n\n.rootAttr {\n  background-color: rgba(0, 0, 255, 0.3);\n  border: 2px solid blue;\n  padding: 10px;\n\n  &:disabled {\n    opacity: 0.5;\n  }\n  &[data-disabled] {\n    border-style: dashed;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/toggle.stories.tsx",
    "content": "import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport styles from './toggle.stories.module.css';\n\nexport default { title: 'Components/Toggle' };\n\nexport const Styled = () => <Toggle.Root className={styles.root}>Toggle</Toggle.Root>;\n\nexport const Controlled = () => {\n  const [pressed, setPressed] = React.useState(true);\n\n  return (\n    <Toggle.Root className={styles.root} pressed={pressed} onPressedChange={setPressed}>\n      {pressed ? 'On' : 'Off'}\n    </Toggle.Root>\n  );\n};\n\nexport const Chromatic = () => (\n  <>\n    <h1>Uncontrolled</h1>\n    <h2>Off</h2>\n    <Toggle.Root className={styles.root}>Toggle</Toggle.Root>\n\n    <h2>On</h2>\n    <Toggle.Root className={styles.root} defaultPressed>\n      Toggle\n    </Toggle.Root>\n\n    <h1>Controlled</h1>\n    <h2>Off</h2>\n    <Toggle.Root className={styles.root} pressed={false}>\n      Toggle\n    </Toggle.Root>\n\n    <h2>On</h2>\n    <Toggle.Root className={styles.root} pressed>\n      Toggle\n    </Toggle.Root>\n\n    <h1>Disabled</h1>\n    <Toggle.Root className={styles.root} disabled>\n      Toggle\n    </Toggle.Root>\n\n    <h1>State attributes</h1>\n    <Toggle.Root className={styles.rootAttr}>Toggle</Toggle.Root>\n    <Toggle.Root className={styles.rootAttr} disabled>\n      Toggle\n    </Toggle.Root>\n  </>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n"
  },
  {
    "path": "apps/storybook/stories/toolbar.stories.module.css",
    "content": ".toolbar {\n  /* ensures things are layed out correctly by default */\n  display: flex;\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n  /* --------- */\n  display: inline-flex;\n  gap: 5px;\n  box-sizing: border-box;\n  min-width: 130px;\n  background-color: var(--color-white);\n  border: 1px solid var(--color-gray100);\n  border-radius: 6px;\n  padding: 5px;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n\n  &:focus-within {\n    bordercolor: var(--color-black);\n  }\n}\n\n.toolbarSeparator {\n  height: 1px;\n  margin: 5px;\n  background-color: var(--color-gray100);\n\n  &[data-orientation='vertical'] {\n    width: 1px;\n    height: auto;\n  }\n}\n\n.toolbarItem {\n  border: 1px solid var(--color-black);\n  border-radius: 6px;\n  background-color: transparent;\n  padding: 5px 10px;\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n\n  &:focus,\n  &:focus-within {\n    outline: none;\n    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);\n  }\n\n  &[data-disabled] {\n    opacity: 0.5;\n    user-select: none;\n  }\n}\n\n.toolbarLink {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: black;\n}\n\n.toolbarToggleButton {\n  &[data-state='on'] {\n    background: black;\n    color: white;\n  }\n}\n\n.toolbarToggleGroup {\n  display: flex;\n  gap: 5;\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n}\n\n.toolbarToggleItem {\n  &[data-state='on'] {\n    background: black;\n    color: white;\n  }\n}\n\n/* ----------- */\n\n.dropdownMenuContent {\n  display: inline-block;\n  box-sizing: border-box;\n  min-width: 130px;\n  background-color: var(--color-white);\n  border: 1px solid var(--color-gray100);\n  border-radius: 6px;\n  padding: 5px;\n  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);\n  font-family: apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;\n  font-size: 13px;\n  &:focus-within {\n    border-color: var(--color-black);\n  }\n}\n\n.label,\n.dropdownMenuItem {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  line-height: 1;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n  height: 25px;\n  padding: 0 10px;\n  color: var(--color-black);\n  border-radius: 3px;\n}\n\n.label {\n  color: var(--color-gray100);\n}\n\n.dropdownMenuItem {\n  outline: none;\n\n  &[data-highlighted] {\n    background-color: var(--color-black);\n    color: var(--color-white);\n  }\n\n  &[data-disabled] {\n    color: var(--color-gray100);\n  }\n}\n\n@keyframes menu-animateIn {\n  from {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes menu-animateOut {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.95);\n    opacity: 0;\n  }\n}\n\n.animatedContent {\n  &[data-state='open'] {\n    animation: menu-animateIn 300ms ease;\n  }\n  &[data-state='closed'] {\n    animation: menu-animateOut 300ms ease;\n  }\n}\n\n.animatedItemIndicator {\n  &[data-state='checked'] {\n    animation: menu-animateIn 300ms ease;\n  }\n  &[data-state='unchecked'] {\n    animation: menu-animateOut 300ms ease;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/toolbar.stories.tsx",
    "content": "import { Direction, DropdownMenu, Toggle, Toolbar } from 'radix-ui';\nimport styles from './toolbar.stories.module.css';\n\nexport default { title: 'Components/Toolbar' };\n\nexport const Styled = () => (\n  <>\n    <ToolbarExample title=\"Horizontal\"></ToolbarExample>\n    <ToolbarExample title=\"Vertical\" orientation=\"vertical\"></ToolbarExample>\n  </>\n);\n\nexport const Chromatic = () => (\n  <div style={{ padding: 50 }}>\n    <h1>Example</h1>\n    <ToolbarExample />\n    <ToolbarExample orientation=\"vertical\" />\n\n    <h1>Direction</h1>\n    <h2>Prop</h2>\n    <ToolbarExample dir=\"rtl\" />\n\n    <h2>Inherited</h2>\n    <Direction.Provider dir=\"rtl\">\n      <ToolbarExample />\n    </Direction.Provider>\n  </div>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n\nconst ToolbarExample = ({ title, dir, orientation }: any) => {\n  const toggleItemClass = [styles.toolbarItem, styles.toolbarToggleItem].join(' ');\n  return (\n    <div style={{ padding: 1, margin: -1 }}>\n      <h1>{title}</h1>\n      <Toolbar.Root\n        className={styles.toolbar}\n        orientation={orientation}\n        loop={true}\n        aria-label={`${title} toolbar`}\n        dir={dir}\n      >\n        <Toolbar.Button className={styles.toolbarItem}>Button</Toolbar.Button>\n        <Toolbar.Button className={styles.toolbarItem} disabled>\n          Button (disabled)\n        </Toolbar.Button>\n        <Toolbar.Separator className={styles.toolbarSeparator}></Toolbar.Separator>\n        <Toolbar.Link\n          className={[styles.toolbarItem, styles.toolbarLink].join(' ')}\n          href=\"https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/toolbar/toolbar.html\"\n          target=\"_blank\"\n        >\n          Link\n        </Toolbar.Link>\n        <Toolbar.Separator className={styles.toolbarSeparator}></Toolbar.Separator>\n        <Toolbar.Button\n          className={[styles.toolbarItem, styles.toolbarToggleButton].join(' ')}\n          asChild\n        >\n          <Toggle.Root>Toggle</Toggle.Root>\n        </Toolbar.Button>\n        <Toolbar.Separator className={styles.toolbarSeparator}></Toolbar.Separator>\n        <Toolbar.ToggleGroup type=\"single\" className={styles.toolbarToggleGroup}>\n          <Toolbar.ToggleItem value=\"left\" className={toggleItemClass}>\n            Left\n          </Toolbar.ToggleItem>\n          <Toolbar.ToggleItem value=\"center\" className={toggleItemClass}>\n            Center\n          </Toolbar.ToggleItem>\n          <Toolbar.ToggleItem value=\"right\" className={toggleItemClass}>\n            Right\n          </Toolbar.ToggleItem>\n        </Toolbar.ToggleGroup>\n        <Toolbar.Separator className={styles.toolbarSeparator}></Toolbar.Separator>\n        <DropdownMenu.Root>\n          <Toolbar.Button className={styles.toolbarItem} asChild>\n            <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>\n          </Toolbar.Button>\n          <DropdownMenu.Content className={styles.dropdownMenuContent} sideOffset={5}>\n            <DropdownMenu.Item className={styles.dropdownMenuItem}>Undo</DropdownMenu.Item>\n            <DropdownMenu.Item className={styles.dropdownMenuItem}>Redo</DropdownMenu.Item>\n            <DropdownMenu.Arrow />\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </Toolbar.Root>\n    </div>\n  );\n};\n"
  },
  {
    "path": "apps/storybook/stories/tooltip.stories.module.css",
    "content": ".positionButton {\n  margin: 5px;\n  border: 1px solid black;\n  background: transparent;\n}\n\n.trigger {\n}\n\n.content {\n  transform-origin: var(--radix-tooltip-content-transform-origin);\n  /* ensures content isn't selectable */\n  /* this is a detterent to people putting interactive content inside a `Tooltip.Root` */\n  user-select: none;\n  /* ---- */\n  background-color: var(--color-black);\n  color: var(--color-white);\n  font-size: 12px;\n  border-radius: 5px;\n  padding: 10px;\n  max-width: 300px;\n}\n\n.arrow {\n  fill: black;\n}\n\n.animatedContent {\n  &[data-state='delayed-open'] {\n    animation: tooltip-scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  &[data-state='instant-open'] {\n    animation: tooltip-fadeIn 0.2s ease-out;\n  }\n  &[data-state='closed'] {\n    animation: tooltip-fadeOut 0.2s ease-out;\n  }\n}\n\n.grid {\n  display: inline-grid;\n  grid-template-columns: repeat(3, 50px);\n  column-gap: 150px;\n  row-gap: 100px;\n  padding: 100px;\n  border: 1px solid black;\n}\n\n.chromaticTrigger {\n  width: 30px;\n  height: 30px;\n  background-color: tomato;\n  border: 1px solid rgb(0 0 0 / 0.3);\n}\n\n.chromaticContent {\n  display: grid;\n  place-content: center;\n  width: 60px;\n  height: 60px;\n  background-color: royalblue;\n  color: white;\n  font-size: 10px;\n  border: 1px solid rgb(0 0 0 / 0.3);\n}\n\n.chromaticArrow {\n  fill: black;\n}\n\n@keyframes tooltip-scaleIn {\n  0% {\n    opacity: 0;\n    transform: scale(0);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes tooltip-fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes tooltip-fadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n"
  },
  {
    "path": "apps/storybook/stories/tooltip.stories.tsx",
    "content": "import * as React from 'react';\nimport { Popper } from 'radix-ui/internal';\nimport { Dialog, Tooltip } from 'radix-ui';\nimport styles from './tooltip.stories.module.css';\n\nconst { SIDE_OPTIONS, ALIGN_OPTIONS } = Popper;\n\nexport default { title: 'Components/Tooltip' };\n\nexport const Styled = () => (\n  <Tooltip.Provider>\n    <Tooltip.Root>\n      <Tooltip.Trigger className={styles.trigger}>Hover or Focus me</Tooltip.Trigger>\n      <Tooltip.Portal>\n        <Tooltip.Content className={styles.content} sideOffset={5}>\n          Nicely done!\n          <Tooltip.Arrow className={styles.arrow} offset={10} />\n        </Tooltip.Content>\n      </Tooltip.Portal>\n    </Tooltip.Root>\n  </Tooltip.Provider>\n);\n\nexport const Controlled = () => {\n  const [open, setOpen] = React.useState(true);\n  return (\n    <Tooltip.Provider>\n      <Tooltip.Root open={open} onOpenChange={setOpen}>\n        <Tooltip.Trigger style={{ margin: 100 }}>\n          I'm controlled, look I'm {open ? 'open' : 'closed'}\n        </Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </Tooltip.Provider>\n  );\n};\n\nexport const CustomDurations = () => (\n  <Tooltip.Provider>\n    <h1>Delay duration</h1>\n    <h2>Default (700ms)</h2>\n\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Root>\n        <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n      <Tooltip.Root>\n        <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n      <Tooltip.Root>\n        <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </div>\n\n    <h2>Custom (0ms = instant open)</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Provider delayDuration={0}>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>\n    </div>\n\n    <h2>Custom (2s)</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Provider delayDuration={2000}>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>\n    </div>\n\n    <h1>Skip delay duration</h1>\n    <h2>Default (300ms to move from one to another tooltip)</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Root>\n        <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n      <Tooltip.Root>\n        <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n      <Tooltip.Root>\n        <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </div>\n\n    <h2>Custom (0ms to move from one to another tooltip = never skip)</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Provider skipDelayDuration={0}>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>\n    </div>\n\n    <h2>Custom (5s to move from one to another tooltip)</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Provider skipDelayDuration={5000}>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>\n    </div>\n  </Tooltip.Provider>\n);\n\nexport const CustomContent = () => (\n  <Tooltip.Provider>\n    <div style={{ display: 'flex', gap: 20, padding: 100 }}>\n      <Tooltip.Root>\n        <Tooltip.Trigger>Heading</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            <h1>Some heading</h1>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <Tooltip.Root>\n        <Tooltip.Trigger>Paragraph</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            <p>Some paragraph</p>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <Tooltip.Root>\n        <Tooltip.Trigger>List</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            <ul>\n              <li>One</li>\n              <li>Two</li>\n              <li>Three</li>\n            </ul>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <Tooltip.Root>\n        <Tooltip.Trigger>Article</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            <article>\n              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum, quae qui. Magnam\n              delectus ex totam repellat amet distinctio unde, porro architecto voluptatibus nemo et\n              nisi, voluptatem eligendi earum autem fugit.\n            </article>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <Tooltip.Root>\n        <Tooltip.Trigger>Figure</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            <figure style={{ margin: 0 }}>\n              <img\n                src=\"https://pbs.twimg.com/profile_images/864164353771229187/Catw6Nmh_400x400.jpg\"\n                alt=\"\"\n                width={100}\n              />\n              <figcaption>Colm Tuite</figcaption>\n            </figure>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <Tooltip.Root>\n        <Tooltip.Trigger>Time</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            {/* @ts-ignore */}\n            <time datetime=\"2017-10-31T11:21:00+02:00\">Tuesday, 31 October 2017</time>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <Tooltip.Root>\n        <Tooltip.Trigger>Link</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            View in <a href=\"https://workos.com\">WorkOS</a>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <Tooltip.Root>\n        <Tooltip.Trigger>Form</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            <form>\n              <label htmlFor=\"fname\">First name:</label>\n              <br />\n              <input type=\"text\" id=\"fname\" name=\"fname\" />\n              <br />\n              <label htmlFor=\"lname\">Last name:</label>\n              <br />\n              <input type=\"text\" id=\"lname\" name=\"lname\" />\n            </form>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <Tooltip.Root>\n        <Tooltip.Trigger>Mini layout</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            <p\n              style={{\n                margin: 0,\n                textAlign: 'center',\n                fontFamily: 'apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif',\n                fontSize: 14,\n              }}\n            >\n              Start video call\n              <span style={{ display: 'block', color: '#999' }}>\n                press{' '}\n                <kbd\n                  style={{\n                    fontFamily: 'apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif',\n                    fontWeight: 'bold',\n                    color: 'white',\n                  }}\n                  aria-label=\"c key\"\n                >\n                  c\n                </kbd>\n              </span>\n            </p>\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </div>\n  </Tooltip.Provider>\n);\n\nexport const Positions = () => (\n  <Tooltip.Provider>\n    <div\n      style={{\n        display: 'flex',\n        width: '100vw',\n        height: '100vh',\n        alignItems: 'center',\n        justifyContent: 'center',\n      }}\n    >\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(5, 1fr)',\n          gridTemplateRows: 'repeat(5, 50px)',\n        }}\n      >\n        <SimpleTooltip label=\"Top start\" side=\"top\" align=\"start\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '2', gridRow: '1' }}\n          >\n            Top start\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n        <SimpleTooltip label=\"Top center\" side=\"top\" align=\"center\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '3', gridRow: '1' }}\n          >\n            Top center\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n        <SimpleTooltip label=\"Top end\" side=\"top\" align=\"end\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '4', gridRow: '1' }}\n          >\n            Top end\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n\n        <SimpleTooltip label=\"Right start\" side=\"right\" align=\"start\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '5', gridRow: '2' }}\n            tabIndex={0}\n          >\n            Right start\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n        <SimpleTooltip label=\"Right center\" side=\"right\" align=\"center\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '5', gridRow: '3' }}\n            tabIndex={0}\n          >\n            Right center\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n        <SimpleTooltip label=\"Right end\" side=\"right\" align=\"end\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '5', gridRow: '4' }}\n            tabIndex={0}\n          >\n            Right end\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n\n        <SimpleTooltip label=\"Bottom end\" side=\"bottom\" align=\"end\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '4', gridRow: '5' }}\n          >\n            Bottom end\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n        <SimpleTooltip label=\"Bottom center\" side=\"bottom\" align=\"center\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '3', gridRow: '5' }}\n          >\n            Bottom center\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n        <SimpleTooltip label=\"Bottom start\" side=\"bottom\" align=\"start\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '2', gridRow: '5' }}\n          >\n            Bottom start\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n\n        <SimpleTooltip label=\"Left end\" side=\"left\" align=\"end\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '1', gridRow: '4' }}\n          >\n            Left end\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n        <SimpleTooltip label=\"Left center\" side=\"left\" align=\"center\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '1', gridRow: '3' }}\n          >\n            Left center\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n        <SimpleTooltip label=\"Left start\" side=\"left\" align=\"start\">\n          <Tooltip.Trigger\n            className={styles.positionButton}\n            style={{ gridColumn: '1', gridRow: '2' }}\n          >\n            Left start\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n      </div>\n    </div>\n  </Tooltip.Provider>\n);\n\nexport const AriaLabel = () => (\n  <Tooltip.Provider>\n    <p>The first button will display AND enunciate the label.</p>\n    <p>The second button will display the label, but enunciate the aria label.</p>\n    <div style={{ display: 'flex' }}>\n      <SimpleTooltip label=\"Notifications\">\n        <Tooltip.Trigger style={{ margin: 5 }}>\n          <span aria-hidden>🔔(3)</span>\n        </Tooltip.Trigger>\n      </SimpleTooltip>\n\n      <SimpleTooltip label=\"Notifications\" aria-label=\"3 notifications\">\n        <Tooltip.Trigger style={{ margin: 5 }}>\n          <span aria-hidden>🔔(3)</span>\n        </Tooltip.Trigger>\n      </SimpleTooltip>\n    </div>\n  </Tooltip.Provider>\n);\n\nexport const WithText = () => (\n  <Tooltip.Provider>\n    <p>\n      Hello this is a test with{' '}\n      <SimpleTooltip label=\"This is a tooltip\">\n        <Tooltip.Trigger asChild>\n          <a href=\"https://workos.com\">Tooltip.Root</a>\n        </Tooltip.Trigger>\n      </SimpleTooltip>{' '}\n      inside a Text Component{' '}\n      <SimpleTooltip label=\"This is a tooltip\" side=\"top\">\n        <Tooltip.Trigger asChild>\n          <a href=\"https://workos.com\">Tooltip.Root</a>\n        </Tooltip.Trigger>\n      </SimpleTooltip>{' '}\n      some more text{' '}\n      <SimpleTooltip label=\"This is a tooltip\" side=\"right\" align=\"center\">\n        <Tooltip.Trigger asChild>\n          <a href=\"https://workos.com\">Tooltip.Root</a>\n        </Tooltip.Trigger>\n      </SimpleTooltip>{' '}\n    </p>\n  </Tooltip.Provider>\n);\n\nexport const WithExternalRef = () => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  React.useEffect(() => {\n    if (buttonRef.current) {\n      buttonRef.current.style.boxShadow = '0 0 0 2px red';\n    }\n  });\n\n  return (\n    <Tooltip.Provider>\n      <SimpleTooltip label=\"Save document\" side=\"bottom\" align=\"end\">\n        <Tooltip.Trigger ref={buttonRef} type=\"button\" style={{ margin: 100 }}>\n          Save\n        </Tooltip.Trigger>\n      </SimpleTooltip>\n    </Tooltip.Provider>\n  );\n};\n\nexport const Unmount = () => {\n  const [isMounted, setIsMounted] = React.useState(true);\n  return (\n    <Tooltip.Provider>\n      <ul>\n        <li>Focus the first button (tooltip 1 shows)</li>\n        <li>Focus the second button (tooltip 2 shows)</li>\n        <li>Press escape (second button unmounts)</li>\n        <li>Focus the first button (tooltip 1 should still show)</li>\n      </ul>\n      <SimpleTooltip label=\"tooltip 1\">\n        <Tooltip.Trigger style={{ alignSelf: 'flex-start', margin: '0vmin' }}>\n          Tool 1\n        </Tooltip.Trigger>\n      </SimpleTooltip>\n\n      {isMounted && (\n        <SimpleTooltip label=\"tooltip 2\">\n          <Tooltip.Trigger\n            style={{ alignSelf: 'flex-start', margin: '0vmin' }}\n            onKeyDown={(event) => event.key === 'Escape' && setIsMounted(false)}\n          >\n            Tool 2\n          </Tooltip.Trigger>\n        </SimpleTooltip>\n      )}\n    </Tooltip.Provider>\n  );\n};\n\nexport const Animated = () => {\n  const contentClass = [styles.content, styles.animatedContent].join(' ');\n  return (\n    <Tooltip.Provider>\n      <div style={{ padding: 100 }}>\n        <SimpleTooltip className={contentClass} label=\"Hello world 1\">\n          <Tooltip.Trigger style={{ marginRight: 10 }}>Hello 1</Tooltip.Trigger>\n        </SimpleTooltip>\n\n        <SimpleTooltip className={contentClass} label=\"Hello world 2\" side=\"top\">\n          <Tooltip.Trigger>Hello 2</Tooltip.Trigger>\n        </SimpleTooltip>\n      </div>\n    </Tooltip.Provider>\n  );\n};\n\nexport const SlottableContent = () => (\n  <Tooltip.Provider>\n    <Tooltip.Root>\n      <Tooltip.Trigger className={styles.trigger}>Hover or Focus me</Tooltip.Trigger>\n      <Tooltip.Portal>\n        <Tooltip.Content asChild sideOffset={5}>\n          <div className={styles.content}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </div>\n        </Tooltip.Content>\n      </Tooltip.Portal>\n    </Tooltip.Root>\n  </Tooltip.Provider>\n);\n\nexport const WithinDialog = () => (\n  <Tooltip.Provider>\n    <Dialog.Root>\n      <Dialog.Trigger>Open dialog</Dialog.Trigger>\n      <Dialog.Content>\n        <Dialog.Title>Dialog title</Dialog.Title>\n        <Dialog.Description>Dialog description</Dialog.Description>\n        <Dialog.Close>Close dialog</Dialog.Close>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover or Focus me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Dialog.Content>\n    </Dialog.Root>\n  </Tooltip.Provider>\n);\n\nexport const KeepOpenOnActivation = () => {\n  const triggerRef = React.useRef(null);\n\n  return (\n    <Tooltip.Provider>\n      <Tooltip.Root>\n        <Tooltip.Trigger\n          ref={triggerRef}\n          className={styles.trigger}\n          onClick={(event) => event.preventDefault()}\n        >\n          Hover or Focus me\n        </Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content\n            className={styles.content}\n            sideOffset={5}\n            onPointerDownOutside={(event) => {\n              if (event.target === triggerRef.current) event.preventDefault();\n            }}\n          >\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </Tooltip.Provider>\n  );\n};\n\nexport const WithinScrollable = () => (\n  <Tooltip.Provider>\n    <div\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: 500,\n        width: 300,\n        border: '1px solid black',\n        overflow: 'auto',\n      }}\n    >\n      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 600 }}>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover or Focus me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </div>\n    </div>\n    <div\n      style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150vh' }}\n    >\n      <Tooltip.Root>\n        <Tooltip.Trigger className={styles.trigger}>Hover or Focus me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Nicely done!\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </div>\n  </Tooltip.Provider>\n);\n\nexport const DisableHoverableContent = () => (\n  <>\n    <h1>Hoverable content (Default)</h1>\n    <p>Content remains open while moving pointer to it</p>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Provider skipDelayDuration={1000}>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>\n    </div>\n\n    <h1>Disable hoverable content</h1>\n    <p>Tooltip closes when pointer leaves the trigger</p>\n    <h2>Inherited from provider</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Provider delayDuration={0} disableHoverableContent>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Hover me</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>\n    </div>\n    <h2>Inherited value overridden by prop on tooltip</h2>\n    <div style={{ display: 'flex', gap: 50 }}>\n      <Tooltip.Provider delayDuration={0} disableHoverableContent>\n        <Tooltip.Root>\n          <Tooltip.Trigger className={styles.trigger}>Disabled hoverable content</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n        <Tooltip.Root disableHoverableContent={false}>\n          <Tooltip.Trigger className={styles.trigger}>Hoverable content</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>\n    </div>\n  </>\n);\n\n// change order slightly for more pleasing visual\nconst SIDES = [...SIDE_OPTIONS.filter((side) => side !== 'bottom'), 'bottom' as const];\n\nexport const Chromatic = () => (\n  <Tooltip.Provider>\n    <div style={{ padding: 200 }}>\n      <h1>Uncontrolled</h1>\n      <h2>Closed</h2>\n      <Tooltip.Root>\n        <Tooltip.Trigger className={styles.trigger}>open</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Some content\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <h2 style={{ marginBottom: 60 }}>Open</h2>\n      <Tooltip.Root defaultOpen>\n        <Tooltip.Trigger className={styles.trigger}>open</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Some content\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <h2 style={{ marginTop: 60, marginBottom: 60 }}>Open with reordered parts</h2>\n      <Tooltip.Root defaultOpen>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Some content\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n        <Tooltip.Trigger className={styles.trigger}>open</Tooltip.Trigger>\n      </Tooltip.Root>\n\n      <h1 style={{ marginTop: 100 }}>Controlled</h1>\n      <h2>Closed</h2>\n      <Tooltip.Root open={false}>\n        <Tooltip.Trigger className={styles.trigger}>open</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Some content\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <h2 style={{ marginBottom: 60 }}>Open</h2>\n      <Tooltip.Root open>\n        <Tooltip.Trigger className={styles.trigger}>open</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Some content\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <h2 style={{ marginTop: 60, marginBottom: 60 }}>Open with reordered parts</h2>\n      <Tooltip.Root open>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Some content\n            <Tooltip.Arrow className={styles.arrow} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n        <Tooltip.Trigger className={styles.trigger}>open</Tooltip.Trigger>\n      </Tooltip.Root>\n\n      <h1 style={{ marginTop: 100 }}>Positioning</h1>\n      <h2>No collisions</h2>\n      <h3>Side & Align</h3>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <Tooltip.Root key={`${side}-${align}`} open>\n              <Tooltip.Trigger className={styles.chromaticTrigger} />\n              <Tooltip.Portal>\n                <Tooltip.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  align={align}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <Tooltip.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </Tooltip.Content>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          )),\n        )}\n      </div>\n\n      <h3>Side offset</h3>\n      <h4>Positive</h4>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <Tooltip.Root key={`${side}-${align}`} open>\n              <Tooltip.Trigger className={styles.chromaticTrigger} />\n              <Tooltip.Portal>\n                <Tooltip.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  sideOffset={5}\n                  align={align}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <Tooltip.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </Tooltip.Content>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          )),\n        )}\n      </div>\n      <h4>Negative</h4>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <Tooltip.Root key={`${side}-${align}`} open>\n              <Tooltip.Trigger className={styles.chromaticTrigger} />\n              <Tooltip.Portal>\n                <Tooltip.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  sideOffset={-10}\n                  align={align}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <Tooltip.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </Tooltip.Content>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          )),\n        )}\n      </div>\n\n      <h3>Align offset</h3>\n      <h4>Positive</h4>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <Tooltip.Root key={`${side}-${align}`} open>\n              <Tooltip.Trigger className={styles.chromaticTrigger} />\n              <Tooltip.Portal>\n                <Tooltip.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  align={align}\n                  alignOffset={20}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <Tooltip.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </Tooltip.Content>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          )),\n        )}\n      </div>\n      <h4>Negative</h4>\n      <div className={styles.grid}>\n        {SIDES.map((side) =>\n          ALIGN_OPTIONS.map((align) => (\n            <Tooltip.Root key={`${side}-${align}`} open>\n              <Tooltip.Trigger className={styles.chromaticTrigger} />\n              <Tooltip.Portal>\n                <Tooltip.Content\n                  className={styles.chromaticContent}\n                  side={side}\n                  align={align}\n                  alignOffset={-10}\n                  avoidCollisions={false}\n                >\n                  <p style={{ textAlign: 'center' }}>\n                    {side}\n                    <br />\n                    {align}\n                  </p>\n                  <Tooltip.Arrow className={styles.chromaticArrow} width={20} height={10} />\n                </Tooltip.Content>\n              </Tooltip.Portal>\n            </Tooltip.Root>\n          )),\n        )}\n      </div>\n\n      <h2>Collisions</h2>\n      <p>See instances on the periphery of the page.</p>\n      {SIDES.map((side) =>\n        ALIGN_OPTIONS.map((align) => (\n          <Tooltip.Root key={`${side}-${align}`} open>\n            <Tooltip.Trigger\n              className={styles.chromaticTrigger}\n              style={{\n                position: 'absolute',\n                [side]: 10,\n                ...((side === 'right' || side === 'left') &&\n                  (align === 'start'\n                    ? { bottom: 10 }\n                    : align === 'center'\n                      ? { top: 'calc(50% - 15px)' }\n                      : { top: 10 })),\n                ...((side === 'top' || side === 'bottom') &&\n                  (align === 'start'\n                    ? { right: 10 }\n                    : align === 'center'\n                      ? { left: 'calc(50% - 15px)' }\n                      : { left: 10 })),\n              }}\n            />\n            <Tooltip.Portal>\n              <Tooltip.Content className={styles.chromaticContent} side={side} align={align}>\n                <p style={{ textAlign: 'center' }}>\n                  {side}\n                  <br />\n                  {align}\n                </p>\n                <Tooltip.Arrow className={styles.chromaticArrow} width={20} height={10} />\n              </Tooltip.Content>\n            </Tooltip.Portal>\n          </Tooltip.Root>\n        )),\n      )}\n\n      <h2 style={{ marginTop: 50, marginBottom: 60 }}>Relative parent (non-portalled)</h2>\n      <div style={{ position: 'relative' }}>\n        <Tooltip.Provider>\n          <Tooltip.Root open>\n            <Tooltip.Trigger className={styles.trigger}>Hover or Focus me</Tooltip.Trigger>\n            <Tooltip.Content className={styles.content} sideOffset={5}>\n              Nicely done!\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </Tooltip.Content>\n          </Tooltip.Root>\n        </Tooltip.Provider>\n      </div>\n\n      <h1 style={{ marginTop: 100, marginBottom: 60 }}>With slotted trigger</h1>\n      <Tooltip.Root open>\n        <Tooltip.Trigger asChild>\n          <button className={styles.trigger}>open</button>\n        </Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content className={styles.content} sideOffset={5}>\n            Some content\n            <Tooltip.Arrow className={styles.arrow} width={20} height={10} offset={10} />\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n\n      <h1 style={{ marginTop: 100, marginBottom: 60 }}>With slotted content</h1>\n      <Tooltip.Root open>\n        <Tooltip.Trigger className={styles.trigger}>Hover or Focus me</Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Content asChild sideOffset={5}>\n            <div className={styles.content}>\n              Some content\n              <Tooltip.Arrow className={styles.arrow} offset={10} />\n            </div>\n          </Tooltip.Content>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </div>\n  </Tooltip.Provider>\n);\nChromatic.parameters = { chromatic: { disable: false } };\n\nfunction SimpleTooltip({\n  children,\n  label,\n  'aria-label': ariaLabel,\n  open,\n  onOpenChange,\n  ...props\n}: any) {\n  return (\n    <Tooltip.Root open={open} onOpenChange={onOpenChange}>\n      {children}\n      <Tooltip.Portal>\n        <Tooltip.Content\n          className={styles.content}\n          sideOffset={5}\n          aria-label={ariaLabel}\n          {...props}\n        >\n          {label}\n          <Tooltip.Arrow className={styles.arrow} offset={10} />\n        </Tooltip.Content>\n      </Tooltip.Portal>\n    </Tooltip.Root>\n  );\n}\n"
  },
  {
    "path": "apps/storybook/stories/visually-hidden.stories.tsx",
    "content": "import { VisuallyHidden } from 'radix-ui';\n\nexport default { title: 'Utilities/VisuallyHidden' };\n\nexport const Basic = () => (\n  <button>\n    <VisuallyHidden.Root>Save the file</VisuallyHidden.Root>\n    <span aria-hidden>💾</span>\n  </button>\n);\n"
  },
  {
    "path": "apps/storybook/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"include\": [\"stories\", \"index.d.ts\"]\n}\n"
  },
  {
    "path": "context7.json",
    "content": "{\n  \"url\": \"https://context7.com/radix-ui/primitives\",\n  \"public_key\": \"pk_q7NnKuFFXMWA7WnmjMHQU\"\n}"
  },
  {
    "path": "cypress/e2e/ContextMenu.cy.ts",
    "content": "describe('ContextMenu', () => {\n  describe('given submenu user', () => {\n    beforeEach(() => {\n      cy.visitStory('contextmenu--submenus');\n      cy.findByText('Right Click Here').rightclick();\n    });\n\n    describe('when using pointer', () => {\n      it('should close open submenus and reopen the root menu when right clicking trigger', () => {\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').should('be.visible');\n        cy.findByText('Right Click Here').rightclick({ force: true });\n        cy.findByText('New Tab').should('be.visible');\n        cy.findByText('Inbox').should('not.exist');\n      });\n\n      it('should open submenu and not focus first item when moving pointer over trigger', () => {\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').should('not.be.focused');\n      });\n\n      it('should not close when moving pointer to submenu and back to parent trigger', () => {\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').should('be.visible');\n      });\n\n      it(\n        'should close submenu when moving pointer away but remain open when moving towards',\n        {\n          viewportWidth: 550,\n        },\n        () => {\n          // Moving away\n          pointerOver('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n          pointerExitRightToLeft('Bookmarks →');\n          cy.findByText('Inbox').should('not.exist');\n\n          // Moving towards\n          pointerOver('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n          pointerExitLeftToRight('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n\n          // Test at collision edge\n          // Moving away\n          pointerOver('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n          pointerExitLeftToRight('WorkOS →');\n          cy.findByText('Radix').should('not.exist');\n\n          // Moving towards\n          pointerOver('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n          pointerExitRightToLeft('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n        },\n      );\n\n      it('should close open submenu when moving pointer to any item in parent menu', () => {\n        // Item\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('New Tab');\n        cy.findByText('Inbox').should('not.exist');\n\n        // Disabled item\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('Print…');\n        cy.findByText('Inbox').should('not.exist');\n\n        // Trigger item\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('Tools →');\n        cy.findByText('Inbox').should('not.exist');\n\n        // Disabled trigger item\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('History →');\n        cy.findByText('Inbox').should('not.exist');\n      });\n\n      it('should close unassociated submenus when moving pointer back to the root trigger', () => {\n        // Open multiple nested submenus and back to trigger in root menu\n        pointerOver('Bookmarks →');\n        pointerOver('WorkOS →');\n        pointerOver('Radix');\n        pointerOver('Bookmarks →');\n\n        cy.findByText('Inbox').should('be.visible');\n        cy.findByText('Radix').should('not.exist');\n      });\n\n      it('should close all menus when clicking item in any menu, or clicking outside', () => {\n        // Root menu\n        cy.findByText('New Tab').click();\n        cy.findByText('New Tab').should('not.exist');\n\n        // Submenu\n        cy.findByText('Right Click Here').rightclick();\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').click();\n        cy.findByText('New Tab').should('not.exist');\n        cy.findByText('Inbox').should('not.exist');\n\n        // Click outside\n        cy.findByText('Right Click Here').rightclick();\n        cy.get('body').click({ force: true });\n        cy.findByText('New Tab').should('not.exist');\n      });\n    });\n\n    describe('When using keyboard', () => {\n      it('should not open submenu when moving focus to trigger', () => {\n        cy.findByText('Bookmarks →').focus();\n        cy.findByText('Inbox').should('not.exist');\n      });\n\n      it('should open submenu and focus first item when pressing right arrow, enter or space key', () => {\n        function shouldOpenOnKeydown(key: string) {\n          cy.findByText('Bookmarks →').trigger('keydown', { key });\n          cy.findByText('Inbox').should('be.focused').trigger('keydown', { key: 'ArrowLeft' });\n        }\n\n        shouldOpenOnKeydown(' ');\n        shouldOpenOnKeydown('Enter');\n        shouldOpenOnKeydown('ArrowRight');\n      });\n\n      it('should close only the focused submenu when pressing left arrow key', () => {\n        cy.findByText('Bookmarks →').type('{enter}');\n        cy.findByText('WorkOS →').type('{enter}');\n        cy.findByText('Stitches').type('{leftarrow}');\n        cy.findByText('Stitches').should('not.exist');\n        cy.findByText('WorkOS →').should('be.visible');\n        cy.findByText('New Window').should('be.visible');\n      });\n\n      it('should focus first item when pressing right arrow key after opening submenu with mouse', () => {\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').should('be.visible');\n        cy.findByText('Bookmarks →').type('{rightarrow}');\n        cy.findByText('Inbox').should('be.focused');\n      });\n\n      it('should close all menus when pressing escape, enter or space key on any item', () => {\n        // Test close on root menu\n        cy.findByText('Bookmarks →').type('{esc}');\n        cy.findByText('Bookmarks →').should('not.exist');\n\n        // Reopen menu and test keys from within the submenu\n        cy.findByText('Right Click Here').rightclick();\n        cy.findByText('Bookmarks →').type('{enter}');\n        cy.findByText('Inbox').type('{esc}');\n        cy.findByText('Inbox').should('not.exist');\n        cy.findByText('New Window').should('not.exist');\n      });\n\n      it('should scope typeahead behaviour to the active menu', () => {\n        // Matching items outside of the active menu should not become focused\n        pointerOver('Bookmarks →');\n        pointerOver('WorkOS →');\n        cy.findByText('Stitches').focus();\n        cy.findByText('Stitches').type('Inbox');\n        cy.findByText('Inbox').should('not.have.focus');\n\n        // Matching items inside of active menu should become focused\n        pointerOver('Notion').focus();\n        pointerOver('Notion').type('Inbox');\n        cy.findByText('Inbox').should('have.focus');\n      });\n    });\n\n    describe('When using pointer in RTL', () => {\n      beforeEach(() => {\n        cy.findByText('Right-to-left').click({ force: true });\n        cy.findByText('Right Click Here').rightclick();\n      });\n\n      it(\n        'should close submenu when pointer moves away but remain open when moving towards',\n        {\n          viewportWidth: 550,\n        },\n        () => {\n          // Moving away\n          pointerOver('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n          pointerExitLeftToRight('Bookmarks →');\n          cy.findByText('Inbox').should('not.exist');\n\n          // Moving towards\n          pointerOver('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n          pointerExitRightToLeft('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n\n          // Test at collision edge\n          // Moving away\n          pointerOver('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n          pointerExitRightToLeft('WorkOS →');\n          cy.findByText('Radix').should('not.exist');\n\n          // Moving towards\n          pointerOver('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n          pointerExitLeftToRight('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n        },\n      );\n    });\n\n    describe('When using keyboard in RTL', () => {\n      beforeEach(() => {\n        cy.findByText('Right-to-left').click({ force: true });\n        cy.findByText('Right Click Here').rightclick();\n      });\n\n      it('should open submenu and focus first item when pressing left arrow key but close when pressing right arrow key', () => {\n        cy.findByText('Bookmarks →').trigger('keydown', { key: 'ArrowLeft' });\n        cy.findByText('Inbox').should('be.focused');\n        cy.findByText('Inbox').should('be.focused');\n        cy.findByText('Inbox').trigger('keydown', { key: 'ArrowRight' });\n        cy.findByText('Inbox').should('not.exist');\n\n        // Root level menu should remain open\n        cy.findByText('New Tab').should('be.visible');\n      });\n    });\n  });\n\n  /* ---------------------------------------------------------------------------------------------- */\n\n  function pointerExitRightToLeft(elementText: string) {\n    return cy\n      .findByText(elementText)\n      .should('be.visible')\n      .realHover({ position: 'right' })\n      .realHover({ position: 'bottomLeft' })\n      .trigger('pointerout', 'bottomLeft', { pointerType: 'mouse' });\n  }\n\n  function pointerExitLeftToRight(elementText: string) {\n    return cy\n      .findByText(elementText)\n      .should('be.visible')\n      .realHover({ position: 'left' })\n      .realHover({ position: 'bottomRight' })\n      .trigger('pointerout', 'bottomRight', { pointerType: 'mouse' });\n  }\n\n  function pointerOver(elementText: string) {\n    return cy.findByText(elementText).should('be.visible').realHover();\n  }\n});\n"
  },
  {
    "path": "cypress/e2e/Dialog.cy.ts",
    "content": "describe('Dialog', () => {\n  beforeEach(() => {\n    cy.visitStory('dialog--cypress');\n  });\n\n  function shouldBeOpen() {\n    cy.findByText('title').should('exist');\n  }\n  function shouldBeClosed() {\n    cy.findByText('title').should('not.exist');\n  }\n  function shouldNotAllowOutsideInteraction(action: 'realClick' | 'realTouch') {\n    cy.findByLabelText('count up')\n      .invoke('text')\n      .then((count) => {\n        if (action === 'realTouch') {\n          cy.findByLabelText('count up').realClick();\n        } else {\n          cy.findByLabelText('count up').realTouch();\n        }\n        cy.findByLabelText('count up').should('have.text', count);\n      });\n  }\n  function shouldAllowOutsideInteraction(action: 'realClick' | 'realTouch') {\n    cy.findByLabelText('count up')\n      .invoke('text')\n      .then((count) => {\n        if (action === 'realTouch') {\n          cy.findByLabelText('count up').realClick();\n        } else {\n          cy.findByLabelText('count up').realTouch();\n        }\n        cy.findByLabelText('count up').should('not.have.text', count);\n      });\n  }\n\n  describe('given a modal dialog', () => {\n    it('can be open/closed with a keyboard', () => {\n      // using keyboard on open/close buttons\n      cy.findByText('open').focus();\n      cy.realPress('Space');\n      shouldBeOpen();\n      cy.findByText('close').should('be.focused');\n      cy.realPress('Space');\n      shouldBeClosed();\n      cy.findByText('open').should('be.focused');\n\n      // using keyboard on open button and close with escape\n      cy.realPress('Space');\n      shouldBeOpen();\n      cy.realPress('Escape');\n      shouldBeClosed();\n    });\n\n    it('can be open/closed with a pointer', () => {\n      // using pointer on open/close buttons\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByText('close').should('be.focused').click();\n      shouldBeClosed();\n      cy.findByText('open').should('be.focused');\n\n      // using mouse inside dialog, then on a button outside\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByText('title').click();\n      shouldBeOpen();\n      shouldNotAllowOutsideInteraction('realClick');\n      shouldBeClosed();\n\n      // using touch on a button outside\n      cy.findByText('open').click();\n      shouldBeOpen();\n      shouldNotAllowOutsideInteraction('realTouch');\n      shouldBeClosed();\n\n      // using mouse on an input outside\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByPlaceholderText('name').realClick();\n      cy.findByPlaceholderText('name').should('not.be.focused');\n      shouldBeClosed();\n\n      // using touch on an input outside\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByPlaceholderText('name').realTouch();\n      cy.findByPlaceholderText('name').should('not.be.focused');\n      shouldBeClosed();\n\n      // turn on animation\n      cy.findByLabelText('animated').click();\n\n      // using mouse on an input outside an animated dialog\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByPlaceholderText('name').realClick();\n      cy.findByPlaceholderText('name').should('not.be.focused');\n      shouldBeClosed();\n\n      // finally, ensure that pointer-events have been reset and interactions restored\n      shouldAllowOutsideInteraction('realClick');\n\n      // using touch on an input outside an animated dialog\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByPlaceholderText('name').realTouch();\n      cy.findByPlaceholderText('name').should('not.be.focused');\n      shouldBeClosed();\n\n      // finally, ensure that pointer-events have been reset and interactions restored\n      shouldAllowOutsideInteraction('realTouch');\n    });\n\n    it('keeps focus trapped even if focused element is removed', () => {\n      cy.findByText('open').click();\n      cy.findByText('close').should('be.focused');\n      cy.realPress('Tab');\n      cy.findByText('destroy me').should('be.focused');\n      cy.realPress('Space');\n      cy.realPress('Tab');\n      cy.findByText('close').should('be.focused');\n    });\n  });\n\n  describe('given a non-modal dialog', () => {\n    beforeEach(() => {\n      cy.findByLabelText('modal').click();\n    });\n\n    it('can be open/closed with a keyboard', () => {\n      // using keyboard on open/close buttons\n      cy.findByText('open').focus();\n      cy.realPress('Space');\n      shouldBeOpen();\n      cy.findByText('close').should('be.focused');\n      cy.realPress('Space');\n      shouldBeClosed();\n      cy.findByText('open').should('be.focused');\n\n      // using keyboard on open button and close with escape\n      cy.realPress('Space');\n      shouldBeOpen();\n      cy.realPress('Escape');\n      shouldBeClosed();\n    });\n\n    it('can be open/closed with a pointer', () => {\n      // using pointer on open/close buttons\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByText('close').should('be.focused').click();\n      shouldBeClosed();\n      cy.findByText('open').should('be.focused');\n\n      // using mouse inside dialog, then on a button outside\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByText('title').click();\n      shouldBeOpen();\n      shouldAllowOutsideInteraction('realClick');\n      shouldBeClosed();\n\n      // using touch on a button outside\n      cy.findByText('open').click();\n      shouldBeOpen();\n      shouldAllowOutsideInteraction('realTouch');\n      shouldBeClosed();\n\n      // using mouse on an input outside\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByPlaceholderText('name').realClick();\n      cy.findByPlaceholderText('name').should('be.focused');\n      shouldBeClosed();\n\n      // using touch on an input outside\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByPlaceholderText('name').realTouch();\n      cy.findByPlaceholderText('name').should('be.focused');\n      shouldBeClosed();\n\n      // turn on animation\n      cy.findByLabelText('animated').click();\n\n      // using mouse on an input outside an animated dialog\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByPlaceholderText('name').realClick();\n      cy.findByPlaceholderText('name').should('be.focused');\n      shouldBeClosed();\n\n      // finally, ensure that pointer-events have been reset and interactions restored\n      shouldAllowOutsideInteraction('realClick');\n\n      // using touch on an input outside an animated dialog\n      cy.findByText('open').click();\n      shouldBeOpen();\n      cy.findByPlaceholderText('name').realTouch();\n      cy.findByPlaceholderText('name').should('be.focused');\n      shouldBeClosed();\n\n      // finally, ensure that pointer-events have been reset and interactions restored\n      shouldAllowOutsideInteraction('realTouch');\n    });\n  });\n});\n"
  },
  {
    "path": "cypress/e2e/DropdownMenu.cy.ts",
    "content": "describe('DropdownMenu', () => {\n  describe('given submenu user', () => {\n    beforeEach(() => {\n      cy.visitStory('dropdownmenu--submenus');\n      cy.findByText('Open').click();\n    });\n\n    describe('when using pointer', () => {\n      it('should open submenu and not focus first item when moving pointer over trigger', () => {\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').should('not.be.focused');\n      });\n\n      it('should not close when moving pointer to submenu and back to parent trigger', () => {\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').should('be.visible');\n      });\n\n      it(\n        'should close submenu when moving pointer away but remain open when moving towards',\n        {\n          viewportWidth: 550,\n        },\n        () => {\n          // Moving away\n          pointerOver('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n          pointerExitRightToLeft('Bookmarks →');\n          cy.findByText('Inbox').should('not.exist');\n\n          // Moving towards\n          pointerOver('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n          pointerExitLeftToRight('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n\n          // Test at collision edge\n          // Moving away\n          pointerOver('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n          pointerExitLeftToRight('WorkOS →');\n          cy.findByText('Radix').should('not.exist');\n\n          // Moving towards\n          pointerOver('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n          pointerExitRightToLeft('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n        },\n      );\n\n      it('should close open submenu when moving pointer to any item in parent menu', () => {\n        // Item\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('New Tab');\n        cy.findByText('Inbox').should('not.exist');\n\n        // Disabled item\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('Print…');\n        cy.findByText('Inbox').should('not.exist');\n\n        // Trigger item\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('Tools →');\n        cy.findByText('Inbox').should('not.exist');\n\n        // Disabled trigger item\n        pointerOver('Bookmarks →');\n        pointerOver('Inbox');\n        pointerOver('History →');\n        cy.findByText('Inbox').should('not.exist');\n      });\n\n      it('should close unassociated submenus when moving pointer back to the root trigger', () => {\n        // Open multiple nested submenus and back to trigger in root menu\n        pointerOver('Bookmarks →');\n        pointerOver('WorkOS →');\n        pointerOver('Radix');\n        pointerOver('Bookmarks →');\n\n        cy.findByText('Inbox').should('be.visible');\n        cy.findByText('Radix').should('not.exist');\n      });\n\n      it('should close all menus when clicking item in any menu, or clicking outside', () => {\n        // Root menu\n        cy.findByText('New Tab').click();\n        cy.findByText('New Tab').should('not.exist');\n\n        // Submenu\n        cy.findByText('Open').click();\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').click();\n        cy.findByText('New Tab').should('not.exist');\n        cy.findByText('Inbox').should('not.exist');\n\n        // Click outside\n        cy.findByText('Open').click();\n        cy.get('body').click({ force: true });\n        cy.findByText('New Tab').should('not.exist');\n      });\n    });\n\n    describe('When using keyboard', () => {\n      it('should not open submenu when moving focus to trigger', () => {\n        cy.findByText('Bookmarks →').focus();\n        cy.findByText('Inbox').should('not.exist');\n      });\n\n      it('should open submenu and focus first item when pressing right arrow, enter or space key', () => {\n        function shouldOpenOnKeydown(key: string) {\n          cy.findByText('Bookmarks →').trigger('keydown', { key });\n          cy.findByText('Inbox').should('be.focused').trigger('keydown', { key: 'ArrowLeft' });\n        }\n\n        shouldOpenOnKeydown(' ');\n        shouldOpenOnKeydown('Enter');\n        shouldOpenOnKeydown('ArrowRight');\n      });\n\n      it('should close only the focused submenu when pressing left arrow key', () => {\n        cy.findByText('Bookmarks →').type('{enter}');\n        cy.findByText('WorkOS →').type('{enter}');\n        cy.findByText('Stitches').type('{leftarrow}');\n        cy.findByText('Stitches').should('not.exist');\n        cy.findByText('WorkOS →').should('be.visible');\n        cy.findByText('New Window').should('be.visible');\n      });\n\n      it('should focus first item when pressing right arrow key after opening submenu with mouse', () => {\n        pointerOver('Bookmarks →');\n        cy.findByText('Inbox').should('be.visible');\n        cy.findByText('Bookmarks →').type('{rightarrow}');\n        cy.findByText('Inbox').should('be.focused');\n      });\n\n      it('should close all menus when pressing escape, enter or space key on any item', () => {\n        // Test close on root menu\n        cy.findByText('New Window').type('{esc}');\n        cy.findByText('New Window').should('not.exist');\n\n        // Reopen menu and test keys from within the submenu\n        cy.findByText('Open').click();\n        cy.findByText('Bookmarks →').type('{enter}');\n        cy.findByText('Inbox').type('{esc}');\n        cy.findByText('Inbox').should('not.exist');\n        cy.findByText('New Window').should('not.exist');\n      });\n\n      it('should scope typeahead behaviour to the active menu', () => {\n        // Matching items outside of the active menu should not become focused\n        pointerOver('Bookmarks →');\n        pointerOver('WorkOS →');\n        cy.findByText('Stitches').focus();\n        cy.findByText('Stitches').type('Inbox');\n        cy.findByText('Inbox').should('not.have.focus');\n\n        // Matching items inside of active menu should become focused\n        pointerOver('Notion').focus().type('Inbox');\n        cy.findByText('Inbox').should('have.focus');\n      });\n    });\n\n    describe('When using pointer in RTL', () => {\n      beforeEach(() => {\n        cy.findByText('Right-to-left').click({ force: true });\n        cy.findByText('Open').click();\n      });\n\n      it(\n        'should close submenu when pointer moves away but remain open when moving towards',\n        {\n          viewportWidth: 550,\n        },\n        () => {\n          // Moving away\n          pointerOver('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n          pointerExitLeftToRight('Bookmarks →');\n          cy.findByText('Inbox').should('not.exist');\n\n          // Moving towards\n          pointerOver('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n          pointerExitRightToLeft('Bookmarks →');\n          cy.findByText('Inbox').should('be.visible');\n\n          // Test at collision edge\n          // Moving away\n          pointerOver('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n          pointerExitRightToLeft('WorkOS →');\n          cy.findByText('Radix').should('not.exist');\n\n          // Moving towards\n          pointerOver('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n          pointerExitLeftToRight('WorkOS →');\n          cy.findByText('Radix').should('be.visible');\n        },\n      );\n    });\n\n    describe('When using keyboard in RTL', () => {\n      beforeEach(() => {\n        cy.findByText('Right-to-left').click({ force: true });\n        cy.findByText('Open').click();\n      });\n\n      it('should open submenu and focus first item when pressing left arrow key but close when pressing right arrow key', () => {\n        cy.findByText('Bookmarks →').trigger('keydown', { key: 'ArrowLeft' });\n        cy.findByText('Inbox').should('be.focused');\n        cy.findByText('Inbox').trigger('keydown', { key: 'ArrowRight' });\n        cy.findByText('Inbox').should('not.exist');\n\n        // Root level menu should remain open\n        cy.findByText('New Tab').should('be.visible');\n      });\n    });\n  });\n\n  /* ---------------------------------------------------------------------------------------------- */\n\n  function pointerExitRightToLeft(elementText: string) {\n    return cy\n      .findByText(elementText)\n      .should('be.visible')\n      .realHover({ position: 'right' })\n      .realHover({ position: 'bottomLeft' })\n      .trigger('pointerout', 'bottomLeft', { pointerType: 'mouse' });\n  }\n\n  function pointerExitLeftToRight(elementText: string) {\n    return cy\n      .findByText(elementText)\n      .should('be.visible')\n      .realHover({ position: 'left' })\n      .realHover({ position: 'bottomRight' })\n      .trigger('pointerout', 'bottomRight', { pointerType: 'mouse' });\n  }\n\n  function pointerOver(elementText: string) {\n    return cy.findByText(elementText).should('be.visible').realHover();\n  }\n});\n"
  },
  {
    "path": "cypress/e2e/Form.cy.ts",
    "content": "describe('Form', () => {\n  before(() => {\n    cy.visitStory('form--cypress');\n  });\n\n  beforeEach(() => {\n    cy.findByText('reset').click();\n  });\n\n  function checkControlMessageAssociation() {\n    cy.get('@control').should('have.attr', 'aria-describedby');\n    cy.get('@control')\n      .invoke('attr', 'aria-describedby')\n      .then((ariaDescribedby) =>\n        cy.get('@message').invoke('attr', 'id').should('equal', ariaDescribedby),\n      );\n  }\n\n  describe('given a form', () => {\n    it('should associate label and control', () => {\n      cy.findByText(/email/i).click();\n      cy.findByLabelText(/email/i).should('be.focused');\n    });\n\n    it('allows custom label and control association', () => {\n      cy.findByText(/country/i).click();\n      cy.findByLabelText(/country/i).should('be.focused');\n    });\n  });\n\n  describe('given a form with client-side validation', () => {\n    it('should prevent submitting when there are errors', () => {\n      cy.findByText('submit').click();\n      cy.findByText(/data/i).should('include.text', '{}');\n    });\n\n    it('should focus the first control with an error', () => {\n      cy.findByText('submit').click();\n      cy.findByLabelText(/name/i).should('be.focused');\n    });\n\n    it('should handle `valueMissing` validity', () => {\n      cy.findByLabelText(/name/i).as('control');\n      cy.findByText('submit').click();\n      cy.findByText(/missing/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').realType('John');\n      cy.realPress('Tab');\n      cy.findByText(/missing/).should('not.exist');\n    });\n\n    it('should handle `valid` validity', () => {\n      cy.findByLabelText(/name/i).as('control').focus();\n      cy.get('@control').realType('John');\n      cy.realPress('Tab');\n      cy.findByText('valid!').as('message');\n      checkControlMessageAssociation();\n\n      cy.findByText('submit').click();\n      cy.findByText(/data/i).should('include.text', '\"name\": \"John\"');\n    });\n\n    it('should handle `rangeOverflow` validity', () => {\n      cy.findByLabelText(/age/i).as('control').focus();\n      cy.get('@control').realType('200');\n      cy.realPress('Tab');\n      cy.findByText(/too large/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').clear();\n      cy.get('@control').realType('50');\n      cy.realPress('Tab');\n      cy.findByText(/does not match the required step/).should('not.exist');\n    });\n\n    it('should handle `rangeUnderflow` validity', () => {\n      cy.findByLabelText(/age/i).as('control').focus();\n      cy.get('@control').realType('-50');\n      cy.realPress('Tab');\n      cy.findByText(/too small/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').clear();\n      cy.get('@control').realType('50');\n      cy.realPress('Tab');\n      cy.findByText(/does not match the required step/).should('not.exist');\n    });\n\n    it('should handle `stepMismatch` validity', () => {\n      cy.findByLabelText(/age/i).as('control').focus();\n      cy.get('@control').realType('10.5');\n      cy.realPress('Tab');\n      cy.findByText(/does not match the required step/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').clear();\n      cy.get('@control').realType('50');\n      cy.realPress('Tab');\n      cy.findByText(/does not match the required step/).should('not.exist');\n    });\n\n    it('should handle `typeMismatch` validity', () => {\n      cy.findByLabelText(/email/i).as('control').focus();\n      cy.get('@control').realType('john.doe');\n      cy.realPress('Tab');\n      cy.findByText(/does not match the required type/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').realType('@gmail.com');\n      cy.realPress('Tab');\n      cy.findByText(/does not match the required type/).should('not.exist');\n    });\n\n    it('should handle `tooShort` validity', () => {\n      cy.findByLabelText(/password/i)\n        .as('control')\n        .focus();\n      cy.get('@control').realType('pass');\n      cy.realPress('Tab');\n      cy.findByText(/too short/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').clear();\n      cy.get('@control').realType('password');\n      cy.realPress('Tab');\n      cy.findByText(/too short/).should('not.exist');\n    });\n\n    // the browser makes it impossible to type too long\n    it.skip('should handle `tooLong` validity', () => {\n      cy.findByLabelText(/password/i)\n        .as('control')\n        .focus();\n      cy.get('@control').realType('password is way too long');\n      cy.realPress('Tab');\n      cy.findByText(/too long/).as('message');\n      checkControlMessageAssociation();\n    });\n\n    it('should handle `patternMismatch` validity', () => {\n      cy.findByLabelText(/pin/i).as('control').focus();\n      cy.get('@control').realType('pin');\n      cy.realPress('Tab');\n      cy.findByText(/does not match the required pattern/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').clear();\n      cy.get('@control').realType('1234');\n      cy.realPress('Tab');\n      cy.findByText(/does not match the required pattern/).should('not.exist');\n    });\n\n    it('should handle custom validity (sync custom validator)', () => {\n      cy.findByLabelText(/secret 1/i)\n        .as('control')\n        .focus();\n      cy.get('@control').realType('secret');\n      cy.realPress('Tab');\n      cy.findByText(/not valid/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').clear();\n      cy.get('@control').realType('shush');\n      cy.realPress('Tab');\n      cy.findByText(/not valid/).should('not.exist');\n    });\n\n    it('should handle custom validity (async custom validator)', () => {\n      cy.findByLabelText(/secret 2/i)\n        .as('control')\n        .focus();\n      cy.get('@control').realType('secret');\n      cy.realPress('Tab');\n      cy.findByText(/not valid/).as('message');\n      checkControlMessageAssociation();\n\n      cy.get('@control').focus();\n      cy.get('@control').clear();\n      cy.get('@control').realType('shush');\n      cy.realPress('Tab');\n      cy.findByText(/not valid/).should('not.exist');\n    });\n\n    it('should allow custom error messages', () => {\n      cy.findByLabelText(/country/i)\n        .as('control')\n        .focus();\n      cy.get('@control').realType('Portugal');\n      cy.realPress('Tab');\n      cy.findByText(/country should be \"france\" or \"spain\"/i).as('message');\n      checkControlMessageAssociation();\n    });\n  });\n\n  describe('given a form with server-side validation', () => {\n    before(() => {\n      cy.findByLabelText(/simulate server errors/i).click();\n    });\n\n    beforeEach(() => {\n      cy.findByLabelText(/name/i).focus();\n      cy.findByLabelText(/name/i).realType('John');\n      cy.findByText(/submit/i).click();\n    });\n\n    it('should focus the first control with a server error', () => {\n      cy.findByLabelText(/email/i).should('be.focused');\n    });\n\n    it('allows showing custom server error messages per-field', () => {\n      cy.findByLabelText(/email/i).as('control');\n      cy.findByText(/email is actually required server side/i).as('message');\n      checkControlMessageAssociation();\n    });\n\n    it('allows re-using client-side matchers for server errors', () => {\n      cy.findByLabelText(/pin/i).as('control');\n      cy.findByText(/does not match the required pattern/).as('message');\n      checkControlMessageAssociation();\n    });\n\n    it('allows re-submitting the form with server errors', () => {\n      cy.findByLabelText(/email/i).focus();\n      cy.findByLabelText(/email/i).realType('john.doe@gmail.com').realPress('Enter');\n      cy.findByLabelText(/email/i).should('be.focused');\n    });\n  });\n});\n"
  },
  {
    "path": "cypress/e2e/Menubar.cy.ts",
    "content": "describe('Menubar', () => {\n  beforeEach(() => {\n    cy.visitStory('menubar--cypress');\n  });\n\n  describe('given a pointer user', () => {\n    it('should open menu when pointer moves between triggers and not focus first item', () => {\n      pointerOver('File');\n      cy.findByText('New Tab').should('not.exist');\n\n      cy.findByText('File').click();\n      cy.findByText('New Tab').should('not.have.focus');\n\n      pointerOver('Edit');\n      cy.findByText('New Tab').should('not.exist');\n      cy.findByText('Redo').should('not.have.focus');\n\n      pointerOver('History');\n      cy.findByText('Redo').should('not.exist');\n      cy.findByText('Radix').should('not.have.focus');\n    });\n\n    it('should maintain the open state when pointer moves away from a trigger', () => {\n      cy.findByText('File').click();\n      pointerOver('File').trigger('pointerout', 'bottomRight', {\n        pointerType: 'mouse',\n        force: true,\n      });\n      cy.findByText('New Tab').should('be.visible');\n    });\n\n    it('should not close open submenu when moving pointer to submenu and back to parent trigger', () => {\n      cy.findByText('Edit').click();\n      pointerOver('Find');\n      pointerOver('Find Next');\n      pointerOver('Find');\n      cy.findByText('Find Next').should('be.visible');\n    });\n\n    it('should close open submenu when moving pointer to any item in parent menu', () => {\n      cy.findByText('Edit').click();\n      // Item\n      pointerOver('Find');\n      pointerOver('Find Next');\n      pointerOver('Redo');\n      cy.findByText('Find Next').should('not.exist');\n\n      // Disabled item\n      pointerOver('Find');\n      pointerOver('Find Next');\n      pointerOver('Redo');\n      cy.findByText('Find Next').should('not.exist');\n\n      // Trigger item\n      pointerOver('Find');\n      pointerOver('Find Next');\n      pointerOver('Substitutions');\n      cy.findByText('Find Next').should('not.exist');\n\n      // Disabled trigger item\n      pointerOver('Find');\n      pointerOver('Find Next');\n      pointerOver('Speech');\n      cy.findByText('Find Next').should('not.exist');\n    });\n\n    it('should close unassociated submenus when moving pointer back to the root trigger', () => {\n      cy.findByText('Edit').click();\n      // Open multiple nested submenus and back to trigger in root menu\n      pointerOver('Find');\n      pointerOver('Advanced');\n      pointerOver('Regex');\n      pointerOver('Find');\n\n      cy.findByText('Find Next').should('be.visible');\n      cy.findByText('Regex').should('not.exist');\n    });\n\n    it('should close all menus when clicking item in any menu, or clicking outside', () => {\n      cy.findByText('Edit').click();\n\n      // Root menu\n      cy.findByText('Redo').click();\n      cy.findByText('Redo').should('not.exist');\n\n      // Submenu\n      cy.findByText('Edit').click();\n      pointerOver('Find');\n      cy.findByText('Find Next').click();\n      cy.findByText('Redo').should('not.exist');\n      cy.findByText('Find Next').should('not.exist');\n\n      // Click outside\n      cy.findByText('Edit').click();\n      cy.get('body').click();\n      cy.findByText('Redo').should('not.exist');\n    });\n  });\n\n  describe('given a keyboard user', () => {\n    function shouldSupportArrowKeyNavigation(dir: 'ltr' | 'rtl') {\n      const nextKey = dir === 'ltr' ? 'ArrowRight' : 'ArrowLeft';\n      const prevKey = dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight';\n\n      // Moving forwards with menu closed\n      cy.findByText('File').trigger('keydown', { key: nextKey });\n      cy.findByText('Edit').should('be.focused').trigger('keydown', { key: nextKey });\n\n      // Moving backwards with menu closed\n      cy.findByText('History').should('be.focused').trigger('keydown', { key: prevKey });\n      cy.findByText('Edit').should('be.focused').trigger('keydown', { key: prevKey });\n      cy.findByText('File').should('be.focused');\n\n      // End of list (should not loop)\n      cy.findByText('File').trigger('keydown', { key: nextKey });\n      cy.findByText('File').should('be.focused');\n\n      // Open menu\n      cy.findByText('File').click();\n\n      // Moving forwards with menu open\n      cy.findByText('New Tab').trigger('keydown', { key: nextKey });\n      cy.findByText('New Tab').should('not.exist');\n\n      // Moving backwards with menu open\n      cy.findByText('Redo').trigger('keydown', { key: prevKey });\n      cy.findByText('Redo').should('not.exist');\n\n      // End of list (should not loop)\n      cy.findByText('New Tab').trigger('keydown', { key: prevKey });\n      cy.findByText('New Tab').should('be.visible');\n\n      // Moving forwards at submenu edge\n      cy.findByText('Share').trigger('keydown', { key: nextKey });\n      cy.findByText('Email Link').trigger('keydown', { key: nextKey });\n      cy.findByText('Redo').should('be.visible');\n\n      // Moving backwards at submenu edge\n      cy.findByText('Find').trigger('keydown', { key: nextKey });\n      cy.findByText('Advanced').trigger('keydown', { key: nextKey });\n      cy.findByText('Regex').trigger('keydown', { key: prevKey });\n      cy.findByText('Advanced').trigger('keydown', { key: prevKey });\n      cy.findByText('Find').trigger('keydown', { key: prevKey });\n      cy.findByText('New Tab').should('be.visible');\n\n      // Looping\n      cy.findByText('Loop').click();\n      cy.findByText('File').trigger('keydown', { key: prevKey });\n      cy.findByText('History').should('be.focused').trigger('keydown', { key: nextKey });\n      cy.findByText('File').should('be.focused');\n\n      // Looping menu open\n      cy.findByText('File').click();\n      cy.findByText('New Tab').trigger('keydown', { key: prevKey });\n      cy.findByText('Radix').trigger('keydown', { key: nextKey });\n      cy.findByText('New Tab').should('be.visible');\n    }\n\n    it('should move to next menu using right arrow and previous menu with left arrow', () => {\n      shouldSupportArrowKeyNavigation('ltr');\n    });\n\n    it('should not open submenu when moving focus to sub trigger', () => {\n      cy.findByText('Edit').click();\n      cy.findByText('Find').focus();\n      cy.findByText('Find Next').should('not.exist');\n    });\n\n    it('should not open submenu when moving focus to sub trigger', () => {\n      cy.findByText('Edit').click();\n      cy.findByText('Find').focus();\n      cy.findByText('Find Next').should('not.exist');\n    });\n\n    it('should open submenu and focus first item when pressing right arrow, enter or space key', () => {\n      cy.findByText('Edit').click();\n\n      function shouldOpenOnKeydown(key: string) {\n        cy.findByText('Find').trigger('keydown', { key });\n        cy.findByText('Search the web…')\n          .should('be.focused')\n          .trigger('keydown', { key: 'ArrowLeft' });\n      }\n\n      shouldOpenOnKeydown(' ');\n      shouldOpenOnKeydown('Enter');\n      shouldOpenOnKeydown('ArrowRight');\n    });\n\n    it('should close only the focused submenu when pressing left arrow key', () => {\n      cy.findByText('Edit').click();\n\n      cy.findByText('Find').type('{enter}');\n      cy.findByText('Advanced').type('{enter}');\n      cy.findByText('Regex').type('{leftarrow}');\n      cy.findByText('Regex').should('not.exist');\n      cy.findByText('Advanced').should('be.visible');\n      cy.findByText('Redo').should('be.visible');\n    });\n\n    it('should focus first item when pressing right arrow key after opening submenu with pointer', () => {\n      cy.findByText('Edit').click();\n\n      pointerOver('Find');\n      cy.findByText('Find Next').should('be.visible');\n      cy.findByText('Find').type('{rightarrow}');\n      cy.findByText('Search the web…').should('be.focused');\n    });\n\n    it('should close all menus when pressing escape, enter or space key on any item', () => {\n      cy.findByText('Edit').click();\n\n      // Test close on root menu\n      cy.findByText('Redo').type('{esc}');\n      cy.findByText('Redo').should('not.exist');\n\n      // Reopen menu and test keys from within the submenu\n      cy.findByText('Edit').click();\n      cy.findByText('Find').type('{enter}');\n      cy.findByText('Search the web…').type('{esc}');\n      cy.findByText('Search the web…').should('not.exist');\n      cy.findByText('Redo').should('not.exist');\n    });\n\n    it('should scope typeahead behaviour to the active menu', () => {\n      cy.findByText('Edit').click();\n\n      // Matching items outside of the active menu should not become focused\n      pointerOver('Find');\n      pointerOver('Advanced');\n      cy.findByText('Regex').focus();\n      cy.findByText('Regex').type('Find');\n      cy.findByText('Find').should('not.have.focus');\n\n      // Matching items inside of active menu should become focused\n      pointerOver('Advanced').focus().type('Find Next');\n      cy.findByText('Find Next').should('have.focus');\n    });\n\n    describe('with portals enabled', () => {\n      it('should move to next menu using right arrow and previous menu with left arrow', () => {\n        shouldSupportArrowKeyNavigation('ltr');\n      });\n    });\n\n    describe('with RTL enabled', () => {\n      beforeEach(() => {\n        cy.findByText('Right-to-left').click();\n      });\n\n      it('should move to next menu using right arrow and previous menu with left arrow', () => {\n        shouldSupportArrowKeyNavigation('rtl');\n      });\n\n      it('should open submenu and focus first item when pressing left arrow key but close when pressing right arrow key', () => {\n        cy.findByText('Edit').click();\n        cy.findByText('Find').trigger('keydown', { key: 'ArrowLeft' });\n        cy.findByText('Search the web…').should('be.focused');\n        cy.findByText('Search the web…').trigger('keydown', { key: 'ArrowRight' });\n        cy.findByText('Search the web…').should('not.exist');\n\n        // Root level menu should remain open\n        cy.findByText('Redo').should('be.visible');\n      });\n    });\n  });\n\n  /* ---------------------------------------------------------------------------------------------- */\n\n  function pointerOver(elementText: string) {\n    return cy.findByText(elementText).should('be.visible').realHover();\n  }\n});\n"
  },
  {
    "path": "cypress/e2e/Select.cy.ts",
    "content": "describe('Select', () => {\n  beforeEach(() => {\n    cy.visitStory('select--cypress');\n  });\n\n  describe('given a select inside a form', () => {\n    it('should submit and react to changes', () => {\n      // submit without change\n      cy.findByText('buy').click();\n      cy.findByText(/t-shirt size/).should('include.text', 'size M');\n\n      // react to changes\n      cy.findByLabelText(/choose a size/).click();\n      cy.findByRole('option', { name: /small/i }).click();\n      cy.findByText(/t-shirt size/).should('include.text', 'size S');\n    });\n  });\n\n  describe('given a select with no value', () => {\n    it('should display the placeholder', () => {\n      cy.findByText('…').should('exist');\n    });\n\n    it('can be reset to the placeholder', () => {\n      cy.findByLabelText(/choose a model/).click();\n      cy.findByRole('option', { name: /model x/i }).click();\n      cy.findByText(/model y/i).should('not.exist');\n      cy.findByText(/model x/i).should('exist');\n      cy.findByText('unset').click();\n      cy.findByText('…').should('exist');\n    });\n  });\n});\n"
  },
  {
    "path": "cypress/e2e/Toast.cy.ts",
    "content": "describe('Toast', () => {\n  beforeEach(() => {\n    cy.visitStory('toast--cypress');\n  });\n\n  function buttonIsFocused(identifier: number) {\n    cy.findByText(`Toast button ${identifier}`).should('be.focused');\n  }\n\n  function toastIsFocused(identifier: number) {\n    cy.findByTestId(`toast-${identifier}`).should('be.focused');\n  }\n\n  describe('given zero toasts', () => {\n    it('should not interrupt natural tab order in the document', () => {\n      cy.findByText('Focusable before viewport').focus();\n\n      cy.realPress('Tab');\n      cy.findByText('Focusable after viewport').should('be.focused');\n\n      cy.realPress(['Shift', 'Tab']);\n      cy.findByText('Focusable before viewport').should('be.focused');\n    });\n  });\n\n  describe('given multiple toasts', () => {\n    beforeEach(() => {\n      cy.findByText('Add toast').click();\n      cy.findByText('Add toast').click();\n    });\n\n    it('should have no acessibility issues', () => {\n      cy.injectAxe();\n      cy.checkA11y('[aria-label=\"Notifications (F8)\"]');\n    });\n\n    it('should reverse tab order from most recent to least', () => {\n      cy.findByText('Focusable before viewport').focus();\n\n      cy.realPress('Tab');\n      toastIsFocused(2);\n\n      // Forward tab\n      cy.realPress('Tab');\n      buttonIsFocused(2.1);\n\n      cy.realPress('Tab');\n      buttonIsFocused(2.2);\n\n      cy.realPress('Tab');\n      toastIsFocused(1);\n\n      cy.realPress('Tab');\n      buttonIsFocused(1.1);\n\n      cy.realPress('Tab');\n      buttonIsFocused(1.2);\n\n      // End of viewport\n      cy.realPress('Tab');\n      cy.findByText('Focusable after viewport').should('be.focused');\n\n      // Backwards tab\n      cy.realPress(['Shift', 'Tab']);\n      buttonIsFocused(1.2);\n\n      cy.realPress(['Shift', 'Tab']);\n      buttonIsFocused(1.1);\n\n      cy.realPress(['Shift', 'Tab']);\n      toastIsFocused(1);\n\n      cy.realPress(['Shift', 'Tab']);\n      buttonIsFocused(2.2);\n\n      cy.realPress(['Shift', 'Tab']);\n      buttonIsFocused(2.1);\n\n      cy.realPress(['Shift', 'Tab']);\n      toastIsFocused(2);\n\n      // Start of viewport\n      cy.realPress(['Shift', 'Tab']);\n      cy.findByText('Focusable before viewport').should('be.focused');\n    });\n\n    it('should tab forwards from viewport to latest toast or backwards into the document', () => {\n      // Tab forward from viewport\n      cy.realPress('F8');\n      cy.realPress('Tab');\n      toastIsFocused(2);\n\n      // Tab backward from viewport\n      cy.realPress('F8');\n      cy.realPress(['Shift', 'Tab']);\n      cy.findByText('Focusable before viewport').should('be.focused');\n    });\n  });\n});\n"
  },
  {
    "path": "cypress/support/commands.js",
    "content": "// @ts-check\n/// <reference types=\"cypress\" />\n/// <reference types=\"./index.d.ts\" />\n\n// ***********************************************\n// This example commands.js shows you how to\n// create various custom commands and overwrite\n// existing commands.\n//\n// For more comprehensive examples of custom\n// commands please read more here:\n// https://on.cypress.io/custom-commands\n// ***********************************************\n//\n//\n// -- This is a parent command --\n// Cypress.Commands.add(\"login\", (email, password) => { ... })\n//\n//\n// -- This is a child command --\n// Cypress.Commands.add(\"drag\", { prevSubject: 'element'}, (subject, options) => { ... })\n//\n//\n// -- This is a dual command --\n// Cypress.Commands.add(\"dismiss\", { prevSubject: 'optional'}, (subject, options) => { ... })\n//\n//\n// -- This will overwrite an existing command --\n// Cypress.Commands.overwrite(\"visit\", (originalFn, url, options) => { ... })\n\nCypress.Commands.add('visitStorybook', (options) => {\n  return cy.visit('iframe.html', options);\n});\n\nCypress.Commands.add('visitStory', (storyName, options) => {\n  return cy.visit(`iframe.html?id=components-${storyName}`, options);\n});\n"
  },
  {
    "path": "cypress/support/e2e.js",
    "content": "// ***********************************************************\n// This file is processed and\n// loaded automatically before your test files.\n//\n// This is a great place to put global configuration and\n// behavior that modifies Cypress.\n//\n// You can change the location of this file or turn off\n// automatically serving support files with the\n// 'supportFile' configuration option.\n//\n// You can read more here:\n// https://on.cypress.io/configuration\n// ***********************************************************\n\n// Import commands.js using ES2015 syntax:\nimport '@testing-library/cypress/add-commands';\nimport 'cypress-real-events/support';\nimport 'cypress-axe';\nimport './commands';\n\n// Alternatively you can use CommonJS syntax:\n// require('./commands')\n"
  },
  {
    "path": "cypress/support/index.d.ts",
    "content": "declare namespace Cypress {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface Chainable<Subject> {\n    visitStorybook(options?: Partial<Cypress.VisitOptions>): Cypress.Chainable<Cypress.AUTWindow>;\n    visitStory(\n      storyName: string,\n      options?: Partial<Cypress.VisitOptions>,\n    ): Cypress.Chainable<Cypress.AUTWindow>;\n  }\n}\n"
  },
  {
    "path": "cypress/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\"es5\", \"dom\"],\n    \"types\": [\"cypress\", \"@testing-library/cypress\", \"cypress-real-events\", \"cypress-axe\"]\n  },\n  \"include\": [\"**/*.ts\"]\n}\n"
  },
  {
    "path": "cypress.config.ts",
    "content": "import { defineConfig } from 'cypress';\n\nexport default defineConfig({\n  viewportWidth: 1024,\n  viewportHeight: 768,\n  fixturesFolder: false,\n  defaultCommandTimeout: 20_000,\n  e2e: {\n    // TODO There is a bug (I think) in Cypress that results in the page\n    // navigating to `about:blank` after certain tests run. Unclear why at this\n    // stage. This is a hack that seems to prevent it, but unclear why. Debug\n    // and remove this config option.\n    // Possibly related: https://github.com/cypress-io/cypress/issues/28527\n    testIsolation: false,\n    setupNodeEvents(_on, _config) {},\n    baseUrl: 'http://localhost:9009',\n  },\n});\n"
  },
  {
    "path": "eslint.config.mjs",
    "content": "// @ts-check\nimport * as react from '@chance/eslint/react';\nimport * as js from '@chance/eslint';\nimport * as typescript from '@chance/eslint/typescript';\nimport { globals } from '@chance/eslint/globals';\nimport pluginCypress from 'eslint-plugin-cypress/flat';\n\n/** @type {import(\"eslint\").Linter.Config[]} */\nexport default [\n  { ...js.getConfig({ ...globals.node, ...globals.browser }) },\n  typescript.config,\n  {\n    ...react.config,\n    rules: {\n      ...react.rules,\n      'react/jsx-pascal-case': ['warn', { allowNamespace: true }],\n      // TODO: enable this and fix all the errors\n      'react/display-name': 'off',\n      'prefer-const': ['warn', { destructuring: 'all' }],\n      'jsx-a11y/label-has-associated-control': [\n        'warn',\n        {\n          controlComponents: ['Checkbox'],\n          depth: 3,\n        },\n      ],\n    },\n  },\n  { ...pluginCypress.configs.recommended, files: ['cypress/**/*.{ts,js}'] },\n  {\n    ignores: ['dist/**', '.next/**'],\n    rules: {\n      'prefer-const': ['warn', { destructuring: 'all' }],\n    },\n  },\n];\n"
  },
  {
    "path": "internal/builder/builder.js",
    "content": "// @ts-check\nimport path from 'node:path';\nimport fs from 'node:fs';\nimport * as esbuild from 'esbuild';\nimport * as tsup from 'tsup';\n\n/**\n * @param {string} relativePath\n */\nexport async function build(relativePath) {\n  const packageJsonPath = path.resolve(relativePath, 'package.json');\n  if (!fs.existsSync(packageJsonPath)) {\n    return;\n  }\n\n  const packageJsonContents = await fs.promises.readFile(packageJsonPath, 'utf-8').catch(() => {\n    console.error(`Failed to read package.json file at ${packageJsonPath}`);\n    process.exit(1);\n  });\n\n  /** @type {PackageJson} */\n  let packageJson;\n  try {\n    packageJson = JSON.parse(packageJsonContents);\n  } catch {\n    console.error(`Failed to parse package.json file at ${packageJsonPath}`);\n    process.exit(1);\n  }\n\n  const tasks = [];\n  const pkg = packageJson.name;\n  const files = ['index.ts'];\n  if (pkg === 'radix-ui') {\n    files.push('internal.ts');\n  }\n\n  const entryPoints = files.map((file) => `${relativePath || '.'}/src/${file}`);\n  const dist = `${relativePath || '.'}/dist`;\n\n  /** @type {esbuild.BuildOptions} */\n  const esbuildConfig = {\n    entryPoints: entryPoints,\n    external: ['@radix-ui/*'],\n    packages: 'external',\n    bundle: true,\n    sourcemap: true,\n    format: 'cjs',\n    target: 'es2022',\n    outdir: dist,\n  };\n\n  tasks.push(esbuild.build(esbuildConfig).then(() => console.log(`CJS: Built ${relativePath}`)));\n  tasks.push(\n    esbuild\n      .build({\n        ...esbuildConfig,\n        format: 'esm',\n        outExtension: { '.js': '.mjs' },\n      })\n      .then(() => console.log(`ESM: Built ${relativePath}`)),\n  );\n\n  // tsup is used to emit d.ts files only (esbuild can't do that).\n  //\n  // Notes:\n  // 1. Emitting d.ts files is super slow for whatever reason.\n  // 2. It could have fully replaced esbuild (as it uses that internally),\n  //    but at the moment its esbuild version is somewhat outdated.\n  //    It’s also harder to configure and esbuild docs are more thorough.\n  tasks.push(\n    tsup\n      .build({\n        entry: entryPoints,\n        format: ['cjs', 'esm'],\n        dts: { only: true },\n        outDir: dist,\n        silent: true,\n        external: [/@radix-ui\\/.+/],\n      })\n      .then(() => console.log(`TSC: Built ${relativePath}`)),\n  );\n\n  await Promise.all(tasks);\n}\n\n/**\n * @typedef {{ name: string }} PackageJson\n */\n"
  },
  {
    "path": "internal/builder/eslint.config.js",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config';\n\nexport default configs;\n"
  },
  {
    "path": "internal/builder/package.json",
    "content": "{\n  \"name\": \"@repo/builder\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"./builder.js\",\n  \"exports\": {\n    \".\": \"./builder.js\"\n  },\n  \"bin\": {\n    \"radix-build\": \"./radix-build.js\"\n  },\n  \"dependencies\": {\n    \"esbuild\": \"^0.25.11\",\n    \"tsup\": \"^8.5.0\"\n  },\n  \"devDependencies\": {\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"eslint\": \"^9.38.0\"\n  }\n}\n"
  },
  {
    "path": "internal/builder/radix-build.js",
    "content": "#!/usr/bin/env node\n// @ts-check\nimport path from 'node:path';\nimport { build } from './builder.js';\n\nprocess.on('unhandledRejection', (err) => {\n  throw err;\n});\nprocess.on('SIGINT', () => process.exit(0));\nprocess.on('SIGTERM', () => process.exit(0));\n\nconst args = process.argv.slice(2);\nconst relativePath = path.relative(process.cwd(), args[0] || '.');\n\nawait build(relativePath);\n"
  },
  {
    "path": "internal/builder/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/base.json\",\n  \"compilerOptions\": {\n    \"rootDir\": \".\",\n    \"allowJs\": true,\n    \"noEmit\": true\n  },\n  \"include\": [\"**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "internal/eslint-config/eslint.config.js",
    "content": "// @ts-check\nimport { configs } from './index.js';\nexport default configs;\n"
  },
  {
    "path": "internal/eslint-config/index.js",
    "content": "// @ts-check\nimport * as eslintJs from '@chance/eslint';\nimport * as typescript from '@chance/eslint/typescript';\nimport { globals } from '@chance/eslint/globals';\n\nexport const js = eslintJs.getConfig({ ...globals.node, ...globals.browser });\nexport const ts = typescript.config;\n\n/** @type {import(\"eslint\").Linter.Config} */\nexport const overrides = {\n  ignores: ['dist/**', '.next/**'],\n  rules: {\n    'prefer-const': ['warn', { destructuring: 'all' }],\n  },\n};\n\n/** @type {import(\"eslint\").Linter.Config[]} */\nexport const configs = [js, ts, overrides];\n"
  },
  {
    "path": "internal/eslint-config/package.json",
    "content": "{\n  \"name\": \"@repo/eslint-config\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"main\": \"./index.js\",\n  \"exports\": {\n    \".\": \"./index.js\",\n    \"./react-package\": \"./react-package.js\",\n    \"./vite\": \"./vite.js\"\n  },\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 .\"\n  },\n  \"dependencies\": {\n    \"@chance/eslint\": \"^1.1.0\",\n    \"eslint-plugin-react-refresh\": \"^0.4.24\"\n  },\n  \"devDependencies\": {\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"eslint\": \"^9.38.0\"\n  },\n  \"peerDependencies\": {\n    \"eslint\": \">=9.18\"\n  }\n}\n"
  },
  {
    "path": "internal/eslint-config/react-package.js",
    "content": "// @ts-check\nimport * as react from '@chance/eslint/react';\nimport * as base from './index.js';\n\n/** @type {import(\"eslint\").Linter.Config[]} */\nexport const configs = [\n  base.js,\n  base.ts,\n  react.config,\n  base.overrides,\n  {\n    rules: {\n      'react/jsx-pascal-case': ['warn', { allowNamespace: true }],\n      // TODO: enable this and fix all the errors\n      'react/display-name': 'off',\n      'jsx-a11y/label-has-associated-control': [\n        'warn',\n        {\n          controlComponents: ['Checkbox'],\n          depth: 3,\n        },\n      ],\n    },\n  },\n  { ignores: ['**/dist/**'] },\n];\n"
  },
  {
    "path": "internal/eslint-config/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/base.json\",\n  \"compilerOptions\": {\n    \"rootDir\": \".\",\n    \"outDir\": \"dist\",\n    \"allowJs\": true\n  },\n  \"include\": [\"**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "internal/eslint-config/vite.js",
    "content": "// @ts-check\nimport * as react from '@chance/eslint/react';\nimport reactRefresh from 'eslint-plugin-react-refresh';\nimport * as base from './index.js';\n\n/** @type {import(\"eslint\").Linter.Config[]} */\nexport const configs = [\n  base.js,\n  base.ts,\n  react.config,\n  base.overrides,\n  {\n    plugins: {\n      'react-refresh': reactRefresh,\n    },\n    rules: {\n      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],\n    },\n  },\n  { ignores: ['**/dist/**'] },\n];\n"
  },
  {
    "path": "internal/test-data/eslint.config.js",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config';\n\nexport default configs;\n"
  },
  {
    "path": "internal/test-data/foods.ts",
    "content": "export const foodGroups: Array<{\n  label?: string;\n  foods: Array<{ value: string; label: string; disabled?: boolean }>;\n}> = [\n  {\n    label: 'Fruits',\n    foods: [\n      { value: 'apple', label: 'Apple' },\n      { value: 'banana', label: 'Banana' },\n      { value: 'blueberry', label: 'Blueberry' },\n      { value: 'grapes', label: 'Grapes' },\n      { value: 'pineapple', label: 'Pineapple' },\n    ],\n  },\n  {\n    label: 'Vegetables',\n    foods: [\n      { value: 'aubergine', label: 'Aubergine' },\n      { value: 'broccoli', label: 'Broccoli' },\n      { value: 'carrot', label: 'Carrot', disabled: true },\n      { value: 'courgette', label: 'Courgette' },\n      { value: 'leek', label: 'Leek' },\n    ],\n  },\n  {\n    label: 'Meat',\n    foods: [\n      { value: 'beef', label: 'Beef' },\n      { value: 'beef-with-sauce', label: 'Beef with sauce' },\n      { value: 'chicken', label: 'Chicken' },\n      { value: 'lamb', label: 'Lamb' },\n      { value: 'pork', label: 'Pork' },\n    ],\n  },\n  {\n    foods: [\n      { value: 'candies', label: 'Candies' },\n      { value: 'chocolates', label: 'Chocolates' },\n    ],\n  },\n];\n"
  },
  {
    "path": "internal/test-data/package.json",
    "content": "{\n  \"name\": \"@repo/test-data\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"license\": \"MIT\",\n  \"type\": \"module\",\n  \"devDependencies\": {\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"eslint\": \"^9.38.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"exports\": {\n    \"./*\": \"./*.ts\"\n  },\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 .\",\n    \"check-types\": \"tsc --noEmit\"\n  }\n}\n"
  },
  {
    "path": "internal/test-data/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/base.json\",\n  \"compilerOptions\": {\n    \"rootDir\": \".\",\n    \"outDir\": \"dist\"\n  },\n  \"include\": [\"**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "internal/typescript-config/base.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"compilerOptions\": {\n    \"declaration\": true,\n    \"declarationMap\": true,\n    \"esModuleInterop\": true,\n    \"incremental\": false,\n    \"isolatedModules\": true,\n    \"lib\": [\"ES2023\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"NodeNext\",\n    \"moduleDetection\": \"force\",\n    \"moduleResolution\": \"NodeNext\",\n    \"noUncheckedIndexedAccess\": true,\n    \"resolveJsonModule\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"target\": \"ES2022\"\n  }\n}\n"
  },
  {
    "path": "internal/typescript-config/nextjs.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"plugins\": [{ \"name\": \"next\" }],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"allowJs\": true,\n    \"jsx\": \"preserve\",\n    \"noEmit\": true\n  }\n}\n"
  },
  {
    "path": "internal/typescript-config/package.json",
    "content": "{\n  \"name\": \"@repo/typescript-config\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "internal/typescript-config/react-library/index.d.ts",
    "content": "/// <reference types=\"node\" />\n/// <reference types=\"@testing-library/react\" />\n/// <reference types=\"vitest-axe/extend-expect\" />\n/// <reference path=\"../../../scripts/setup-tests.ts\" />\n\ndeclare module '*.module.css' {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n"
  },
  {
    "path": "internal/typescript-config/react-library.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\"\n  }\n}\n"
  },
  {
    "path": "internal/typescript-config/vite-app.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"allowImportingTsExtensions\": true,\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"noEmit\": true,\n    \"jsx\": \"react-jsx\",\n    \"useDefineForClassFields\": true\n  }\n}\n"
  },
  {
    "path": "internal/typescript-config/vite-node.json",
    "content": "{\n  \"$schema\": \"https://json.schemastore.org/tsconfig\",\n  \"extends\": \"./base.json\",\n  \"compilerOptions\": {\n    \"allowImportingTsExtensions\": true,\n    \"lib\": [\"ES2023\"],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Bundler\",\n    \"noEmit\": true\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"primitives\",\n  \"version\": \"0.1.0\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"lint\": \"pnpm -r run lint\",\n    \"types:check\": \"pnpm -r --parallel run typecheck\",\n    \"test\": \"vitest\",\n    \"test:ci\": \"vitest run && pnpm cypress:ci\",\n    \"storybook\": \"BROWSER=none pnpm --filter=@repo/storybook run dev -p 9009\",\n    \"storybook:build\": \"BROWSER=none pnpm --filter=@repo/storybook run build\",\n    \"storybook:serve\": \"pnpm --filter=@repo/storybook run serve\",\n    \"cypress:ci\": \"start-server-and-test 'pnpm dev' http://localhost:9009 'pnpm cypress:install && pnpm cypress:run'\",\n    \"cypress:install\": \"cypress install\",\n    \"cypress:run\": \"cypress run\",\n    \"cypress:dev\": \"cypress open\",\n    \"dev\": \"pnpm run storybook\",\n    \"dev:ssr\": \"pnpm --filter=@repo/ssr-testing dev\",\n    \"build-storybook\": \"pnpm --filter=@repo/storybook run build\",\n    \"build\": \"pnpm -r --parallel --filter \\\"./packages/**/*\\\" run build\",\n    \"clean\": \"pnpm -r run clean\",\n    \"reset\": \"rm -rf node_modules && pnpm -r run reset\",\n    \"bump:stable\": \"changeset version\",\n    \"bump:next\": \"changeset version --snapshot\",\n    \"bump:check\": \"changeset status --since=main\",\n    \"release:stable\": \"pnpm publish -r --access public\",\n    \"release:stable:ci\": \"pnpm publish -r --access public --publish-branch stable\",\n    \"release:next\": \"pnpm publish -r --access public --tag next\",\n    \"format\": \"prettier --write .\",\n    \"format:staged\": \"pretty-quick --staged\"\n  },\n  \"devDependencies\": {\n    \"@chance/eslint\": \"^1.1.0\",\n    \"@changesets/cli\": \"^2.29.7\",\n    \"@radix-ui/colors\": \"^3.0.0\",\n    \"@testing-library/cypress\": \"^10.1.0\",\n    \"@testing-library/dom\": \"^10.4.1\",\n    \"@testing-library/jest-dom\": \"^6.9.1\",\n    \"@testing-library/react\": \"^16.3.0\",\n    \"@testing-library/user-event\": \"^14.6.1\",\n    \"@types/fs-extra\": \"^11\",\n    \"@types/node\": \"^22\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"@types/react-test-renderer\": \"^19.1.0\",\n    \"axe-core\": \"^4.11.0\",\n    \"cypress\": \"^15.5.0\",\n    \"cypress-axe\": \"1.7.0\",\n    \"cypress-real-events\": \"^1.15.0\",\n    \"eslint\": \"^9.38.0\",\n    \"eslint-plugin-cypress\": \"^5.2.0\",\n    \"execa\": \"^9.6.0\",\n    \"fs-extra\": \"^11.3.2\",\n    \"glob\": \"^10.2.2\",\n    \"jsdom\": \"^26.1.0\",\n    \"prettier\": \"^3.6.2\",\n    \"pretty-quick\": \"^4.2.2\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"react-test-renderer\": \"^19.2.0\",\n    \"react-is\": \"^19.2.0\",\n    \"react-remove-scroll\": \"^2.6.3\",\n    \"replace-in-files\": \"^3.0.0\",\n    \"start-server-and-test\": \"^2.1.2\",\n    \"typescript\": \"^5.9.3\",\n    \"vite\": \"^7.1.12\",\n    \"vitest\": \"^4.0.4\",\n    \"vitest-axe\": \"^1.0.0-pre.5\"\n  },\n  \"engines\": {\n    \"node\": \">=18\"\n  },\n  \"packageManager\": \"pnpm@10.2.0\",\n  \"pnpm\": {\n    \"patchedDependencies\": {\n      \"@changesets/apply-release-plan\": \"patches/@changesets__apply-release-plan.patch\"\n    }\n  }\n}\n"
  },
  {
    "path": "packages/core/number/README.md",
    "content": "# `number`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/core/number/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/core/number/package.json",
    "content": "{\n  \"name\": \"@radix-ui/number\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"eslint\": \"^9.38.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/core/number/src/index.ts",
    "content": "export { clamp } from './number';\n"
  },
  {
    "path": "packages/core/number/src/number.ts",
    "content": "function clamp(value: number, [min, max]: [number, number]): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport { clamp };\n"
  },
  {
    "path": "packages/core/number/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/core/primitive/CHANGELOG.md",
    "content": "# @radix-ui/primitive\n\n## 1.1.3\n\n- Added internal DOM utilities\n"
  },
  {
    "path": "packages/core/primitive/README.md",
    "content": "# `primitive`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/core/primitive/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\n/** @type {import(\"eslint\").Linter.Config[]} */\nexport default [\n  ...configs,\n  {\n    linterOptions: { reportUnusedDisableDirectives: false },\n  },\n];\n"
  },
  {
    "path": "packages/core/primitive/package.json",
    "content": "{\n  \"name\": \"@radix-ui/primitive\",\n  \"version\": \"1.1.3\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"eslint\": \"^9.38.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/core/primitive/src/index.ts",
    "content": "export * from './primitive';\nexport type * from './types';\n"
  },
  {
    "path": "packages/core/primitive/src/primitive.tsx",
    "content": "/* eslint-disable no-restricted-properties */\n\n/* eslint-disable no-restricted-globals */\nexport const canUseDOM = !!(\n  typeof window !== 'undefined' &&\n  window.document &&\n  window.document.createElement\n);\n/* eslint-enable no-restricted-globals */\n\nexport function composeEventHandlers<E extends { defaultPrevented: boolean }>(\n  originalEventHandler?: (event: E) => void,\n  ourEventHandler?: (event: E) => void,\n  { checkForDefaultPrevented = true } = {},\n) {\n  return function handleEvent(event: E) {\n    originalEventHandler?.(event);\n\n    if (checkForDefaultPrevented === false || !event.defaultPrevented) {\n      return ourEventHandler?.(event);\n    }\n  };\n}\n\nexport function getOwnerWindow(element: Node | null | undefined) {\n  if (!canUseDOM) {\n    throw new Error('Cannot access window outside of the DOM');\n  }\n  // eslint-disable-next-line no-restricted-globals\n  return element?.ownerDocument?.defaultView ?? window;\n}\n\nexport function getOwnerDocument(element: Node | null | undefined) {\n  if (!canUseDOM) {\n    throw new Error('Cannot access document outside of the DOM');\n  }\n  // eslint-disable-next-line no-restricted-globals\n  return element?.ownerDocument ?? document;\n}\n\n/**\n * Lifted from https://github.com/ariakit/ariakit/blob/main/packages/ariakit-core/src/utils/dom.ts#L37\n * MIT License, Copyright (c) AriaKit.\n */\nexport function getActiveElement(\n  node: Node | null | undefined,\n  activeDescendant = false,\n): HTMLElement | null {\n  const { activeElement } = getOwnerDocument(node);\n  if (!activeElement?.nodeName) {\n    // `activeElement` might be an empty object if we're interacting with elements\n    // inside of an iframe.\n    return null;\n  }\n\n  if (isFrame(activeElement) && activeElement.contentDocument) {\n    return getActiveElement(activeElement.contentDocument.body, activeDescendant);\n  }\n\n  if (activeDescendant) {\n    const id = activeElement.getAttribute('aria-activedescendant');\n    if (id) {\n      const element = getOwnerDocument(activeElement).getElementById(id);\n      if (element) {\n        return element;\n      }\n    }\n  }\n\n  return activeElement as HTMLElement | null;\n}\n\nexport function isFrame(element: Element): element is HTMLIFrameElement {\n  return element.tagName === 'IFRAME';\n}\n"
  },
  {
    "path": "packages/core/primitive/src/types.ts",
    "content": "export type Timeout = ReturnType<typeof setTimeout>;\nexport type Interval = ReturnType<typeof setInterval>;\nexport type Immediate = ReturnType<typeof setImmediate>;\n"
  },
  {
    "path": "packages/core/primitive/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/core/rect/README.md",
    "content": "# `rect`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/core/rect/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/core/rect/package.json",
    "content": "{\n  \"name\": \"@radix-ui/rect\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"eslint\": \"^9.38.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/core/rect/src/index.ts",
    "content": "export { observeElementRect } from './observe-element-rect';\nexport type { Measurable } from './observe-element-rect';\n"
  },
  {
    "path": "packages/core/rect/src/observe-element-rect.ts",
    "content": "// Adapted from https://github.com/reach/observe-rect/tree\n// MIT license, React Training\n\ntype Measurable = { getBoundingClientRect(): DOMRect };\n\n/**\n * Observes an element's rectangle on screen (getBoundingClientRect)\n * This is useful to track elements on the screen and attach other elements\n * that might be in different layers, etc.\n */\nfunction observeElementRect(\n  /** The element whose rect to observe */\n  elementToObserve: Measurable,\n  /** The callback which will be called when the rect changes */\n  callback: CallbackFn,\n) {\n  const observedData = observedElements.get(elementToObserve);\n\n  if (observedData === undefined) {\n    // add the element to the map of observed elements with its first callback\n    // because this is the first time this element is observed\n    observedElements.set(elementToObserve, { rect: {} as DOMRect, callbacks: [callback] });\n\n    if (observedElements.size === 1) {\n      // start the internal loop once at least 1 element is observed\n      rafId = requestAnimationFrame(runLoop);\n    }\n  } else {\n    // only add a callback for this element as it's already observed\n    observedData.callbacks.push(callback);\n    callback(elementToObserve.getBoundingClientRect());\n  }\n\n  return () => {\n    const observedData = observedElements.get(elementToObserve);\n    if (observedData === undefined) return;\n\n    // start by removing the callback\n    const index = observedData.callbacks.indexOf(callback);\n    if (index > -1) {\n      observedData.callbacks.splice(index, 1);\n    }\n\n    if (observedData.callbacks.length === 0) {\n      // stop observing this element because there are no\n      // callbacks registered for it anymore\n      observedElements.delete(elementToObserve);\n\n      if (observedElements.size === 0) {\n        // stop the internal loop once no elements are observed anymore\n        cancelAnimationFrame(rafId);\n      }\n    }\n  };\n}\n\n// ========================================================================\n// module internals\n\ntype CallbackFn = (rect: DOMRect) => void;\n\ntype ObservedData = {\n  rect: DOMRect;\n  callbacks: Array<CallbackFn>;\n};\n\nlet rafId: number;\nconst observedElements: Map<Measurable, ObservedData> = new Map();\n\nfunction runLoop() {\n  const changedRectsData: Array<ObservedData> = [];\n\n  // process all DOM reads first (getBoundingClientRect)\n  observedElements.forEach((data, element) => {\n    const newRect = element.getBoundingClientRect();\n\n    // gather all the data for elements whose rects have changed\n    if (!rectEquals(data.rect, newRect)) {\n      data.rect = newRect;\n      changedRectsData.push(data);\n    }\n  });\n\n  // group DOM writes here after the DOM reads (getBoundingClientRect)\n  // as DOM writes will most likely happen with the callbacks\n  changedRectsData.forEach((data) => {\n    data.callbacks.forEach((callback) => callback(data.rect));\n  });\n\n  rafId = requestAnimationFrame(runLoop);\n}\n// ========================================================================\n\n/**\n * Returns whether 2 rects are equal in values\n */\nfunction rectEquals(rect1: DOMRect, rect2: DOMRect) {\n  return (\n    rect1.width === rect2.width &&\n    rect1.height === rect2.height &&\n    rect1.top === rect2.top &&\n    rect1.right === rect2.right &&\n    rect1.bottom === rect2.bottom &&\n    rect1.left === rect2.left\n  );\n}\n\nexport { observeElementRect };\nexport type { Measurable };\n"
  },
  {
    "path": "packages/core/rect/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/accessible-icon/CHANGELOG.md",
    "content": "# @radix-ui/react-accessible-icon\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.4`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.3`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.1`\n\n## 1.1.4\n\n- Updated dependencies: `@radix-ui/react-visually-hidden@1.2.0`\n"
  },
  {
    "path": "packages/react/accessible-icon/README.md",
    "content": "# `react-accessible-icon`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/accessible-icon).\n"
  },
  {
    "path": "packages/react/accessible-icon/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/accessible-icon/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-accessible-icon\",\n  \"version\": \"1.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-visually-hidden\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/accessible-icon/src/accesible-icon.test.tsx",
    "content": "import React from 'react';\nimport { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render } from '@testing-library/react';\nimport { AccessibleIcon } from './accessible-icon';\nimport { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';\n\nconst LABEL_TEXT = 'Close';\n\nconst AccessibleIconTest = (props: Omit<React.ComponentProps<typeof AccessibleIcon>, 'label'>) => (\n  <AccessibleIcon {...props} label={LABEL_TEXT} />\n);\n\ndescribe('given a default AccessibleIcon', () => {\n  let rendered: RenderResult;\n  let label: HTMLElement;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    rendered = render(\n      <AccessibleIconTest>\n        <svg\n          viewBox=\"0 0 32 32\"\n          width={24}\n          height={24}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          data-testid=\"icon\"\n        >\n          <path d=\"M2 30 L30 2 M30 30 L2 2\" />\n        </svg>\n      </AccessibleIconTest>,\n    );\n\n    label = rendered.getByText(LABEL_TEXT);\n  });\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  it('should have a label', () => {\n    expect(label).toBeInTheDocument();\n  });\n\n  it('should add an aria-hidden attribute to the child', () => {\n    const svg = rendered.getByTestId('icon');\n    expect(svg.getAttribute('aria-hidden')).toBe('true');\n  });\n\n  it('should set focusable attribute on the child to false', () => {\n    const svg = rendered.getByTestId('icon');\n    expect(svg.getAttribute('focusable')).toBe('false');\n  });\n});\n\ndescribe('given an AccessibleIcon without children', () => {\n  it('should error', () => {\n    // Even though the error is caught, it still gets printed to the console\n    // so we mock that out to avoid the wall of red text.\n    const spy = vi.spyOn(console, 'error');\n    spy.mockImplementation(() => {});\n\n    expect(() => render(<AccessibleIconTest />)).toThrowError();\n\n    spy.mockRestore();\n  });\n});\n"
  },
  {
    "path": "packages/react/accessible-icon/src/accessible-icon.tsx",
    "content": "import * as React from 'react';\nimport * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';\n\nconst NAME = 'AccessibleIcon';\n\ninterface AccessibleIconProps {\n  children?: React.ReactNode;\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label: string;\n}\n\nconst AccessibleIcon: React.FC<AccessibleIconProps> = ({ children, label }) => {\n  const child = React.Children.only(children);\n  return (\n    <>\n      {React.cloneElement(child as React.ReactElement<React.SVGAttributes<SVGElement>>, {\n        // accessibility\n        'aria-hidden': 'true',\n        focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n      })}\n      <VisuallyHiddenPrimitive.Root>{label}</VisuallyHiddenPrimitive.Root>\n    </>\n  );\n};\n\nAccessibleIcon.displayName = NAME;\n\nconst Root = AccessibleIcon;\n\nexport {\n  AccessibleIcon,\n  //\n  Root,\n};\nexport type { AccessibleIconProps };\n"
  },
  {
    "path": "packages/react/accessible-icon/src/index.ts",
    "content": "export {\n  AccessibleIcon,\n  //\n  Root,\n} from './accessible-icon';\nexport type { AccessibleIconProps } from './accessible-icon';\n"
  },
  {
    "path": "packages/react/accessible-icon/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/accordion/CHANGELOG.md",
    "content": "# @radix-ui/react-accordion\n\n## 1.2.12\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collapsible@1.1.12`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.2.11\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-collapsible@1.1.11`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.2.10\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-collapsible@1.1.10`\n\n## 1.2.9\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-collapsible@1.1.9`\n\n## 1.2.8\n\n- Updated dependencies: `@radix-ui/react-collapsible@1.1.8`\n\n## 1.2.7\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-collapsible@1.1.7`\n\n## 1.2.6\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-collapsible@1.1.6`\n\n## 1.2.5\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`\n"
  },
  {
    "path": "packages/react/accordion/README.md",
    "content": "# `react-accordion`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/accordion).\n"
  },
  {
    "path": "packages/react/accordion/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/accordion/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-accordion\",\n  \"version\": \"1.2.12\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collapsible\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/accordion/src/accordion.test.tsx",
    "content": "import * as React from 'react';\nimport { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render, fireEvent } from '@testing-library/react';\nimport * as Accordion from './accordion';\nimport type { Mock } from 'vitest';\nimport { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';\n\nconst ITEMS = ['One', 'Two', 'Three'];\n\ndescribe('given a single Accordion', () => {\n  let handleValueChange: Mock;\n  let rendered: RenderResult;\n\n  afterEach(cleanup);\n\n  describe('with default orientation=vertical', () => {\n    beforeEach(() => {\n      handleValueChange = vi.fn();\n      rendered = render(<AccordionTest type=\"single\" onValueChange={handleValueChange} />);\n    });\n\n    it('should have no accessibility violations in default state', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    describe('when navigating by keyboard', () => {\n      beforeEach(() => {\n        const trigger = rendered.getByText('Trigger One');\n        trigger.focus();\n      });\n\n      describe('on `ArrowDown`', () => {\n        it('should move focus to the next trigger', () => {\n          fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });\n          expect(rendered.getByText('Trigger Two')).toHaveFocus();\n        });\n\n        it('should move focus to the first item if at the end', () => {\n          const trigger = rendered.getByText('Trigger Three');\n          trigger.focus();\n          fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });\n          expect(rendered.getByText('Trigger One')).toHaveFocus();\n        });\n      });\n\n      describe('on `ArrowUp`', () => {\n        it('should move focus to the previous trigger', () => {\n          const trigger = rendered.getByText('Trigger Three');\n          trigger.focus();\n          fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });\n          expect(rendered.getByText('Trigger Two')).toHaveFocus();\n        });\n\n        it('should move focus to the last item if at the beginning', () => {\n          const trigger = rendered.getByText('Trigger One');\n          trigger.focus();\n          fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });\n          expect(rendered.getByText('Trigger Three')).toHaveFocus();\n        });\n      });\n\n      describe('on `Home`', () => {\n        it('should move focus to the first trigger', () => {\n          fireEvent.keyDown(document.activeElement!, { key: 'Home' });\n          expect(rendered.getByText('Trigger One')).toHaveFocus();\n        });\n      });\n\n      describe('on `End`', () => {\n        it('should move focus to the last trigger', () => {\n          fireEvent.keyDown(document.activeElement!, { key: 'End' });\n          expect(rendered.getByText('Trigger Three')).toHaveFocus();\n        });\n      });\n    });\n\n    describe('when clicking a trigger', () => {\n      let trigger: HTMLElement;\n      let contentOne: HTMLElement | null;\n\n      beforeEach(() => {\n        trigger = rendered.getByText('Trigger One');\n        fireEvent.click(trigger);\n        contentOne = rendered.getByText('Content One');\n      });\n\n      it('should show the content', () => {\n        expect(contentOne).toBeVisible();\n      });\n\n      it('should have no accessibility violations', async () => {\n        expect(await axe(rendered.container)).toHaveNoViolations();\n      });\n\n      it('should call onValueChange', () => {\n        expect(handleValueChange).toHaveBeenCalledWith('One');\n      });\n\n      describe('then clicking the trigger again', () => {\n        beforeEach(() => {\n          fireEvent.click(trigger);\n        });\n\n        it('should not close the content', () => {\n          expect(contentOne).toBeVisible();\n        });\n\n        it('should not call onValueChange', () => {\n          expect(handleValueChange).toHaveBeenCalledTimes(1);\n        });\n      });\n\n      describe('then clicking another trigger', () => {\n        beforeEach(() => {\n          const trigger = rendered.getByText('Trigger Two');\n          fireEvent.click(trigger);\n        });\n\n        it('should show the new content', () => {\n          const contentTwo = rendered.getByText('Content Two');\n          expect(contentTwo).toBeVisible();\n        });\n\n        it('should call onValueChange', () => {\n          expect(handleValueChange).toHaveBeenCalledWith('Two');\n        });\n\n        it('should hide the previous content', () => {\n          expect(contentOne).not.toBeVisible();\n        });\n      });\n    });\n  });\n\n  describe('with orientation=horizontal', () => {\n    describe('and default dir=\"ltr\"', () => {\n      beforeEach(() => {\n        handleValueChange = vi.fn();\n        rendered = render(\n          <AccordionTest\n            type=\"single\"\n            orientation=\"horizontal\"\n            onValueChange={handleValueChange}\n          />,\n        );\n      });\n\n      describe('when navigating by keyboard', () => {\n        beforeEach(() => {\n          const trigger = rendered.getByText('Trigger One');\n          trigger.focus();\n        });\n\n        describe('on `ArrowUp`', () => {\n          it('should do nothing', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n        });\n\n        describe('on `ArrowDown`', () => {\n          it('should do nothing', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n        });\n\n        describe('on `ArrowRight`', () => {\n          it('should move focus to the next trigger', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });\n            expect(rendered.getByText('Trigger Two')).toHaveFocus();\n          });\n\n          it('should move focus to the first item if at the end', () => {\n            const trigger = rendered.getByText('Trigger Three');\n            trigger.focus();\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n        });\n\n        describe('on `ArrowLeft`', () => {\n          it('should move focus to the previous trigger', () => {\n            const trigger = rendered.getByText('Trigger Three');\n            trigger.focus();\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });\n            expect(rendered.getByText('Trigger Two')).toHaveFocus();\n          });\n\n          it('should move focus to the last item if at the beginning', () => {\n            const trigger = rendered.getByText('Trigger One');\n            trigger.focus();\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });\n            expect(rendered.getByText('Trigger Three')).toHaveFocus();\n          });\n        });\n\n        describe('on `Home`', () => {\n          it('should move focus to the first trigger', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'Home' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n        });\n\n        describe('on `End`', () => {\n          it('should move focus to the last trigger', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'End' });\n            expect(rendered.getByText('Trigger Three')).toHaveFocus();\n          });\n        });\n      });\n    });\n\n    describe('and dir=\"rtl\"', () => {\n      beforeEach(() => {\n        handleValueChange = vi.fn();\n        rendered = render(\n          <AccordionTest\n            type=\"single\"\n            dir=\"rtl\"\n            orientation=\"horizontal\"\n            onValueChange={handleValueChange}\n          />,\n        );\n      });\n\n      describe('when navigating by keyboard', () => {\n        beforeEach(() => {\n          const trigger = rendered.getByText('Trigger One');\n          trigger.focus();\n        });\n\n        describe('on `ArrowUp`', () => {\n          it('should do nothing', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n        });\n\n        describe('on `ArrowDown`', () => {\n          it('should do nothing', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n        });\n\n        describe('on `ArrowRight`', () => {\n          it('should move focus to the previous trigger', () => {\n            const trigger = rendered.getByText('Trigger Two');\n            trigger.focus();\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n\n          it('should move focus to the last item if at the beginning', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' });\n            expect(rendered.getByText('Trigger Three')).toHaveFocus();\n          });\n        });\n\n        describe('on `ArrowLeft`', () => {\n          it('should move focus to the next trigger', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });\n            expect(rendered.getByText('Trigger Two')).toHaveFocus();\n          });\n\n          it('should move focus to the first item if at the end', () => {\n            const trigger = rendered.getByText('Trigger Three');\n            trigger.focus();\n            fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n        });\n\n        describe('on `Home`', () => {\n          it('should move focus to the first trigger', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'Home' });\n            expect(rendered.getByText('Trigger One')).toHaveFocus();\n          });\n        });\n\n        describe('on `End`', () => {\n          it('should move focus to the last trigger', () => {\n            fireEvent.keyDown(document.activeElement!, { key: 'End' });\n            expect(rendered.getByText('Trigger Three')).toHaveFocus();\n          });\n        });\n      });\n    });\n  });\n});\n\ndescribe('given a multiple Accordion', () => {\n  let handleValueChange: Mock;\n  let rendered: RenderResult;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    handleValueChange = vi.fn();\n    rendered = render(<AccordionTest type=\"multiple\" onValueChange={handleValueChange} />);\n  });\n\n  it('should have no accessibility violations in default state', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  describe('when navigating by keyboard', () => {\n    beforeEach(() => {\n      rendered.getByText('Trigger One').focus();\n    });\n\n    describe('on `ArrowDown`', () => {\n      it('should move focus to the next trigger', () => {\n        fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });\n        expect(rendered.getByText('Trigger Two')).toHaveFocus();\n      });\n    });\n\n    describe('on `ArrowUp`', () => {\n      it('should move focus to the previous trigger', () => {\n        fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });\n        expect(rendered.getByText('Trigger Three')).toHaveFocus();\n      });\n    });\n\n    describe('on `Home`', () => {\n      it('should move focus to the first trigger', () => {\n        fireEvent.keyDown(document.activeElement!, { key: 'Home' });\n        expect(rendered.getByText('Trigger One')).toHaveFocus();\n      });\n    });\n\n    describe('on `End`', () => {\n      it('should move focus to the last trigger', () => {\n        fireEvent.keyDown(document.activeElement!, { key: 'End' });\n        expect(rendered.getByText('Trigger Three')).toHaveFocus();\n      });\n    });\n  });\n\n  describe('when clicking a trigger', () => {\n    let trigger: HTMLElement;\n    let contentOne: HTMLElement | null;\n\n    beforeEach(() => {\n      trigger = rendered.getByText('Trigger One');\n      fireEvent.click(trigger);\n      contentOne = rendered.getByText('Content One');\n    });\n\n    it('should show the content', () => {\n      expect(contentOne).toBeVisible();\n    });\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should call onValueChange', () => {\n      expect(handleValueChange).toHaveBeenCalledWith(['One']);\n    });\n\n    describe('then clicking the trigger again', () => {\n      beforeEach(() => {\n        fireEvent.click(trigger);\n      });\n\n      it('should hide the content', () => {\n        expect(contentOne).not.toBeVisible();\n      });\n\n      it('should call onValueChange', () => {\n        expect(handleValueChange).toHaveBeenCalledWith([]);\n      });\n    });\n\n    describe('then clicking another trigger', () => {\n      beforeEach(() => {\n        const trigger = rendered.getByText('Trigger Two');\n        fireEvent.click(trigger);\n      });\n\n      it('should show the new content', () => {\n        const contentTwo = rendered.getByText('Content Two');\n        expect(contentTwo).toBeVisible();\n      });\n\n      it('should call onValueChange', () => {\n        expect(handleValueChange).toHaveBeenCalledWith(['One', 'Two']);\n      });\n\n      it('should not hide the previous content', () => {\n        expect(contentOne).toBeVisible();\n      });\n    });\n  });\n});\n\nfunction AccordionTest(props: React.ComponentProps<typeof Accordion.Root>) {\n  return (\n    <Accordion.Root data-testid=\"container\" {...props}>\n      {ITEMS.map((val) => (\n        <Accordion.Item value={val} key={val} data-testid={`item-${val.toLowerCase()}`}>\n          <Accordion.Header data-testid={`header-${val.toLowerCase()}`}>\n            <Accordion.Trigger>Trigger {val}</Accordion.Trigger>\n          </Accordion.Header>\n          <Accordion.Content>Content {val}</Accordion.Content>\n        </Accordion.Item>\n      ))}\n    </Accordion.Root>\n  );\n}\n"
  },
  {
    "path": "packages/react/accordion/src/accordion.tsx",
    "content": "import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport { createCollapsibleScope } from '@radix-ui/react-collapsible';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\n\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * Accordion\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACCORDION_NAME = 'Accordion';\nconst ACCORDION_KEYS = ['Home', 'End', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'];\n\nconst [Collection, useCollection, createCollectionScope] =\n  createCollection<AccordionTriggerElement>(ACCORDION_NAME);\n\ntype ScopedProps<P> = P & { __scopeAccordion?: Scope };\nconst [createAccordionContext, createAccordionScope] = createContextScope(ACCORDION_NAME, [\n  createCollectionScope,\n  createCollapsibleScope,\n]);\nconst useCollapsibleScope = createCollapsibleScope();\n\ntype AccordionElement = AccordionImplMultipleElement | AccordionImplSingleElement;\ninterface AccordionSingleProps extends AccordionImplSingleProps {\n  type: 'single';\n}\ninterface AccordionMultipleProps extends AccordionImplMultipleProps {\n  type: 'multiple';\n}\n\nconst Accordion = React.forwardRef<AccordionElement, AccordionSingleProps | AccordionMultipleProps>(\n  (props: ScopedProps<AccordionSingleProps | AccordionMultipleProps>, forwardedRef) => {\n    const { type, ...accordionProps } = props;\n    const singleProps = accordionProps as AccordionImplSingleProps;\n    const multipleProps = accordionProps as AccordionImplMultipleProps;\n    return (\n      <Collection.Provider scope={props.__scopeAccordion}>\n        {type === 'multiple' ? (\n          <AccordionImplMultiple {...multipleProps} ref={forwardedRef} />\n        ) : (\n          <AccordionImplSingle {...singleProps} ref={forwardedRef} />\n        )}\n      </Collection.Provider>\n    );\n  },\n);\n\nAccordion.displayName = ACCORDION_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype AccordionValueContextValue = {\n  value: string[];\n  onItemOpen(value: string): void;\n  onItemClose(value: string): void;\n};\n\nconst [AccordionValueProvider, useAccordionValueContext] =\n  createAccordionContext<AccordionValueContextValue>(ACCORDION_NAME);\n\nconst [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(\n  ACCORDION_NAME,\n  { collapsible: false },\n);\n\ntype AccordionImplSingleElement = AccordionImplElement;\ninterface AccordionImplSingleProps extends AccordionImplProps {\n  /**\n   * The controlled stateful value of the accordion item whose content is expanded.\n   */\n  value?: string;\n  /**\n   * The value of the item whose content is expanded when the accordion is initially rendered. Use\n   * `defaultValue` if you do not need to control the state of an accordion.\n   */\n  defaultValue?: string;\n  /**\n   * The callback that fires when the state of the accordion changes.\n   */\n  onValueChange?(value: string): void;\n  /**\n   * Whether an accordion item can be collapsed after it has been opened.\n   * @default false\n   */\n  collapsible?: boolean;\n}\n\nconst AccordionImplSingle = React.forwardRef<AccordionImplSingleElement, AccordionImplSingleProps>(\n  (props: ScopedProps<AccordionImplSingleProps>, forwardedRef) => {\n    const {\n      value: valueProp,\n      defaultValue,\n      onValueChange = () => {},\n      collapsible = false,\n      ...accordionSingleProps\n    } = props;\n\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue ?? '',\n      onChange: onValueChange,\n      caller: ACCORDION_NAME,\n    });\n\n    return (\n      <AccordionValueProvider\n        scope={props.__scopeAccordion}\n        value={React.useMemo(() => (value ? [value] : []), [value])}\n        onItemOpen={setValue}\n        onItemClose={React.useCallback(() => collapsible && setValue(''), [collapsible, setValue])}\n      >\n        <AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={collapsible}>\n          <AccordionImpl {...accordionSingleProps} ref={forwardedRef} />\n        </AccordionCollapsibleProvider>\n      </AccordionValueProvider>\n    );\n  },\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype AccordionImplMultipleElement = AccordionImplElement;\ninterface AccordionImplMultipleProps extends AccordionImplProps {\n  /**\n   * The controlled stateful value of the accordion items whose contents are expanded.\n   */\n  value?: string[];\n  /**\n   * The value of the items whose contents are expanded when the accordion is initially rendered. Use\n   * `defaultValue` if you do not need to control the state of an accordion.\n   */\n  defaultValue?: string[];\n  /**\n   * The callback that fires when the state of the accordion changes.\n   */\n  onValueChange?(value: string[]): void;\n}\n\nconst AccordionImplMultiple = React.forwardRef<\n  AccordionImplMultipleElement,\n  AccordionImplMultipleProps\n>((props: ScopedProps<AccordionImplMultipleProps>, forwardedRef) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange = () => {},\n    ...accordionMultipleProps\n  } = props;\n\n  const [value, setValue] = useControllableState({\n    prop: valueProp,\n    defaultProp: defaultValue ?? [],\n    onChange: onValueChange,\n    caller: ACCORDION_NAME,\n  });\n\n  const handleItemOpen = React.useCallback(\n    (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n    [setValue],\n  );\n\n  const handleItemClose = React.useCallback(\n    (itemValue: string) =>\n      setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n    [setValue],\n  );\n\n  return (\n    <AccordionValueProvider\n      scope={props.__scopeAccordion}\n      value={value}\n      onItemOpen={handleItemOpen}\n      onItemClose={handleItemClose}\n    >\n      <AccordionCollapsibleProvider scope={props.__scopeAccordion} collapsible={true}>\n        <AccordionImpl {...accordionMultipleProps} ref={forwardedRef} />\n      </AccordionCollapsibleProvider>\n    </AccordionValueProvider>\n  );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype AccordionImplContextValue = {\n  disabled?: boolean;\n  direction: AccordionImplProps['dir'];\n  orientation: AccordionImplProps['orientation'];\n};\n\nconst [AccordionImplProvider, useAccordionContext] =\n  createAccordionContext<AccordionImplContextValue>(ACCORDION_NAME);\n\ntype AccordionImplElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface AccordionImplProps extends PrimitiveDivProps {\n  /**\n   * Whether or not an accordion is disabled from user interaction.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * The layout in which the Accordion operates.\n   * @default vertical\n   */\n  orientation?: React.AriaAttributes['aria-orientation'];\n  /**\n   * The language read direction.\n   */\n  dir?: Direction;\n}\n\nconst AccordionImpl = React.forwardRef<AccordionImplElement, AccordionImplProps>(\n  (props: ScopedProps<AccordionImplProps>, forwardedRef) => {\n    const { __scopeAccordion, disabled, dir, orientation = 'vertical', ...accordionProps } = props;\n    const accordionRef = React.useRef<AccordionImplElement>(null);\n    const composedRefs = useComposedRefs(accordionRef, forwardedRef);\n    const getItems = useCollection(__scopeAccordion);\n    const direction = useDirection(dir);\n    const isDirectionLTR = direction === 'ltr';\n\n    const handleKeyDown = composeEventHandlers(props.onKeyDown, (event) => {\n      if (!ACCORDION_KEYS.includes(event.key)) return;\n      const target = event.target as HTMLElement;\n      const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);\n      const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);\n      const triggerCount = triggerCollection.length;\n\n      if (triggerIndex === -1) return;\n\n      // Prevents page scroll while user is navigating\n      event.preventDefault();\n\n      let nextIndex = triggerIndex;\n      const homeIndex = 0;\n      const endIndex = triggerCount - 1;\n\n      const moveNext = () => {\n        nextIndex = triggerIndex + 1;\n        if (nextIndex > endIndex) {\n          nextIndex = homeIndex;\n        }\n      };\n\n      const movePrev = () => {\n        nextIndex = triggerIndex - 1;\n        if (nextIndex < homeIndex) {\n          nextIndex = endIndex;\n        }\n      };\n\n      switch (event.key) {\n        case 'Home':\n          nextIndex = homeIndex;\n          break;\n        case 'End':\n          nextIndex = endIndex;\n          break;\n        case 'ArrowRight':\n          if (orientation === 'horizontal') {\n            if (isDirectionLTR) {\n              moveNext();\n            } else {\n              movePrev();\n            }\n          }\n          break;\n        case 'ArrowDown':\n          if (orientation === 'vertical') {\n            moveNext();\n          }\n          break;\n        case 'ArrowLeft':\n          if (orientation === 'horizontal') {\n            if (isDirectionLTR) {\n              movePrev();\n            } else {\n              moveNext();\n            }\n          }\n          break;\n        case 'ArrowUp':\n          if (orientation === 'vertical') {\n            movePrev();\n          }\n          break;\n      }\n\n      const clampedIndex = nextIndex % triggerCount;\n      triggerCollection[clampedIndex]!.ref.current?.focus();\n    });\n\n    return (\n      <AccordionImplProvider\n        scope={__scopeAccordion}\n        disabled={disabled}\n        direction={dir}\n        orientation={orientation}\n      >\n        <Collection.Slot scope={__scopeAccordion}>\n          <Primitive.div\n            {...accordionProps}\n            data-orientation={orientation}\n            ref={composedRefs}\n            onKeyDown={disabled ? undefined : handleKeyDown}\n          />\n        </Collection.Slot>\n      </AccordionImplProvider>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'AccordionItem';\n\ntype AccordionItemContextValue = { open?: boolean; disabled?: boolean; triggerId: string };\nconst [AccordionItemProvider, useAccordionItemContext] =\n  createAccordionContext<AccordionItemContextValue>(ITEM_NAME);\n\ntype AccordionItemElement = React.ComponentRef<typeof CollapsiblePrimitive.Root>;\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;\ninterface AccordionItemProps\n  extends Omit<CollapsibleProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string;\n}\n\n/**\n * `AccordionItem` contains all of the parts of a collapsible section inside of an `Accordion`.\n */\nconst AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(\n  (props: ScopedProps<AccordionItemProps>, forwardedRef) => {\n    const { __scopeAccordion, value, ...accordionItemProps } = props;\n    const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);\n    const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);\n    const collapsibleScope = useCollapsibleScope(__scopeAccordion);\n    const triggerId = useId();\n    const open = (value && valueContext.value.includes(value)) || false;\n    const disabled = accordionContext.disabled || props.disabled;\n\n    return (\n      <AccordionItemProvider\n        scope={__scopeAccordion}\n        open={open}\n        disabled={disabled}\n        triggerId={triggerId}\n      >\n        <CollapsiblePrimitive.Root\n          data-orientation={accordionContext.orientation}\n          data-state={getState(open)}\n          {...collapsibleScope}\n          {...accordionItemProps}\n          ref={forwardedRef}\n          disabled={disabled}\n          open={open}\n          onOpenChange={(open) => {\n            if (open) {\n              valueContext.onItemOpen(value);\n            } else {\n              valueContext.onItemClose(value);\n            }\n          }}\n        />\n      </AccordionItemProvider>\n    );\n  },\n);\n\nAccordionItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionHeader\n * -----------------------------------------------------------------------------------------------*/\n\nconst HEADER_NAME = 'AccordionHeader';\n\ntype AccordionHeaderElement = React.ComponentRef<typeof Primitive.h3>;\ntype PrimitiveHeading3Props = React.ComponentPropsWithoutRef<typeof Primitive.h3>;\ninterface AccordionHeaderProps extends PrimitiveHeading3Props {}\n\n/**\n * `AccordionHeader` contains the content for the parts of an `AccordionItem` that will be visible\n * whether or not its content is collapsed.\n */\nconst AccordionHeader = React.forwardRef<AccordionHeaderElement, AccordionHeaderProps>(\n  (props: ScopedProps<AccordionHeaderProps>, forwardedRef) => {\n    const { __scopeAccordion, ...headerProps } = props;\n    const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);\n    const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);\n    return (\n      <Primitive.h3\n        data-orientation={accordionContext.orientation}\n        data-state={getState(itemContext.open)}\n        data-disabled={itemContext.disabled ? '' : undefined}\n        {...headerProps}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nAccordionHeader.displayName = HEADER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'AccordionTrigger';\n\ntype AccordionTriggerElement = React.ComponentRef<typeof CollapsiblePrimitive.Trigger>;\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;\ninterface AccordionTriggerProps extends CollapsibleTriggerProps {}\n\n/**\n * `AccordionTrigger` is the trigger that toggles the collapsed state of an `AccordionItem`. It\n * should always be nested inside of an `AccordionHeader`.\n */\nconst AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(\n  (props: ScopedProps<AccordionTriggerProps>, forwardedRef) => {\n    const { __scopeAccordion, ...triggerProps } = props;\n    const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);\n    const itemContext = useAccordionItemContext(TRIGGER_NAME, __scopeAccordion);\n    const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME, __scopeAccordion);\n    const collapsibleScope = useCollapsibleScope(__scopeAccordion);\n    return (\n      <Collection.ItemSlot scope={__scopeAccordion}>\n        <CollapsiblePrimitive.Trigger\n          aria-disabled={(itemContext.open && !collapsibleContext.collapsible) || undefined}\n          data-orientation={accordionContext.orientation}\n          id={itemContext.triggerId}\n          {...collapsibleScope}\n          {...triggerProps}\n          ref={forwardedRef}\n        />\n      </Collection.ItemSlot>\n    );\n  },\n);\n\nAccordionTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AccordionContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AccordionContent';\n\ntype AccordionContentElement = React.ComponentRef<typeof CollapsiblePrimitive.Content>;\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;\ninterface AccordionContentProps extends CollapsibleContentProps {}\n\n/**\n * `AccordionContent` contains the collapsible content for an `AccordionItem`.\n */\nconst AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(\n  (props: ScopedProps<AccordionContentProps>, forwardedRef) => {\n    const { __scopeAccordion, ...contentProps } = props;\n    const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);\n    const itemContext = useAccordionItemContext(CONTENT_NAME, __scopeAccordion);\n    const collapsibleScope = useCollapsibleScope(__scopeAccordion);\n    return (\n      <CollapsiblePrimitive.Content\n        role=\"region\"\n        aria-labelledby={itemContext.triggerId}\n        data-orientation={accordionContext.orientation}\n        {...collapsibleScope}\n        {...contentProps}\n        ref={forwardedRef}\n        style={{\n          ['--radix-accordion-content-height' as any]: 'var(--radix-collapsible-content-height)',\n          ['--radix-accordion-content-width' as any]: 'var(--radix-collapsible-content-width)',\n          ...props.style,\n        }}\n      />\n    );\n  },\n);\n\nAccordionContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n  return open ? 'open' : 'closed';\n}\n\nconst Root = Accordion;\nconst Item = AccordionItem;\nconst Header = AccordionHeader;\nconst Trigger = AccordionTrigger;\nconst Content = AccordionContent;\n\nexport {\n  createAccordionScope,\n  //\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionContent,\n  //\n  Root,\n  Item,\n  Header,\n  Trigger,\n  Content,\n};\nexport type {\n  AccordionSingleProps,\n  AccordionMultipleProps,\n  AccordionItemProps,\n  AccordionHeaderProps,\n  AccordionTriggerProps,\n  AccordionContentProps,\n};\n"
  },
  {
    "path": "packages/react/accordion/src/index.ts",
    "content": "'use client';\nexport {\n  createAccordionScope,\n  //\n  Accordion,\n  AccordionItem,\n  AccordionHeader,\n  AccordionTrigger,\n  AccordionContent,\n  //\n  Root,\n  Item,\n  Header,\n  Trigger,\n  Content,\n} from './accordion';\nexport type {\n  AccordionSingleProps,\n  AccordionMultipleProps,\n  AccordionItemProps,\n  AccordionHeaderProps,\n  AccordionTriggerProps,\n  AccordionContentProps,\n} from './accordion';\n"
  },
  {
    "path": "packages/react/accordion/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/alert-dialog/CHANGELOG.md",
    "content": "# @radix-ui/react-alert-dialog\n\n## 1.1.15\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.4`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-dialog@1.1.15`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.14\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-dialog@1.1.14`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.13\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-dialog@1.1.13`, `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.12\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-dialog@1.1.12`, `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/react-dialog@1.1.11`\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/react-dialog@1.1.10`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-dialog@1.1.9`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-dialog@1.1.8`, `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/alert-dialog/README.md",
    "content": "# `react-alert-dialog`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/alert-dialog).\n"
  },
  {
    "path": "packages/react/alert-dialog/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/alert-dialog/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-alert-dialog\",\n  \"version\": \"1.1.15\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"src\",\n    \"dist\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-dialog\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-slot\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/alert-dialog/src/alert-dialog.test.tsx",
    "content": "import React from 'react';\nimport { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render, fireEvent } from '@testing-library/react';\nimport * as AlertDialog from './alert-dialog';\nimport { afterEach, describe, it, beforeEach, expect } from 'vitest';\n\nconst OPEN_TEXT = 'Open';\nconst CANCEL_TEXT = 'Cancel';\nconst ACTION_TEXT = 'Do it';\nconst TITLE_TEXT = 'Warning';\nconst DESC_TEXT = 'This is a warning';\nconst OVERLAY_TEST_ID = 'test-overlay';\n\nconst DialogTest = (props: React.ComponentProps<typeof AlertDialog.Root>) => (\n  <AlertDialog.Root {...props}>\n    <AlertDialog.Trigger>{OPEN_TEXT}</AlertDialog.Trigger>\n    <AlertDialog.Overlay data-testid={OVERLAY_TEST_ID} />\n    <AlertDialog.Content>\n      <AlertDialog.Title>{TITLE_TEXT}</AlertDialog.Title>\n      <AlertDialog.Description>{DESC_TEXT}</AlertDialog.Description>\n      <AlertDialog.Cancel>{CANCEL_TEXT}</AlertDialog.Cancel>\n      <AlertDialog.Action>{ACTION_TEXT}</AlertDialog.Action>\n    </AlertDialog.Content>\n  </AlertDialog.Root>\n);\n\ndescribe('given a default Dialog', () => {\n  let rendered: RenderResult;\n  let title: HTMLElement;\n  let trigger: HTMLElement;\n  let cancelButton: HTMLElement;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    rendered = render(<DialogTest />);\n    trigger = rendered.getByText(OPEN_TEXT);\n  });\n\n  it('should have no accessibility violations in default state', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  describe('after clicking the trigger', () => {\n    beforeEach(() => {\n      fireEvent.click(trigger);\n      title = rendered.getByText(TITLE_TEXT);\n      cancelButton = rendered.getByText(CANCEL_TEXT);\n    });\n\n    it('should open the content', () => {\n      expect(title).toBeVisible();\n    });\n\n    it('should have no accessibility violations when open', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should focus the cancel button', () => {\n      expect(cancelButton).toHaveFocus();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/react/alert-dialog/src/alert-dialog.tsx",
    "content": "import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { createDialogScope } from '@radix-ui/react-dialog';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createSlottable } from '@radix-ui/react-slot';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_NAME = 'AlertDialog';\n\ntype ScopedProps<P> = P & { __scopeAlertDialog?: Scope };\nconst [createAlertDialogContext, createAlertDialogScope] = createContextScope(ROOT_NAME, [\n  createDialogScope,\n]);\nconst useDialogScope = createDialogScope();\n\ntype DialogProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;\ninterface AlertDialogProps extends Omit<DialogProps, 'modal'> {}\n\nconst AlertDialog: React.FC<AlertDialogProps> = (props: ScopedProps<AlertDialogProps>) => {\n  const { __scopeAlertDialog, ...alertDialogProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Root {...dialogScope} {...alertDialogProps} modal={true} />;\n};\n\nAlertDialog.displayName = ROOT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTrigger\n * -----------------------------------------------------------------------------------------------*/\nconst TRIGGER_NAME = 'AlertDialogTrigger';\n\ntype AlertDialogTriggerElement = React.ComponentRef<typeof DialogPrimitive.Trigger>;\ntype DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\ninterface AlertDialogTriggerProps extends DialogTriggerProps {}\n\nconst AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDialogTriggerProps>(\n  (props: ScopedProps<AlertDialogTriggerProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...triggerProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Trigger {...dialogScope} {...triggerProps} ref={forwardedRef} />;\n  },\n);\n\nAlertDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'AlertDialogPortal';\n\ntype DialogPortalProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;\ninterface AlertDialogPortalProps extends DialogPortalProps {}\n\nconst AlertDialogPortal: React.FC<AlertDialogPortalProps> = (\n  props: ScopedProps<AlertDialogPortalProps>,\n) => {\n  const { __scopeAlertDialog, ...portalProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Portal {...dialogScope} {...portalProps} />;\n};\n\nAlertDialogPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'AlertDialogOverlay';\n\ntype AlertDialogOverlayElement = React.ComponentRef<typeof DialogPrimitive.Overlay>;\ntype DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;\ninterface AlertDialogOverlayProps extends DialogOverlayProps {}\n\nconst AlertDialogOverlay = React.forwardRef<AlertDialogOverlayElement, AlertDialogOverlayProps>(\n  (props: ScopedProps<AlertDialogOverlayProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...overlayProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Overlay {...dialogScope} {...overlayProps} ref={forwardedRef} />;\n  },\n);\n\nAlertDialogOverlay.displayName = OVERLAY_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'AlertDialogContent';\n\ntype AlertDialogContentContextValue = {\n  cancelRef: React.MutableRefObject<AlertDialogCancelElement | null>;\n};\n\nconst [AlertDialogContentProvider, useAlertDialogContentContext] =\n  createAlertDialogContext<AlertDialogContentContextValue>(CONTENT_NAME);\n\ntype AlertDialogContentElement = React.ComponentRef<typeof DialogPrimitive.Content>;\ntype DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\ninterface AlertDialogContentProps\n  extends Omit<DialogContentProps, 'onPointerDownOutside' | 'onInteractOutside'> {}\n\nconst Slottable = createSlottable('AlertDialogContent');\n\nconst AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(\n  (props: ScopedProps<AlertDialogContentProps>, forwardedRef) => {\n    const { __scopeAlertDialog, children, ...contentProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const contentRef = React.useRef<AlertDialogContentElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n    const cancelRef = React.useRef<AlertDialogCancelElement | null>(null);\n\n    return (\n      <DialogPrimitive.WarningProvider\n        contentName={CONTENT_NAME}\n        titleName={TITLE_NAME}\n        docsSlug=\"alert-dialog\"\n      >\n        <AlertDialogContentProvider scope={__scopeAlertDialog} cancelRef={cancelRef}>\n          <DialogPrimitive.Content\n            role=\"alertdialog\"\n            {...dialogScope}\n            {...contentProps}\n            ref={composedRefs}\n            onOpenAutoFocus={composeEventHandlers(contentProps.onOpenAutoFocus, (event) => {\n              event.preventDefault();\n              cancelRef.current?.focus({ preventScroll: true });\n            })}\n            onPointerDownOutside={(event) => event.preventDefault()}\n            onInteractOutside={(event) => event.preventDefault()}\n          >\n            {/**\n             * We have to use `Slottable` here as we cannot wrap the `AlertDialogContentProvider`\n             * around everything, otherwise the `DescriptionWarning` would be rendered straight away.\n             * This is because we want the accessibility checks to run only once the content is actually\n             * open and that behaviour is already encapsulated in `DialogContent`.\n             */}\n            <Slottable>{children}</Slottable>\n            {process.env.NODE_ENV === 'development' && (\n              <DescriptionWarning contentRef={contentRef} />\n            )}\n          </DialogPrimitive.Content>\n        </AlertDialogContentProvider>\n      </DialogPrimitive.WarningProvider>\n    );\n  },\n);\n\nAlertDialogContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'AlertDialogTitle';\n\ntype AlertDialogTitleElement = React.ComponentRef<typeof DialogPrimitive.Title>;\ntype DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\ninterface AlertDialogTitleProps extends DialogTitleProps {}\n\nconst AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(\n  (props: ScopedProps<AlertDialogTitleProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...titleProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Title {...dialogScope} {...titleProps} ref={forwardedRef} />;\n  },\n);\n\nAlertDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'AlertDialogDescription';\n\ntype AlertDialogDescriptionElement = React.ComponentRef<typeof DialogPrimitive.Description>;\ntype DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;\ninterface AlertDialogDescriptionProps extends DialogDescriptionProps {}\n\nconst AlertDialogDescription = React.forwardRef<\n  AlertDialogDescriptionElement,\n  AlertDialogDescriptionProps\n>((props: ScopedProps<AlertDialogDescriptionProps>, forwardedRef) => {\n  const { __scopeAlertDialog, ...descriptionProps } = props;\n  const dialogScope = useDialogScope(__scopeAlertDialog);\n  return <DialogPrimitive.Description {...dialogScope} {...descriptionProps} ref={forwardedRef} />;\n});\n\nAlertDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'AlertDialogAction';\n\ntype AlertDialogActionElement = React.ComponentRef<typeof DialogPrimitive.Close>;\ntype DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogActionProps extends DialogCloseProps {}\n\nconst AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(\n  (props: ScopedProps<AlertDialogActionProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...actionProps } = props;\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    return <DialogPrimitive.Close {...dialogScope} {...actionProps} ref={forwardedRef} />;\n  },\n);\n\nAlertDialogAction.displayName = ACTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AlertDialogCancel\n * -----------------------------------------------------------------------------------------------*/\n\nconst CANCEL_NAME = 'AlertDialogCancel';\n\ntype AlertDialogCancelElement = React.ComponentRef<typeof DialogPrimitive.Close>;\ninterface AlertDialogCancelProps extends DialogCloseProps {}\n\nconst AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(\n  (props: ScopedProps<AlertDialogCancelProps>, forwardedRef) => {\n    const { __scopeAlertDialog, ...cancelProps } = props;\n    const { cancelRef } = useAlertDialogContentContext(CANCEL_NAME, __scopeAlertDialog);\n    const dialogScope = useDialogScope(__scopeAlertDialog);\n    const ref = useComposedRefs(forwardedRef, cancelRef);\n    return <DialogPrimitive.Close {...dialogScope} {...cancelProps} ref={ref} />;\n  },\n);\n\nAlertDialogCancel.displayName = CANCEL_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype DescriptionWarningProps = {\n  contentRef: React.RefObject<AlertDialogContentElement | null>;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {\n  const MESSAGE = `\\`${CONTENT_NAME}\\` requires a description for the component to be accessible for screen reader users.\n\nYou can add a description to the \\`${CONTENT_NAME}\\` by passing a \\`${DESCRIPTION_NAME}\\` component as a child, which also benefits sighted users by adding visible context to the dialog.\n\nAlternatively, you can use your own component as a description by assigning it an \\`id\\` and passing the same value to the \\`aria-describedby\\` prop in \\`${CONTENT_NAME}\\`. If the description is confusing or duplicative for sighted users, you can use the \\`@radix-ui/react-visually-hidden\\` primitive as a wrapper around your description component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;\n\n  React.useEffect(() => {\n    const hasDescription = document.getElementById(\n      contentRef.current?.getAttribute('aria-describedby')!,\n    );\n    if (!hasDescription) console.warn(MESSAGE);\n  }, [MESSAGE, contentRef]);\n\n  return null;\n};\n\nconst Root = AlertDialog;\nconst Trigger = AlertDialogTrigger;\nconst Portal = AlertDialogPortal;\nconst Overlay = AlertDialogOverlay;\nconst Content = AlertDialogContent;\nconst Action = AlertDialogAction;\nconst Cancel = AlertDialogCancel;\nconst Title = AlertDialogTitle;\nconst Description = AlertDialogDescription;\n\nexport {\n  createAlertDialogScope,\n  //\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Action,\n  Cancel,\n  Title,\n  Description,\n};\nexport type {\n  AlertDialogProps,\n  AlertDialogTriggerProps,\n  AlertDialogPortalProps,\n  AlertDialogOverlayProps,\n  AlertDialogContentProps,\n  AlertDialogActionProps,\n  AlertDialogCancelProps,\n  AlertDialogTitleProps,\n  AlertDialogDescriptionProps,\n};\n"
  },
  {
    "path": "packages/react/alert-dialog/src/index.ts",
    "content": "'use client';\nexport {\n  createAlertDialogScope,\n  //\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogContent,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Action,\n  Cancel,\n  Title,\n  Description,\n} from './alert-dialog';\nexport type {\n  AlertDialogProps,\n  AlertDialogTriggerProps,\n  AlertDialogPortalProps,\n  AlertDialogOverlayProps,\n  AlertDialogContentProps,\n  AlertDialogActionProps,\n  AlertDialogCancelProps,\n  AlertDialogTitleProps,\n  AlertDialogDescriptionProps,\n} from './alert-dialog';\n"
  },
  {
    "path": "packages/react/alert-dialog/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/announce/CHANGELOG.md",
    "content": "# @radix-ui/react-announce\n\n## 0.2.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.4`\n\n## 0.2.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 0.2.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 0.2.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 0.2.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/announce/README.md",
    "content": "# `react-announce`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/announce).\n"
  },
  {
    "path": "packages/react/announce/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/announce/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-announce\",\n  \"version\": \"0.2.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/announce/src/announce.tsx",
    "content": "import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\ntype RegionType = 'polite' | 'assertive' | 'off';\ntype RegionRole = 'status' | 'alert' | 'log' | 'none';\n\nconst ROLES: { [key in RegionType]: RegionRole } = {\n  polite: 'status',\n  assertive: 'alert',\n  off: 'none',\n};\n\nconst listenerMap = new Map<Element, number>();\n\n/* -------------------------------------------------------------------------------------------------\n * Announce\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Announce';\n\ntype AnnounceElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface AnnounceProps extends PrimitiveDivProps {\n  /**\n   * Mirrors the `aria-atomic` DOM attribute for live regions. It is an optional attribute that\n   * indicates whether assistive technologies will present all, or only parts of, the changed region\n   * based on the change notifications defined by the `aria-relevant` attribute.\n   *\n   * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-atomic\n   * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html\n   */\n  'aria-atomic'?: boolean;\n  /**\n   * Mirrors the `aria-relevant` DOM attribute for live regions. It is an optional attribute used to\n   * describe what types of changes have occurred to the region, and which changes are relevant and\n   * should be announced. Any change that is not relevant acts in the same manner it would if the\n   * `aria-live` attribute were set to off.\n   *\n   * Unfortunately, `aria-relevant` doesn't behave as expected across all device/screen reader\n   * combinations. It's important to test its implementation before relying on it to work for your\n   * users. The attribute is omitted by default.\n   *\n   * @see WAI-ARIA https://www.w3.org/TR/wai-aria-1.2/#aria-relevant\n   * @see MDN      https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute\n   * @see Opinion  https://medium.com/dev-channel/why-authors-should-avoid-aria-relevant-5d3164fab1e3\n   * @see Demo     http://pauljadam.com/demos/aria-atomic-relevant.html\n   */\n  'aria-relevant'?: PrimitiveDivProps['aria-relevant'];\n  /**\n   * React children of your component. Children can be mirrored directly or modified to optimize for\n   * screen reader user experience.\n   */\n  children: React.ReactNode;\n  /**\n   * An optional unique identifier for the live region.\n   *\n   * By default, `Announce` components create, at most, two unique `aria-live` regions in the\n   * document (one for all `polite` notifications, one for all `assertive` notifications). In some\n   * cases you may wish to append additional `aria-live` regions for distinct purposes (for example,\n   * simple status updates may need to be separated from a stack of toast-style notifications). By\n   * passing an id, you indicate that any content rendered by components with the same identifier\n   * should be mirrored in a separate `aria-live` region.\n   */\n  regionIdentifier?: string;\n  /**\n   * Mirrors the `role` DOM attribute. This is optional and may be useful as an override in some\n   * cases. By default, the role is determined by the `type` prop.\n   *\n   * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles\n   */\n  role?: RegionRole;\n  /**\n   * Mirrors the `aria-live` DOM attribute. The `aria-live=POLITENESS_SETTING` is used to set the\n   * priority with which screen reader should treat updates to live regions. Its possible settings\n   * are: off, polite or assertive. Defaults to `polite`.\n   *\n   * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions\n   */\n  type?: RegionType;\n}\n\nconst Announce = React.forwardRef<AnnounceElement, AnnounceProps>((props, forwardedRef) => {\n  const {\n    'aria-relevant': ariaRelevant,\n    children,\n    type = 'polite',\n    role = ROLES[type],\n    regionIdentifier,\n    ...regionProps\n  } = props;\n\n  const ariaAtomic = ['true', true].includes(regionProps['aria-atomic'] as any);\n\n  // The region is appended to the root document node, which is usually the global `document` but in\n  // some contexts may be another node. After the Announce element ref is attached, we set the\n  // ownerDocumentRef to make sure we have the right root node. We should only need to do this once.\n  const ownerDocumentRef = React.useRef(document);\n  const setOwnerDocumentFromRef = React.useCallback((node: HTMLDivElement) => {\n    if (node) {\n      ownerDocumentRef.current = node.ownerDocument;\n    }\n  }, []);\n  const ownRef = React.useRef<HTMLDivElement | null>(null);\n  const ref = useComposedRefs(forwardedRef, ownRef, setOwnerDocumentFromRef);\n\n  const [region, setRegion] = React.useState<HTMLElement>();\n  const relevant = ariaRelevant\n    ? Array.isArray(ariaRelevant)\n      ? ariaRelevant.join(' ')\n      : ariaRelevant\n    : undefined;\n\n  const getLiveRegionElement = React.useCallback(() => {\n    const ownerDocument = ownerDocumentRef.current;\n    const regionConfig = { type, role, relevant, id: regionIdentifier, atomic: ariaAtomic };\n    const regionSelector = buildSelector(regionConfig);\n    const element = ownerDocument.querySelector(regionSelector);\n\n    return element || buildLiveRegionElement(ownerDocument, regionConfig);\n  }, [ariaAtomic, relevant, role, type, regionIdentifier]);\n\n  useLayoutEffect(() => {\n    setRegion(getLiveRegionElement() as HTMLElement);\n  }, [getLiveRegionElement]);\n\n  // In some screen reader/browser combinations, alerts coming from an inactive browser tab may be\n  // announced, which is a confusing experience for a user interacting with a completely different\n  // page. When the page visibility changes we'll update the `role` and `aria-live` attributes of\n  // our region element to prevent that.\n  // https://inclusive-components.design/notifications/#restrictingmessagestocontexts\n  React.useEffect(() => {\n    const ownerDocument = ownerDocumentRef.current;\n    function updateAttributesOnVisibilityChange() {\n      regionElement.setAttribute('role', ownerDocument.hidden ? 'none' : role);\n      regionElement.setAttribute('aria-live', ownerDocument.hidden ? 'off' : type);\n    }\n\n    // Ok, so this might look a little weird and confusing, but here's what's going on:\n    //   - We need to hide `aria-live` regions via a global event listener, as noted in the comment\n    //     above.\n    //   - We only need one listener per region. Keep in mind that each `Announce` does not\n    //     necessarily generate a unique live region element.\n    //   - We track whether or not a listener has already been attached for a given region in a map\n    //     so we can skip these effects after `Announce` is used again with a shared live region.\n    const regionElement = getLiveRegionElement();\n\n    if (!listenerMap.get(regionElement)) {\n      ownerDocument.addEventListener('visibilitychange', updateAttributesOnVisibilityChange);\n      listenerMap.set(regionElement, 1);\n    } else {\n      const announceCount = listenerMap.get(regionElement)!;\n      listenerMap.set(regionElement, announceCount + 1);\n    }\n\n    return function () {\n      const announceCount = listenerMap.get(regionElement)!;\n      listenerMap.set(regionElement, announceCount - 1);\n      if (announceCount === 1) {\n        ownerDocument.removeEventListener('visibilitychange', updateAttributesOnVisibilityChange);\n      }\n    };\n  }, [getLiveRegionElement, role, type]);\n\n  return (\n    <React.Fragment>\n      <Primitive.div {...regionProps} ref={ref}>\n        {children}\n      </Primitive.div>\n\n      {/* portal into live region for screen reader announcements */}\n      {region && ReactDOM.createPortal(<div>{children}</div>, region)}\n    </React.Fragment>\n  );\n});\n\nAnnounce.displayName = NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype LiveRegionOptions = {\n  type: string;\n  relevant?: string;\n  role: string;\n  atomic?: boolean;\n  id?: string;\n};\n\nfunction buildLiveRegionElement(\n  ownerDocument: Document,\n  { type, relevant, role, atomic, id }: LiveRegionOptions,\n) {\n  const element = ownerDocument.createElement('div');\n  element.setAttribute(getLiveRegionPartDataAttr(id), '');\n  element.setAttribute(\n    'style',\n    'position: absolute; top: -1px; width: 1px; height: 1px; overflow: hidden;',\n  );\n  ownerDocument.body.appendChild(element);\n\n  element.setAttribute('aria-live', type);\n  element.setAttribute('aria-atomic', String(atomic || false));\n  element.setAttribute('role', role);\n  if (relevant) {\n    element.setAttribute('aria-relevant', relevant);\n  }\n\n  return element;\n}\n\nfunction buildSelector({ type, relevant, role, atomic, id }: LiveRegionOptions) {\n  return `[${getLiveRegionPartDataAttr(id)}]${[\n    ['aria-live', type],\n    ['aria-atomic', atomic],\n    ['aria-relevant', relevant],\n    ['role', role],\n  ]\n    .filter(([, val]) => !!val)\n    .map(([attr, val]) => `[${attr}=${val}]`)\n    .join('')}`;\n}\n\nfunction getLiveRegionPartDataAttr(id?: string) {\n  return 'data-radix-announce-region' + (id ? `-${id}` : '');\n}\n\nconst Root = Announce;\n\nexport {\n  Announce,\n  //\n  Root,\n};\nexport type { AnnounceProps };\n"
  },
  {
    "path": "packages/react/announce/src/index.ts",
    "content": "'use client';\nexport {\n  Announce,\n  //\n  Root,\n} from './announce';\nexport type { AnnounceProps } from './announce';\n"
  },
  {
    "path": "packages/react/announce/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/arrow/CHANGELOG.md",
    "content": "# @radix-ui/react-arrow\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/arrow/README.md",
    "content": "# `react-arrow`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/arrow/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/arrow/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-arrow\",\n  \"version\": \"1.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-primitive\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/arrow/src/arrow.test.tsx",
    "content": "import { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render } from '@testing-library/react';\nimport { Arrow } from './arrow';\nimport { afterEach, describe, it, beforeEach, expect } from 'vitest';\n\nconst WIDTH = 40;\nconst HEIGHT = 30;\n\ndescribe('given a default Arrow', () => {\n  let rendered: RenderResult;\n  let svg: HTMLElement;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    rendered = render(<Arrow width={WIDTH} height={HEIGHT} data-testid=\"test-arrow\" />);\n    svg = rendered.getByTestId('test-arrow');\n  });\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  it('should have width attribute', () => {\n    expect(svg).toHaveAttribute('width', String(WIDTH));\n  });\n\n  it('should have height attribute', () => {\n    expect(svg).toHaveAttribute('height', String(HEIGHT));\n  });\n});\n"
  },
  {
    "path": "packages/react/arrow/src/arrow.tsx",
    "content": "import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Arrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Arrow';\n\ntype ArrowElement = React.ComponentRef<typeof Primitive.svg>;\ntype PrimitiveSvgProps = React.ComponentPropsWithoutRef<typeof Primitive.svg>;\ninterface ArrowProps extends PrimitiveSvgProps {}\n\nconst Arrow = React.forwardRef<ArrowElement, ArrowProps>((props, forwardedRef) => {\n  const { children, width = 10, height = 5, ...arrowProps } = props;\n  return (\n    <Primitive.svg\n      {...arrowProps}\n      ref={forwardedRef}\n      width={width}\n      height={height}\n      viewBox=\"0 0 30 10\"\n      preserveAspectRatio=\"none\"\n    >\n      {/* We use their children if they're slotting to replace the whole svg */}\n      {props.asChild ? children : <polygon points=\"0,0 30,0 15,10\" />}\n    </Primitive.svg>\n  );\n});\n\nArrow.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Arrow;\n\nexport {\n  Arrow,\n  //\n  Root,\n};\nexport type { ArrowProps };\n"
  },
  {
    "path": "packages/react/arrow/src/index.ts",
    "content": "export {\n  Arrow,\n  //\n  Root,\n} from './arrow';\nexport type { ArrowProps } from './arrow';\n"
  },
  {
    "path": "packages/react/arrow/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/aspect-ratio/CHANGELOG.md",
    "content": "# @radix-ui/react-aspect-ratio\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/aspect-ratio/README.md",
    "content": "# `react-aspect-ratio`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/aspect-ratio).\n"
  },
  {
    "path": "packages/react/aspect-ratio/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/aspect-ratio/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-aspect-ratio\",\n  \"version\": \"1.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-primitive\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/aspect-ratio/src/aspect-ratio.test.tsx",
    "content": "import { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render } from '@testing-library/react';\nimport { AspectRatio } from './aspect-ratio';\nimport { afterEach, describe, it, beforeEach, expect } from 'vitest';\n\nconst RATIO = 1 / 2;\n\ndescribe('given a default Arrow', () => {\n  let rendered: RenderResult;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    rendered = render(\n      <div style={{ width: 500 }}>\n        <AspectRatio ratio={RATIO}>\n          <span>Hello</span>\n        </AspectRatio>\n      </div>,\n    );\n  });\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n});\n"
  },
  {
    "path": "packages/react/aspect-ratio/src/aspect-ratio.tsx",
    "content": "import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * AspectRatio\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'AspectRatio';\n\ntype AspectRatioElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface AspectRatioProps extends PrimitiveDivProps {\n  ratio?: number;\n}\n\nconst AspectRatio = React.forwardRef<AspectRatioElement, AspectRatioProps>(\n  (props, forwardedRef) => {\n    const { ratio = 1 / 1, style, ...aspectRatioProps } = props;\n    return (\n      <div\n        style={{\n          // ensures inner element is contained\n          position: 'relative',\n          // ensures padding bottom trick maths works\n          width: '100%',\n          paddingBottom: `${100 / ratio}%`,\n        }}\n        data-radix-aspect-ratio-wrapper=\"\"\n      >\n        <Primitive.div\n          {...aspectRatioProps}\n          ref={forwardedRef}\n          style={{\n            ...style,\n            // ensures children expand in ratio\n            position: 'absolute',\n            top: 0,\n            right: 0,\n            bottom: 0,\n            left: 0,\n          }}\n        />\n      </div>\n    );\n  },\n);\n\nAspectRatio.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = AspectRatio;\n\nexport {\n  AspectRatio,\n  //\n  Root,\n};\nexport type { AspectRatioProps };\n"
  },
  {
    "path": "packages/react/aspect-ratio/src/index.ts",
    "content": "export {\n  AspectRatio,\n  //\n  Root,\n} from './aspect-ratio';\nexport type { AspectRatioProps } from './aspect-ratio';\n"
  },
  {
    "path": "packages/react/aspect-ratio/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/avatar/CHANGELOG.md",
    "content": "# @radix-ui/react-avatar\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.10\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-use-is-hydrated@0.1.0`\n\n## 1.1.6\n\n- Fix breaking `useSyncExternalStore` import in Avatar\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/avatar/README.md",
    "content": "# `react-avatar`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/avatar).\n"
  },
  {
    "path": "packages/react/avatar/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/avatar/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-avatar\",\n  \"version\": \"1.1.11\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-is-hydrated\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/avatar/src/avatar.test.tsx",
    "content": "import { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render, waitFor } from '@testing-library/react';\nimport * as Avatar from './avatar';\nimport * as React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { afterEach, describe, it, beforeAll, afterAll, beforeEach, vi, expect } from 'vitest';\n\nconst ROOT_TEST_ID = 'avatar-root';\nconst FALLBACK_TEXT = 'AB';\nconst IMAGE_ALT_TEXT = 'Fake Avatar';\nconst DELAY = 300;\nconst cache = new Set<string>();\n\ndescribe('given an Avatar with fallback and no image', () => {\n  afterEach(cleanup);\n\n  const ui = (\n    <Avatar.Root data-testid={ROOT_TEST_ID}>\n      <Avatar.Fallback>{FALLBACK_TEXT}</Avatar.Fallback>\n    </Avatar.Root>\n  );\n\n  it('should have no accessibility violations', async () => {\n    const rendered = render(ui);\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  it('should work with SSR', () => {\n    const container = document.createElement('div');\n    document.body.appendChild(container);\n    container.innerHTML = renderToString(ui);\n    const rendered = render(ui, { hydrate: true, container });\n    const fallback = rendered.queryByText(FALLBACK_TEXT);\n    expect(fallback).toBeInTheDocument();\n  });\n});\n\ndescribe('given an Avatar with fallback and an image', () => {\n  let rendered: RenderResult;\n  let image: HTMLElement | null = null;\n  const originalGlobalImage = window.Image;\n  const ui = (src?: string) => (\n    <Avatar.Root data-testid={ROOT_TEST_ID}>\n      <Avatar.Fallback>{FALLBACK_TEXT}</Avatar.Fallback>\n      <Avatar.Image src={src} alt={IMAGE_ALT_TEXT} />\n    </Avatar.Root>\n  );\n\n  beforeAll(() => {\n    (window.Image as any) = MockImage;\n  });\n\n  afterAll(() => {\n    window.Image = originalGlobalImage;\n    vi.restoreAllMocks();\n  });\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    cache.clear();\n    rendered = render(ui('/test.png'));\n  });\n\n  it('should render the fallback initially', () => {\n    const fallback = rendered.queryByText(FALLBACK_TEXT);\n    expect(fallback).toBeInTheDocument();\n  });\n\n  it('should not render the image initially', () => {\n    image = rendered.queryByRole('img');\n    expect(image).not.toBeInTheDocument();\n  });\n\n  it('should render the image after it has loaded', async () => {\n    image = await rendered.findByRole('img');\n    expect(image).toBeInTheDocument();\n  });\n\n  it('should have alt text on the image', async () => {\n    image = await rendered.findByAltText(IMAGE_ALT_TEXT);\n    expect(image).toBeInTheDocument();\n  });\n\n  it('does not leak event listeners', async () => {\n    rendered.unmount();\n    const addEventListenerSpy = vi.spyOn(window.Image.prototype, 'addEventListener');\n    const removeEventListenerSpy = vi.spyOn(window.Image.prototype, 'removeEventListener');\n    rendered = render(ui('/test.png'));\n    rendered.unmount();\n    expect(addEventListenerSpy.mock.calls.length).toEqual(removeEventListenerSpy.mock.calls.length);\n  });\n\n  it('can handle changing src', async () => {\n    image = await rendered.findByRole('img');\n    expect(image).toBeInTheDocument();\n    rendered.rerender(ui('/test2.png'));\n    image = rendered.queryByRole('img');\n    expect(image).not.toBeInTheDocument();\n    image = await rendered.findByRole('img');\n    expect(image).toBeInTheDocument();\n  });\n\n  it('should render the image immediately after it is cached', async () => {\n    image = await rendered.findByRole('img');\n    expect(image).toBeInTheDocument();\n\n    rendered.unmount();\n    rendered = render(ui('/test.png'));\n    image = rendered.queryByRole('img');\n    expect(image).toBeInTheDocument();\n  });\n\n  it('should not render image with no src', async () => {\n    rendered.rerender(ui());\n    image = rendered.queryByRole('img');\n    expect(image).not.toBeInTheDocument();\n    rendered.unmount();\n    rendered = render(ui());\n    image = rendered.queryByRole('img');\n    expect(image).not.toBeInTheDocument();\n  });\n\n  it('should not render image with empty string as src', async () => {\n    rendered.rerender(ui(''));\n    image = rendered.queryByRole('img');\n    expect(image).not.toBeInTheDocument();\n    rendered.unmount();\n    rendered = render(ui(''));\n    image = rendered.queryByRole('img');\n    expect(image).not.toBeInTheDocument();\n  });\n\n  it('should show fallback if image has no data', async () => {\n    rendered.unmount();\n    const spy = vi.spyOn(window.Image.prototype, 'naturalWidth', 'get');\n    spy.mockReturnValue(0);\n    rendered = render(ui('/test.png'));\n    const fallback = rendered.queryByText(FALLBACK_TEXT);\n    expect(fallback).toBeInTheDocument();\n    spy.mockRestore();\n  });\n\n  describe('SSR', () => {\n    afterEach(cleanup);\n\n    function renderAndHydrate(ui: React.ReactElement) {\n      const container = document.createElement('div');\n      document.body.appendChild(container);\n      container.innerHTML = renderToString(ui);\n      return render(ui, { hydrate: true, container });\n    }\n\n    it('can render with working image', async () => {\n      const rendered = renderAndHydrate(ui('/test.png'));\n      let image = rendered.queryByRole('img');\n      expect(image).not.toBeInTheDocument();\n\n      image = await rendered.findByRole('img');\n      expect(image).toBeInTheDocument();\n    });\n\n    it('can render with no src', () => {\n      const rendered = renderAndHydrate(ui());\n      const image = rendered.queryByRole('img');\n      expect(image).not.toBeInTheDocument();\n      const fallback = rendered.queryByText(FALLBACK_TEXT);\n      expect(fallback).toBeInTheDocument();\n    });\n  });\n});\n\ndescribe('given an Avatar with fallback and delayed render', () => {\n  let rendered: RenderResult;\n  let fallback: HTMLElement | null;\n\n  beforeEach(() => {\n    rendered = render(\n      <Avatar.Root data-testid={ROOT_TEST_ID}>\n        <Avatar.Fallback delayMs={DELAY}>{FALLBACK_TEXT}</Avatar.Fallback>\n      </Avatar.Root>,\n    );\n  });\n\n  afterEach(cleanup);\n\n  it('should not render a fallback immediately', () => {\n    fallback = rendered.queryByText(FALLBACK_TEXT);\n    expect(fallback).not.toBeInTheDocument();\n  });\n\n  it('should render a fallback after the delay', async () => {\n    fallback = rendered.queryByText(FALLBACK_TEXT);\n    expect(fallback).not.toBeInTheDocument();\n    fallback = await rendered.findByText(FALLBACK_TEXT);\n    expect(fallback).toBeInTheDocument();\n  });\n});\n\ndescribe('given an Avatar with an image that only works when referrerPolicy=no-referrer', () => {\n  let rendered: RenderResult;\n  const originalGlobalImage = window.Image;\n  const ui = (src?: string, referrerPolicy?: React.HTMLAttributeReferrerPolicy) => (\n    <Avatar.Root data-testid={ROOT_TEST_ID}>\n      <Avatar.Fallback>{FALLBACK_TEXT}</Avatar.Fallback>\n      <Avatar.Image src={src} alt={IMAGE_ALT_TEXT} referrerPolicy={referrerPolicy} />\n    </Avatar.Root>\n  );\n\n  beforeAll(() => {\n    (window.Image as any) = class MockNoReferrerImage extends MockImage {\n      referrerPolicy: string | undefined;\n\n      onSrcChange() {\n        setTimeout(() => {\n          if (this.referrerPolicy === 'no-referrer') {\n            this.dispatchEvent(new Event('load'));\n          } else {\n            this.dispatchEvent(new Event('error'));\n          }\n        }, DELAY);\n      }\n    };\n  });\n\n  afterAll(() => {\n    window.Image = originalGlobalImage;\n    vi.restoreAllMocks();\n  });\n\n  afterEach(cleanup);\n\n  describe('referrerPolicy=no-referrer', () => {\n    beforeEach(() => {\n      cache.clear();\n      rendered = render(ui('/test.png', 'no-referrer'));\n    });\n\n    it('should render the fallback initially', () => {\n      const fallback = rendered.queryByText(FALLBACK_TEXT);\n      expect(fallback).toBeInTheDocument();\n    });\n\n    it('should not render the image initially', () => {\n      const image = rendered.queryByRole('img');\n      expect(image).not.toBeInTheDocument();\n    });\n\n    it('should render the image after it has loaded', async () => {\n      const image = await rendered.findByRole('img');\n      expect(image).toBeInTheDocument();\n    });\n\n    it('should have alt text on the image', async () => {\n      const image = await rendered.findByAltText(IMAGE_ALT_TEXT);\n      expect(image).toBeInTheDocument();\n    });\n  });\n\n  describe('referrerPolicy=origin', () => {\n    beforeEach(() => {\n      cache.clear();\n      rendered = render(ui('/test.png', 'origin'));\n    });\n\n    it('should render the fallback initially', () => {\n      const fallback = rendered.queryByText(FALLBACK_TEXT);\n      expect(fallback).toBeInTheDocument();\n    });\n\n    it('should never render the image', async () => {\n      try {\n        await waitFor(() => rendered.getByRole('img'), {\n          timeout: DELAY + 100,\n        });\n      } catch (error) {\n        expect(error).toBeInstanceOf(Error);\n        expect((error as Error).name).toBe('TestingLibraryElementError');\n        expect((error as Error).message).toContain('Unable to find role=\"img\"');\n      }\n    });\n  });\n});\n\nclass MockImage extends EventTarget {\n  _src: string = '';\n\n  constructor() {\n    super();\n    return this;\n  }\n\n  get src() {\n    return this._src;\n  }\n\n  set src(src: string) {\n    if (!src) {\n      return;\n    }\n    this._src = src;\n    this.onSrcChange();\n  }\n\n  get complete() {\n    return !this.src || cache.has(this.src);\n  }\n\n  get naturalWidth() {\n    return this.complete ? 300 : 0;\n  }\n\n  onSrcChange() {\n    setTimeout(() => {\n      this.dispatchEvent(new Event('load'));\n      cache.add(this.src);\n    }, DELAY);\n  }\n}\n"
  },
  {
    "path": "packages/react/avatar/src/avatar.tsx",
    "content": "import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nconst AVATAR_NAME = 'Avatar';\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope };\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';\n\ntype AvatarContextValue = {\n  imageLoadingStatus: ImageLoadingStatus;\n  onImageLoadingStatusChange(status: ImageLoadingStatus): void;\n};\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME);\n\ntype AvatarElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface AvatarProps extends PrimitiveSpanProps {}\n\nconst Avatar = React.forwardRef<AvatarElement, AvatarProps>(\n  (props: ScopedProps<AvatarProps>, forwardedRef) => {\n    const { __scopeAvatar, ...avatarProps } = props;\n    const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');\n    return (\n      <AvatarProvider\n        scope={__scopeAvatar}\n        imageLoadingStatus={imageLoadingStatus}\n        onImageLoadingStatusChange={setImageLoadingStatus}\n      >\n        <Primitive.span {...avatarProps} ref={forwardedRef} />\n      </AvatarProvider>\n    );\n  },\n);\n\nAvatar.displayName = AVATAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage';\n\ntype AvatarImageElement = React.ComponentRef<typeof Primitive.img>;\ntype PrimitiveImageProps = React.ComponentPropsWithoutRef<typeof Primitive.img>;\ninterface AvatarImageProps extends PrimitiveImageProps {\n  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;\n}\n\nconst AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(\n  (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n    const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props;\n    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n    const imageLoadingStatus = useImageLoadingStatus(src, imageProps);\n    const handleLoadingStatusChange = useCallbackRef((status: ImageLoadingStatus) => {\n      onLoadingStatusChange(status);\n      context.onImageLoadingStatusChange(status);\n    });\n\n    useLayoutEffect(() => {\n      if (imageLoadingStatus !== 'idle') {\n        handleLoadingStatusChange(imageLoadingStatus);\n      }\n    }, [imageLoadingStatus, handleLoadingStatusChange]);\n\n    return imageLoadingStatus === 'loaded' ? (\n      <Primitive.img {...imageProps} ref={forwardedRef} src={src} />\n    ) : null;\n  },\n);\n\nAvatarImage.displayName = IMAGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback';\n\ntype AvatarFallbackElement = React.ComponentRef<typeof Primitive.span>;\ninterface AvatarFallbackProps extends PrimitiveSpanProps {\n  delayMs?: number;\n}\n\nconst AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(\n  (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n    const { __scopeAvatar, delayMs, ...fallbackProps } = props;\n    const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n    const [canRender, setCanRender] = React.useState(delayMs === undefined);\n\n    React.useEffect(() => {\n      if (delayMs !== undefined) {\n        const timerId = window.setTimeout(() => setCanRender(true), delayMs);\n        return () => window.clearTimeout(timerId);\n      }\n    }, [delayMs]);\n\n    return canRender && context.imageLoadingStatus !== 'loaded' ? (\n      <Primitive.span {...fallbackProps} ref={forwardedRef} />\n    ) : null;\n  },\n);\n\nAvatarFallback.displayName = FALLBACK_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction resolveLoadingStatus(image: HTMLImageElement | null, src?: string): ImageLoadingStatus {\n  if (!image) {\n    return 'idle';\n  }\n  if (!src) {\n    return 'error';\n  }\n  if (image.src !== src) {\n    image.src = src;\n  }\n  return image.complete && image.naturalWidth > 0 ? 'loaded' : 'loading';\n}\n\nfunction useImageLoadingStatus(\n  src: string | undefined,\n  { referrerPolicy, crossOrigin }: AvatarImageProps,\n) {\n  const isHydrated = useIsHydrated();\n  const imageRef = React.useRef<HTMLImageElement | null>(null);\n  const image = (() => {\n    if (!isHydrated) return null;\n    if (!imageRef.current) {\n      imageRef.current = new window.Image();\n    }\n    return imageRef.current;\n  })();\n\n  const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>(() =>\n    resolveLoadingStatus(image, src),\n  );\n\n  useLayoutEffect(() => {\n    setLoadingStatus(resolveLoadingStatus(image, src));\n  }, [image, src]);\n\n  useLayoutEffect(() => {\n    const updateStatus = (status: ImageLoadingStatus) => () => {\n      setLoadingStatus(status);\n    };\n\n    if (!image) return;\n\n    const handleLoad = updateStatus('loaded');\n    const handleError = updateStatus('error');\n    image.addEventListener('load', handleLoad);\n    image.addEventListener('error', handleError);\n    if (referrerPolicy) {\n      image.referrerPolicy = referrerPolicy;\n    }\n    if (typeof crossOrigin === 'string') {\n      image.crossOrigin = crossOrigin;\n    }\n\n    return () => {\n      image.removeEventListener('load', handleLoad);\n      image.removeEventListener('error', handleError);\n    };\n  }, [image, crossOrigin, referrerPolicy]);\n\n  return loadingStatus;\n}\n\nconst Root = Avatar;\nconst Image = AvatarImage;\nconst Fallback = AvatarFallback;\n\nexport {\n  createAvatarScope,\n  //\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  //\n  Root,\n  Image,\n  Fallback,\n};\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps };\n"
  },
  {
    "path": "packages/react/avatar/src/index.ts",
    "content": "'use client';\nexport {\n  createAvatarScope,\n  //\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  //\n  Root,\n  Image,\n  Fallback,\n} from './avatar';\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './avatar';\n"
  },
  {
    "path": "packages/react/avatar/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/checkbox/CHANGELOG.md",
    "content": "# @radix-ui/react-checkbox\n\n## 1.3.3\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.3.2\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.3.1\n\n- Fix type error emitted in build artifacts\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.3.0\n\n- Add unstable `Provider`, `Trigger` and `BubbleInput` parts to Checkbox ([#3459](https://github.com/radix-ui/primitives/pull/3459))\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.2.3\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.2.2\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.2.1\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.2.0\n\n- 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.\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/checkbox/README.md",
    "content": "# `react-checkbox`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/checkbox).\n"
  },
  {
    "path": "packages/react/checkbox/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/checkbox/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-checkbox\",\n  \"version\": \"1.3.3\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-previous\": \"workspace:*\",\n    \"@radix-ui/react-use-size\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/checkbox/src/checkbox.test.tsx",
    "content": "import * as React from 'react';\nimport { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render, fireEvent, screen, waitFor, act } from '@testing-library/react';\nimport * as Checkbox from '.';\nimport { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';\n\nconst CHECKBOX_ROLE = 'checkbox';\nconst INDICATOR_TEST_ID = 'checkbox-indicator';\n\nglobal.ResizeObserver = class ResizeObserver {\n  cb: any;\n  constructor(cb: any) {\n    this.cb = cb;\n  }\n  observe() {\n    this.cb([{ borderBoxSize: { inlineSize: 0, blockSize: 0 } }]);\n  }\n  unobserve() {}\n  disconnect() {}\n};\n\ndescribe('Checkbox', () => {\n  afterEach(cleanup);\n\n  describe('given a default Checkbox', () => {\n    let rendered: RenderResult;\n    beforeEach(() => {\n      rendered = render(\n        <Checkbox.unstable_Provider>\n          <Checkbox.unstable_Trigger aria-label=\"basic checkbox\">\n            <Checkbox.Indicator data-testid={INDICATOR_TEST_ID} />\n          </Checkbox.unstable_Trigger>\n        </Checkbox.unstable_Provider>,\n      );\n    });\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should toggle the indicator when clicked', async () => {\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n      await act(async () => fireEvent.click(checkbox));\n\n      let indicator = screen.queryByTestId(INDICATOR_TEST_ID);\n      expect(indicator).toBeVisible();\n\n      await act(async () => fireEvent.click(checkbox));\n      indicator = screen.queryByTestId(INDICATOR_TEST_ID);\n      expect(indicator).not.toBeInTheDocument();\n    });\n  });\n\n  describe('given a disabled Checkbox', () => {\n    let rendered: RenderResult;\n    beforeEach(() => {\n      rendered = render(\n        <Checkbox.unstable_Provider disabled>\n          <Checkbox.unstable_Trigger aria-label=\"basic checkbox\">\n            <Checkbox.Indicator data-testid={INDICATOR_TEST_ID} />\n          </Checkbox.unstable_Trigger>\n        </Checkbox.unstable_Provider>,\n      );\n    });\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should not toggle the indicator when clicked', async () => {\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n\n      await act(async () => fireEvent.click(checkbox));\n      const indicator = screen.queryByTestId(INDICATOR_TEST_ID);\n      expect(indicator).not.toBeInTheDocument();\n\n      await act(async () => fireEvent.click(checkbox));\n      expect(indicator).not.toBeInTheDocument();\n    });\n  });\n\n  describe('given an uncontrolled `checked` Checkbox', () => {\n    const onCheckedChange = vi.fn();\n    let rendered: RenderResult;\n\n    beforeEach(() => {\n      rendered = render(\n        <Checkbox.unstable_Provider defaultChecked onCheckedChange={onCheckedChange}>\n          <Checkbox.unstable_Trigger aria-label=\"basic checkbox\">\n            <Checkbox.Indicator data-testid={INDICATOR_TEST_ID} />\n          </Checkbox.unstable_Trigger>\n        </Checkbox.unstable_Provider>,\n      );\n    });\n\n    afterEach(cleanup);\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should render a visible indicator', () => {\n      const indicator = screen.queryByTestId(INDICATOR_TEST_ID);\n      expect(indicator).toBeVisible();\n    });\n\n    it('should toggle the indicator when clicked', async () => {\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n      await act(async () => fireEvent.click(checkbox));\n      let indicator = screen.queryByTestId(INDICATOR_TEST_ID);\n      expect(indicator).not.toBeInTheDocument();\n\n      await act(async () => fireEvent.click(checkbox));\n      indicator = screen.queryByTestId(INDICATOR_TEST_ID);\n      expect(indicator).toBeVisible();\n    });\n\n    it('should call `onCheckedChange` prop', () => {\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n      fireEvent.click(checkbox);\n      waitFor(() => {\n        expect(onCheckedChange).toHaveBeenCalledWith(false);\n      });\n    });\n  });\n\n  describe('given a controlled Checkbox', () => {\n    const onCheckedChange = vi.fn();\n    let rendered: RenderResult;\n\n    function ControlledCheckbox() {\n      const [checked, setChecked] = React.useState(false);\n      const [blockToggle, setBlockToggle] = React.useState(false);\n      return (\n        <div>\n          <Checkbox.unstable_Provider\n            checked={checked}\n            onCheckedChange={(checked) => {\n              onCheckedChange(checked);\n              if (!blockToggle) {\n                setChecked(checked);\n              }\n            }}\n          >\n            <Checkbox.unstable_Trigger aria-label=\"basic checkbox\">\n              <Checkbox.Indicator data-testid={INDICATOR_TEST_ID} />\n            </Checkbox.unstable_Trigger>\n          </Checkbox.unstable_Provider>\n          <button type=\"button\" onClick={() => setChecked((prev) => !prev)}>\n            Toggle checkbox\n          </button>\n          <button type=\"button\" onClick={() => setBlockToggle((prev) => !prev)}>\n            {blockToggle ? 'Unblock' : 'Block'} checkbox\n          </button>\n        </div>\n      );\n    }\n\n    beforeEach(() => {\n      rendered = render(<ControlledCheckbox />);\n    });\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should toggle the indicator', async () => {\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n      await act(async () => fireEvent.click(checkbox));\n      const indicator = screen.queryByTestId(INDICATOR_TEST_ID);\n      expect(indicator).toBeVisible();\n    });\n\n    it('should call `onCheckedChange` prop', async () => {\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n      await act(async () => fireEvent.click(checkbox));\n      expect(onCheckedChange).toHaveBeenCalledWith(true);\n    });\n\n    it('should not toggle unless state is updated', async () => {\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n      const blocker = screen.getByText('Block checkbox');\n      await act(async () => fireEvent.click(blocker));\n      await act(async () => fireEvent.click(checkbox));\n      const indicator = screen.queryByTestId(INDICATOR_TEST_ID);\n      expect(indicator).not.toBeInTheDocument();\n    });\n  });\n\n  describe('given an uncontrolled Checkbox in form with bubble input', () => {\n    const onChange = vi.fn();\n\n    it('should receive change event with next state', async () => {\n      render(\n        <form\n          onChange={(event) => {\n            const target = event.target as HTMLInputElement;\n            onChange(target.checked);\n          }}\n        >\n          <Checkbox.unstable_Provider>\n            <Checkbox.unstable_Trigger aria-label=\"basic checkbox\">\n              <Checkbox.Indicator data-testid={INDICATOR_TEST_ID} />\n            </Checkbox.unstable_Trigger>\n            <Checkbox.unstable_BubbleInput />\n          </Checkbox.unstable_Provider>\n        </form>,\n      );\n\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n      act(() => fireEvent.click(checkbox));\n      expect(onChange).toHaveBeenCalledWith(true);\n    });\n\n    describe('when `defaultChecked` is true', () => {\n      it('should receive change event with next state', async () => {\n        console.log(parseInt(React.version));\n        render(\n          <form\n            onChange={(event) => {\n              const target = event.target as HTMLInputElement;\n              onChange(target.checked);\n            }}\n          >\n            <Checkbox.unstable_Provider defaultChecked>\n              <Checkbox.unstable_Trigger aria-label=\"basic checkbox\">\n                <Checkbox.Indicator data-testid={INDICATOR_TEST_ID} />\n              </Checkbox.unstable_Trigger>\n              <Checkbox.unstable_BubbleInput />\n            </Checkbox.unstable_Provider>\n          </form>,\n        );\n\n        const checkbox = screen.getByRole(CHECKBOX_ROLE);\n        act(() => fireEvent.click(checkbox));\n        expect(onChange).toHaveBeenCalledWith(false);\n      });\n    });\n  });\n\n  describe('given a controlled Checkbox in form with bubble input', () => {\n    const onChange = vi.fn();\n\n    function ControlledCheckbox() {\n      const [checked, setChecked] = React.useState(false);\n      return (\n        <>\n          <Checkbox.unstable_Provider checked={checked} onCheckedChange={setChecked as any}>\n            <Checkbox.unstable_Trigger aria-label=\"basic checkbox\">\n              <Checkbox.Indicator data-testid={INDICATOR_TEST_ID} />\n            </Checkbox.unstable_Trigger>\n            <Checkbox.unstable_BubbleInput />\n          </Checkbox.unstable_Provider>\n          <button type=\"button\" onClick={() => setChecked((prev) => !prev)}>\n            Toggle checkbox\n          </button>\n        </>\n      );\n    }\n\n    it('should receive change event with controlled state when clicked', async () => {\n      render(\n        <form\n          onChange={(event) => {\n            const target = event.target as HTMLInputElement;\n            onChange(target.checked);\n          }}\n        >\n          <ControlledCheckbox />\n        </form>,\n      );\n\n      const checkbox = screen.getByRole(CHECKBOX_ROLE);\n      act(() => fireEvent.click(checkbox));\n      expect(onChange).toHaveBeenCalledWith(true);\n\n      act(() => fireEvent.click(checkbox));\n      expect(onChange).toHaveBeenCalledWith(false);\n    });\n\n    it('should receive change event with controlled state when set externally', async () => {\n      render(\n        <form\n          onChange={(event) => {\n            const target = event.target as HTMLInputElement;\n            onChange(target.checked);\n          }}\n        >\n          <ControlledCheckbox />\n        </form>,\n      );\n\n      const toggleButton = screen.getByText('Toggle checkbox');\n      act(() => fireEvent.click(toggleButton));\n      expect(onChange).toHaveBeenCalledWith(false);\n    });\n  });\n});\n\ndescribe('Legacy Checkbox', () => {\n  describe('given a default Checkbox', () => {\n    let rendered: RenderResult;\n    let checkbox: HTMLElement;\n    let indicator: HTMLElement | null;\n\n    beforeEach(() => {\n      rendered = render(<LegacyCheckbox />);\n      checkbox = rendered.getByRole(CHECKBOX_ROLE);\n      indicator = rendered.queryByTestId(INDICATOR_TEST_ID);\n    });\n\n    afterEach(cleanup);\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    describe('when clicking the checkbox', () => {\n      beforeEach(async () => {\n        fireEvent.click(checkbox);\n        indicator = rendered.queryByTestId(INDICATOR_TEST_ID);\n      });\n\n      it('should render a visible indicator', () => {\n        expect(indicator).toBeVisible();\n      });\n\n      describe('and clicking the checkbox again', () => {\n        beforeEach(async () => {\n          fireEvent.click(checkbox);\n        });\n\n        it('should remove the indicator', () => {\n          expect(indicator).not.toBeInTheDocument();\n        });\n      });\n    });\n  });\n\n  describe('given a disabled Checkbox', () => {\n    let rendered: RenderResult;\n\n    beforeEach(() => {\n      rendered = render(<LegacyCheckbox disabled />);\n    });\n\n    afterEach(cleanup);\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n  });\n\n  describe('given an uncontrolled `checked` Checkbox', () => {\n    let rendered: RenderResult;\n    let checkbox: HTMLElement;\n    let indicator: HTMLElement | null;\n    const onCheckedChange = vi.fn();\n\n    beforeEach(() => {\n      rendered = render(<LegacyCheckbox defaultChecked onCheckedChange={onCheckedChange} />);\n      checkbox = rendered.getByRole(CHECKBOX_ROLE);\n      indicator = rendered.queryByTestId(INDICATOR_TEST_ID);\n    });\n\n    afterEach(cleanup);\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    describe('when clicking the checkbox', () => {\n      beforeEach(async () => {\n        fireEvent.click(checkbox);\n      });\n\n      it('should remove the indicator', () => {\n        expect(indicator).not.toBeInTheDocument();\n      });\n\n      it('should call `onCheckedChange` prop', () => {\n        expect(onCheckedChange).toHaveBeenCalled();\n      });\n    });\n  });\n\n  describe('given a controlled `checked` Checkbox', () => {\n    let rendered: RenderResult;\n    let checkbox: HTMLElement;\n    const onCheckedChange = vi.fn();\n\n    beforeEach(() => {\n      rendered = render(<LegacyCheckbox checked onCheckedChange={onCheckedChange} />);\n      checkbox = rendered.getByRole(CHECKBOX_ROLE);\n    });\n\n    afterEach(cleanup);\n\n    describe('when clicking the checkbox', () => {\n      beforeEach(() => {\n        fireEvent.click(checkbox);\n      });\n\n      it('should call `onCheckedChange` prop', () => {\n        expect(onCheckedChange).toHaveBeenCalled();\n      });\n    });\n  });\n\n  describe('given an uncontrolled Checkbox in form', () => {\n    afterEach(cleanup);\n\n    describe('when clicking the checkbox', () => {\n      it('should receive change event with target `defaultChecked` same as the `defaultChecked` prop of Checkbox', () =>\n        new Promise((done) => {\n          const rendered = render(\n            <form\n              onChange={(event) => {\n                const target = event.target as HTMLInputElement;\n                expect(target.defaultChecked).toBe(true);\n              }}\n            >\n              <LegacyCheckbox defaultChecked />\n            </form>,\n          );\n          const checkbox = rendered.getByRole(CHECKBOX_ROLE);\n          fireEvent.click(checkbox);\n          rendered.rerender(\n            <form\n              onChange={(event) => {\n                const target = event.target as HTMLInputElement;\n                expect(target.defaultChecked).toBe(false);\n                done(null);\n              }}\n            >\n              <LegacyCheckbox defaultChecked={false} />\n            </form>,\n          );\n          fireEvent.click(checkbox);\n        }));\n    });\n  });\n\n  describe('given a controlled Checkbox in a form', () => {\n    afterEach(cleanup);\n\n    describe('when clicking the checkbox', () => {\n      it('should receive change event with target `defaultChecked` same as initial value of `checked` of Checkbox', () =>\n        new Promise((done) => {\n          const rendered = render(\n            <form\n              onChange={(event) => {\n                const target = event.target as HTMLInputElement;\n                expect(target.defaultChecked).toBe(true);\n              }}\n            >\n              <LegacyCheckbox checked />\n            </form>,\n          );\n          const checkbox = rendered.getByRole(CHECKBOX_ROLE);\n          fireEvent.click(checkbox);\n          rendered.rerender(\n            <form\n              onChange={(event) => {\n                const target = event.target as HTMLInputElement;\n                expect(target.defaultChecked).toBe(true);\n                done(null);\n              }}\n            >\n              <LegacyCheckbox checked={false} />\n            </form>,\n          );\n          fireEvent.click(checkbox);\n        }));\n    });\n  });\n});\n\nfunction LegacyCheckbox(props: React.ComponentProps<typeof Checkbox.Root>) {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  React.useEffect(() => {\n    // We use the `hidden` attribute to hide the nested input from both sighted users and the\n    // accessibility tree. This is perfectly valid so long as users don't override the display of\n    // `hidden` in CSS. Unfortunately axe doesn't recognize this, so we get a violation because the\n    // input doesn't have a label. This adds an additional `aria-hidden` attribute to the input to\n    // get around that.\n    // https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/\n    containerRef.current?.querySelector('input')?.setAttribute('aria-hidden', 'true');\n  }, []);\n  return (\n    <div ref={containerRef}>\n      <Checkbox.Root aria-label=\"basic checkbox\" {...props}>\n        <Checkbox.Indicator data-testid={INDICATOR_TEST_ID} />\n      </Checkbox.Root>\n    </div>\n  );\n}\n"
  },
  {
    "path": "packages/react/checkbox/src/checkbox.tsx",
    "content": "import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst CHECKBOX_NAME = 'Checkbox';\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope };\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);\n\ntype CheckedState = boolean | 'indeterminate';\n\ntype CheckboxContextValue<State extends CheckedState | boolean = CheckedState> = {\n  checked: State | boolean;\n  setChecked: React.Dispatch<React.SetStateAction<State | boolean>>;\n  disabled: boolean | undefined;\n  control: HTMLButtonElement | null;\n  setControl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;\n  name: string | undefined;\n  form: string | undefined;\n  value: string | number | readonly string[];\n  hasConsumerStoppedPropagationRef: React.RefObject<boolean>;\n  required: boolean | undefined;\n  defaultChecked: boolean | undefined;\n  isFormControl: boolean;\n  bubbleInput: HTMLInputElement | null;\n  setBubbleInput: React.Dispatch<React.SetStateAction<HTMLInputElement | null>>;\n};\n\nconst [CheckboxProviderImpl, useCheckboxContext] =\n  createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface CheckboxProviderProps<State extends CheckedState = CheckedState> {\n  checked?: State | boolean;\n  defaultChecked?: State | boolean;\n  required?: boolean;\n  onCheckedChange?(checked: State | boolean): void;\n  name?: string;\n  form?: string;\n  disabled?: boolean;\n  value?: string | number | readonly string[];\n  children?: React.ReactNode;\n}\n\nfunction CheckboxProvider<State extends CheckedState = CheckedState>(\n  props: ScopedProps<CheckboxProviderProps<State>>,\n) {\n  const {\n    __scopeCheckbox,\n    checked: checkedProp,\n    children,\n    defaultChecked,\n    disabled,\n    form,\n    name,\n    onCheckedChange,\n    required,\n    value = 'on',\n    // @ts-expect-error\n    internal_do_not_use_render,\n  } = props;\n\n  const [checked, setChecked] = useControllableState({\n    prop: checkedProp,\n    defaultProp: defaultChecked ?? false,\n    onChange: onCheckedChange,\n    caller: CHECKBOX_NAME,\n  });\n  const [control, setControl] = React.useState<HTMLButtonElement | null>(null);\n  const [bubbleInput, setBubbleInput] = React.useState<HTMLInputElement | null>(null);\n  const hasConsumerStoppedPropagationRef = React.useRef(false);\n  const isFormControl = control\n    ? !!form || !!control.closest('form')\n    : // We set this to true by default so that events bubble to forms without JS (SSR)\n      true;\n\n  const context: CheckboxContextValue<State> = {\n    checked: checked,\n    disabled: disabled,\n    setChecked: setChecked,\n    control: control,\n    setControl: setControl,\n    name: name,\n    form: form,\n    value: value,\n    hasConsumerStoppedPropagationRef: hasConsumerStoppedPropagationRef,\n    required: required,\n    defaultChecked: isIndeterminate(defaultChecked) ? false : defaultChecked,\n    isFormControl: isFormControl,\n    bubbleInput,\n    setBubbleInput,\n  };\n\n  return (\n    <CheckboxProviderImpl\n      scope={__scopeCheckbox}\n      {...(context as unknown as CheckboxContextValue<CheckedState>)}\n    >\n      {isFunction(internal_do_not_use_render) ? internal_do_not_use_render(context) : children}\n    </CheckboxProviderImpl>\n  );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CheckboxTrigger';\n\ninterface CheckboxTriggerProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof Primitive.button>,\n    keyof CheckboxProviderProps\n  > {\n  children?: React.ReactNode;\n}\n\nconst CheckboxTrigger = React.forwardRef<HTMLButtonElement, CheckboxTriggerProps>(\n  (\n    { __scopeCheckbox, onKeyDown, onClick, ...checkboxProps }: ScopedProps<CheckboxTriggerProps>,\n    forwardedRef,\n  ) => {\n    const {\n      control,\n      value,\n      disabled,\n      checked,\n      required,\n      setControl,\n      setChecked,\n      hasConsumerStoppedPropagationRef,\n      isFormControl,\n      bubbleInput,\n    } = useCheckboxContext(TRIGGER_NAME, __scopeCheckbox);\n    const composedRefs = useComposedRefs(forwardedRef, setControl);\n\n    const initialCheckedStateRef = React.useRef(checked);\n    React.useEffect(() => {\n      const form = control?.form;\n      if (form) {\n        const reset = () => setChecked(initialCheckedStateRef.current);\n        form.addEventListener('reset', reset);\n        return () => form.removeEventListener('reset', reset);\n      }\n    }, [control, setChecked]);\n\n    return (\n      <Primitive.button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n        aria-required={required}\n        data-state={getState(checked)}\n        data-disabled={disabled ? '' : undefined}\n        disabled={disabled}\n        value={value}\n        {...checkboxProps}\n        ref={composedRefs}\n        onKeyDown={composeEventHandlers(onKeyDown, (event) => {\n          // According to WAI ARIA, Checkboxes don't activate on enter keypress\n          if (event.key === 'Enter') event.preventDefault();\n        })}\n        onClick={composeEventHandlers(onClick, (event) => {\n          setChecked((prevChecked) => (isIndeterminate(prevChecked) ? true : !prevChecked));\n          if (bubbleInput && isFormControl) {\n            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n            // if checkbox has a bubble input and is a form control, stop\n            // propagation from the button so that we only propagate one click\n            // event (from the input). We propagate changes from an input so\n            // that native form validation works and form events reflect\n            // checkbox updates.\n            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n          }\n        })}\n      />\n    );\n  },\n);\n\nCheckboxTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\ntype CheckboxElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CheckboxProps extends Omit<PrimitiveButtonProps, 'checked' | 'defaultChecked'> {\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  required?: boolean;\n  onCheckedChange?(checked: CheckedState): void;\n}\n\nconst Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(\n  (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n    const {\n      __scopeCheckbox,\n      name,\n      checked,\n      defaultChecked,\n      required,\n      disabled,\n      value,\n      onCheckedChange,\n      form,\n      ...checkboxProps\n    } = props;\n\n    return (\n      <CheckboxProvider\n        __scopeCheckbox={__scopeCheckbox}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        required={required}\n        onCheckedChange={onCheckedChange}\n        name={name}\n        form={form}\n        value={value}\n        // @ts-expect-error\n        internal_do_not_use_render={({ isFormControl }: CheckboxContextValue) => (\n          <>\n            <CheckboxTrigger\n              {...checkboxProps}\n              ref={forwardedRef}\n              // @ts-expect-error\n              __scopeCheckbox={__scopeCheckbox}\n            />\n            {isFormControl && (\n              <CheckboxBubbleInput\n                // @ts-expect-error\n                __scopeCheckbox={__scopeCheckbox}\n              />\n            )}\n          </>\n        )}\n      />\n    );\n  },\n);\n\nCheckbox.displayName = CHECKBOX_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator';\n\ntype CheckboxIndicatorElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface CheckboxIndicatorProps extends PrimitiveSpanProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst CheckboxIndicator = React.forwardRef<CheckboxIndicatorElement, CheckboxIndicatorProps>(\n  (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n    const { __scopeCheckbox, forceMount, ...indicatorProps } = props;\n    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);\n    return (\n      <Presence\n        present={forceMount || isIndeterminate(context.checked) || context.checked === true}\n      >\n        <Primitive.span\n          data-state={getState(context.checked)}\n          data-disabled={context.disabled ? '' : undefined}\n          {...indicatorProps}\n          ref={forwardedRef}\n          style={{ pointerEvents: 'none', ...props.style }}\n        />\n      </Presence>\n    );\n  },\n);\n\nCheckboxIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'CheckboxBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface CheckboxBubbleInputProps extends Omit<InputProps, 'checked'> {}\n\nconst CheckboxBubbleInput = React.forwardRef<HTMLInputElement, CheckboxBubbleInputProps>(\n  ({ __scopeCheckbox, ...props }: ScopedProps<CheckboxBubbleInputProps>, forwardedRef) => {\n    const {\n      control,\n      hasConsumerStoppedPropagationRef,\n      checked,\n      defaultChecked,\n      required,\n      disabled,\n      name,\n      value,\n      form,\n      bubbleInput,\n      setBubbleInput,\n    } = useCheckboxContext(BUBBLE_INPUT_NAME, __scopeCheckbox);\n\n    const composedRefs = useComposedRefs(forwardedRef, setBubbleInput);\n    const prevChecked = usePrevious(checked);\n    const controlSize = useSize(control);\n\n    // Bubble checked change to parents (e.g form change event)\n    React.useEffect(() => {\n      const input = bubbleInput;\n      if (!input) return;\n\n      const inputProto = window.HTMLInputElement.prototype;\n      const descriptor = Object.getOwnPropertyDescriptor(\n        inputProto,\n        'checked',\n      ) as PropertyDescriptor;\n      const setChecked = descriptor.set;\n\n      const bubbles = !hasConsumerStoppedPropagationRef.current;\n      if (prevChecked !== checked && setChecked) {\n        const event = new Event('click', { bubbles });\n        input.indeterminate = isIndeterminate(checked);\n        setChecked.call(input, isIndeterminate(checked) ? false : checked);\n        input.dispatchEvent(event);\n      }\n    }, [bubbleInput, prevChecked, checked, hasConsumerStoppedPropagationRef]);\n\n    const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);\n    return (\n      <Primitive.input\n        type=\"checkbox\"\n        aria-hidden\n        defaultChecked={defaultChecked ?? defaultCheckedRef.current}\n        required={required}\n        disabled={disabled}\n        name={name}\n        value={value}\n        form={form}\n        {...props}\n        tabIndex={-1}\n        ref={composedRefs}\n        style={{\n          ...props.style,\n          ...controlSize,\n          position: 'absolute',\n          pointerEvents: 'none',\n          opacity: 0,\n          margin: 0,\n          // We transform because the input is absolutely positioned but we have\n          // rendered it **after** the button. This pulls it back to sit on top\n          // of the button.\n          transform: 'translateX(-100%)',\n        }}\n      />\n    );\n  },\n);\n\nCheckboxBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n  return typeof value === 'function';\n}\n\nfunction isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n  return checked === 'indeterminate';\n}\n\nfunction getState(checked: CheckedState) {\n  return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n}\n\nexport {\n  createCheckboxScope,\n  //\n  Checkbox,\n  CheckboxProvider,\n  CheckboxTrigger,\n  CheckboxIndicator,\n  CheckboxBubbleInput,\n  //\n  Checkbox as Root,\n  CheckboxProvider as Provider,\n  CheckboxTrigger as Trigger,\n  CheckboxIndicator as Indicator,\n  CheckboxBubbleInput as BubbleInput,\n};\nexport type {\n  CheckboxProps,\n  CheckboxProviderProps,\n  CheckboxTriggerProps,\n  CheckboxIndicatorProps,\n  CheckboxBubbleInputProps,\n  CheckedState,\n};\n"
  },
  {
    "path": "packages/react/checkbox/src/index.ts",
    "content": "'use client';\nexport {\n  createCheckboxScope,\n  //\n  Checkbox,\n  CheckboxProvider as unstable_CheckboxProvider,\n  CheckboxTrigger as unstable_CheckboxTrigger,\n  CheckboxIndicator,\n  CheckboxBubbleInput as unstable_CheckboxBubbleInput,\n  //\n  Root,\n  Provider as unstable_Provider,\n  Trigger as unstable_Trigger,\n  Indicator,\n  BubbleInput as unstable_BubbleInput,\n} from './checkbox';\nexport type {\n  CheckboxProps,\n  CheckboxProviderProps as unstable_CheckboxProviderProps,\n  CheckboxTriggerProps as unstable_CheckboxTriggerProps,\n  CheckboxIndicatorProps,\n  CheckboxBubbleInputProps as unstable_CheckboxBubbleInputProps,\n  CheckedState,\n} from './checkbox';\n"
  },
  {
    "path": "packages/react/checkbox/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/collapsible/CHANGELOG.md",
    "content": "# @radix-ui/react-collapsible\n\n## 1.1.12\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.11\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.1.5\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/collapsible/README.md",
    "content": "# `react-collapsible`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/collapsible).\n"
  },
  {
    "path": "packages/react/collapsible/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/collapsible/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-collapsible\",\n  \"version\": \"1.1.12\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/collapsible/src/collapsible.test.tsx",
    "content": "import React from 'react';\nimport { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render, fireEvent } from '@testing-library/react';\nimport { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';\nimport { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';\n\nconst TRIGGER_TEXT = 'Trigger';\nconst CONTENT_TEXT = 'Content';\n\nconst CollapsibleTest = (props: React.ComponentProps<typeof Collapsible>) => (\n  <Collapsible {...props}>\n    <CollapsibleTrigger>{TRIGGER_TEXT}</CollapsibleTrigger>\n    <CollapsibleContent>{CONTENT_TEXT}</CollapsibleContent>\n  </Collapsible>\n);\n\ndescribe('given a default Collapsible', () => {\n  let rendered: RenderResult;\n  let trigger: HTMLElement;\n  let content: HTMLElement | null;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    rendered = render(<CollapsibleTest />);\n    trigger = rendered.getByText(TRIGGER_TEXT);\n  });\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  describe('when clicking the trigger', () => {\n    beforeEach(async () => {\n      fireEvent.click(trigger);\n      content = rendered.queryByText(CONTENT_TEXT);\n    });\n\n    it('should open the content', () => {\n      expect(content).toBeVisible();\n    });\n\n    describe('and clicking the trigger again', () => {\n      beforeEach(() => {\n        fireEvent.click(trigger);\n      });\n\n      it('should close the content', () => {\n        expect(content).not.toBeVisible();\n      });\n    });\n  });\n});\n\ndescribe('given an open uncontrolled Collapsible', () => {\n  let rendered: RenderResult;\n  let content: HTMLElement | null;\n  const onOpenChange = vi.fn();\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    rendered = render(<CollapsibleTest defaultOpen onOpenChange={onOpenChange} />);\n  });\n\n  describe('when clicking the trigger', () => {\n    beforeEach(async () => {\n      const trigger = rendered.getByText(TRIGGER_TEXT);\n      content = rendered.getByText(CONTENT_TEXT);\n      fireEvent.click(trigger);\n    });\n\n    it('should close the content', () => {\n      expect(content).not.toBeVisible();\n    });\n\n    it('should call `onOpenChange` prop with `false` value', () => {\n      expect(onOpenChange).toHaveBeenCalledWith(false);\n    });\n  });\n});\n\ndescribe('given an open controlled Collapsible', () => {\n  let rendered: RenderResult;\n  let content: HTMLElement;\n  const onOpenChange = vi.fn();\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    rendered = render(<CollapsibleTest open onOpenChange={onOpenChange} />);\n    content = rendered.getByText(CONTENT_TEXT);\n  });\n\n  describe('when clicking the trigger', () => {\n    beforeEach(() => {\n      const trigger = rendered.getByText(TRIGGER_TEXT);\n      fireEvent.click(trigger);\n    });\n\n    it('should call `onOpenChange` prop with `false` value', () => {\n      expect(onOpenChange).toHaveBeenCalledWith(false);\n    });\n\n    it('should not close the content', () => {\n      expect(content).toBeVisible();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/react/collapsible/src/collapsible.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Collapsible\n * -----------------------------------------------------------------------------------------------*/\n\nconst COLLAPSIBLE_NAME = 'Collapsible';\n\ntype ScopedProps<P> = P & { __scopeCollapsible?: Scope };\nconst [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);\n\ntype CollapsibleContextValue = {\n  contentId: string;\n  disabled?: boolean;\n  open: boolean;\n  onOpenToggle(): void;\n};\n\nconst [CollapsibleProvider, useCollapsibleContext] =\n  createCollapsibleContext<CollapsibleContextValue>(COLLAPSIBLE_NAME);\n\ntype CollapsibleElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface CollapsibleProps extends PrimitiveDivProps {\n  defaultOpen?: boolean;\n  open?: boolean;\n  disabled?: boolean;\n  onOpenChange?(open: boolean): void;\n}\n\nconst Collapsible = React.forwardRef<CollapsibleElement, CollapsibleProps>(\n  (props: ScopedProps<CollapsibleProps>, forwardedRef) => {\n    const {\n      __scopeCollapsible,\n      open: openProp,\n      defaultOpen,\n      disabled,\n      onOpenChange,\n      ...collapsibleProps\n    } = props;\n\n    const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen ?? false,\n      onChange: onOpenChange,\n      caller: COLLAPSIBLE_NAME,\n    });\n\n    return (\n      <CollapsibleProvider\n        scope={__scopeCollapsible}\n        disabled={disabled}\n        contentId={useId()}\n        open={open}\n        onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n      >\n        <Primitive.div\n          data-state={getState(open)}\n          data-disabled={disabled ? '' : undefined}\n          {...collapsibleProps}\n          ref={forwardedRef}\n        />\n      </CollapsibleProvider>\n    );\n  },\n);\n\nCollapsible.displayName = COLLAPSIBLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'CollapsibleTrigger';\n\ntype CollapsibleTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface CollapsibleTriggerProps extends PrimitiveButtonProps {}\n\nconst CollapsibleTrigger = React.forwardRef<CollapsibleTriggerElement, CollapsibleTriggerProps>(\n  (props: ScopedProps<CollapsibleTriggerProps>, forwardedRef) => {\n    const { __scopeCollapsible, ...triggerProps } = props;\n    const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);\n    return (\n      <Primitive.button\n        type=\"button\"\n        aria-controls={context.contentId}\n        aria-expanded={context.open || false}\n        data-state={getState(context.open)}\n        data-disabled={context.disabled ? '' : undefined}\n        disabled={context.disabled}\n        {...triggerProps}\n        ref={forwardedRef}\n        onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n      />\n    );\n  },\n);\n\nCollapsibleTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * CollapsibleContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'CollapsibleContent';\n\ntype CollapsibleContentElement = CollapsibleContentImplElement;\ninterface CollapsibleContentProps extends Omit<CollapsibleContentImplProps, 'present'> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(\n  (props: ScopedProps<CollapsibleContentProps>, forwardedRef) => {\n    const { forceMount, ...contentProps } = props;\n    const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);\n    return (\n      <Presence present={forceMount || context.open}>\n        {({ present }) => (\n          <CollapsibleContentImpl {...contentProps} ref={forwardedRef} present={present} />\n        )}\n      </Presence>\n    );\n  },\n);\n\nCollapsibleContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype CollapsibleContentImplElement = React.ComponentRef<typeof Primitive.div>;\ninterface CollapsibleContentImplProps extends PrimitiveDivProps {\n  present: boolean;\n}\n\nconst CollapsibleContentImpl = React.forwardRef<\n  CollapsibleContentImplElement,\n  CollapsibleContentImplProps\n>((props: ScopedProps<CollapsibleContentImplProps>, forwardedRef) => {\n  const { __scopeCollapsible, present, children, ...contentProps } = props;\n  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);\n  const [isPresent, setIsPresent] = React.useState(present);\n  const ref = React.useRef<CollapsibleContentImplElement>(null);\n  const composedRefs = useComposedRefs(forwardedRef, ref);\n  const heightRef = React.useRef<number | undefined>(0);\n  const height = heightRef.current;\n  const widthRef = React.useRef<number | undefined>(0);\n  const width = widthRef.current;\n  // when opening we want it to immediately open to retrieve dimensions\n  // when closing we delay `present` to retrieve dimensions before closing\n  const isOpen = context.open || isPresent;\n  const isMountAnimationPreventedRef = React.useRef(isOpen);\n  const originalStylesRef = React.useRef<Record<string, string>>(undefined);\n\n  React.useEffect(() => {\n    const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n    return () => cancelAnimationFrame(rAF);\n  }, []);\n\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (node) {\n      originalStylesRef.current = originalStylesRef.current || {\n        transitionDuration: node.style.transitionDuration,\n        animationName: node.style.animationName,\n      };\n      // block any animations/transitions so the element renders at its full dimensions\n      node.style.transitionDuration = '0s';\n      node.style.animationName = 'none';\n\n      // get width and height from full dimensions\n      const rect = node.getBoundingClientRect();\n      heightRef.current = rect.height;\n      widthRef.current = rect.width;\n\n      // kick off any animations/transitions that were originally set up if it isn't the initial mount\n      if (!isMountAnimationPreventedRef.current) {\n        node.style.transitionDuration = originalStylesRef.current.transitionDuration!;\n        node.style.animationName = originalStylesRef.current.animationName!;\n      }\n\n      setIsPresent(present);\n    }\n    /**\n     * depends on `context.open` because it will change to `false`\n     * when a close is triggered but `present` will be `false` on\n     * animation end (so when close finishes). This allows us to\n     * retrieve the dimensions *before* closing.\n     */\n  }, [context.open, present]);\n\n  return (\n    <Primitive.div\n      data-state={getState(context.open)}\n      data-disabled={context.disabled ? '' : undefined}\n      id={context.contentId}\n      hidden={!isOpen}\n      {...contentProps}\n      ref={composedRefs}\n      style={{\n        [`--radix-collapsible-content-height` as any]: height ? `${height}px` : undefined,\n        [`--radix-collapsible-content-width` as any]: width ? `${width}px` : undefined,\n        ...props.style,\n      }}\n    >\n      {isOpen && children}\n    </Primitive.div>\n  );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open?: boolean) {\n  return open ? 'open' : 'closed';\n}\n\nconst Root = Collapsible;\nconst Trigger = CollapsibleTrigger;\nconst Content = CollapsibleContent;\n\nexport {\n  createCollapsibleScope,\n  //\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  //\n  Root,\n  Trigger,\n  Content,\n};\nexport type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps };\n"
  },
  {
    "path": "packages/react/collapsible/src/index.ts",
    "content": "'use client';\nexport {\n  createCollapsibleScope,\n  //\n  Collapsible,\n  CollapsibleTrigger,\n  CollapsibleContent,\n  //\n  Root,\n  Trigger,\n  Content,\n} from './collapsible';\nexport type {\n  CollapsibleProps,\n  CollapsibleTriggerProps,\n  CollapsibleContentProps,\n} from './collapsible';\n"
  },
  {
    "path": "packages/react/collapsible/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/collection/CHANGELOG.md",
    "content": "# @radix-ui/react-collection\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.4`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.4\n\n- Add unstable collection utilities\n- Minor changes to unreleased unstable APIs\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/collection/README.md",
    "content": "# `react-collection`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/collection/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/collection/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-collection\",\n  \"version\": \"1.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-slot\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/collection/src/collection-legacy.tsx",
    "content": "import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createSlot, type Slot } from '@radix-ui/react-slot';\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>;\ntype CollectionElement = HTMLElement;\ninterface CollectionProps extends SlotProps {\n  scope: any;\n}\n\n// We have resorted to returning slots directly rather than exposing primitives that can then\n// be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.\n// This is because we encountered issues with generic types that cannot be statically analysed\n// due to creating them dynamically via createCollection.\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData = {}>(name: string) {\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionProvider\n   * ---------------------------------------------------------------------------------------------*/\n\n  const PROVIDER_NAME = name + 'CollectionProvider';\n  const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);\n\n  type ContextValue = {\n    collectionRef: React.RefObject<CollectionElement | null>;\n    itemMap: Map<\n      React.RefObject<ItemElement | null>,\n      { ref: React.RefObject<ItemElement | null> } & ItemData\n    >;\n  };\n\n  const [CollectionProviderImpl, useCollectionContext] = createCollectionContext<ContextValue>(\n    PROVIDER_NAME,\n    { collectionRef: { current: null }, itemMap: new Map() },\n  );\n\n  const CollectionProvider: React.FC<{ children?: React.ReactNode; scope: any }> = (props) => {\n    const { scope, children } = props;\n    const ref = React.useRef<CollectionElement>(null);\n    const itemMap = React.useRef<ContextValue['itemMap']>(new Map()).current;\n    return (\n      <CollectionProviderImpl scope={scope} itemMap={itemMap} collectionRef={ref}>\n        {children}\n      </CollectionProviderImpl>\n    );\n  };\n\n  CollectionProvider.displayName = PROVIDER_NAME;\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionSlot\n   * ---------------------------------------------------------------------------------------------*/\n\n  const COLLECTION_SLOT_NAME = name + 'CollectionSlot';\n\n  const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);\n  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n    (props, forwardedRef) => {\n      const { scope, children } = props;\n      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);\n      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);\n      return <CollectionSlotImpl ref={composedRefs}>{children}</CollectionSlotImpl>;\n    },\n  );\n\n  CollectionSlot.displayName = COLLECTION_SLOT_NAME;\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionItem\n   * ---------------------------------------------------------------------------------------------*/\n\n  const ITEM_SLOT_NAME = name + 'CollectionItemSlot';\n  const ITEM_DATA_ATTR = 'data-radix-collection-item';\n\n  type CollectionItemSlotProps = ItemData & {\n    children: React.ReactNode;\n    scope: any;\n  };\n\n  const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);\n  const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n    (props, forwardedRef) => {\n      const { scope, children, ...itemData } = props;\n      const ref = React.useRef<ItemElement>(null);\n      const composedRefs = useComposedRefs(forwardedRef, ref);\n      const context = useCollectionContext(ITEM_SLOT_NAME, scope);\n\n      React.useEffect(() => {\n        context.itemMap.set(ref, { ref, ...(itemData as unknown as ItemData) });\n        return () => void context.itemMap.delete(ref);\n      });\n\n      return (\n        <CollectionItemSlotImpl {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs}>\n          {children}\n        </CollectionItemSlotImpl>\n      );\n    },\n  );\n\n  CollectionItemSlot.displayName = ITEM_SLOT_NAME;\n\n  /* -----------------------------------------------------------------------------------------------\n   * useCollection\n   * ---------------------------------------------------------------------------------------------*/\n\n  function useCollection(scope: any) {\n    const context = useCollectionContext(name + 'CollectionConsumer', scope);\n\n    const getItems = React.useCallback(() => {\n      const collectionNode = context.collectionRef.current;\n      if (!collectionNode) return [];\n      const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));\n      const items = Array.from(context.itemMap.values());\n      const orderedItems = items.sort(\n        (a, b) => orderedNodes.indexOf(a.ref.current!) - orderedNodes.indexOf(b.ref.current!),\n      );\n      return orderedItems;\n    }, [context.collectionRef, context.itemMap]);\n\n    return getItems;\n  }\n\n  return [\n    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n    useCollection,\n    createCollectionScope,\n  ] as const;\n}\n\nexport { createCollection };\nexport type { CollectionProps };\n"
  },
  {
    "path": "packages/react/collection/src/collection.tsx",
    "content": "import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createSlot, type Slot } from '@radix-ui/react-slot';\nimport type { EntryOf } from './ordered-dictionary';\nimport { OrderedDict } from './ordered-dictionary';\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof Slot>;\ntype CollectionElement = HTMLElement;\ninterface CollectionProps extends SlotProps {\n  scope: any;\n}\n\ninterface BaseItemData {\n  id?: string;\n}\n\ntype ItemDataWithElement<\n  ItemData extends BaseItemData,\n  ItemElement extends HTMLElement,\n> = ItemData & {\n  element: ItemElement;\n};\n\ntype ItemMap<ItemElement extends HTMLElement, ItemData extends BaseItemData> = OrderedDict<\n  ItemElement,\n  ItemDataWithElement<ItemData, ItemElement>\n>;\n\nfunction createCollection<ItemElement extends HTMLElement, ItemData extends {} = {}>(name: string) {\n  type AllItemData = ItemData & BaseItemData;\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionProvider\n   * ---------------------------------------------------------------------------------------------*/\n\n  const PROVIDER_NAME = name + 'CollectionProvider';\n  const [createCollectionContext, createCollectionScope] = createContextScope(PROVIDER_NAME);\n\n  interface ContextValue {\n    collectionElement: CollectionElement | null;\n    collectionRef: React.Ref<CollectionElement | null>;\n    collectionRefObject: React.RefObject<CollectionElement | null>;\n    itemMap: ItemMap<ItemElement, AllItemData>;\n    setItemMap: React.Dispatch<React.SetStateAction<ItemMap<ItemElement, AllItemData>>>;\n  }\n\n  const [CollectionContextProvider, useCollectionContext] = createCollectionContext<ContextValue>(\n    PROVIDER_NAME,\n    {\n      collectionElement: null,\n      collectionRef: { current: null },\n      collectionRefObject: { current: null },\n      itemMap: new OrderedDict(),\n      setItemMap: () => void 0,\n    },\n  );\n\n  type CollectionState = [\n    ItemMap: ItemMap<ItemElement, AllItemData>,\n    SetItemMap: React.Dispatch<React.SetStateAction<ItemMap<ItemElement, AllItemData>>>,\n  ];\n\n  const CollectionProvider: React.FC<{\n    children?: React.ReactNode;\n    scope: any;\n    state?: CollectionState;\n  }> = ({ state, ...props }) => {\n    return state ? (\n      <CollectionProviderImpl {...props} state={state} />\n    ) : (\n      <CollectionInit {...props} />\n    );\n  };\n  CollectionProvider.displayName = PROVIDER_NAME;\n\n  const CollectionInit: React.FC<{\n    children?: React.ReactNode;\n    scope: any;\n  }> = (props) => {\n    const state = useInitCollection();\n    return <CollectionProviderImpl {...props} state={state} />;\n  };\n  CollectionInit.displayName = PROVIDER_NAME + 'Init';\n\n  const CollectionProviderImpl: React.FC<{\n    children?: React.ReactNode;\n    scope: any;\n    state: CollectionState;\n  }> = (props) => {\n    const { scope, children, state } = props;\n    const ref = React.useRef<CollectionElement>(null);\n    const [collectionElement, setCollectionElement] = React.useState<CollectionElement | null>(\n      null,\n    );\n    const composeRefs = useComposedRefs(ref, setCollectionElement);\n    const [itemMap, setItemMap] = state;\n\n    React.useEffect(() => {\n      if (!collectionElement) return;\n\n      const observer = getChildListObserver(() => {\n        // setItemMap((map) => {\n        //   const copy = new OrderedDict(map).toSorted(([, a], [, b]) =>\n        //     !a.element || !b.element ? 0 : isElementPreceding(a.element, b.element) ? -1 : 1\n        //   );\n        //   // check if the order has changed\n        //   let index = -1;\n        //   for (const entry of copy) {\n        //     index++;\n        //     const key = map.keyAt(index)!;\n        //     const [copyKey] = entry;\n        //     if (key !== copyKey) {\n        //       // order has changed!\n        //       return copy;\n        //     }\n        //   }\n        //   return map;\n        // });\n      });\n      observer.observe(collectionElement, {\n        childList: true,\n        subtree: true,\n      });\n      return () => {\n        observer.disconnect();\n      };\n    }, [collectionElement]);\n\n    return (\n      <CollectionContextProvider\n        scope={scope}\n        itemMap={itemMap}\n        setItemMap={setItemMap}\n        collectionRef={composeRefs}\n        collectionRefObject={ref}\n        collectionElement={collectionElement}\n      >\n        {children}\n      </CollectionContextProvider>\n    );\n  };\n\n  CollectionProviderImpl.displayName = PROVIDER_NAME + 'Impl';\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionSlot\n   * ---------------------------------------------------------------------------------------------*/\n\n  const COLLECTION_SLOT_NAME = name + 'CollectionSlot';\n\n  const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);\n  const CollectionSlot = React.forwardRef<CollectionElement, CollectionProps>(\n    (props, forwardedRef) => {\n      const { scope, children } = props;\n      const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);\n      const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);\n      return <CollectionSlotImpl ref={composedRefs}>{children}</CollectionSlotImpl>;\n    },\n  );\n\n  CollectionSlot.displayName = COLLECTION_SLOT_NAME;\n\n  /* -----------------------------------------------------------------------------------------------\n   * CollectionItem\n   * ---------------------------------------------------------------------------------------------*/\n\n  const ITEM_SLOT_NAME = name + 'CollectionItemSlot';\n  const ITEM_DATA_ATTR = 'data-radix-collection-item';\n\n  type CollectionItemSlotProps = AllItemData & {\n    children: React.ReactNode;\n    scope: any;\n  };\n\n  const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);\n  const CollectionItemSlot = React.forwardRef<ItemElement, CollectionItemSlotProps>(\n    (props, forwardedRef) => {\n      const { scope, children, ...itemData } = props;\n      const ref = React.useRef<ItemElement>(null);\n      const [element, setElement] = React.useState<ItemElement | null>(null);\n      const composedRefs = useComposedRefs(forwardedRef, ref, setElement);\n      const context = useCollectionContext(ITEM_SLOT_NAME, scope);\n\n      const { setItemMap } = context;\n\n      const itemDataRef = React.useRef(itemData);\n      if (!shallowEqual(itemDataRef.current, itemData)) {\n        itemDataRef.current = itemData;\n      }\n      const memoizedItemData = itemDataRef.current;\n\n      React.useEffect(() => {\n        const itemData = memoizedItemData;\n        setItemMap((map) => {\n          if (!element) {\n            return map;\n          }\n\n          if (!map.has(element)) {\n            map.set(element, { ...(itemData as unknown as AllItemData), element });\n            return map.toSorted(sortByDocumentPosition);\n          }\n\n          return map\n            .set(element, { ...(itemData as unknown as AllItemData), element })\n            .toSorted(sortByDocumentPosition);\n        });\n\n        return () => {\n          setItemMap((map) => {\n            if (!element || !map.has(element)) {\n              return map;\n            }\n            map.delete(element);\n            return new OrderedDict(map);\n          });\n        };\n      }, [element, memoizedItemData, setItemMap]);\n\n      return (\n        <CollectionItemSlotImpl {...{ [ITEM_DATA_ATTR]: '' }} ref={composedRefs as any}>\n          {children}\n        </CollectionItemSlotImpl>\n      );\n    },\n  );\n\n  CollectionItemSlot.displayName = ITEM_SLOT_NAME;\n\n  /* -----------------------------------------------------------------------------------------------\n   * useInitCollection\n   * ---------------------------------------------------------------------------------------------*/\n\n  function useInitCollection() {\n    return React.useState<ItemMap<ItemElement, AllItemData>>(new OrderedDict());\n  }\n\n  /* -----------------------------------------------------------------------------------------------\n   * useCollection\n   * ---------------------------------------------------------------------------------------------*/\n\n  function useCollection(scope: any) {\n    const { itemMap } = useCollectionContext(name + 'CollectionConsumer', scope);\n\n    return itemMap;\n  }\n\n  const functions = {\n    createCollectionScope,\n    useCollection,\n    useInitCollection,\n  };\n\n  return [\n    { Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },\n    functions,\n  ] as const;\n}\n\nexport { createCollection };\nexport type { CollectionProps };\n\nfunction shallowEqual(a: any, b: any) {\n  if (a === b) return true;\n  if (typeof a !== 'object' || typeof b !== 'object') return false;\n  if (a == null || b == null) return false;\n  const keysA = Object.keys(a);\n  const keysB = Object.keys(b);\n  if (keysA.length !== keysB.length) return false;\n  for (const key of keysA) {\n    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;\n    if (a[key] !== b[key]) return false;\n  }\n  return true;\n}\n\nfunction isElementPreceding(a: Element, b: Element) {\n  return !!(b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING);\n}\n\nfunction sortByDocumentPosition<E extends HTMLElement, T extends BaseItemData>(\n  a: EntryOf<ItemMap<E, T>>,\n  b: EntryOf<ItemMap<E, T>>,\n) {\n  return !a[1].element || !b[1].element\n    ? 0\n    : isElementPreceding(a[1].element, b[1].element)\n      ? -1\n      : 1;\n}\n\nfunction getChildListObserver(callback: () => void) {\n  const observer = new MutationObserver((mutationsList) => {\n    for (const mutation of mutationsList) {\n      if (mutation.type === 'childList') {\n        callback();\n        return;\n      }\n    }\n  });\n\n  return observer;\n}\n"
  },
  {
    "path": "packages/react/collection/src/index.ts",
    "content": "'use client';\nexport { createCollection } from './collection-legacy';\nexport type { CollectionProps } from './collection-legacy';\n\nexport { createCollection as unstable_createCollection } from './collection';\nexport type { CollectionProps as unstable_CollectionProps } from './collection';\n"
  },
  {
    "path": "packages/react/collection/src/ordered-dictionary.test.ts",
    "content": "import { describe, expect, test } from 'vitest';\nimport { OrderedDict } from './ordered-dictionary';\n\ndescribe('OrderedDict', () => {\n  test('size', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    expect(dict.size).toBe(3);\n    dict.delete('b');\n    expect(dict.size).toBe(2);\n    dict.set('d', 4);\n    expect(dict.size).toBe(3);\n    dict.clear();\n    expect(dict.size).toBe(0);\n  });\n\n  test('get()', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    expect(dict.get('a')).toBe(1);\n    expect(dict.get('b')).toBe(2);\n    expect(dict.get('d')).toBeUndefined();\n  });\n\n  test('set()', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    dict.set('b', 4);\n    expect(dict.get('b')).toBe(4);\n    dict.set('d', 5);\n    expect(dict.get('d')).toBe(5);\n  });\n\n  test('insert(): existing key at its current index', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    dict.insert(1, 'b', 4);\n    expect(dict.get('b')).toBe(4);\n  });\n\n  test('insert(): existing key at a new index', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    dict.insert(0, 'b', 1);\n    // sets the correct value\n    expect(dict.get('b')).toBe(1);\n\n    // moves to the inserted index\n    expect(dict.at(0)).toBe(1);\n    expect(dict.keyAt(0)).toBe('b');\n\n    // previous item at the inserted index is moved up by one\n    expect(dict.keyAt(1)).toBe('a');\n    expect(dict.get('a')).toBe(1);\n  });\n\n  test('insert(): existing key at out-of-range index', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    dict.insert(20, 'd', 4);\n    expect(dict.keyAt(3)).toBe('d');\n    expect(dict.at(3)).toBe(4);\n  });\n\n  test('insert(): existing key at 0 index', () => {\n    const dict = new OrderedDict([\n      ['a', 0],\n      ['b', 2],\n      ['c', 3],\n      ['e', 5],\n    ]);\n    dict.insert(0, 'a', 1);\n    expect(dict.keyAt(0)).toBe('a');\n    expect(dict.at(0)).toBe(1);\n    expect(dict.keyAt(1)).toBe('b');\n    expect(dict.at(1)).toBe(2);\n    expect(dict.size).toBe(4);\n  });\n\n  test('insert(): new key at 0 index', () => {\n    const dict = new OrderedDict([\n      ['b', 2],\n      ['c', 3],\n      ['e', 5],\n    ]);\n    dict.insert(0, 'a', 1);\n    expect(dict.keyAt(0)).toBe('a');\n    expect(dict.at(0)).toBe(1);\n    expect(dict.keyAt(1)).toBe('b');\n    expect(dict.at(1)).toBe(2);\n    expect(dict.size).toBe(4);\n  });\n\n  test('insert(): existing key at relative negative index', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n      ['e', 5],\n      ['f', 4],\n    ]);\n    dict.insert(-1, 'f', 6);\n    expect(dict.keyAt(-1)).toBe('f');\n    expect(dict.at(-1)).toBe(6);\n    expect(dict.size).toBe(5);\n  });\n\n  test('insert(): new key at relative negative index', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n      ['e', 5],\n    ]);\n    dict.insert(-1, 'f', 6);\n    expect(dict.keyAt(-1)).toBe('f');\n    expect(dict.at(0)).toBe(1);\n    expect(dict.at(-1)).toBe(6);\n\n    dict.insert(-3, 'd', 4);\n    expect(dict.keyAt(3)).toBe('d');\n    expect(dict.at(3)).toBe(4);\n  });\n\n  test('insert(): existing key at a new index', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    dict.insert(0, 'b', 1);\n    expect(dict.get('b')).toBe(1);\n    expect(dict.at(0)).toBe(1);\n    expect(dict.keyAt(0)).toBe('b');\n  });\n\n  test('insert(): adds item to existing object', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    const next = dict.insert(0, 'b', 1);\n    expect(next).toBe(dict);\n  });\n\n  test('with(): returns a new reference', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    const next = dict.with(0, 'b', 1);\n    expect(next).not.toBe(dict);\n  });\n\n  test('with(): does not update copied object', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    dict.with(0, 'b', 1);\n    expect(dict.get('b')).toBe(2);\n    expect(dict.keyAt(1)).toBe('b');\n  });\n\n  test('first()', () => {\n    expect(\n      new OrderedDict([\n        ['a', 1],\n        ['b', 2],\n        ['c', 3],\n        ['d', 4],\n      ]).first(),\n    ).toEqual(['a', 1]);\n    expect(new OrderedDict().first()).toBeUndefined();\n  });\n\n  test('last()', () => {\n    expect(\n      new OrderedDict([\n        ['a', 1],\n        ['b', 2],\n        ['c', 3],\n        ['d', 4],\n      ]).last(),\n    ).toEqual(['d', 4]);\n    expect(new OrderedDict().last()).toBeUndefined();\n  });\n\n  test('before()', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n      ['d', 4],\n    ]);\n    expect(dict.before('b')).toEqual(['a', 1]);\n    expect(dict.before('a')).toBeUndefined();\n  });\n\n  test('after()', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n      ['d', 4],\n    ]);\n    expect(dict.after('b')).toEqual(['c', 3]);\n    expect(dict.after('d')).toBeUndefined();\n  });\n\n  test('clear()', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n    ]);\n    dict.clear();\n    expect(dict.size).toBe(0);\n    expect(dict.get('a')).toBeUndefined();\n    expect(dict.get('b')).toBeUndefined();\n    expect(dict.at(0)).toBeUndefined();\n  });\n\n  test('delete(): existing key', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n    ]);\n    const status = dict.delete('a');\n    expect(status).toBe(true);\n    expect(dict.size).toBe(1);\n    expect(dict.get('a')).toBeUndefined();\n    expect(dict.at(0)).toBe(2);\n  });\n\n  test('delete(): non-existing key', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n    ]);\n    const status = dict.delete('c');\n    expect(status).toBe(false);\n    expect(dict.size).toBe(2);\n    expect(dict.at(0)).toBe(1);\n  });\n\n  test('deleteAt(): standard indices', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n      ['d', 4],\n    ]);\n    const status = dict.deleteAt(0);\n    expect(status).toBe(true);\n    expect(dict.size).toBe(3);\n    expect(dict.get('a')).toBeUndefined();\n\n    dict.deleteAt(1);\n    expect(dict.size).toBe(2);\n    expect(dict.get('c')).toBeUndefined();\n  });\n\n  test('deleteAt(): negative indices', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n      ['d', 4],\n    ]);\n    const status = dict.deleteAt(-1);\n    expect(status).toBe(true);\n    expect(dict.size).toBe(3);\n    expect(dict.get('d')).toBeUndefined();\n\n    dict.deleteAt(-2);\n    expect(dict.size).toBe(2);\n    expect(dict.get('b')).toBeUndefined();\n  });\n\n  test('deleteAt(): out-of-range indices', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n      ['d', 4],\n    ]);\n    let status = dict.deleteAt(20);\n    expect(status).toBe(false);\n    expect(dict.size).toBe(4);\n    status = dict.deleteAt(-20);\n    expect(status).toBe(false);\n    expect(dict.size).toBe(4);\n  });\n\n  describe('find', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    test('key: found', () => {\n      const result = dict.find(([key]) => key === 'b');\n      expect(result).toEqual(['b', 2]);\n    });\n\n    test('key: not found', () => {\n      const result = dict.find(([key]) => key === 'd');\n      expect(result).toBeUndefined();\n    });\n\n    test('value: found', () => {\n      const result = dict.find(([, value]) => value === 3);\n      expect(result).toEqual(['c', 3]);\n    });\n\n    test('value: not found', () => {\n      const result = dict.find(([, value]) => value === 4);\n      expect(result).toBeUndefined();\n    });\n\n    test('thisArg', () => {\n      const result = dict.find(function (this: number, [, value]) {\n        return value === this;\n      }, 1);\n      expect(result).toEqual(['a', 1]);\n    });\n\n    test('no thisArg', () => {\n      const result = dict.find(function (this: unknown, _, dictionary) {\n        return dictionary === this;\n      });\n      expect(result).toBeUndefined();\n    });\n  });\n\n  describe('findIndex', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n    test('key: found', () => {\n      const result = dict.findIndex(([key]) => key === 'b');\n      expect(result).toBe(1);\n    });\n\n    test('key: not found', () => {\n      const result = dict.findIndex(([key]) => key === 'd');\n      expect(result).toBe(-1);\n    });\n\n    test('value: found', () => {\n      const result = dict.findIndex(([, value]) => value === 3);\n      expect(result).toBe(2);\n    });\n\n    test('value: not found', () => {\n      const result = dict.findIndex(([, value]) => value === 4);\n      expect(result).toBe(-1);\n    });\n\n    test('with thisArg', () => {\n      const thisArg = { key: 'b' };\n      const result = dict.findIndex(function (this: typeof thisArg, [key]) {\n        return key === this.key;\n      }, thisArg);\n      expect(result).toBe(1);\n    });\n\n    test('no thisArg', () => {\n      expect(() => {\n        dict.findIndex(function (this: unknown, [, value]) {\n          return value === (this as any).get('b');\n        });\n      }).toThrow();\n    });\n  });\n\n  describe('filter', () => {\n    test('makes a copy of the dictionary', () => {\n      const dict = new OrderedDict([\n        ['a', 1],\n        ['b', 2],\n        ['c', 3],\n      ]);\n      const result = dict.filter(() => true);\n      expect(result).not.toBe(dict);\n    });\n\n    test('misc', () => {\n      const dict = new OrderedDict([\n        ['a', 1],\n        ['b', 2],\n        ['c', 3],\n      ]);\n      const result = dict.filter(([key, value]) => key === 'b' || value === 3);\n      expect(result).toEqual(\n        new OrderedDict([\n          ['b', 2],\n          ['c', 3],\n        ]),\n      );\n\n      const result2 = dict.filter(([key]) => key === 'd');\n      expect(result2).toEqual(new OrderedDict());\n\n      const result3 = dict.filter(([, value]) => value === 3);\n      expect(result3).toEqual(new OrderedDict([['c', 3]]));\n\n      const result4 = dict.filter(([, value]) => value === 4);\n      expect(result4).toEqual(new OrderedDict());\n    });\n  });\n\n  describe('some', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n\n    test('key: truthy', () => {\n      const result = dict.some(([key]) => key === 'b');\n      expect(result).toBe(true);\n    });\n\n    test('key: falsey', () => {\n      const result = dict.some(([key]) => key === 'd');\n      expect(result).toBe(false);\n    });\n\n    test('value: truthy', () => {\n      const result = dict.some(([, value]) => value === 2);\n      expect(result).toBe(true);\n    });\n\n    test('value: truthy', () => {\n      const result = dict.some(([, value]) => value === 4);\n      expect(result).toBe(false);\n    });\n\n    test('thisArg', () => {\n      const result = dict.some(function (this: string, [key]) {\n        return key === this;\n      }, 'b');\n      expect(result).toBe(true);\n    });\n\n    test('no thisArg', () => {\n      expect(() =>\n        dict.some(function (this: unknown, [, value]) {\n          return (this as any).get('b') === value;\n        }),\n      ).toThrow();\n    });\n  });\n\n  describe('every', () => {\n    const dict = new OrderedDict([\n      ['a', 1],\n      ['b', 2],\n      ['c', 3],\n    ]);\n\n    test('key: truthy', () => {\n      const result = dict.every(([key]) => key.length === 1);\n      expect(result).toBe(true);\n    });\n\n    test('key: falsey', () => {\n      const result = dict.every(([key]) => key === 'a');\n      expect(result).toBe(false);\n    });\n\n    test('value: truthy', () => {\n      const result = dict.every(([, value]) => value > 0);\n      expect(result).toBe(true);\n    });\n\n    test('value: falsey', () => {\n      const result = dict.every(([, value]) => value > 1);\n      expect(result).toBe(false);\n    });\n\n    test('thisArg', () => {\n      const result = dict.every(function (this: string, [key]) {\n        return typeof key === typeof this;\n      }, 'b');\n      expect(result).toBe(true);\n    });\n\n    test('no thisArg', () => {\n      expect(() =>\n        dict.every(function (this: unknown, [, value]) {\n          return typeof (this as any).get('b') === typeof value;\n        }),\n      ).toThrow();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/react/collection/src/ordered-dictionary.ts",
    "content": "// Not a real member because it shouldn't be accessible, but the super class\n// calls `set` which needs to read the instanciation state, so it can't be a\n// private member.\nconst __instanciated = new WeakMap<OrderedDict<any, any>, boolean>();\nexport class OrderedDict<K, V> extends Map<K, V> {\n  #keys: K[];\n\n  constructor(iterable?: Iterable<readonly [K, V]> | null | undefined);\n  constructor(entries?: readonly (readonly [K, V])[] | null) {\n    super(entries);\n    this.#keys = [...super.keys()];\n    __instanciated.set(this, true);\n  }\n\n  set(key: K, value: V) {\n    if (__instanciated.get(this)) {\n      if (this.has(key)) {\n        this.#keys[this.#keys.indexOf(key)] = key;\n      } else {\n        this.#keys.push(key);\n      }\n    }\n    super.set(key, value);\n    return this;\n  }\n\n  insert(index: number, key: K, value: V) {\n    const has = this.has(key);\n    const length = this.#keys.length;\n    const relativeIndex = toSafeInteger(index);\n    let actualIndex = relativeIndex >= 0 ? relativeIndex : length + relativeIndex;\n    const safeIndex = actualIndex < 0 || actualIndex >= length ? -1 : actualIndex;\n\n    if (safeIndex === this.size || (has && safeIndex === this.size - 1) || safeIndex === -1) {\n      this.set(key, value);\n      return this;\n    }\n\n    const size = this.size + (has ? 0 : 1);\n\n    // If you insert at, say, -2, without this bit you'd replace the\n    // second-to-last item and push the rest up one, which means the new item is\n    // 3rd to last. This isn't very intuitive; inserting at -2 is more like\n    // saying \"make this item the second to last\".\n    if (relativeIndex < 0) {\n      actualIndex++;\n    }\n\n    const keys = [...this.#keys];\n    let nextValue: V | undefined;\n    let shouldSkip = false;\n    for (let i = actualIndex; i < size; i++) {\n      if (actualIndex === i) {\n        let nextKey = keys[i]!;\n        if (keys[i] === key) {\n          nextKey = keys[i + 1]!;\n        }\n        if (has) {\n          // delete first to ensure that the item is moved to the end\n          this.delete(key);\n        }\n        nextValue = this.get(nextKey);\n        this.set(key, value);\n      } else {\n        if (!shouldSkip && keys[i - 1] === key) {\n          shouldSkip = true;\n        }\n        const currentKey = keys[shouldSkip ? i : i - 1]!;\n        const currentValue = nextValue!;\n        nextValue = this.get(currentKey);\n        this.delete(currentKey);\n        this.set(currentKey, currentValue);\n      }\n    }\n    return this;\n  }\n\n  with(index: number, key: K, value: V) {\n    const copy = new OrderedDict(this);\n    copy.insert(index, key, value);\n    return copy;\n  }\n\n  before(key: K) {\n    const index = this.#keys.indexOf(key) - 1;\n    if (index < 0) {\n      return undefined;\n    }\n    return this.entryAt(index);\n  }\n\n  /**\n   * Sets a new key-value pair at the position before the given key.\n   */\n  setBefore(key: K, newKey: K, value: V) {\n    const index = this.#keys.indexOf(key);\n    if (index === -1) {\n      return this;\n    }\n    return this.insert(index, newKey, value);\n  }\n\n  after(key: K) {\n    let index = this.#keys.indexOf(key);\n    index = index === -1 || index === this.size - 1 ? -1 : index + 1;\n    if (index === -1) {\n      return undefined;\n    }\n    return this.entryAt(index);\n  }\n\n  /**\n   * Sets a new key-value pair at the position after the given key.\n   */\n  setAfter(key: K, newKey: K, value: V) {\n    const index = this.#keys.indexOf(key);\n    if (index === -1) {\n      return this;\n    }\n    return this.insert(index + 1, newKey, value);\n  }\n\n  first() {\n    return this.entryAt(0);\n  }\n\n  last() {\n    return this.entryAt(-1);\n  }\n\n  clear() {\n    this.#keys = [];\n    return super.clear();\n  }\n\n  delete(key: K) {\n    const deleted = super.delete(key);\n    if (deleted) {\n      this.#keys.splice(this.#keys.indexOf(key), 1);\n    }\n    return deleted;\n  }\n\n  deleteAt(index: number) {\n    const key = this.keyAt(index);\n    if (key !== undefined) {\n      return this.delete(key);\n    }\n    return false;\n  }\n\n  at(index: number) {\n    const key = at(this.#keys, index);\n    if (key !== undefined) {\n      return this.get(key);\n    }\n  }\n\n  entryAt(index: number): [K, V] | undefined {\n    const key = at(this.#keys, index);\n    if (key !== undefined) {\n      return [key, this.get(key)!];\n    }\n  }\n\n  indexOf(key: K) {\n    return this.#keys.indexOf(key);\n  }\n\n  keyAt(index: number) {\n    return at(this.#keys, index);\n  }\n\n  from(key: K, offset: number) {\n    const index = this.indexOf(key);\n    if (index === -1) {\n      return undefined;\n    }\n    let dest = index + offset;\n    if (dest < 0) dest = 0;\n    if (dest >= this.size) dest = this.size - 1;\n    return this.at(dest);\n  }\n\n  keyFrom(key: K, offset: number) {\n    const index = this.indexOf(key);\n    if (index === -1) {\n      return undefined;\n    }\n    let dest = index + offset;\n    if (dest < 0) dest = 0;\n    if (dest >= this.size) dest = this.size - 1;\n    return this.keyAt(dest);\n  }\n\n  find(\n    predicate: (entry: [K, V], index: number, dictionary: OrderedDict<K, V>) => boolean,\n    thisArg?: any,\n  ) {\n    let index = 0;\n    for (const entry of this) {\n      if (Reflect.apply(predicate, thisArg, [entry, index, this])) {\n        return entry;\n      }\n      index++;\n    }\n    return undefined;\n  }\n\n  findIndex(\n    predicate: (entry: [K, V], index: number, dictionary: OrderedDict<K, V>) => boolean,\n    thisArg?: any,\n  ) {\n    let index = 0;\n    for (const entry of this) {\n      if (Reflect.apply(predicate, thisArg, [entry, index, this])) {\n        return index;\n      }\n      index++;\n    }\n    return -1;\n  }\n\n  filter<KK extends K, VV extends V>(\n    predicate: (entry: [K, V], index: number, dict: OrderedDict<K, V>) => entry is [KK, VV],\n    thisArg?: any,\n  ): OrderedDict<KK, VV>;\n\n  filter(\n    predicate: (entry: [K, V], index: number, dictionary: OrderedDict<K, V>) => unknown,\n    thisArg?: any,\n  ): OrderedDict<K, V>;\n\n  filter(\n    predicate: (entry: [K, V], index: number, dictionary: OrderedDict<K, V>) => unknown,\n    thisArg?: any,\n  ) {\n    const entries: Array<[K, V]> = [];\n    let index = 0;\n    for (const entry of this) {\n      if (Reflect.apply(predicate, thisArg, [entry, index, this])) {\n        entries.push(entry);\n      }\n      index++;\n    }\n    return new OrderedDict(entries);\n  }\n\n  map<U>(\n    callbackfn: (entry: [K, V], index: number, dictionary: OrderedDict<K, V>) => U,\n    thisArg?: any,\n  ): OrderedDict<K, U> {\n    const entries: [K, U][] = [];\n    let index = 0;\n    for (const entry of this) {\n      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index, this])]);\n      index++;\n    }\n    return new OrderedDict(entries);\n  }\n\n  reduce(\n    callbackfn: (\n      previousValue: [K, V],\n      currentEntry: [K, V],\n      currentIndex: number,\n      dictionary: OrderedDict<K, V>,\n    ) => [K, V],\n  ): [K, V];\n  reduce(\n    callbackfn: (\n      previousValue: [K, V],\n      currentEntry: [K, V],\n      currentIndex: number,\n      dictionary: OrderedDict<K, V>,\n    ) => [K, V],\n    initialValue: [K, V],\n  ): [K, V];\n  reduce<U>(\n    callbackfn: (\n      previousValue: U,\n      currentEntry: [K, V],\n      currentIndex: number,\n      dictionary: OrderedDict<K, V>,\n    ) => U,\n    initialValue: U,\n  ): U;\n\n  reduce<U>(\n    ...args: [\n      (\n        previousValue: U,\n        currentEntry: [K, V],\n        currentIndex: number,\n        dictionary: OrderedDict<K, V>,\n      ) => U,\n      U?,\n    ]\n  ) {\n    const [callbackfn, initialValue] = args;\n    let index = 0;\n    let accumulator = initialValue ?? this.at(0)!;\n    for (const entry of this) {\n      if (index === 0 && args.length === 1) {\n        accumulator = entry as any;\n      } else {\n        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index, this]);\n      }\n      index++;\n    }\n    return accumulator;\n  }\n\n  reduceRight(\n    callbackfn: (\n      previousValue: [K, V],\n      currentEntry: [K, V],\n      currentIndex: number,\n      dictionary: OrderedDict<K, V>,\n    ) => [K, V],\n  ): [K, V];\n  reduceRight(\n    callbackfn: (\n      previousValue: [K, V],\n      currentEntry: [K, V],\n      currentIndex: number,\n      dictionary: OrderedDict<K, V>,\n    ) => [K, V],\n    initialValue: [K, V],\n  ): [K, V];\n  reduceRight<U>(\n    callbackfn: (\n      previousValue: [K, V],\n      currentValue: U,\n      currentIndex: number,\n      dictionary: OrderedDict<K, V>,\n    ) => U,\n    initialValue: U,\n  ): U;\n\n  reduceRight<U>(\n    ...args: [\n      (\n        previousValue: U,\n        currentEntry: [K, V],\n        currentIndex: number,\n        dictionary: OrderedDict<K, V>,\n      ) => U,\n      U?,\n    ]\n  ) {\n    const [callbackfn, initialValue] = args;\n    let accumulator = initialValue ?? this.at(-1)!;\n    for (let index = this.size - 1; index >= 0; index--) {\n      const entry = this.at(index)!;\n      if (index === this.size - 1 && args.length === 1) {\n        accumulator = entry as any;\n      } else {\n        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index, this]);\n      }\n    }\n    return accumulator;\n  }\n\n  toSorted(compareFn?: (a: [K, V], b: [K, V]) => number): OrderedDict<K, V> {\n    const entries = [...this.entries()].sort(compareFn);\n    return new OrderedDict(entries);\n  }\n\n  toReversed(): OrderedDict<K, V> {\n    const reversed = new OrderedDict<K, V>();\n    for (let index = this.size - 1; index >= 0; index--) {\n      const key = this.keyAt(index)!;\n      const element = this.get(key)!;\n      reversed.set(key, element);\n    }\n    return reversed;\n  }\n\n  toSpliced(start: number, deleteCount?: number): OrderedDict<K, V>;\n  toSpliced(start: number, deleteCount: number, ...items: [K, V][]): OrderedDict<K, V>;\n\n  toSpliced(...args: [start: number, deleteCount: number, ...items: [K, V][]]) {\n    const entries = [...this.entries()];\n    entries.splice(...args);\n    return new OrderedDict(entries);\n  }\n\n  slice(start?: number, end?: number) {\n    const result = new OrderedDict<K, V>();\n    let stop = this.size - 1;\n\n    if (start === undefined) {\n      return result;\n    }\n\n    if (start < 0) {\n      start = start + this.size;\n    }\n\n    if (end !== undefined && end > 0) {\n      stop = end - 1;\n    }\n\n    for (let index = start; index <= stop; index++) {\n      const key = this.keyAt(index)!;\n      const element = this.get(key)!;\n      result.set(key, element);\n    }\n    return result;\n  }\n\n  every(\n    predicate: (entry: [K, V], index: number, dictionary: OrderedDict<K, V>) => unknown,\n    thisArg?: any,\n  ) {\n    let index = 0;\n    for (const entry of this) {\n      if (!Reflect.apply(predicate, thisArg, [entry, index, this])) {\n        return false;\n      }\n      index++;\n    }\n    return true;\n  }\n\n  some(\n    predicate: (entry: [K, V], index: number, dictionary: OrderedDict<K, V>) => unknown,\n    thisArg?: any,\n  ) {\n    let index = 0;\n    for (const entry of this) {\n      if (Reflect.apply(predicate, thisArg, [entry, index, this])) {\n        return true;\n      }\n      index++;\n    }\n    return false;\n  }\n}\n\nexport type KeyOf<D extends OrderedDict<any, any>> =\n  D extends OrderedDict<infer K, any> ? K : never;\nexport type ValueOf<D extends OrderedDict<any, any>> =\n  D extends OrderedDict<any, infer V> ? V : never;\nexport type EntryOf<D extends OrderedDict<any, any>> = [KeyOf<D>, ValueOf<D>];\nexport type KeyFrom<E extends EntryOf<any>> = E[0];\nexport type ValueFrom<E extends EntryOf<any>> = E[1];\n\nfunction at<T>(array: ArrayLike<T>, index: number): T | undefined {\n  if ('at' in Array.prototype) {\n    return Array.prototype.at.call(array, index);\n  }\n  const actualIndex = toSafeIndex(array, index);\n  return actualIndex === -1 ? undefined : array[actualIndex];\n}\n\nfunction toSafeIndex(array: ArrayLike<any>, index: number) {\n  const length = array.length;\n  const relativeIndex = toSafeInteger(index);\n  const actualIndex = relativeIndex >= 0 ? relativeIndex : length + relativeIndex;\n  return actualIndex < 0 || actualIndex >= length ? -1 : actualIndex;\n}\n\nfunction toSafeInteger(number: number) {\n  // eslint-disable-next-line no-self-compare\n  return number !== number || number === 0 ? 0 : Math.trunc(number);\n}\n"
  },
  {
    "path": "packages/react/collection/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/compose-refs/README.md",
    "content": "# `react-compose-refs`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/compose-refs/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/compose-refs/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-compose-refs\",\n  \"version\": \"1.1.2\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/compose-refs/src/compose-refs.tsx",
    "content": "import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T) {\n  if (typeof ref === 'function') {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  return (node) => {\n    let hasCleanup = false;\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node);\n      if (!hasCleanup && typeof cleanup == 'function') {\n        hasCleanup = true;\n      }\n      return cleanup;\n    });\n\n    // React <19 will log an error to the console if a callback ref returns a\n    // value. We don't use ref cleanups internally so this will only happen if a\n    // user's ref callback returns a value, which we only expect if they are\n    // using the cleanup functionality added in React 19.\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (typeof cleanup == 'function') {\n            cleanup();\n          } else {\n            setRef(refs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n"
  },
  {
    "path": "packages/react/compose-refs/src/index.ts",
    "content": "export { composeRefs, useComposedRefs } from './compose-refs';\n"
  },
  {
    "path": "packages/react/compose-refs/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/context/CHANGELOG.md",
    "content": "# @radix-ui/react-context\n\n## 1.1.3\n\n- Added `displayName` to context objects\n"
  },
  {
    "path": "packages/react/context/README.md",
    "content": "# `react-context`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/context/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/context/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-context\",\n  \"version\": \"1.1.3\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/context/src/create-context.tsx",
    "content": "import * as React from 'react';\n\nfunction createContext<ContextValueType extends object | null>(\n  rootComponentName: string,\n  defaultContext?: ContextValueType,\n) {\n  const Context = React.createContext<ContextValueType | undefined>(defaultContext);\n  Context.displayName = rootComponentName + 'Context';\n\n  const Provider: React.FC<ContextValueType & { children: React.ReactNode }> = (props) => {\n    const { children, ...context } = props;\n    // Only re-memoize when prop values change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n    return <Context.Provider value={value}>{children}</Context.Provider>;\n  };\n\n  Provider.displayName = rootComponentName + 'Provider';\n\n  function useContext(consumerName: string) {\n    const context = React.useContext(Context);\n    if (context) return context;\n    if (defaultContext !== undefined) return defaultContext;\n    // if a defaultContext wasn't specified, it's a required context.\n    throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n  }\n\n  return [Provider, useContext] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * createContextScope\n * -----------------------------------------------------------------------------------------------*/\n\ntype Scope<C = any> = { [scopeName: string]: React.Context<C>[] } | undefined;\ntype ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope };\ninterface CreateScope {\n  scopeName: string;\n  (): ScopeHook;\n}\n\nfunction createContextScope(scopeName: string, createContextScopeDeps: CreateScope[] = []) {\n  let defaultContexts: any[] = [];\n\n  /* -----------------------------------------------------------------------------------------------\n   * createContext\n   * ---------------------------------------------------------------------------------------------*/\n\n  function createContext<ContextValueType extends object | null>(\n    rootComponentName: string,\n    defaultContext?: ContextValueType,\n  ) {\n    const BaseContext = React.createContext<ContextValueType | undefined>(defaultContext);\n    BaseContext.displayName = rootComponentName + 'Context';\n    const index = defaultContexts.length;\n    defaultContexts = [...defaultContexts, defaultContext];\n\n    const Provider: React.FC<\n      ContextValueType & { scope: Scope<ContextValueType>; children: React.ReactNode }\n    > = (props) => {\n      const { scope, children, ...context } = props;\n      const Context = scope?.[scopeName]?.[index] || BaseContext;\n      // Only re-memoize when prop values change\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      const value = React.useMemo(() => context, Object.values(context)) as ContextValueType;\n      return <Context.Provider value={value}>{children}</Context.Provider>;\n    };\n\n    Provider.displayName = rootComponentName + 'Provider';\n\n    function useContext(consumerName: string, scope: Scope<ContextValueType | undefined>) {\n      const Context = scope?.[scopeName]?.[index] || BaseContext;\n      const context = React.useContext(Context);\n      if (context) return context;\n      if (defaultContext !== undefined) return defaultContext;\n      // if a defaultContext wasn't specified, it's a required context.\n      throw new Error(`\\`${consumerName}\\` must be used within \\`${rootComponentName}\\``);\n    }\n\n    return [Provider, useContext] as const;\n  }\n\n  /* -----------------------------------------------------------------------------------------------\n   * createScope\n   * ---------------------------------------------------------------------------------------------*/\n\n  const createScope: CreateScope = () => {\n    const scopeContexts = defaultContexts.map((defaultContext) => {\n      return React.createContext(defaultContext);\n    });\n    return function useScope(scope: Scope) {\n      const contexts = scope?.[scopeName] || scopeContexts;\n      return React.useMemo(\n        () => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),\n        [scope, contexts],\n      );\n    };\n  };\n\n  createScope.scopeName = scopeName;\n  return [createContext, composeContextScopes(createScope, ...createContextScopeDeps)] as const;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * composeContextScopes\n * -----------------------------------------------------------------------------------------------*/\n\nfunction composeContextScopes(...scopes: [CreateScope, ...CreateScope[]]): CreateScope {\n  const baseScope = scopes[0];\n  if (scopes.length === 1) return baseScope;\n\n  const createScope: CreateScope = () => {\n    const scopeHooks = scopes.map((createScope) => ({\n      useScope: createScope(),\n      scopeName: createScope.scopeName,\n    }));\n\n    return function useComposedScopes(overrideScopes) {\n      const nextScopes = scopeHooks.reduce((nextScopes, { useScope, scopeName }) => {\n        // We are calling a hook inside a callback which React warns against to avoid inconsistent\n        // renders, however, scoping doesn't have render side effects so we ignore the rule.\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        const scopeProps = useScope(overrideScopes);\n        const currentScope = scopeProps[`__scope${scopeName}`];\n        return { ...nextScopes, ...currentScope };\n      }, {});\n\n      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);\n    };\n  };\n\n  createScope.scopeName = baseScope.scopeName;\n  return createScope;\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { createContext, createContextScope };\nexport type { CreateScope, Scope };\n"
  },
  {
    "path": "packages/react/context/src/index.ts",
    "content": "export { createContext, createContextScope } from './create-context';\nexport type { CreateScope, Scope } from './create-context';\n"
  },
  {
    "path": "packages/react/context/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/context-menu/CHANGELOG.md",
    "content": "# @radix-ui/react-context-menu\n\n## 2.2.16\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-menu@2.1.16`, `@radix-ui/react-primitive@2.1.4`\n\n## 2.2.15\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-menu@2.1.15`, `@radix-ui/react-primitive@2.1.3`\n\n## 2.2.14\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.14`, `@radix-ui/react-primitive@2.1.2`\n\n## 2.2.13\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.13`, `@radix-ui/react-primitive@2.1.1`\n\n## 2.2.12\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.12`\n\n## 2.2.11\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.11`\n\n## 2.2.10\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-menu@2.1.10`\n\n## 2.2.9\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-menu@2.1.9`\n\n## 2.2.8\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`\n"
  },
  {
    "path": "packages/react/context-menu/README.md",
    "content": "# `react-context-menu`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/context-menu).\n"
  },
  {
    "path": "packages/react/context-menu/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/context-menu/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-context-menu\",\n  \"version\": \"2.2.16\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-menu\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/test-data\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/context-menu/src/context-menu.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as MenuPrimitive from '@radix-ui/react-menu';\nimport { createMenuScope } from '@radix-ui/react-menu';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\ntype Point = { x: number; y: number };\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenu\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTEXT_MENU_NAME = 'ContextMenu';\n\ntype ScopedProps<P> = P & { __scopeContextMenu?: Scope };\nconst [createContextMenuContext, createContextMenuScope] = createContextScope(CONTEXT_MENU_NAME, [\n  createMenuScope,\n]);\nconst useMenuScope = createMenuScope();\n\ntype ContextMenuContextValue = {\n  open: boolean;\n  onOpenChange(open: boolean): void;\n  modal: boolean;\n};\n\nconst [ContextMenuProvider, useContextMenuContext] =\n  createContextMenuContext<ContextMenuContextValue>(CONTEXT_MENU_NAME);\n\ninterface ContextMenuProps {\n  children?: React.ReactNode;\n  onOpenChange?(open: boolean): void;\n  dir?: Direction;\n  modal?: boolean;\n}\n\nconst ContextMenu: React.FC<ContextMenuProps> = (props: ScopedProps<ContextMenuProps>) => {\n  const { __scopeContextMenu, children, onOpenChange, dir, modal = true } = props;\n  const [open, setOpen] = React.useState(false);\n  const menuScope = useMenuScope(__scopeContextMenu);\n  const handleOpenChangeProp = useCallbackRef(onOpenChange);\n\n  const handleOpenChange = React.useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      handleOpenChangeProp(open);\n    },\n    [handleOpenChangeProp],\n  );\n\n  return (\n    <ContextMenuProvider\n      scope={__scopeContextMenu}\n      open={open}\n      onOpenChange={handleOpenChange}\n      modal={modal}\n    >\n      <MenuPrimitive.Root\n        {...menuScope}\n        dir={dir}\n        open={open}\n        onOpenChange={handleOpenChange}\n        modal={modal}\n      >\n        {children}\n      </MenuPrimitive.Root>\n    </ContextMenuProvider>\n  );\n};\n\nContextMenu.displayName = CONTEXT_MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'ContextMenuTrigger';\n\ntype ContextMenuTriggerElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface ContextMenuTriggerProps extends PrimitiveSpanProps {\n  disabled?: boolean;\n}\n\nconst ContextMenuTrigger = React.forwardRef<ContextMenuTriggerElement, ContextMenuTriggerProps>(\n  (props: ScopedProps<ContextMenuTriggerProps>, forwardedRef) => {\n    const { __scopeContextMenu, disabled = false, ...triggerProps } = props;\n    const context = useContextMenuContext(TRIGGER_NAME, __scopeContextMenu);\n    const menuScope = useMenuScope(__scopeContextMenu);\n    const pointRef = React.useRef<Point>({ x: 0, y: 0 });\n    const virtualRef = React.useRef({\n      getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...pointRef.current }),\n    });\n    const longPressTimerRef = React.useRef(0);\n    const clearLongPress = React.useCallback(\n      () => window.clearTimeout(longPressTimerRef.current),\n      [],\n    );\n    const handleOpen = (event: React.MouseEvent | React.PointerEvent) => {\n      pointRef.current = { x: event.clientX, y: event.clientY };\n      context.onOpenChange(true);\n    };\n\n    React.useEffect(() => clearLongPress, [clearLongPress]);\n    React.useEffect(() => void (disabled && clearLongPress()), [disabled, clearLongPress]);\n\n    return (\n      <>\n        <MenuPrimitive.Anchor {...menuScope} virtualRef={virtualRef} />\n        <Primitive.span\n          data-state={context.open ? 'open' : 'closed'}\n          data-disabled={disabled ? '' : undefined}\n          {...triggerProps}\n          ref={forwardedRef}\n          // prevent iOS context menu from appearing\n          style={{ WebkitTouchCallout: 'none', ...props.style }}\n          // if trigger is disabled, enable the native Context Menu\n          onContextMenu={\n            disabled\n              ? props.onContextMenu\n              : composeEventHandlers(props.onContextMenu, (event) => {\n                  // clearing the long press here because some platforms already support\n                  // long press to trigger a `contextmenu` event\n                  clearLongPress();\n                  handleOpen(event);\n                  event.preventDefault();\n                })\n          }\n          onPointerDown={\n            disabled\n              ? props.onPointerDown\n              : composeEventHandlers(\n                  props.onPointerDown,\n                  whenTouchOrPen((event) => {\n                    // clear the long press here in case there's multiple touch points\n                    clearLongPress();\n                    longPressTimerRef.current = window.setTimeout(() => handleOpen(event), 700);\n                  }),\n                )\n          }\n          onPointerMove={\n            disabled\n              ? props.onPointerMove\n              : composeEventHandlers(props.onPointerMove, whenTouchOrPen(clearLongPress))\n          }\n          onPointerCancel={\n            disabled\n              ? props.onPointerCancel\n              : composeEventHandlers(props.onPointerCancel, whenTouchOrPen(clearLongPress))\n          }\n          onPointerUp={\n            disabled\n              ? props.onPointerUp\n              : composeEventHandlers(props.onPointerUp, whenTouchOrPen(clearLongPress))\n          }\n        />\n      </>\n    );\n  },\n);\n\nContextMenuTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'ContextMenuPortal';\n\ntype MenuPortalProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;\ninterface ContextMenuPortalProps extends MenuPortalProps {}\n\nconst ContextMenuPortal: React.FC<ContextMenuPortalProps> = (\n  props: ScopedProps<ContextMenuPortalProps>,\n) => {\n  const { __scopeContextMenu, ...portalProps } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n  return <MenuPrimitive.Portal {...menuScope} {...portalProps} />;\n};\n\nContextMenuPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'ContextMenuContent';\n\ntype ContextMenuContentElement = React.ComponentRef<typeof MenuPrimitive.Content>;\ntype MenuContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Content>;\ninterface ContextMenuContentProps\n  extends Omit<MenuContentProps, 'onEntryFocus' | 'side' | 'sideOffset' | 'align'> {}\n\nconst ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(\n  (props: ScopedProps<ContextMenuContentProps>, forwardedRef) => {\n    const { __scopeContextMenu, ...contentProps } = props;\n    const context = useContextMenuContext(CONTENT_NAME, __scopeContextMenu);\n    const menuScope = useMenuScope(__scopeContextMenu);\n    const hasInteractedOutsideRef = React.useRef(false);\n\n    return (\n      <MenuPrimitive.Content\n        {...menuScope}\n        {...contentProps}\n        ref={forwardedRef}\n        side=\"right\"\n        sideOffset={2}\n        align=\"start\"\n        onCloseAutoFocus={(event) => {\n          props.onCloseAutoFocus?.(event);\n\n          if (!event.defaultPrevented && hasInteractedOutsideRef.current) {\n            event.preventDefault();\n          }\n\n          hasInteractedOutsideRef.current = false;\n        }}\n        onInteractOutside={(event) => {\n          props.onInteractOutside?.(event);\n\n          if (!event.defaultPrevented && !context.modal) hasInteractedOutsideRef.current = true;\n        }}\n        style={{\n          ...props.style,\n          // re-namespace exposed content custom properties\n          ...{\n            '--radix-context-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-context-menu-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-context-menu-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-context-menu-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-context-menu-trigger-height': 'var(--radix-popper-anchor-height)',\n          },\n        }}\n      />\n    );\n  },\n);\n\nContextMenuContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'ContextMenuGroup';\n\ntype ContextMenuGroupElement = React.ComponentRef<typeof MenuPrimitive.Group>;\ntype MenuGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;\ninterface ContextMenuGroupProps extends MenuGroupProps {}\n\nconst ContextMenuGroup = React.forwardRef<ContextMenuGroupElement, ContextMenuGroupProps>(\n  (props: ScopedProps<ContextMenuGroupProps>, forwardedRef) => {\n    const { __scopeContextMenu, ...groupProps } = props;\n    const menuScope = useMenuScope(__scopeContextMenu);\n    return <MenuPrimitive.Group {...menuScope} {...groupProps} ref={forwardedRef} />;\n  },\n);\n\nContextMenuGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'ContextMenuLabel';\n\ntype ContextMenuLabelElement = React.ComponentRef<typeof MenuPrimitive.Label>;\ntype MenuLabelProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Label>;\ninterface ContextMenuLabelProps extends MenuLabelProps {}\n\nconst ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLabelProps>(\n  (props: ScopedProps<ContextMenuLabelProps>, forwardedRef) => {\n    const { __scopeContextMenu, ...labelProps } = props;\n    const menuScope = useMenuScope(__scopeContextMenu);\n    return <MenuPrimitive.Label {...menuScope} {...labelProps} ref={forwardedRef} />;\n  },\n);\n\nContextMenuLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'ContextMenuItem';\n\ntype ContextMenuItemElement = React.ComponentRef<typeof MenuPrimitive.Item>;\ntype MenuItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>;\ninterface ContextMenuItemProps extends MenuItemProps {}\n\nconst ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItemProps>(\n  (props: ScopedProps<ContextMenuItemProps>, forwardedRef) => {\n    const { __scopeContextMenu, ...itemProps } = props;\n    const menuScope = useMenuScope(__scopeContextMenu);\n    return <MenuPrimitive.Item {...menuScope} {...itemProps} ref={forwardedRef} />;\n  },\n);\n\nContextMenuItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuCheckboxItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_ITEM_NAME = 'ContextMenuCheckboxItem';\n\ntype ContextMenuCheckboxItemElement = React.ComponentRef<typeof MenuPrimitive.CheckboxItem>;\ntype MenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>;\ninterface ContextMenuCheckboxItemProps extends MenuCheckboxItemProps {}\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n  ContextMenuCheckboxItemElement,\n  ContextMenuCheckboxItemProps\n>((props: ScopedProps<ContextMenuCheckboxItemProps>, forwardedRef) => {\n  const { __scopeContextMenu, ...checkboxItemProps } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n  return <MenuPrimitive.CheckboxItem {...menuScope} {...checkboxItemProps} ref={forwardedRef} />;\n});\n\nContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuRadioGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_GROUP_NAME = 'ContextMenuRadioGroup';\n\ntype ContextMenuRadioGroupElement = React.ComponentRef<typeof MenuPrimitive.RadioGroup>;\ntype MenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;\ninterface ContextMenuRadioGroupProps extends MenuRadioGroupProps {}\n\nconst ContextMenuRadioGroup = React.forwardRef<\n  ContextMenuRadioGroupElement,\n  ContextMenuRadioGroupProps\n>((props: ScopedProps<ContextMenuRadioGroupProps>, forwardedRef) => {\n  const { __scopeContextMenu, ...radioGroupProps } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n  return <MenuPrimitive.RadioGroup {...menuScope} {...radioGroupProps} ref={forwardedRef} />;\n});\n\nContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuRadioItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_ITEM_NAME = 'ContextMenuRadioItem';\n\ntype ContextMenuRadioItemElement = React.ComponentRef<typeof MenuPrimitive.RadioItem>;\ntype MenuRadioItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;\ninterface ContextMenuRadioItemProps extends MenuRadioItemProps {}\n\nconst ContextMenuRadioItem = React.forwardRef<\n  ContextMenuRadioItemElement,\n  ContextMenuRadioItemProps\n>((props: ScopedProps<ContextMenuRadioItemProps>, forwardedRef) => {\n  const { __scopeContextMenu, ...radioItemProps } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n  return <MenuPrimitive.RadioItem {...menuScope} {...radioItemProps} ref={forwardedRef} />;\n});\n\nContextMenuRadioItem.displayName = RADIO_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'ContextMenuItemIndicator';\n\ntype ContextMenuItemIndicatorElement = React.ComponentRef<typeof MenuPrimitive.ItemIndicator>;\ntype MenuItemIndicatorProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;\ninterface ContextMenuItemIndicatorProps extends MenuItemIndicatorProps {}\n\nconst ContextMenuItemIndicator = React.forwardRef<\n  ContextMenuItemIndicatorElement,\n  ContextMenuItemIndicatorProps\n>((props: ScopedProps<ContextMenuItemIndicatorProps>, forwardedRef) => {\n  const { __scopeContextMenu, ...itemIndicatorProps } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n  return <MenuPrimitive.ItemIndicator {...menuScope} {...itemIndicatorProps} ref={forwardedRef} />;\n});\n\nContextMenuItemIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'ContextMenuSeparator';\n\ntype ContextMenuSeparatorElement = React.ComponentRef<typeof MenuPrimitive.Separator>;\ntype MenuSeparatorProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>;\ninterface ContextMenuSeparatorProps extends MenuSeparatorProps {}\n\nconst ContextMenuSeparator = React.forwardRef<\n  ContextMenuSeparatorElement,\n  ContextMenuSeparatorProps\n>((props: ScopedProps<ContextMenuSeparatorProps>, forwardedRef) => {\n  const { __scopeContextMenu, ...separatorProps } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n  return <MenuPrimitive.Separator {...menuScope} {...separatorProps} ref={forwardedRef} />;\n});\n\nContextMenuSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'ContextMenuArrow';\n\ntype ContextMenuArrowElement = React.ComponentRef<typeof MenuPrimitive.Arrow>;\ntype MenuArrowProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>;\ninterface ContextMenuArrowProps extends MenuArrowProps {}\n\nconst ContextMenuArrow = React.forwardRef<ContextMenuArrowElement, ContextMenuArrowProps>(\n  (props: ScopedProps<ContextMenuArrowProps>, forwardedRef) => {\n    const { __scopeContextMenu, ...arrowProps } = props;\n    const menuScope = useMenuScope(__scopeContextMenu);\n    return <MenuPrimitive.Arrow {...menuScope} {...arrowProps} ref={forwardedRef} />;\n  },\n);\n\nContextMenuArrow.displayName = ARROW_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuSub\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_NAME = 'ContextMenuSub';\n\ninterface ContextMenuSubProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n}\n\nconst ContextMenuSub: React.FC<ContextMenuSubProps> = (props: ScopedProps<ContextMenuSubProps>) => {\n  const { __scopeContextMenu, children, onOpenChange, open: openProp, defaultOpen } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n    caller: SUB_NAME,\n  });\n\n  return (\n    <MenuPrimitive.Sub {...menuScope} open={open} onOpenChange={setOpen}>\n      {children}\n    </MenuPrimitive.Sub>\n  );\n};\n\nContextMenuSub.displayName = SUB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuSubTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_TRIGGER_NAME = 'ContextMenuSubTrigger';\n\ntype ContextMenuSubTriggerElement = React.ComponentRef<typeof MenuPrimitive.SubTrigger>;\ntype MenuSubTriggerProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;\ninterface ContextMenuSubTriggerProps extends MenuSubTriggerProps {}\n\nconst ContextMenuSubTrigger = React.forwardRef<\n  ContextMenuSubTriggerElement,\n  ContextMenuSubTriggerProps\n>((props: ScopedProps<ContextMenuSubTriggerProps>, forwardedRef) => {\n  const { __scopeContextMenu, ...triggerItemProps } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n  return <MenuPrimitive.SubTrigger {...menuScope} {...triggerItemProps} ref={forwardedRef} />;\n});\n\nContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ContextMenuSubContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_CONTENT_NAME = 'ContextMenuSubContent';\n\ntype ContextMenuSubContentElement = React.ComponentRef<typeof MenuPrimitive.Content>;\ntype MenuSubContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;\ninterface ContextMenuSubContentProps extends MenuSubContentProps {}\n\nconst ContextMenuSubContent = React.forwardRef<\n  ContextMenuSubContentElement,\n  ContextMenuSubContentProps\n>((props: ScopedProps<ContextMenuSubContentProps>, forwardedRef) => {\n  const { __scopeContextMenu, ...subContentProps } = props;\n  const menuScope = useMenuScope(__scopeContextMenu);\n\n  return (\n    <MenuPrimitive.SubContent\n      {...menuScope}\n      {...subContentProps}\n      ref={forwardedRef}\n      style={{\n        ...props.style,\n        // re-namespace exposed content custom properties\n        ...{\n          '--radix-context-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',\n          '--radix-context-menu-content-available-width': 'var(--radix-popper-available-width)',\n          '--radix-context-menu-content-available-height': 'var(--radix-popper-available-height)',\n          '--radix-context-menu-trigger-width': 'var(--radix-popper-anchor-width)',\n          '--radix-context-menu-trigger-height': 'var(--radix-popper-anchor-height)',\n        },\n      }}\n    />\n  );\n});\n\nContextMenuSubContent.displayName = SUB_CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction whenTouchOrPen<E>(handler: React.PointerEventHandler<E>): React.PointerEventHandler<E> {\n  return (event) => (event.pointerType !== 'mouse' ? handler(event) : undefined);\n}\n\nconst Root = ContextMenu;\nconst Trigger = ContextMenuTrigger;\nconst Portal = ContextMenuPortal;\nconst Content = ContextMenuContent;\nconst Group = ContextMenuGroup;\nconst Label = ContextMenuLabel;\nconst Item = ContextMenuItem;\nconst CheckboxItem = ContextMenuCheckboxItem;\nconst RadioGroup = ContextMenuRadioGroup;\nconst RadioItem = ContextMenuRadioItem;\nconst ItemIndicator = ContextMenuItemIndicator;\nconst Separator = ContextMenuSeparator;\nconst Arrow = ContextMenuArrow;\nconst Sub = ContextMenuSub;\nconst SubTrigger = ContextMenuSubTrigger;\nconst SubContent = ContextMenuSubContent;\n\nexport {\n  createContextMenuScope,\n  //\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuPortal,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuLabel,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuItemIndicator,\n  ContextMenuSeparator,\n  ContextMenuArrow,\n  ContextMenuSub,\n  ContextMenuSubTrigger,\n  ContextMenuSubContent,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  Group,\n  Label,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  ItemIndicator,\n  Separator,\n  Arrow,\n  Sub,\n  SubTrigger,\n  SubContent,\n};\nexport type {\n  ContextMenuProps,\n  ContextMenuTriggerProps,\n  ContextMenuPortalProps,\n  ContextMenuContentProps,\n  ContextMenuGroupProps,\n  ContextMenuLabelProps,\n  ContextMenuItemProps,\n  ContextMenuCheckboxItemProps,\n  ContextMenuRadioGroupProps,\n  ContextMenuRadioItemProps,\n  ContextMenuItemIndicatorProps,\n  ContextMenuSeparatorProps,\n  ContextMenuArrowProps,\n  ContextMenuSubProps,\n  ContextMenuSubTriggerProps,\n  ContextMenuSubContentProps,\n};\n"
  },
  {
    "path": "packages/react/context-menu/src/index.ts",
    "content": "'use client';\nexport {\n  createContextMenuScope,\n  //\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuPortal,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuLabel,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuItemIndicator,\n  ContextMenuSeparator,\n  ContextMenuArrow,\n  ContextMenuSub,\n  ContextMenuSubTrigger,\n  ContextMenuSubContent,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  Group,\n  Label,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  ItemIndicator,\n  Separator,\n  Arrow,\n  Sub,\n  SubTrigger,\n  SubContent,\n} from './context-menu';\nexport type {\n  ContextMenuProps,\n  ContextMenuTriggerProps,\n  ContextMenuPortalProps,\n  ContextMenuContentProps,\n  ContextMenuGroupProps,\n  ContextMenuLabelProps,\n  ContextMenuItemProps,\n  ContextMenuCheckboxItemProps,\n  ContextMenuRadioGroupProps,\n  ContextMenuRadioItemProps,\n  ContextMenuItemIndicatorProps,\n  ContextMenuSeparatorProps,\n  ContextMenuArrowProps,\n  ContextMenuSubProps,\n  ContextMenuSubTriggerProps,\n  ContextMenuSubContentProps,\n} from './context-menu';\n"
  },
  {
    "path": "packages/react/context-menu/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/dialog/CHANGELOG.md",
    "content": "# @radix-ui/react-dialog\n\n## 1.1.15\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/react-slot@1.2.4`, `@radix-ui/react-focus-guards@1.1.3`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-dismissable-layer@1.1.11`, `@radix-ui/react-focus-scope@1.1.8`, `@radix-ui/react-portal@1.1.10`\n\n## 1.1.14\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-focus-scope@1.1.7`, `@radix-ui/react-portal@1.1.9`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.13\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-dismissable-layer@1.1.9`, `@radix-ui/react-focus-scope@1.1.6`, `@radix-ui/react-portal@1.1.8`\n\n## 1.1.12\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-dismissable-layer@1.1.8`, `@radix-ui/react-focus-scope@1.1.5`, `@radix-ui/react-portal@1.1.7`\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.1.8\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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-focus-scope@1.1.4`, `@radix-ui/react-portal@1.1.6`\n"
  },
  {
    "path": "packages/react/dialog/README.md",
    "content": "# `react-dialog`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/dialog).\n"
  },
  {
    "path": "packages/react/dialog/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/dialog/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-dialog\",\n  \"version\": \"1.1.15\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-focus-guards\": \"workspace:*\",\n    \"@radix-ui/react-focus-scope\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-portal\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-slot\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"aria-hidden\": \"^1.2.4\",\n    \"react-remove-scroll\": \"^2.6.3\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/dialog/src/dialog.test.tsx",
    "content": "import React from 'react';\nimport { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { render, fireEvent, cleanup } from '@testing-library/react';\nimport * as Dialog from './dialog';\nimport type { Mock, MockInstance } from 'vitest';\nimport { describe, it, afterEach, beforeEach, vi, expect } from 'vitest';\n\nconst OPEN_TEXT = 'Open';\nconst CLOSE_TEXT = 'Close';\nconst TITLE_TEXT = 'Title';\n\nconst NoLabelDialogTest = (props: React.ComponentProps<typeof Dialog.Root>) => (\n  <Dialog.Root {...props}>\n    <Dialog.Trigger>{OPEN_TEXT}</Dialog.Trigger>\n    <Dialog.Overlay />\n    <Dialog.Content>\n      <Dialog.Close>{CLOSE_TEXT}</Dialog.Close>\n    </Dialog.Content>\n  </Dialog.Root>\n);\n\nconst UndefinedDescribedByDialog = (props: React.ComponentProps<typeof Dialog.Root>) => (\n  <Dialog.Root {...props}>\n    <Dialog.Trigger>{OPEN_TEXT}</Dialog.Trigger>\n    <Dialog.Overlay />\n    <Dialog.Content aria-describedby={undefined}>\n      <Dialog.Title>{TITLE_TEXT}</Dialog.Title>\n      <Dialog.Close>{CLOSE_TEXT}</Dialog.Close>\n    </Dialog.Content>\n  </Dialog.Root>\n);\n\nconst DialogTest = (props: React.ComponentProps<typeof Dialog.Root>) => (\n  <Dialog.Root {...props}>\n    <Dialog.Trigger>{OPEN_TEXT}</Dialog.Trigger>\n    <Dialog.Overlay />\n    <Dialog.Content>\n      <Dialog.Title>{TITLE_TEXT}</Dialog.Title>\n      <Dialog.Close>{CLOSE_TEXT}</Dialog.Close>\n    </Dialog.Content>\n  </Dialog.Root>\n);\n\nfunction renderAndClickDialogTrigger(Dialog: any) {\n  fireEvent.click(render(Dialog).getByText(OPEN_TEXT));\n}\n\ndescribe('given a default Dialog', () => {\n  let rendered: RenderResult;\n  let trigger: HTMLElement;\n  let closeButton: HTMLElement;\n  let consoleWarnMock: MockInstance;\n  let consoleWarnMockFunction: Mock;\n  let consoleErrorMock: MockInstance;\n  let consoleErrorMockFunction: Mock;\n\n  beforeEach(() => {\n    // This surpresses React error boundary logs for testing intentionally\n    // thrown errors, like in some test cases in this suite. See discussion of\n    // this here: https://github.com/facebook/react/issues/11098\n    consoleWarnMockFunction = vi.fn();\n    consoleWarnMock = vi.spyOn(console, 'warn').mockImplementation(consoleWarnMockFunction);\n    consoleErrorMockFunction = vi.fn();\n    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(consoleErrorMockFunction);\n\n    rendered = render(<DialogTest />);\n    trigger = rendered.getByText(OPEN_TEXT);\n  });\n\n  afterEach(() => {\n    cleanup();\n    consoleWarnMock.mockRestore();\n    consoleWarnMockFunction.mockClear();\n    consoleErrorMock.mockRestore();\n    consoleErrorMockFunction.mockClear();\n  });\n\n  it('should have no accessibility violations in default state', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  describe('after clicking the trigger', () => {\n    beforeEach(() => {\n      fireEvent.click(trigger);\n      closeButton = rendered.getByText(CLOSE_TEXT);\n    });\n\n    describe('when no description has been provided', () => {\n      it('should warn to the console', () => {\n        expect(consoleWarnMockFunction).toHaveBeenCalledTimes(1);\n      });\n    });\n\n    describe('when no title has been provided', () => {\n      beforeEach(() => {\n        cleanup();\n      });\n      it('should display an error in the console', () => {\n        consoleErrorMockFunction.mockClear();\n\n        renderAndClickDialogTrigger(<NoLabelDialogTest />);\n        expect(consoleErrorMockFunction).toHaveBeenCalled();\n      });\n    });\n\n    describe('when aria-describedby is set to undefined', () => {\n      beforeEach(() => {\n        cleanup();\n      });\n      it('should not warn to the console', () => {\n        consoleWarnMockFunction.mockClear();\n\n        renderAndClickDialogTrigger(<UndefinedDescribedByDialog />);\n        expect(consoleWarnMockFunction).not.toHaveBeenCalled();\n      });\n    });\n\n    it('should open the content', () => {\n      expect(closeButton).toBeVisible();\n    });\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should focus the close button', () => {\n      expect(closeButton).toHaveFocus();\n    });\n\n    describe('when pressing escape', () => {\n      beforeEach(() => {\n        fireEvent.keyDown(document.activeElement!, { key: 'Escape' });\n      });\n\n      it('should close the content', () => {\n        expect(closeButton).not.toBeInTheDocument();\n      });\n    });\n  });\n});\n"
  },
  {
    "path": "packages/react/dialog/src/dialog.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext, createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { hideOthers } from 'aria-hidden';\nimport { createSlot } from '@radix-ui/react-slot';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DIALOG_NAME = 'Dialog';\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope };\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);\n\ntype DialogContextValue = {\n  triggerRef: React.RefObject<HTMLButtonElement | null>;\n  contentRef: React.RefObject<DialogContentElement | null>;\n  contentId: string;\n  titleId: string;\n  descriptionId: string;\n  open: boolean;\n  onOpenChange(open: boolean): void;\n  onOpenToggle(): void;\n  modal: boolean;\n};\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME);\n\ninterface DialogProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n  modal?: boolean;\n}\n\nconst Dialog: React.FC<DialogProps> = (props: ScopedProps<DialogProps>) => {\n  const {\n    __scopeDialog,\n    children,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    modal = true,\n  } = props;\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const contentRef = React.useRef<DialogContentElement>(null);\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n    caller: DIALOG_NAME,\n  });\n\n  return (\n    <DialogProvider\n      scope={__scopeDialog}\n      triggerRef={triggerRef}\n      contentRef={contentRef}\n      contentId={useId()}\n      titleId={useId()}\n      descriptionId={useId()}\n      open={open}\n      onOpenChange={setOpen}\n      onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n      modal={modal}\n    >\n      {children}\n    </DialogProvider>\n  );\n};\n\nDialog.displayName = DIALOG_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger';\n\ntype DialogTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface DialogTriggerProps extends PrimitiveButtonProps {}\n\nconst DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(\n  (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n    const { __scopeDialog, ...triggerProps } = props;\n    const context = useDialogContext(TRIGGER_NAME, __scopeDialog);\n    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n    return (\n      <Primitive.button\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={context.open}\n        aria-controls={context.contentId}\n        data-state={getState(context.open)}\n        {...triggerProps}\n        ref={composedTriggerRef}\n        onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n      />\n    );\n  },\n);\n\nDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n  forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface DialogPortalProps {\n  children?: React.ReactNode;\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: PortalProps['container'];\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst DialogPortal: React.FC<DialogPortalProps> = (props: ScopedProps<DialogPortalProps>) => {\n  const { __scopeDialog, forceMount, children, container } = props;\n  const context = useDialogContext(PORTAL_NAME, __scopeDialog);\n  return (\n    <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n      {React.Children.map(children, (child) => (\n        <Presence present={forceMount || context.open}>\n          <PortalPrimitive asChild container={container}>\n            {child}\n          </PortalPrimitive>\n        </Presence>\n      ))}\n    </PortalProvider>\n  );\n};\n\nDialogPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay';\n\ntype DialogOverlayElement = DialogOverlayImplElement;\ninterface DialogOverlayProps extends DialogOverlayImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst DialogOverlay = React.forwardRef<DialogOverlayElement, DialogOverlayProps>(\n  (props: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n    const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);\n    const { forceMount = portalContext.forceMount, ...overlayProps } = props;\n    const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);\n    return context.modal ? (\n      <Presence present={forceMount || context.open}>\n        <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />\n      </Presence>\n    ) : null;\n  },\n);\n\nDialogOverlay.displayName = OVERLAY_NAME;\n\ntype DialogOverlayImplElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DialogOverlayImplProps extends PrimitiveDivProps {}\n\nconst Slot = createSlot('DialogOverlay.RemoveScroll');\n\nconst DialogOverlayImpl = React.forwardRef<DialogOverlayImplElement, DialogOverlayImplProps>(\n  (props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n    const { __scopeDialog, ...overlayProps } = props;\n    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);\n    return (\n      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n      // ie. when `Overlay` and `Content` are siblings\n      <RemoveScroll as={Slot} allowPinchZoom shards={[context.contentRef]}>\n        <Primitive.div\n          data-state={getState(context.open)}\n          {...overlayProps}\n          ref={forwardedRef}\n          // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n          style={{ pointerEvents: 'auto', ...overlayProps.style }}\n        />\n      </RemoveScroll>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent';\n\ntype DialogContentElement = DialogContentTypeElement;\ninterface DialogContentProps extends DialogContentTypeProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(\n  (props: ScopedProps<DialogContentProps>, forwardedRef) => {\n    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);\n    const { forceMount = portalContext.forceMount, ...contentProps } = props;\n    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n    return (\n      <Presence present={forceMount || context.open}>\n        {context.modal ? (\n          <DialogContentModal {...contentProps} ref={forwardedRef} />\n        ) : (\n          <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n        )}\n      </Presence>\n    );\n  },\n);\n\nDialogContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentTypeElement = DialogContentImplElement;\ninterface DialogContentTypeProps\n  extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}\n\nconst DialogContentModal = React.forwardRef<DialogContentTypeElement, DialogContentTypeProps>(\n  (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n    const contentRef = React.useRef<HTMLDivElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);\n\n    // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n    React.useEffect(() => {\n      const content = contentRef.current;\n      if (content) return hideOthers(content);\n    }, []);\n\n    return (\n      <DialogContentImpl\n        {...props}\n        ref={composedRefs}\n        // we make sure focus isn't trapped once `DialogContent` has been closed\n        // (closed !== unmounted when animating out)\n        trapFocus={context.open}\n        disableOutsidePointerEvents\n        onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n          event.preventDefault();\n          context.triggerRef.current?.focus();\n        })}\n        onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n          const originalEvent = event.detail.originalEvent;\n          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n\n          // If the event is a right-click, we shouldn't close because\n          // it is effectively as if we right-clicked the `Overlay`.\n          if (isRightClick) event.preventDefault();\n        })}\n        // When focus is trapped, a `focusout` event may still happen.\n        // We make sure we don't trigger our `onDismiss` in such case.\n        onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n          event.preventDefault(),\n        )}\n      />\n    );\n  },\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<DialogContentTypeElement, DialogContentTypeProps>(\n  (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n    const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n    const hasInteractedOutsideRef = React.useRef(false);\n    const hasPointerDownOutsideRef = React.useRef(false);\n\n    return (\n      <DialogContentImpl\n        {...props}\n        ref={forwardedRef}\n        trapFocus={false}\n        disableOutsidePointerEvents={false}\n        onCloseAutoFocus={(event) => {\n          props.onCloseAutoFocus?.(event);\n\n          if (!event.defaultPrevented) {\n            if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();\n            // Always prevent auto focus because we either focus manually or want user agent focus\n            event.preventDefault();\n          }\n\n          hasInteractedOutsideRef.current = false;\n          hasPointerDownOutsideRef.current = false;\n        }}\n        onInteractOutside={(event) => {\n          props.onInteractOutside?.(event);\n\n          if (!event.defaultPrevented) {\n            hasInteractedOutsideRef.current = true;\n            if (event.detail.originalEvent.type === 'pointerdown') {\n              hasPointerDownOutsideRef.current = true;\n            }\n          }\n\n          // Prevent dismissing when clicking the trigger.\n          // As the trigger is already setup to close, without doing so would\n          // cause it to close and immediately open.\n          const target = event.target as HTMLElement;\n          const targetIsTrigger = context.triggerRef.current?.contains(target);\n          if (targetIsTrigger) event.preventDefault();\n\n          // On Safari if the trigger is inside a container with tabIndex={0}, when clicked\n          // we will get the pointer down outside event on the trigger, but then a subsequent\n          // focus outside event on the container, we ignore any focus outside event when we've\n          // already had a pointer down outside event.\n          if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) {\n            event.preventDefault();\n          }\n        }}\n      />\n    );\n  },\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplElement = React.ComponentRef<typeof DismissableLayer>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;\ntype FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;\ninterface DialogContentImplProps extends Omit<DismissableLayerProps, 'onDismiss'> {\n  /**\n   * When `true`, focus cannot escape the `Content` via keyboard,\n   * pointer, or a programmatic focus.\n   * @defaultValue false\n   */\n  trapFocus?: FocusScopeProps['trapped'];\n\n  /**\n   * Event handler called when auto-focusing on open.\n   * Can be prevented.\n   */\n  onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];\n\n  /**\n   * Event handler called when auto-focusing on close.\n   * Can be prevented.\n   */\n  onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n}\n\nconst DialogContentImpl = React.forwardRef<DialogContentImplElement, DialogContentImplProps>(\n  (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n    const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;\n    const context = useDialogContext(CONTENT_NAME, __scopeDialog);\n    const contentRef = React.useRef<HTMLDivElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n\n    // Make sure the whole tree has focus guards as our `Dialog` will be\n    // the last element in the DOM (because of the `Portal`)\n    useFocusGuards();\n\n    return (\n      <>\n        <FocusScope\n          asChild\n          loop\n          trapped={trapFocus}\n          onMountAutoFocus={onOpenAutoFocus}\n          onUnmountAutoFocus={onCloseAutoFocus}\n        >\n          <DismissableLayer\n            role=\"dialog\"\n            id={context.contentId}\n            aria-describedby={context.descriptionId}\n            aria-labelledby={context.titleId}\n            data-state={getState(context.open)}\n            {...contentProps}\n            ref={composedRefs}\n            onDismiss={() => context.onOpenChange(false)}\n          />\n        </FocusScope>\n        {process.env.NODE_ENV !== 'production' && (\n          <>\n            <TitleWarning titleId={context.titleId} />\n            <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n          </>\n        )}\n      </>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle';\n\ntype DialogTitleElement = React.ComponentRef<typeof Primitive.h2>;\ntype PrimitiveHeading2Props = React.ComponentPropsWithoutRef<typeof Primitive.h2>;\ninterface DialogTitleProps extends PrimitiveHeading2Props {}\n\nconst DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(\n  (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n    const { __scopeDialog, ...titleProps } = props;\n    const context = useDialogContext(TITLE_NAME, __scopeDialog);\n    return <Primitive.h2 id={context.titleId} {...titleProps} ref={forwardedRef} />;\n  },\n);\n\nDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'DialogDescription';\n\ntype DialogDescriptionElement = React.ComponentRef<typeof Primitive.p>;\ntype PrimitiveParagraphProps = React.ComponentPropsWithoutRef<typeof Primitive.p>;\ninterface DialogDescriptionProps extends PrimitiveParagraphProps {}\n\nconst DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(\n  (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n    const { __scopeDialog, ...descriptionProps } = props;\n    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);\n    return <Primitive.p id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />;\n  },\n);\n\nDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose';\n\ntype DialogCloseElement = React.ComponentRef<typeof Primitive.button>;\ninterface DialogCloseProps extends PrimitiveButtonProps {}\n\nconst DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(\n  (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n    const { __scopeDialog, ...closeProps } = props;\n    const context = useDialogContext(CLOSE_NAME, __scopeDialog);\n    return (\n      <Primitive.button\n        type=\"button\"\n        {...closeProps}\n        ref={forwardedRef}\n        onClick={composeEventHandlers(props.onClick, () => context.onOpenChange(false))}\n      />\n    );\n  },\n);\n\nDialogClose.displayName = CLOSE_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n  return open ? 'open' : 'closed';\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning';\n\nconst [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n  contentName: CONTENT_NAME,\n  titleName: TITLE_NAME,\n  docsSlug: 'dialog',\n});\n\ntype TitleWarningProps = { titleId?: string };\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n  const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);\n\n  const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;\n\n  React.useEffect(() => {\n    if (titleId) {\n      const hasTitle = document.getElementById(titleId);\n      if (!hasTitle) console.error(MESSAGE);\n    }\n  }, [MESSAGE, titleId]);\n\n  return null;\n};\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning';\n\ntype DescriptionWarningProps = {\n  contentRef: React.RefObject<DialogContentElement | null>;\n  descriptionId?: string;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n  const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);\n  const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`;\n\n  React.useEffect(() => {\n    const describedById = contentRef.current?.getAttribute('aria-describedby');\n    // if we have an id and the user hasn't set aria-describedby={undefined}\n    if (descriptionId && describedById) {\n      const hasDescription = document.getElementById(descriptionId);\n      if (!hasDescription) console.warn(MESSAGE);\n    }\n  }, [MESSAGE, contentRef, descriptionId]);\n\n  return null;\n};\n\nconst Root = Dialog;\nconst Trigger = DialogTrigger;\nconst Portal = DialogPortal;\nconst Overlay = DialogOverlay;\nconst Content = DialogContent;\nconst Title = DialogTitle;\nconst Description = DialogDescription;\nconst Close = DialogClose;\n\nexport {\n  createDialogScope,\n  //\n  Dialog,\n  DialogTrigger,\n  DialogPortal,\n  DialogOverlay,\n  DialogContent,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Title,\n  Description,\n  Close,\n  //\n  WarningProvider,\n};\nexport type {\n  DialogProps,\n  DialogTriggerProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogContentProps,\n  DialogTitleProps,\n  DialogDescriptionProps,\n  DialogCloseProps,\n};\n"
  },
  {
    "path": "packages/react/dialog/src/index.ts",
    "content": "'use client';\nexport {\n  createDialogScope,\n  //\n  Dialog,\n  DialogTrigger,\n  DialogPortal,\n  DialogOverlay,\n  DialogContent,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Title,\n  Description,\n  Close,\n  //\n  WarningProvider,\n} from './dialog';\nexport type {\n  DialogProps,\n  DialogTriggerProps,\n  DialogPortalProps,\n  DialogOverlayProps,\n  DialogContentProps,\n  DialogTitleProps,\n  DialogDescriptionProps,\n  DialogCloseProps,\n} from './dialog';\n"
  },
  {
    "path": "packages/react/dialog/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/direction/README.md",
    "content": "# `react-direction`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/direction).\n"
  },
  {
    "path": "packages/react/direction/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/direction/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-direction\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/direction/src/direction.tsx",
    "content": "import * as React from 'react';\n\ntype Direction = 'ltr' | 'rtl';\nconst DirectionContext = React.createContext<Direction | undefined>(undefined);\n\n/* -------------------------------------------------------------------------------------------------\n * Direction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DirectionProviderProps {\n  children?: React.ReactNode;\n  dir: Direction;\n}\nconst DirectionProvider: React.FC<DirectionProviderProps> = (props) => {\n  const { dir, children } = props;\n  return <DirectionContext.Provider value={dir}>{children}</DirectionContext.Provider>;\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction useDirection(localDir?: Direction) {\n  const globalDir = React.useContext(DirectionContext);\n  return localDir || globalDir || 'ltr';\n}\n\nconst Provider = DirectionProvider;\n\nexport {\n  useDirection,\n  //\n  Provider,\n  //\n  DirectionProvider,\n};\n"
  },
  {
    "path": "packages/react/direction/src/index.ts",
    "content": "'use client';\nexport {\n  useDirection,\n  //\n  Provider,\n  //\n  DirectionProvider,\n} from './direction';\n"
  },
  {
    "path": "packages/react/direction/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/dismissable-layer/CHANGELOG.md",
    "content": "# @radix-ui/react-dismissable-layer\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.10\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/dismissable-layer/README.md",
    "content": "# `react-dismissable-layer`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/dismissable-layer/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/dismissable-layer/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-dismissable-layer\",\n  \"version\": \"1.1.11\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-escape-keydown\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"react-remove-scroll\": \"^2.6.3\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/dismissable-layer/src/dismissable-layer.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nlet originalBodyPointerEvents: string;\n\nconst DismissableLayerContext = React.createContext({\n  layers: new Set<DismissableLayerElement>(),\n  layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),\n  branches: new Set<DismissableLayerBranchElement>(),\n});\n\ntype DismissableLayerElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n  /**\n   * When `true`, hover/focus/click interactions will be disabled on elements outside\n   * the `DismissableLayer`. Users will need to click twice on outside elements to\n   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n   */\n  disableOutsidePointerEvents?: boolean;\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void;\n  /**\n   * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n  /**\n   * Event handler called when the focus moves outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onFocusOutside?: (event: FocusOutsideEvent) => void;\n  /**\n   * Event handler called when an interaction happens outside the `DismissableLayer`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;\n  /**\n   * Handler called when the `DismissableLayer` should be dismissed\n   */\n  onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n  (props, forwardedRef) => {\n    const {\n      disableOutsidePointerEvents = false,\n      onEscapeKeyDown,\n      onPointerDownOutside,\n      onFocusOutside,\n      onInteractOutside,\n      onDismiss,\n      ...layerProps\n    } = props;\n    const context = React.useContext(DismissableLayerContext);\n    const [node, setNode] = React.useState<DismissableLayerElement | null>(null);\n    const ownerDocument = node?.ownerDocument ?? globalThis?.document;\n    const [, force] = React.useState({});\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n    const layers = Array.from(context.layers);\n    const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n    const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled!); // prettier-ignore\n    const index = node ? layers.indexOf(node) : -1;\n    const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;\n    const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;\n\n    const pointerDownOutside = usePointerDownOutside((event) => {\n      const target = event.target as HTMLElement;\n      const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));\n      if (!isPointerEventsEnabled || isPointerDownOnBranch) return;\n      onPointerDownOutside?.(event);\n      onInteractOutside?.(event);\n      if (!event.defaultPrevented) onDismiss?.();\n    }, ownerDocument);\n\n    const focusOutside = useFocusOutside((event) => {\n      const target = event.target as HTMLElement;\n      const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));\n      if (isFocusInBranch) return;\n      onFocusOutside?.(event);\n      onInteractOutside?.(event);\n      if (!event.defaultPrevented) onDismiss?.();\n    }, ownerDocument);\n\n    useEscapeKeydown((event) => {\n      const isHighestLayer = index === context.layers.size - 1;\n      if (!isHighestLayer) return;\n      onEscapeKeyDown?.(event);\n      if (!event.defaultPrevented && onDismiss) {\n        event.preventDefault();\n        onDismiss();\n      }\n    }, ownerDocument);\n\n    React.useEffect(() => {\n      if (!node) return;\n      if (disableOutsidePointerEvents) {\n        if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n          originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;\n          ownerDocument.body.style.pointerEvents = 'none';\n        }\n        context.layersWithOutsidePointerEventsDisabled.add(node);\n      }\n      context.layers.add(node);\n      dispatchUpdate();\n      return () => {\n        if (\n          disableOutsidePointerEvents &&\n          context.layersWithOutsidePointerEventsDisabled.size === 1\n        ) {\n          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;\n        }\n      };\n    }, [node, ownerDocument, disableOutsidePointerEvents, context]);\n\n    /**\n     * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n     * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n     * and add it to the end again so the layering order wouldn't be _creation order_.\n     * We only want them to be removed from context stacks when unmounted.\n     */\n    React.useEffect(() => {\n      return () => {\n        if (!node) return;\n        context.layers.delete(node);\n        context.layersWithOutsidePointerEventsDisabled.delete(node);\n        dispatchUpdate();\n      };\n    }, [node, context]);\n\n    React.useEffect(() => {\n      const handleUpdate = () => force({});\n      document.addEventListener(CONTEXT_UPDATE, handleUpdate);\n      return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);\n    }, []);\n\n    return (\n      <Primitive.div\n        {...layerProps}\n        ref={composedRefs}\n        style={{\n          pointerEvents: isBodyPointerEventsDisabled\n            ? isPointerEventsEnabled\n              ? 'auto'\n              : 'none'\n            : undefined,\n          ...props.style,\n        }}\n        onFocusCapture={composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture)}\n        onBlurCapture={composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture)}\n        onPointerDownCapture={composeEventHandlers(\n          props.onPointerDownCapture,\n          pointerDownOutside.onPointerDownCapture,\n        )}\n      />\n    );\n  },\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ComponentRef<typeof Primitive.div>;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n  DismissableLayerBranchElement,\n  DismissableLayerBranchProps\n>((props, forwardedRef) => {\n  const context = React.useContext(DismissableLayerContext);\n  const ref = React.useRef<DismissableLayerBranchElement>(null);\n  const composedRefs = useComposedRefs(forwardedRef, ref);\n\n  React.useEffect(() => {\n    const node = ref.current;\n    if (node) {\n      context.branches.add(node);\n      return () => {\n        context.branches.delete(node);\n      };\n    }\n  }, [context.branches]);\n\n  return <Primitive.div {...props} ref={composedRefs} />;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(\n  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,\n  ownerDocument: Document = globalThis?.document,\n) {\n  const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n  const isPointerInsideReactTreeRef = React.useRef(false);\n  const handleClickRef = React.useRef(() => {});\n\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      if (event.target && !isPointerInsideReactTreeRef.current) {\n        const eventDetail = { originalEvent: event };\n\n        function handleAndDispatchPointerDownOutsideEvent() {\n          handleAndDispatchCustomEvent(\n            POINTER_DOWN_OUTSIDE,\n            handlePointerDownOutside,\n            eventDetail,\n            { discrete: true },\n          );\n        }\n\n        /**\n         * On touch devices, we need to wait for a click event because browsers implement\n         * a ~350ms delay between the time the user stops touching the display and when the\n         * browser executres events. We need to ensure we don't reactivate pointer-events within\n         * this timeframe otherwise the browser may execute events that should have been prevented.\n         *\n         * Additionally, this also lets us deal automatically with cancellations when a click event\n         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n         *\n         * This is why we also continuously remove the previous listener, because we cannot be\n         * certain that it was raised, and therefore cleaned-up.\n         */\n        if (event.pointerType === 'touch') {\n          ownerDocument.removeEventListener('click', handleClickRef.current);\n          handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;\n          ownerDocument.addEventListener('click', handleClickRef.current, { once: true });\n        } else {\n          handleAndDispatchPointerDownOutsideEvent();\n        }\n      } else {\n        // We need to remove the event listener in case the outside click has been canceled.\n        // See: https://github.com/radix-ui/primitives/issues/2171\n        ownerDocument.removeEventListener('click', handleClickRef.current);\n      }\n      isPointerInsideReactTreeRef.current = false;\n    };\n    /**\n     * if this hook executes in a component that mounts via a `pointerdown` event, the event\n     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n     * this by delaying the event listener registration on the document.\n     * This is not React specific, but rather how the DOM works, ie:\n     * ```\n     * button.addEventListener('pointerdown', () => {\n     *   console.log('I will log');\n     *   document.addEventListener('pointerdown', () => {\n     *     console.log('I will also log');\n     *   })\n     * });\n     */\n    const timerId = window.setTimeout(() => {\n      ownerDocument.addEventListener('pointerdown', handlePointerDown);\n    }, 0);\n    return () => {\n      window.clearTimeout(timerId);\n      ownerDocument.removeEventListener('pointerdown', handlePointerDown);\n      ownerDocument.removeEventListener('click', handleClickRef.current);\n    };\n  }, [ownerDocument, handlePointerDownOutside]);\n\n  return {\n    // ensures we check React component tree (not just DOM tree)\n    onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n  };\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(\n  onFocusOutside?: (event: FocusOutsideEvent) => void,\n  ownerDocument: Document = globalThis?.document,\n) {\n  const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener;\n  const isFocusInsideReactTreeRef = React.useRef(false);\n\n  React.useEffect(() => {\n    const handleFocus = (event: FocusEvent) => {\n      if (event.target && !isFocusInsideReactTreeRef.current) {\n        const eventDetail = { originalEvent: event };\n        handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {\n          discrete: false,\n        });\n      }\n    };\n    ownerDocument.addEventListener('focusin', handleFocus);\n    return () => ownerDocument.removeEventListener('focusin', handleFocus);\n  }, [ownerDocument, handleFocusOutside]);\n\n  return {\n    onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n    onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n  };\n}\n\nfunction dispatchUpdate() {\n  const event = new CustomEvent(CONTEXT_UPDATE);\n  document.dispatchEvent(event);\n}\n\nfunction handleAndDispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(\n  name: string,\n  handler: ((event: E) => void) | undefined,\n  detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never),\n  { discrete }: { discrete: boolean },\n) {\n  const target = detail.originalEvent.target;\n  const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n  if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n\n  if (discrete) {\n    dispatchDiscreteCustomEvent(target, event);\n  } else {\n    target.dispatchEvent(event);\n  }\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n  DismissableLayer,\n  DismissableLayerBranch,\n  //\n  Root,\n  Branch,\n};\nexport type { DismissableLayerProps };\n"
  },
  {
    "path": "packages/react/dismissable-layer/src/index.ts",
    "content": "'use client';\nexport {\n  DismissableLayer,\n  DismissableLayerBranch,\n  //\n  Root,\n  Branch,\n} from './dismissable-layer';\nexport type { DismissableLayerProps } from './dismissable-layer';\n"
  },
  {
    "path": "packages/react/dismissable-layer/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/dropdown-menu/CHANGELOG.md",
    "content": "# @radix-ui/react-dropdown-menu\n\n## 2.1.16\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-menu@2.1.16`, `@radix-ui/react-primitive@2.1.4`\n\n## 2.1.15\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-menu@2.1.15`, `@radix-ui/react-primitive@2.1.3`\n\n## 2.1.14\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.14`, `@radix-ui/react-primitive@2.1.2`\n\n## 2.1.13\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.13`, `@radix-ui/react-primitive@2.1.1`\n\n## 2.1.12\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.12`\n\n## 2.1.11\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.11`\n\n## 2.1.10\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-menu@2.1.10`\n\n## 2.1.9\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-menu@2.1.9`\n\n## 2.1.8\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`\n"
  },
  {
    "path": "packages/react/dropdown-menu/README.md",
    "content": "# `react-dropdown-menu`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/dropdown-menu).\n"
  },
  {
    "path": "packages/react/dropdown-menu/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/dropdown-menu/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-dropdown-menu\",\n  \"version\": \"2.1.16\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-menu\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/test-data\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/dropdown-menu/src/dropdown-menu.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as MenuPrimitive from '@radix-ui/react-menu';\nimport { createMenuScope } from '@radix-ui/react-menu';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenu\n * -----------------------------------------------------------------------------------------------*/\n\nconst DROPDOWN_MENU_NAME = 'DropdownMenu';\n\ntype ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };\nconst [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(\n  DROPDOWN_MENU_NAME,\n  [createMenuScope],\n);\nconst useMenuScope = createMenuScope();\n\ntype DropdownMenuContextValue = {\n  triggerId: string;\n  triggerRef: React.RefObject<HTMLButtonElement | null>;\n  contentId: string;\n  open: boolean;\n  onOpenChange(open: boolean): void;\n  onOpenToggle(): void;\n  modal: boolean;\n};\n\nconst [DropdownMenuProvider, useDropdownMenuContext] =\n  createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);\n\ninterface DropdownMenuProps {\n  children?: React.ReactNode;\n  dir?: Direction;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n  modal?: boolean;\n}\n\nconst DropdownMenu: React.FC<DropdownMenuProps> = (props: ScopedProps<DropdownMenuProps>) => {\n  const {\n    __scopeDropdownMenu,\n    children,\n    dir,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    modal = true,\n  } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n    caller: DROPDOWN_MENU_NAME,\n  });\n\n  return (\n    <DropdownMenuProvider\n      scope={__scopeDropdownMenu}\n      triggerId={useId()}\n      triggerRef={triggerRef}\n      contentId={useId()}\n      open={open}\n      onOpenChange={setOpen}\n      onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n      modal={modal}\n    >\n      <MenuPrimitive.Root {...menuScope} open={open} onOpenChange={setOpen} dir={dir} modal={modal}>\n        {children}\n      </MenuPrimitive.Root>\n    </DropdownMenuProvider>\n  );\n};\n\nDropdownMenu.displayName = DROPDOWN_MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DropdownMenuTrigger';\n\ntype DropdownMenuTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface DropdownMenuTriggerProps extends PrimitiveButtonProps {}\n\nconst DropdownMenuTrigger = React.forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(\n  (props: ScopedProps<DropdownMenuTriggerProps>, forwardedRef) => {\n    const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;\n    const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);\n    const menuScope = useMenuScope(__scopeDropdownMenu);\n    return (\n      <MenuPrimitive.Anchor asChild {...menuScope}>\n        <Primitive.button\n          type=\"button\"\n          id={context.triggerId}\n          aria-haspopup=\"menu\"\n          aria-expanded={context.open}\n          aria-controls={context.open ? context.contentId : undefined}\n          data-state={context.open ? 'open' : 'closed'}\n          data-disabled={disabled ? '' : undefined}\n          disabled={disabled}\n          {...triggerProps}\n          ref={composeRefs(forwardedRef, context.triggerRef)}\n          onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n            // but not when the control key is pressed (avoiding MacOS right click)\n            if (!disabled && event.button === 0 && event.ctrlKey === false) {\n              context.onOpenToggle();\n              // prevent trigger focusing when opening\n              // this allows the content to be given focus without competition\n              if (!context.open) event.preventDefault();\n            }\n          })}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(event.key)) context.onOpenToggle();\n            if (event.key === 'ArrowDown') context.onOpenChange(true);\n            // prevent keydown from scrolling window / first focused item to execute\n            // that keydown (inadvertently closing the menu)\n            if (['Enter', ' ', 'ArrowDown'].includes(event.key)) event.preventDefault();\n          })}\n        />\n      </MenuPrimitive.Anchor>\n    );\n  },\n);\n\nDropdownMenuTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DropdownMenuPortal';\n\ntype MenuPortalProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;\ninterface DropdownMenuPortalProps extends MenuPortalProps {}\n\nconst DropdownMenuPortal: React.FC<DropdownMenuPortalProps> = (\n  props: ScopedProps<DropdownMenuPortalProps>,\n) => {\n  const { __scopeDropdownMenu, ...portalProps } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  return <MenuPrimitive.Portal {...menuScope} {...portalProps} />;\n};\n\nDropdownMenuPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DropdownMenuContent';\n\ntype DropdownMenuContentElement = React.ComponentRef<typeof MenuPrimitive.Content>;\ntype MenuContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Content>;\ninterface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}\n\nconst DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(\n  (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {\n    const { __scopeDropdownMenu, ...contentProps } = props;\n    const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);\n    const menuScope = useMenuScope(__scopeDropdownMenu);\n    const hasInteractedOutsideRef = React.useRef(false);\n\n    return (\n      <MenuPrimitive.Content\n        id={context.contentId}\n        aria-labelledby={context.triggerId}\n        {...menuScope}\n        {...contentProps}\n        ref={forwardedRef}\n        onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n          if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();\n          hasInteractedOutsideRef.current = false;\n          // Always prevent auto focus because we either focus manually or want user agent focus\n          event.preventDefault();\n        })}\n        onInteractOutside={composeEventHandlers(props.onInteractOutside, (event) => {\n          const originalEvent = event.detail.originalEvent as PointerEvent;\n          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n          if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;\n        })}\n        style={{\n          ...props.style,\n          // re-namespace exposed content custom properties\n          ...{\n            '--radix-dropdown-menu-content-transform-origin':\n              'var(--radix-popper-transform-origin)',\n            '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-dropdown-menu-content-available-height':\n              'var(--radix-popper-available-height)',\n            '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)',\n          },\n        }}\n      />\n    );\n  },\n);\n\nDropdownMenuContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'DropdownMenuGroup';\n\ntype DropdownMenuGroupElement = React.ComponentRef<typeof MenuPrimitive.Group>;\ntype MenuGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;\ninterface DropdownMenuGroupProps extends MenuGroupProps {}\n\nconst DropdownMenuGroup = React.forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(\n  (props: ScopedProps<DropdownMenuGroupProps>, forwardedRef) => {\n    const { __scopeDropdownMenu, ...groupProps } = props;\n    const menuScope = useMenuScope(__scopeDropdownMenu);\n    return <MenuPrimitive.Group {...menuScope} {...groupProps} ref={forwardedRef} />;\n  },\n);\n\nDropdownMenuGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'DropdownMenuLabel';\n\ntype DropdownMenuLabelElement = React.ComponentRef<typeof MenuPrimitive.Label>;\ntype MenuLabelProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Label>;\ninterface DropdownMenuLabelProps extends MenuLabelProps {}\n\nconst DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(\n  (props: ScopedProps<DropdownMenuLabelProps>, forwardedRef) => {\n    const { __scopeDropdownMenu, ...labelProps } = props;\n    const menuScope = useMenuScope(__scopeDropdownMenu);\n    return <MenuPrimitive.Label {...menuScope} {...labelProps} ref={forwardedRef} />;\n  },\n);\n\nDropdownMenuLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'DropdownMenuItem';\n\ntype DropdownMenuItemElement = React.ComponentRef<typeof MenuPrimitive.Item>;\ntype MenuItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>;\ninterface DropdownMenuItemProps extends MenuItemProps {}\n\nconst DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(\n  (props: ScopedProps<DropdownMenuItemProps>, forwardedRef) => {\n    const { __scopeDropdownMenu, ...itemProps } = props;\n    const menuScope = useMenuScope(__scopeDropdownMenu);\n    return <MenuPrimitive.Item {...menuScope} {...itemProps} ref={forwardedRef} />;\n  },\n);\n\nDropdownMenuItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuCheckboxItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';\n\ntype DropdownMenuCheckboxItemElement = React.ComponentRef<typeof MenuPrimitive.CheckboxItem>;\ntype MenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>;\ninterface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {}\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  DropdownMenuCheckboxItemElement,\n  DropdownMenuCheckboxItemProps\n>((props: ScopedProps<DropdownMenuCheckboxItemProps>, forwardedRef) => {\n  const { __scopeDropdownMenu, ...checkboxItemProps } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  return <MenuPrimitive.CheckboxItem {...menuScope} {...checkboxItemProps} ref={forwardedRef} />;\n});\n\nDropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuRadioGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';\n\ntype DropdownMenuRadioGroupElement = React.ComponentRef<typeof MenuPrimitive.RadioGroup>;\ntype MenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;\ninterface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {}\n\nconst DropdownMenuRadioGroup = React.forwardRef<\n  DropdownMenuRadioGroupElement,\n  DropdownMenuRadioGroupProps\n>((props: ScopedProps<DropdownMenuRadioGroupProps>, forwardedRef) => {\n  const { __scopeDropdownMenu, ...radioGroupProps } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  return <MenuPrimitive.RadioGroup {...menuScope} {...radioGroupProps} ref={forwardedRef} />;\n});\n\nDropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuRadioItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_ITEM_NAME = 'DropdownMenuRadioItem';\n\ntype DropdownMenuRadioItemElement = React.ComponentRef<typeof MenuPrimitive.RadioItem>;\ntype MenuRadioItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;\ninterface DropdownMenuRadioItemProps extends MenuRadioItemProps {}\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  DropdownMenuRadioItemElement,\n  DropdownMenuRadioItemProps\n>((props: ScopedProps<DropdownMenuRadioItemProps>, forwardedRef) => {\n  const { __scopeDropdownMenu, ...radioItemProps } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  return <MenuPrimitive.RadioItem {...menuScope} {...radioItemProps} ref={forwardedRef} />;\n});\n\nDropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'DropdownMenuItemIndicator';\n\ntype DropdownMenuItemIndicatorElement = React.ComponentRef<typeof MenuPrimitive.ItemIndicator>;\ntype MenuItemIndicatorProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;\ninterface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {}\n\nconst DropdownMenuItemIndicator = React.forwardRef<\n  DropdownMenuItemIndicatorElement,\n  DropdownMenuItemIndicatorProps\n>((props: ScopedProps<DropdownMenuItemIndicatorProps>, forwardedRef) => {\n  const { __scopeDropdownMenu, ...itemIndicatorProps } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  return <MenuPrimitive.ItemIndicator {...menuScope} {...itemIndicatorProps} ref={forwardedRef} />;\n});\n\nDropdownMenuItemIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'DropdownMenuSeparator';\n\ntype DropdownMenuSeparatorElement = React.ComponentRef<typeof MenuPrimitive.Separator>;\ntype MenuSeparatorProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>;\ninterface DropdownMenuSeparatorProps extends MenuSeparatorProps {}\n\nconst DropdownMenuSeparator = React.forwardRef<\n  DropdownMenuSeparatorElement,\n  DropdownMenuSeparatorProps\n>((props: ScopedProps<DropdownMenuSeparatorProps>, forwardedRef) => {\n  const { __scopeDropdownMenu, ...separatorProps } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  return <MenuPrimitive.Separator {...menuScope} {...separatorProps} ref={forwardedRef} />;\n});\n\nDropdownMenuSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'DropdownMenuArrow';\n\ntype DropdownMenuArrowElement = React.ComponentRef<typeof MenuPrimitive.Arrow>;\ntype MenuArrowProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>;\ninterface DropdownMenuArrowProps extends MenuArrowProps {}\n\nconst DropdownMenuArrow = React.forwardRef<DropdownMenuArrowElement, DropdownMenuArrowProps>(\n  (props: ScopedProps<DropdownMenuArrowProps>, forwardedRef) => {\n    const { __scopeDropdownMenu, ...arrowProps } = props;\n    const menuScope = useMenuScope(__scopeDropdownMenu);\n    return <MenuPrimitive.Arrow {...menuScope} {...arrowProps} ref={forwardedRef} />;\n  },\n);\n\nDropdownMenuArrow.displayName = ARROW_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuSub\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DropdownMenuSubProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n}\n\nconst DropdownMenuSub: React.FC<DropdownMenuSubProps> = (\n  props: ScopedProps<DropdownMenuSubProps>,\n) => {\n  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n    caller: 'DropdownMenuSub',\n  });\n\n  return (\n    <MenuPrimitive.Sub {...menuScope} open={open} onOpenChange={setOpen}>\n      {children}\n    </MenuPrimitive.Sub>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuSubTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';\n\ntype DropdownMenuSubTriggerElement = React.ComponentRef<typeof MenuPrimitive.SubTrigger>;\ntype MenuSubTriggerProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;\ninterface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  DropdownMenuSubTriggerElement,\n  DropdownMenuSubTriggerProps\n>((props: ScopedProps<DropdownMenuSubTriggerProps>, forwardedRef) => {\n  const { __scopeDropdownMenu, ...subTriggerProps } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n  return <MenuPrimitive.SubTrigger {...menuScope} {...subTriggerProps} ref={forwardedRef} />;\n});\n\nDropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DropdownMenuSubContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_CONTENT_NAME = 'DropdownMenuSubContent';\n\ntype DropdownMenuSubContentElement = React.ComponentRef<typeof MenuPrimitive.Content>;\ntype MenuSubContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;\ninterface DropdownMenuSubContentProps extends MenuSubContentProps {}\n\nconst DropdownMenuSubContent = React.forwardRef<\n  DropdownMenuSubContentElement,\n  DropdownMenuSubContentProps\n>((props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {\n  const { __scopeDropdownMenu, ...subContentProps } = props;\n  const menuScope = useMenuScope(__scopeDropdownMenu);\n\n  return (\n    <MenuPrimitive.SubContent\n      {...menuScope}\n      {...subContentProps}\n      ref={forwardedRef}\n      style={{\n        ...props.style,\n        // re-namespace exposed content custom properties\n        ...{\n          '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',\n          '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',\n          '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',\n          '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',\n          '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)',\n        },\n      }}\n    />\n  );\n});\n\nDropdownMenuSubContent.displayName = SUB_CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = DropdownMenu;\nconst Trigger = DropdownMenuTrigger;\nconst Portal = DropdownMenuPortal;\nconst Content = DropdownMenuContent;\nconst Group = DropdownMenuGroup;\nconst Label = DropdownMenuLabel;\nconst Item = DropdownMenuItem;\nconst CheckboxItem = DropdownMenuCheckboxItem;\nconst RadioGroup = DropdownMenuRadioGroup;\nconst RadioItem = DropdownMenuRadioItem;\nconst ItemIndicator = DropdownMenuItemIndicator;\nconst Separator = DropdownMenuSeparator;\nconst Arrow = DropdownMenuArrow;\nconst Sub = DropdownMenuSub;\nconst SubTrigger = DropdownMenuSubTrigger;\nconst SubContent = DropdownMenuSubContent;\n\nexport {\n  createDropdownMenuScope,\n  //\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuItemIndicator,\n  DropdownMenuSeparator,\n  DropdownMenuArrow,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  Group,\n  Label,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  ItemIndicator,\n  Separator,\n  Arrow,\n  Sub,\n  SubTrigger,\n  SubContent,\n};\nexport type {\n  DropdownMenuProps,\n  DropdownMenuTriggerProps,\n  DropdownMenuPortalProps,\n  DropdownMenuContentProps,\n  DropdownMenuGroupProps,\n  DropdownMenuLabelProps,\n  DropdownMenuItemProps,\n  DropdownMenuCheckboxItemProps,\n  DropdownMenuRadioGroupProps,\n  DropdownMenuRadioItemProps,\n  DropdownMenuItemIndicatorProps,\n  DropdownMenuSeparatorProps,\n  DropdownMenuArrowProps,\n  DropdownMenuSubProps,\n  DropdownMenuSubTriggerProps,\n  DropdownMenuSubContentProps,\n};\n"
  },
  {
    "path": "packages/react/dropdown-menu/src/index.ts",
    "content": "'use client';\nexport {\n  createDropdownMenuScope,\n  //\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuItemIndicator,\n  DropdownMenuSeparator,\n  DropdownMenuArrow,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  Group,\n  Label,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  ItemIndicator,\n  Separator,\n  Arrow,\n  Sub,\n  SubTrigger,\n  SubContent,\n} from './dropdown-menu';\nexport type {\n  DropdownMenuProps,\n  DropdownMenuTriggerProps,\n  DropdownMenuPortalProps,\n  DropdownMenuContentProps,\n  DropdownMenuGroupProps,\n  DropdownMenuLabelProps,\n  DropdownMenuItemProps,\n  DropdownMenuCheckboxItemProps,\n  DropdownMenuRadioGroupProps,\n  DropdownMenuRadioItemProps,\n  DropdownMenuItemIndicatorProps,\n  DropdownMenuSeparatorProps,\n  DropdownMenuArrowProps,\n  DropdownMenuSubProps,\n  DropdownMenuSubTriggerProps,\n  DropdownMenuSubContentProps,\n} from './dropdown-menu';\n"
  },
  {
    "path": "packages/react/dropdown-menu/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/focus-guards/CHANGELOG.md",
    "content": "# @radix-ui/react-focus-guards\n\n## 1.1.3\n\n- Added internal prop types\n"
  },
  {
    "path": "packages/react/focus-guards/README.md",
    "content": "# `react-focus-guards`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/focus-guards/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/focus-guards/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-focus-guards\",\n  \"version\": \"1.1.3\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/focus-guards/src/focus-guards.tsx",
    "content": "import * as React from 'react';\n\n/** Number of components which have requested interest to have focus guards */\nlet count = 0;\n\ninterface FocusGuardsProps {\n  children?: React.ReactNode;\n}\n\nfunction FocusGuards(props: FocusGuardsProps) {\n  useFocusGuards();\n  return props.children;\n}\n\n/**\n * Injects a pair of focus guards at the edges of the whole DOM tree\n * to ensure `focusin` & `focusout` events can be caught consistently.\n */\nfunction useFocusGuards() {\n  React.useEffect(() => {\n    const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]');\n    document.body.insertAdjacentElement('afterbegin', edgeGuards[0] ?? createFocusGuard());\n    document.body.insertAdjacentElement('beforeend', edgeGuards[1] ?? createFocusGuard());\n    count++;\n\n    return () => {\n      if (count === 1) {\n        document.querySelectorAll('[data-radix-focus-guard]').forEach((node) => node.remove());\n      }\n      count--;\n    };\n  }, []);\n}\n\nfunction createFocusGuard() {\n  const element = document.createElement('span');\n  element.setAttribute('data-radix-focus-guard', '');\n  element.tabIndex = 0;\n  element.style.outline = 'none';\n  element.style.opacity = '0';\n  element.style.position = 'fixed';\n  element.style.pointerEvents = 'none';\n  return element;\n}\n\nexport {\n  FocusGuards,\n  //\n  FocusGuards as Root,\n  //\n  useFocusGuards,\n};\n"
  },
  {
    "path": "packages/react/focus-guards/src/index.ts",
    "content": "'use client';\nexport {\n  FocusGuards,\n  //\n  Root,\n  //\n  useFocusGuards,\n} from './focus-guards';\n"
  },
  {
    "path": "packages/react/focus-guards/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/focus-scope/CHANGELOG.md",
    "content": "# @radix-ui/react-focus-scope\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/focus-scope/README.md",
    "content": "# `react-focus-scope`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/focus-scope/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/focus-scope/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-focus-scope\",\n  \"version\": \"1.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/focus-scope/src/focus-scope.test.tsx",
    "content": "import * as React from 'react';\nimport userEvent from '@testing-library/user-event';\nimport { cleanup, render, waitFor } from '@testing-library/react';\nimport { FocusScope } from './focus-scope';\nimport type { RenderResult } from '@testing-library/react';\nimport { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';\n\nconst INNER_NAME_INPUT_LABEL = 'Name';\nconst INNER_EMAIL_INPUT_LABEL = 'Email';\nconst INNER_SUBMIT_LABEL = 'Submit';\n\ndescribe('FocusScope', () => {\n  afterEach(cleanup);\n\n  describe('given a default FocusScope', () => {\n    let rendered: RenderResult;\n    let tabbableFirst: HTMLInputElement;\n    let tabbableSecond: HTMLInputElement;\n    let tabbableLast: HTMLButtonElement;\n\n    beforeEach(() => {\n      rendered = render(\n        <div>\n          <FocusScope asChild loop trapped>\n            <form>\n              <TestField label={INNER_NAME_INPUT_LABEL} />\n              <TestField label={INNER_EMAIL_INPUT_LABEL} />\n              <button>{INNER_SUBMIT_LABEL}</button>\n            </form>\n          </FocusScope>\n          <TestField label=\"other\" />\n          <button>some outer button</button>\n        </div>,\n      );\n      tabbableFirst = rendered.getByLabelText(INNER_NAME_INPUT_LABEL) as HTMLInputElement;\n      tabbableSecond = rendered.getByLabelText(INNER_EMAIL_INPUT_LABEL) as HTMLInputElement;\n      tabbableLast = rendered.getByText(INNER_SUBMIT_LABEL) as HTMLButtonElement;\n    });\n\n    it('should focus the next element in the scope on tab', () => {\n      tabbableFirst.focus();\n      userEvent.tab();\n      waitFor(() => expect(tabbableSecond).toHaveFocus());\n    });\n\n    it('should focus the last element in the scope on shift+tab from the first element in scope', () => {\n      tabbableFirst.focus();\n      userEvent.tab({ shift: true });\n      waitFor(() => expect(tabbableLast).toHaveFocus());\n    });\n\n    it('should focus the first element in scope on tab from the last element in scope', async () => {\n      tabbableLast.focus();\n      userEvent.tab();\n      waitFor(() => expect(tabbableFirst).toHaveFocus());\n    });\n  });\n\n  describe('given a FocusScope where the first focusable has a negative tabindex', () => {\n    let rendered: RenderResult;\n    let tabbableSecond: HTMLInputElement;\n    let tabbableLast: HTMLButtonElement;\n\n    beforeEach(() => {\n      rendered = render(\n        <div>\n          <FocusScope asChild loop trapped>\n            <form>\n              <TestField label={INNER_NAME_INPUT_LABEL} tabIndex={-1} />\n              <TestField label={INNER_EMAIL_INPUT_LABEL} />\n              <button>{INNER_SUBMIT_LABEL}</button>\n            </form>\n          </FocusScope>\n          <TestField label=\"other\" />\n          <button>some outer button</button>\n        </div>,\n      );\n      tabbableSecond = rendered.getByLabelText(INNER_EMAIL_INPUT_LABEL) as HTMLInputElement;\n      tabbableLast = rendered.getByText(INNER_SUBMIT_LABEL) as HTMLButtonElement;\n    });\n\n    it('should skip the element with a negative tabindex on tab', () => {\n      tabbableLast.focus();\n      userEvent.tab();\n      waitFor(() => expect(tabbableSecond).toHaveFocus());\n    });\n\n    it('should skip the element with a negative tabindex on shift+tab', () => {\n      tabbableSecond.focus();\n      userEvent.tab({ shift: true });\n      waitFor(() => expect(tabbableLast).toHaveFocus());\n    });\n  });\n\n  describe('given a FocusScope with internal focus handlers', () => {\n    const handleLastFocusableElementBlur = vi.fn();\n    let rendered: RenderResult;\n    let tabbableFirst: HTMLInputElement;\n    beforeEach(() => {\n      rendered = render(\n        <div>\n          <FocusScope asChild loop trapped>\n            <form>\n              <TestField label={INNER_NAME_INPUT_LABEL} />\n              <button onBlur={handleLastFocusableElementBlur}>{INNER_SUBMIT_LABEL}</button>\n            </form>\n          </FocusScope>\n        </div>,\n      );\n      tabbableFirst = rendered.getByLabelText(INNER_NAME_INPUT_LABEL) as HTMLInputElement;\n    });\n\n    it('should properly blur the last element in the scope before cycling back', async () => {\n      // Tab back and then tab forward to cycle through the scope\n      tabbableFirst.focus();\n      userEvent.tab({ shift: true });\n      userEvent.tab();\n      waitFor(() => expect(handleLastFocusableElementBlur).toHaveBeenCalledTimes(1));\n    });\n  });\n});\n\nfunction TestField({ label, ...props }: { label: string } & React.ComponentProps<'input'>) {\n  return (\n    <label>\n      <span>{label}</span>\n      <input type=\"text\" name={label.toLowerCase()} {...props} />\n    </label>\n  );\n}\n"
  },
  {
    "path": "packages/react/focus-scope/src/focus-scope.tsx",
    "content": "import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\nconst AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount';\nconst AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount';\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\ntype FocusableTarget = HTMLElement | { focus(): void };\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope\n * -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_SCOPE_NAME = 'FocusScope';\n\ntype FocusScopeElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface FocusScopeProps extends PrimitiveDivProps {\n  /**\n   * When `true`, tabbing from last item will focus first tabbable\n   * and shift+tab from first item will focus last tababble.\n   * @defaultValue false\n   */\n  loop?: boolean;\n\n  /**\n   * When `true`, focus cannot escape the focus scope via keyboard,\n   * pointer, or a programmatic focus.\n   * @defaultValue false\n   */\n  trapped?: boolean;\n\n  /**\n   * Event handler called when auto-focusing on mount.\n   * Can be prevented.\n   */\n  onMountAutoFocus?: (event: Event) => void;\n\n  /**\n   * Event handler called when auto-focusing on unmount.\n   * Can be prevented.\n   */\n  onUnmountAutoFocus?: (event: Event) => void;\n}\n\nconst FocusScope = React.forwardRef<FocusScopeElement, FocusScopeProps>((props, forwardedRef) => {\n  const {\n    loop = false,\n    trapped = false,\n    onMountAutoFocus: onMountAutoFocusProp,\n    onUnmountAutoFocus: onUnmountAutoFocusProp,\n    ...scopeProps\n  } = props;\n  const [container, setContainer] = React.useState<HTMLElement | null>(null);\n  const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);\n  const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);\n  const lastFocusedElementRef = React.useRef<HTMLElement | null>(null);\n  const composedRefs = useComposedRefs(forwardedRef, (node) => setContainer(node));\n\n  const focusScope = React.useRef({\n    paused: false,\n    pause() {\n      this.paused = true;\n    },\n    resume() {\n      this.paused = false;\n    },\n  }).current;\n\n  // Takes care of trapping focus if focus is moved outside programmatically for example\n  React.useEffect(() => {\n    if (trapped) {\n      function handleFocusIn(event: FocusEvent) {\n        if (focusScope.paused || !container) return;\n        const target = event.target as HTMLElement | null;\n        if (container.contains(target)) {\n          lastFocusedElementRef.current = target;\n        } else {\n          focus(lastFocusedElementRef.current, { select: true });\n        }\n      }\n\n      function handleFocusOut(event: FocusEvent) {\n        if (focusScope.paused || !container) return;\n        const relatedTarget = event.relatedTarget as HTMLElement | null;\n\n        // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:\n        //\n        // 1. When the user switches app/tabs/windows/the browser itself loses focus.\n        // 2. In Google Chrome, when the focused element is removed from the DOM.\n        //\n        // We let the browser do its thing here because:\n        //\n        // 1. The browser already keeps a memory of what's focused for when the page gets refocused.\n        // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it\n        //    throws the CPU to 100%, so we avoid doing anything for this reason here too.\n        if (relatedTarget === null) return;\n\n        // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)\n        // that is outside the container, we move focus to the last valid focused element inside.\n        if (!container.contains(relatedTarget)) {\n          focus(lastFocusedElementRef.current, { select: true });\n        }\n      }\n\n      // When the focused element gets removed from the DOM, browsers move focus\n      // back to the document.body. In this case, we move focus to the container\n      // to keep focus trapped correctly.\n      function handleMutations(mutations: MutationRecord[]) {\n        const focusedElement = document.activeElement as HTMLElement | null;\n        if (focusedElement !== document.body) return;\n        for (const mutation of mutations) {\n          if (mutation.removedNodes.length > 0) focus(container);\n        }\n      }\n\n      document.addEventListener('focusin', handleFocusIn);\n      document.addEventListener('focusout', handleFocusOut);\n      const mutationObserver = new MutationObserver(handleMutations);\n      if (container) mutationObserver.observe(container, { childList: true, subtree: true });\n\n      return () => {\n        document.removeEventListener('focusin', handleFocusIn);\n        document.removeEventListener('focusout', handleFocusOut);\n        mutationObserver.disconnect();\n      };\n    }\n  }, [trapped, container, focusScope.paused]);\n\n  React.useEffect(() => {\n    if (container) {\n      focusScopesStack.add(focusScope);\n      const previouslyFocusedElement = document.activeElement as HTMLElement | null;\n      const hasFocusedCandidate = container.contains(previouslyFocusedElement);\n\n      if (!hasFocusedCandidate) {\n        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);\n        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);\n        container.dispatchEvent(mountEvent);\n        if (!mountEvent.defaultPrevented) {\n          focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });\n          if (document.activeElement === previouslyFocusedElement) {\n            focus(container);\n          }\n        }\n      }\n\n      return () => {\n        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);\n\n        // We hit a react bug (fixed in v17) with focusing in unmount.\n        // We need to delay the focus a little to get around it for now.\n        // See: https://github.com/facebook/react/issues/17894\n        setTimeout(() => {\n          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);\n          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);\n          container.dispatchEvent(unmountEvent);\n          if (!unmountEvent.defaultPrevented) {\n            focus(previouslyFocusedElement ?? document.body, { select: true });\n          }\n          // we need to remove the listener after we `dispatchEvent`\n          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);\n\n          focusScopesStack.remove(focusScope);\n        }, 0);\n      };\n    }\n  }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);\n\n  // Takes care of looping focus (when tabbing whilst at the edges)\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (!loop && !trapped) return;\n      if (focusScope.paused) return;\n\n      const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;\n      const focusedElement = document.activeElement as HTMLElement | null;\n\n      if (isTabKey && focusedElement) {\n        const container = event.currentTarget as HTMLElement;\n        const [first, last] = getTabbableEdges(container);\n        const hasTabbableElementsInside = first && last;\n\n        // we can only wrap focus if we have tabbable edges\n        if (!hasTabbableElementsInside) {\n          if (focusedElement === container) event.preventDefault();\n        } else {\n          if (!event.shiftKey && focusedElement === last) {\n            event.preventDefault();\n            if (loop) focus(first, { select: true });\n          } else if (event.shiftKey && focusedElement === first) {\n            event.preventDefault();\n            if (loop) focus(last, { select: true });\n          }\n        }\n      }\n    },\n    [loop, trapped, focusScope.paused],\n  );\n\n  return (\n    <Primitive.div tabIndex={-1} {...scopeProps} ref={composedRefs} onKeyDown={handleKeyDown} />\n  );\n});\n\nFocusScope.displayName = FOCUS_SCOPE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Attempts focusing the first element in a list of candidates.\n * Stops when focus has actually moved.\n */\nfunction focusFirst(candidates: HTMLElement[], { select = false } = {}) {\n  const previouslyFocusedElement = document.activeElement;\n  for (const candidate of candidates) {\n    focus(candidate, { select });\n    if (document.activeElement !== previouslyFocusedElement) return;\n  }\n}\n\n/**\n * Returns the first and last tabbable elements inside a container.\n */\nfunction getTabbableEdges(container: HTMLElement) {\n  const candidates = getTabbableCandidates(container);\n  const first = findVisible(candidates, container);\n  const last = findVisible(candidates.reverse(), container);\n  return [first, last] as const;\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n  const nodes: HTMLElement[] = [];\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n    },\n  });\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes;\n}\n\n/**\n * Returns the first visible element in a list.\n * NOTE: Only checks visibility up to the `container`.\n */\nfunction findVisible(elements: HTMLElement[], container: HTMLElement) {\n  for (const element of elements) {\n    // we stop checking if it's hidden at the `container` level (excluding)\n    if (!isHidden(element, { upTo: container })) return element;\n  }\n}\n\nfunction isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {\n  if (getComputedStyle(node).visibility === 'hidden') return true;\n  while (node) {\n    // we stop at `upTo` (excluding it)\n    if (upTo !== undefined && node === upTo) return false;\n    if (getComputedStyle(node).display === 'none') return true;\n    node = node.parentElement as HTMLElement;\n  }\n  return false;\n}\n\nfunction isSelectableInput(element: any): element is FocusableTarget & { select: () => void } {\n  return element instanceof HTMLInputElement && 'select' in element;\n}\n\nfunction focus(element?: FocusableTarget | null, { select = false } = {}) {\n  // only focus if that element is focusable\n  if (element && element.focus) {\n    const previouslyFocusedElement = document.activeElement;\n    // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users\n    element.focus({ preventScroll: true });\n    // only select if its not the same element, it supports selection and we need to select\n    if (element !== previouslyFocusedElement && isSelectableInput(element) && select)\n      element.select();\n  }\n}\n\n/* -------------------------------------------------------------------------------------------------\n * FocusScope stack\n * -----------------------------------------------------------------------------------------------*/\n\ntype FocusScopeAPI = { paused: boolean; pause(): void; resume(): void };\nconst focusScopesStack = createFocusScopesStack();\n\nfunction createFocusScopesStack() {\n  /** A stack of focus scopes, with the active one at the top */\n  let stack: FocusScopeAPI[] = [];\n\n  return {\n    add(focusScope: FocusScopeAPI) {\n      // pause the currently active focus scope (at the top of the stack)\n      const activeFocusScope = stack[0];\n      if (focusScope !== activeFocusScope) {\n        activeFocusScope?.pause();\n      }\n      // remove in case it already exists (because we'll re-add it at the top of the stack)\n      stack = arrayRemove(stack, focusScope);\n      stack.unshift(focusScope);\n    },\n\n    remove(focusScope: FocusScopeAPI) {\n      stack = arrayRemove(stack, focusScope);\n      stack[0]?.resume();\n    },\n  };\n}\n\nfunction arrayRemove<T>(array: T[], item: T) {\n  const updatedArray = [...array];\n  const index = updatedArray.indexOf(item);\n  if (index !== -1) {\n    updatedArray.splice(index, 1);\n  }\n  return updatedArray;\n}\n\nfunction removeLinks(items: HTMLElement[]) {\n  return items.filter((item) => item.tagName !== 'A');\n}\n\nconst Root = FocusScope;\n\nexport {\n  FocusScope,\n  //\n  Root,\n};\nexport type { FocusScopeProps };\n"
  },
  {
    "path": "packages/react/focus-scope/src/index.ts",
    "content": "'use client';\nexport {\n  FocusScope,\n  //\n  Root,\n} from './focus-scope';\nexport type { FocusScopeProps } from './focus-scope';\n"
  },
  {
    "path": "packages/react/focus-scope/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/form/CHANGELOG.md",
    "content": "# @radix-ui/react-form\n\n## 0.1.8\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-label@2.1.8`\n\n## 0.1.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-label@2.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 0.1.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-label@2.1.6`\n\n## 0.1.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-label@2.1.5`\n\n## 0.1.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-label@2.1.4`\n"
  },
  {
    "path": "packages/react/form/README.md",
    "content": "# `react-form`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/form).\n"
  },
  {
    "path": "packages/react/form/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/form/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-form\",\n  \"version\": \"0.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-label\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/form/src/form.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport { Label as LabelPrimitive } from '@radix-ui/react-label';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype ScopedProps<P> = P & { __scopeForm?: Scope };\nconst [createFormContext, createFormScope] = createContextScope('Form');\n\n/* -------------------------------------------------------------------------------------------------\n * Form\n * -----------------------------------------------------------------------------------------------*/\n\nconst FORM_NAME = 'Form';\n\ntype ValidityMap = { [fieldName: string]: ValidityState | undefined };\ntype CustomMatcherEntriesMap = { [fieldName: string]: CustomMatcherEntry[] };\ntype CustomErrorsMap = { [fieldName: string]: Record<string, boolean> };\n\ntype ValidationContextValue = {\n  getFieldValidity(fieldName: string): ValidityState | undefined;\n  onFieldValidityChange(fieldName: string, validity: ValidityState): void;\n\n  getFieldCustomMatcherEntries(fieldName: string): CustomMatcherEntry[];\n  onFieldCustomMatcherEntryAdd(fieldName: string, matcherEntry: CustomMatcherEntry): void;\n  onFieldCustomMatcherEntryRemove(fieldName: string, matcherEntryId: string): void;\n\n  getFieldCustomErrors(fieldName: string): Record<string, boolean>;\n  onFieldCustomErrorsChange(fieldName: string, errors: Record<string, boolean>): void;\n\n  onFieldValiditionClear(fieldName: string): void;\n};\nconst [ValidationProvider, useValidationContext] =\n  createFormContext<ValidationContextValue>(FORM_NAME);\n\ntype MessageIdsMap = { [fieldName: string]: Set<string> };\n\ntype AriaDescriptionContextValue = {\n  onFieldMessageIdAdd(fieldName: string, id: string): void;\n  onFieldMessageIdRemove(fieldName: string, id: string): void;\n  getFieldDescription(fieldName: string): string | undefined;\n};\nconst [AriaDescriptionProvider, useAriaDescriptionContext] =\n  createFormContext<AriaDescriptionContextValue>(FORM_NAME);\n\ntype FormElement = React.ComponentRef<typeof Primitive.form>;\ntype PrimitiveFormProps = React.ComponentPropsWithoutRef<typeof Primitive.form>;\ninterface FormProps extends PrimitiveFormProps {\n  onClearServerErrors?(): void;\n}\n\nconst Form = React.forwardRef<FormElement, FormProps>(\n  (props: ScopedProps<FormProps>, forwardedRef) => {\n    const { __scopeForm, onClearServerErrors = () => {}, ...rootProps } = props;\n    const formRef = React.useRef<HTMLFormElement>(null);\n    const composedFormRef = useComposedRefs(forwardedRef, formRef);\n\n    // native validity per field\n    const [validityMap, setValidityMap] = React.useState<ValidityMap>({});\n    const getFieldValidity: ValidationContextValue['getFieldValidity'] = React.useCallback(\n      (fieldName) => validityMap[fieldName],\n      [validityMap],\n    );\n    const handleFieldValidityChange: ValidationContextValue['onFieldValidityChange'] =\n      React.useCallback(\n        (fieldName, validity) =>\n          setValidityMap((prevValidityMap) => ({\n            ...prevValidityMap,\n            [fieldName]: { ...(prevValidityMap[fieldName] ?? {}), ...validity },\n          })),\n        [],\n      );\n    const handleFieldValiditionClear: ValidationContextValue['onFieldValiditionClear'] =\n      React.useCallback((fieldName) => {\n        setValidityMap((prevValidityMap) => ({ ...prevValidityMap, [fieldName]: undefined }));\n        setCustomErrorsMap((prevCustomErrorsMap) => ({ ...prevCustomErrorsMap, [fieldName]: {} }));\n      }, []);\n\n    // custom matcher entries per field\n    const [customMatcherEntriesMap, setCustomMatcherEntriesMap] =\n      React.useState<CustomMatcherEntriesMap>({});\n    const getFieldCustomMatcherEntries: ValidationContextValue['getFieldCustomMatcherEntries'] =\n      React.useCallback(\n        (fieldName) => customMatcherEntriesMap[fieldName] ?? [],\n        [customMatcherEntriesMap],\n      );\n    const handleFieldCustomMatcherAdd: ValidationContextValue['onFieldCustomMatcherEntryAdd'] =\n      React.useCallback((fieldName, matcherEntry) => {\n        setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap) => ({\n          ...prevCustomMatcherEntriesMap,\n          [fieldName]: [...(prevCustomMatcherEntriesMap[fieldName] ?? []), matcherEntry],\n        }));\n      }, []);\n    const handleFieldCustomMatcherRemove: ValidationContextValue['onFieldCustomMatcherEntryRemove'] =\n      React.useCallback((fieldName, matcherEntryId) => {\n        setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap) => ({\n          ...prevCustomMatcherEntriesMap,\n          [fieldName]: (prevCustomMatcherEntriesMap[fieldName] ?? []).filter(\n            (matcherEntry) => matcherEntry.id !== matcherEntryId,\n          ),\n        }));\n      }, []);\n\n    // custom errors per field\n    const [customErrorsMap, setCustomErrorsMap] = React.useState<CustomErrorsMap>({});\n    const getFieldCustomErrors: ValidationContextValue['getFieldCustomErrors'] = React.useCallback(\n      (fieldName) => customErrorsMap[fieldName] ?? {},\n      [customErrorsMap],\n    );\n    const handleFieldCustomErrorsChange: ValidationContextValue['onFieldCustomErrorsChange'] =\n      React.useCallback((fieldName, customErrors) => {\n        setCustomErrorsMap((prevCustomErrorsMap) => ({\n          ...prevCustomErrorsMap,\n          [fieldName]: { ...(prevCustomErrorsMap[fieldName] ?? {}), ...customErrors },\n        }));\n      }, []);\n\n    // messageIds per field\n    const [messageIdsMap, setMessageIdsMap] = React.useState<MessageIdsMap>({});\n    const handleFieldMessageIdAdd: AriaDescriptionContextValue['onFieldMessageIdAdd'] =\n      React.useCallback((fieldName, id) => {\n        setMessageIdsMap((prevMessageIdsMap) => {\n          const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]).add(id);\n          return { ...prevMessageIdsMap, [fieldName]: fieldDescriptionIds };\n        });\n      }, []);\n    const handleFieldMessageIdRemove: AriaDescriptionContextValue['onFieldMessageIdRemove'] =\n      React.useCallback((fieldName, id) => {\n        setMessageIdsMap((prevMessageIdsMap) => {\n          const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]);\n          fieldDescriptionIds.delete(id);\n          return { ...prevMessageIdsMap, [fieldName]: fieldDescriptionIds };\n        });\n      }, []);\n    const getFieldDescription: AriaDescriptionContextValue['getFieldDescription'] =\n      React.useCallback(\n        (fieldName) => Array.from(messageIdsMap[fieldName] ?? []).join(' ') || undefined,\n        [messageIdsMap],\n      );\n\n    return (\n      <ValidationProvider\n        scope={__scopeForm}\n        getFieldValidity={getFieldValidity}\n        onFieldValidityChange={handleFieldValidityChange}\n        getFieldCustomMatcherEntries={getFieldCustomMatcherEntries}\n        onFieldCustomMatcherEntryAdd={handleFieldCustomMatcherAdd}\n        onFieldCustomMatcherEntryRemove={handleFieldCustomMatcherRemove}\n        getFieldCustomErrors={getFieldCustomErrors}\n        onFieldCustomErrorsChange={handleFieldCustomErrorsChange}\n        onFieldValiditionClear={handleFieldValiditionClear}\n      >\n        <AriaDescriptionProvider\n          scope={__scopeForm}\n          onFieldMessageIdAdd={handleFieldMessageIdAdd}\n          onFieldMessageIdRemove={handleFieldMessageIdRemove}\n          getFieldDescription={getFieldDescription}\n        >\n          <Primitive.form\n            {...rootProps}\n            ref={composedFormRef}\n            // focus first invalid control when the form is submitted\n            onInvalid={composeEventHandlers(props.onInvalid, (event) => {\n              const firstInvalidControl = getFirstInvalidControl(event.currentTarget);\n              if (firstInvalidControl === event.target) firstInvalidControl.focus();\n\n              // prevent default browser UI for form validation\n              event.preventDefault();\n            })}\n            // clear server errors when the form is re-submitted\n            onSubmit={composeEventHandlers(props.onSubmit, onClearServerErrors, {\n              checkForDefaultPrevented: false,\n            })}\n            // clear server errors when the form is reset\n            onReset={composeEventHandlers(props.onReset, onClearServerErrors)}\n          />\n        </AriaDescriptionProvider>\n      </ValidationProvider>\n    );\n  },\n);\n\nForm.displayName = FORM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * FormField\n * -----------------------------------------------------------------------------------------------*/\n\nconst FIELD_NAME = 'FormField';\n\ntype FormFieldContextValue = {\n  id: string;\n  name: string;\n  serverInvalid: boolean;\n};\nconst [FormFieldProvider, useFormFieldContext] =\n  createFormContext<FormFieldContextValue>(FIELD_NAME);\n\ntype FormFieldElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface FormFieldProps extends PrimitiveDivProps {\n  name: string;\n  serverInvalid?: boolean;\n}\n\nconst FormField = React.forwardRef<FormFieldElement, FormFieldProps>(\n  (props: ScopedProps<FormFieldProps>, forwardedRef) => {\n    const { __scopeForm, name, serverInvalid = false, ...fieldProps } = props;\n    const validationContext = useValidationContext(FIELD_NAME, __scopeForm);\n    const validity = validationContext.getFieldValidity(name);\n    const id = useId();\n\n    return (\n      <FormFieldProvider scope={__scopeForm} id={id} name={name} serverInvalid={serverInvalid}>\n        <Primitive.div\n          data-valid={getValidAttribute(validity, serverInvalid)}\n          data-invalid={getInvalidAttribute(validity, serverInvalid)}\n          {...fieldProps}\n          ref={forwardedRef}\n        />\n      </FormFieldProvider>\n    );\n  },\n);\n\nFormField.displayName = FIELD_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * FormLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'FormLabel';\n\ntype FormLabelElement = React.ComponentRef<typeof LabelPrimitive>;\ntype LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive>;\ninterface FormLabelProps extends LabelProps {}\n\nconst FormLabel = React.forwardRef<FormLabelElement, FormLabelProps>(\n  (props: ScopedProps<FormLabelProps>, forwardedRef) => {\n    const { __scopeForm, ...labelProps } = props;\n    const validationContext = useValidationContext(LABEL_NAME, __scopeForm);\n    const fieldContext = useFormFieldContext(LABEL_NAME, __scopeForm);\n    const htmlFor = labelProps.htmlFor || fieldContext.id;\n    const validity = validationContext.getFieldValidity(fieldContext.name);\n\n    return (\n      <LabelPrimitive\n        data-valid={getValidAttribute(validity, fieldContext.serverInvalid)}\n        data-invalid={getInvalidAttribute(validity, fieldContext.serverInvalid)}\n        {...labelProps}\n        ref={forwardedRef}\n        htmlFor={htmlFor}\n      />\n    );\n  },\n);\n\nFormLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * FormControl\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTROL_NAME = 'FormControl';\n\ntype FormControlElement = React.ComponentRef<typeof Primitive.input>;\ntype PrimitiveInputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface FormControlProps extends PrimitiveInputProps {}\n\nconst FormControl = React.forwardRef<FormControlElement, FormControlProps>(\n  (props: ScopedProps<FormControlProps>, forwardedRef) => {\n    const { __scopeForm, ...controlProps } = props;\n\n    const validationContext = useValidationContext(CONTROL_NAME, __scopeForm);\n    const fieldContext = useFormFieldContext(CONTROL_NAME, __scopeForm);\n    const ariaDescriptionContext = useAriaDescriptionContext(CONTROL_NAME, __scopeForm);\n\n    const ref = React.useRef<FormControlElement>(null);\n    const composedRef = useComposedRefs(forwardedRef, ref);\n    const name = controlProps.name || fieldContext.name;\n    const id = controlProps.id || fieldContext.id;\n    const customMatcherEntries = validationContext.getFieldCustomMatcherEntries(name);\n\n    const { onFieldValidityChange, onFieldCustomErrorsChange, onFieldValiditionClear } =\n      validationContext;\n    const updateControlValidity = React.useCallback(\n      async (control: FormControlElement) => {\n        //------------------------------------------------------------------------------------------\n        // 1. first, if we have built-in errors we stop here\n\n        if (hasBuiltInError(control.validity)) {\n          const controlValidity = validityStateToObject(control.validity);\n          onFieldValidityChange(name, controlValidity);\n          return;\n        }\n\n        //------------------------------------------------------------------------------------------\n        // 2. then gather the form data to give to custom matchers for cross-comparisons\n\n        const formData = control.form ? new FormData(control.form) : new FormData();\n        const matcherArgs: CustomMatcherArgs = [control.value, formData];\n\n        //------------------------------------------------------------------------------------------\n        // 3. split sync and async custom matcher entries\n\n        const syncCustomMatcherEntries: Array<SyncCustomMatcherEntry> = [];\n        const ayncCustomMatcherEntries: Array<AsyncCustomMatcherEntry> = [];\n        customMatcherEntries.forEach((customMatcherEntry) => {\n          if (isAsyncCustomMatcherEntry(customMatcherEntry, matcherArgs)) {\n            ayncCustomMatcherEntries.push(customMatcherEntry);\n          } else if (isSyncCustomMatcherEntry(customMatcherEntry)) {\n            syncCustomMatcherEntries.push(customMatcherEntry);\n          }\n        });\n\n        //------------------------------------------------------------------------------------------\n        // 4. run sync custom matchers and update control validity / internal validity + errors\n\n        const syncCustomErrors = syncCustomMatcherEntries.map(({ id, match }) => {\n          return [id, match(...matcherArgs)] as const;\n        });\n        const syncCustomErrorsById = Object.fromEntries(syncCustomErrors);\n        const hasSyncCustomErrors = Object.values(syncCustomErrorsById).some(Boolean);\n        const hasCustomError = hasSyncCustomErrors;\n        control.setCustomValidity(hasCustomError ? DEFAULT_INVALID_MESSAGE : '');\n        const controlValidity = validityStateToObject(control.validity);\n        onFieldValidityChange(name, controlValidity);\n        onFieldCustomErrorsChange(name, syncCustomErrorsById);\n\n        //------------------------------------------------------------------------------------------\n        // 5. run async custom matchers and update control validity / internal validity + errors\n\n        if (!hasSyncCustomErrors && ayncCustomMatcherEntries.length > 0) {\n          const promisedCustomErrors = ayncCustomMatcherEntries.map(({ id, match }) =>\n            match(...matcherArgs).then((matches) => [id, matches] as const),\n          );\n          const asyncCustomErrors = await Promise.all(promisedCustomErrors);\n          const asyncCustomErrorsById = Object.fromEntries(asyncCustomErrors);\n          const hasAsyncCustomErrors = Object.values(asyncCustomErrorsById).some(Boolean);\n          const hasCustomError = hasAsyncCustomErrors;\n          control.setCustomValidity(hasCustomError ? DEFAULT_INVALID_MESSAGE : '');\n          const controlValidity = validityStateToObject(control.validity);\n          onFieldValidityChange(name, controlValidity);\n          onFieldCustomErrorsChange(name, asyncCustomErrorsById);\n        }\n      },\n      [customMatcherEntries, name, onFieldCustomErrorsChange, onFieldValidityChange],\n    );\n\n    React.useEffect(() => {\n      const control = ref.current;\n      if (control) {\n        // We only want validate on change (native `change` event, not React's `onChange`). This is primarily\n        // a UX decision, we don't want to validate on every keystroke and React's `onChange` is the `input` event.\n        const handleChange = () => updateControlValidity(control);\n        control.addEventListener('change', handleChange);\n        return () => control.removeEventListener('change', handleChange);\n      }\n    }, [updateControlValidity]);\n\n    const resetControlValidity = React.useCallback(() => {\n      const control = ref.current;\n      if (control) {\n        control.setCustomValidity('');\n        onFieldValiditionClear(name);\n      }\n    }, [name, onFieldValiditionClear]);\n\n    // reset validity and errors when the form is reset\n    React.useEffect(() => {\n      const form = ref.current?.form;\n      if (form) {\n        form.addEventListener('reset', resetControlValidity);\n        return () => form.removeEventListener('reset', resetControlValidity);\n      }\n    }, [resetControlValidity]);\n\n    // focus first invalid control when fields are set as invalid by server\n    React.useEffect(() => {\n      const control = ref.current;\n      const form = control?.closest('form');\n      if (form && fieldContext.serverInvalid) {\n        const firstInvalidControl = getFirstInvalidControl(form);\n        if (firstInvalidControl === control) firstInvalidControl.focus();\n      }\n    }, [fieldContext.serverInvalid]);\n\n    const validity = validationContext.getFieldValidity(name);\n\n    return (\n      <Primitive.input\n        data-valid={getValidAttribute(validity, fieldContext.serverInvalid)}\n        data-invalid={getInvalidAttribute(validity, fieldContext.serverInvalid)}\n        aria-invalid={fieldContext.serverInvalid ? true : undefined}\n        aria-describedby={ariaDescriptionContext.getFieldDescription(name)}\n        // disable default browser behaviour of showing built-in error message on hover\n        title=\"\"\n        {...controlProps}\n        ref={composedRef}\n        id={id}\n        name={name}\n        onInvalid={composeEventHandlers(props.onInvalid, (event) => {\n          const control = event.currentTarget;\n          updateControlValidity(control);\n        })}\n        onChange={composeEventHandlers(props.onChange, (_event) => {\n          // reset validity when user changes value\n          resetControlValidity();\n        })}\n      />\n    );\n  },\n);\n\nFormControl.displayName = CONTROL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * FormMessage\n * -----------------------------------------------------------------------------------------------*/\n\nconst _validityMatchers = [\n  'badInput',\n  'patternMismatch',\n  'rangeOverflow',\n  'rangeUnderflow',\n  'stepMismatch',\n  'tooLong',\n  'tooShort',\n  'typeMismatch',\n  'valid',\n  'valueMissing',\n] as const;\ntype ValidityMatcher = (typeof _validityMatchers)[number];\n\nconst DEFAULT_INVALID_MESSAGE = 'This value is not valid';\nconst DEFAULT_BUILT_IN_MESSAGES: Record<ValidityMatcher, string | undefined> = {\n  badInput: DEFAULT_INVALID_MESSAGE,\n  patternMismatch: 'This value does not match the required pattern',\n  rangeOverflow: 'This value is too large',\n  rangeUnderflow: 'This value is too small',\n  stepMismatch: 'This value does not match the required step',\n  tooLong: 'This value is too long',\n  tooShort: 'This value is too short',\n  typeMismatch: 'This value does not match the required type',\n  valid: undefined,\n  valueMissing: 'This value is missing',\n};\n\nconst MESSAGE_NAME = 'FormMessage';\n\ntype FormMessageElement = FormMessageImplElement;\ninterface FormMessageProps extends Omit<FormMessageImplProps, 'name'> {\n  match?: ValidityMatcher | CustomMatcher;\n  forceMatch?: boolean;\n  name?: string;\n}\n\nconst FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(\n  (props: ScopedProps<FormMessageProps>, forwardedRef) => {\n    const { match, name: nameProp, ...messageProps } = props;\n    const fieldContext = useFormFieldContext(MESSAGE_NAME, props.__scopeForm);\n    const name = nameProp ?? fieldContext.name;\n\n    if (match === undefined) {\n      return (\n        <FormMessageImpl {...messageProps} ref={forwardedRef} name={name}>\n          {props.children || DEFAULT_INVALID_MESSAGE}\n        </FormMessageImpl>\n      );\n    } else if (typeof match === 'function') {\n      return <FormCustomMessage match={match} {...messageProps} ref={forwardedRef} name={name} />;\n    } else {\n      return <FormBuiltInMessage match={match} {...messageProps} ref={forwardedRef} name={name} />;\n    }\n  },\n);\n\nFormMessage.displayName = MESSAGE_NAME;\n\ntype FormBuiltInMessageElement = FormMessageImplElement;\ninterface FormBuiltInMessageProps extends FormMessageImplProps {\n  match: ValidityMatcher;\n  forceMatch?: boolean;\n  name: string;\n}\n\nconst FormBuiltInMessage = React.forwardRef<FormBuiltInMessageElement, FormBuiltInMessageProps>(\n  (props: ScopedProps<FormBuiltInMessageProps>, forwardedRef) => {\n    const { match, forceMatch = false, name, children, ...messageProps } = props;\n    const validationContext = useValidationContext(MESSAGE_NAME, messageProps.__scopeForm);\n    const validity = validationContext.getFieldValidity(name);\n    const matches = forceMatch || validity?.[match];\n\n    if (matches) {\n      return (\n        <FormMessageImpl ref={forwardedRef} {...messageProps} name={name}>\n          {children ?? DEFAULT_BUILT_IN_MESSAGES[match]}\n        </FormMessageImpl>\n      );\n    }\n\n    return null;\n  },\n);\n\ntype FormCustomMessageElement = React.ComponentRef<typeof FormMessageImpl>;\ninterface FormCustomMessageProps extends React.ComponentPropsWithoutRef<typeof FormMessageImpl> {\n  match: CustomMatcher;\n  forceMatch?: boolean;\n  name: string;\n}\n\nconst FormCustomMessage = React.forwardRef<FormCustomMessageElement, FormCustomMessageProps>(\n  (props: ScopedProps<FormCustomMessageProps>, forwardedRef) => {\n    const { match, forceMatch = false, name, id: idProp, children, ...messageProps } = props;\n    const validationContext = useValidationContext(MESSAGE_NAME, messageProps.__scopeForm);\n    const ref = React.useRef<FormCustomMessageElement>(null);\n    const composedRef = useComposedRefs(forwardedRef, ref);\n    const _id = useId();\n    const id = idProp ?? _id;\n\n    const customMatcherEntry = React.useMemo(() => ({ id, match }), [id, match]);\n    const { onFieldCustomMatcherEntryAdd, onFieldCustomMatcherEntryRemove } = validationContext;\n    React.useEffect(() => {\n      onFieldCustomMatcherEntryAdd(name, customMatcherEntry);\n      return () => onFieldCustomMatcherEntryRemove(name, customMatcherEntry.id);\n    }, [customMatcherEntry, name, onFieldCustomMatcherEntryAdd, onFieldCustomMatcherEntryRemove]);\n\n    const validity = validationContext.getFieldValidity(name);\n    const customErrors = validationContext.getFieldCustomErrors(name);\n    const hasMatchingCustomError = customErrors[id];\n    const matches =\n      forceMatch || (validity && !hasBuiltInError(validity) && hasMatchingCustomError);\n\n    if (matches) {\n      return (\n        <FormMessageImpl id={id} ref={composedRef} {...messageProps} name={name}>\n          {children ?? DEFAULT_INVALID_MESSAGE}\n        </FormMessageImpl>\n      );\n    }\n\n    return null;\n  },\n);\n\ntype FormMessageImplElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface FormMessageImplProps extends PrimitiveSpanProps {\n  name: string;\n}\n\nconst FormMessageImpl = React.forwardRef<FormMessageImplElement, FormMessageImplProps>(\n  (props: ScopedProps<FormMessageImplProps>, forwardedRef) => {\n    const { __scopeForm, id: idProp, name, ...messageProps } = props;\n    const ariaDescriptionContext = useAriaDescriptionContext(MESSAGE_NAME, __scopeForm);\n    const _id = useId();\n    const id = idProp ?? _id;\n\n    const { onFieldMessageIdAdd, onFieldMessageIdRemove } = ariaDescriptionContext;\n    React.useEffect(() => {\n      onFieldMessageIdAdd(name, id);\n      return () => onFieldMessageIdRemove(name, id);\n    }, [name, id, onFieldMessageIdAdd, onFieldMessageIdRemove]);\n\n    return <Primitive.span id={id} {...messageProps} ref={forwardedRef} />;\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * FormValidityState\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALIDITY_STATE_NAME = 'FormValidityState';\n\ninterface FormValidityStateProps {\n  children(validity: ValidityState | undefined): React.ReactNode;\n  name?: string;\n}\n\nconst FormValidityState = (props: ScopedProps<FormValidityStateProps>) => {\n  const { __scopeForm, name: nameProp, children } = props;\n  const validationContext = useValidationContext(VALIDITY_STATE_NAME, __scopeForm);\n  const fieldContext = useFormFieldContext(VALIDITY_STATE_NAME, __scopeForm);\n  const name = nameProp ?? fieldContext.name;\n  const validity = validationContext.getFieldValidity(name);\n  return <>{children(validity)}</>;\n};\n\nFormValidityState.displayName = VALIDITY_STATE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * FormSubmit\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUBMIT_NAME = 'FormSubmit';\n\ntype FormSubmitElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface FormSubmitProps extends PrimitiveButtonProps {}\n\nconst FormSubmit = React.forwardRef<FormSubmitElement, FormSubmitProps>(\n  (props: ScopedProps<FormSubmitProps>, forwardedRef) => {\n    const { __scopeForm, ...submitProps } = props;\n    return <Primitive.button type=\"submit\" {...submitProps} ref={forwardedRef} />;\n  },\n);\n\nFormSubmit.displayName = SUBMIT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ValidityStateKey = keyof ValidityState;\ntype SyncCustomMatcher = (value: string, formData: FormData) => boolean;\ntype AsyncCustomMatcher = (value: string, formData: FormData) => Promise<boolean>;\ntype CustomMatcher = SyncCustomMatcher | AsyncCustomMatcher;\ntype CustomMatcherEntry = { id: string; match: CustomMatcher };\ntype SyncCustomMatcherEntry = { id: string; match: SyncCustomMatcher };\ntype AsyncCustomMatcherEntry = { id: string; match: AsyncCustomMatcher };\ntype CustomMatcherArgs = [string, FormData];\n\nfunction validityStateToObject(validity: ValidityState) {\n  const object: any = {};\n  for (const key in validity) {\n    object[key] = validity[key as ValidityStateKey];\n  }\n  return object as Record<ValidityStateKey, boolean>;\n}\n\nfunction isHTMLElement(element: any): element is HTMLElement {\n  return element instanceof HTMLElement;\n}\n\nfunction isFormControl(element: any): element is { validity: ValidityState } {\n  return 'validity' in element;\n}\n\nfunction isInvalid(control: HTMLElement) {\n  return (\n    isFormControl(control) &&\n    (control.validity.valid === false || control.getAttribute('aria-invalid') === 'true')\n  );\n}\n\nfunction getFirstInvalidControl(form: HTMLFormElement): HTMLElement | undefined {\n  const elements = form.elements;\n  const [firstInvalidControl] = Array.from(elements).filter(isHTMLElement).filter(isInvalid);\n  return firstInvalidControl;\n}\n\nfunction isAsyncCustomMatcherEntry(\n  entry: CustomMatcherEntry,\n  args: CustomMatcherArgs,\n): entry is AsyncCustomMatcherEntry {\n  return entry.match.constructor.name === 'AsyncFunction' || returnsPromise(entry.match, args);\n}\n\nfunction isSyncCustomMatcherEntry(entry: CustomMatcherEntry): entry is SyncCustomMatcherEntry {\n  return entry.match.constructor.name === 'Function';\n}\n\nfunction returnsPromise(func: Function, args: Array<unknown>) {\n  return func(...args) instanceof Promise;\n}\n\nfunction hasBuiltInError(validity: ValidityState) {\n  let error = false;\n  for (const validityKey in validity) {\n    const key = validityKey as ValidityStateKey;\n    if (key !== 'valid' && key !== 'customError' && validity[key]) {\n      error = true;\n      break;\n    }\n  }\n  return error;\n}\n\nfunction getValidAttribute(validity: ValidityState | undefined, serverInvalid: boolean) {\n  if (validity?.valid === true && !serverInvalid) return true;\n  return undefined;\n}\nfunction getInvalidAttribute(validity: ValidityState | undefined, serverInvalid: boolean) {\n  if (validity?.valid === false || serverInvalid) return true;\n  return undefined;\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Form;\nconst Field = FormField;\nconst Label = FormLabel;\nconst Control = FormControl;\nconst Message = FormMessage;\nconst ValidityState = FormValidityState;\nconst Submit = FormSubmit;\n\nexport {\n  createFormScope,\n  //\n  Form,\n  FormField,\n  FormLabel,\n  FormControl,\n  FormMessage,\n  FormValidityState,\n  FormSubmit,\n  //\n  Root,\n  Field,\n  Label,\n  Control,\n  Message,\n  ValidityState,\n  Submit,\n};\n\nexport type {\n  FormProps,\n  FormFieldProps,\n  FormLabelProps,\n  FormControlProps,\n  FormMessageProps,\n  FormValidityStateProps,\n  FormSubmitProps,\n};\n"
  },
  {
    "path": "packages/react/form/src/index.ts",
    "content": "'use client';\nexport {\n  createFormScope,\n  //\n  Form,\n  FormField,\n  FormLabel,\n  FormControl,\n  FormMessage,\n  FormValidityState,\n  FormSubmit,\n  //\n  Root,\n  Field,\n  Label,\n  Control,\n  Message,\n  ValidityState,\n  Submit,\n} from './form';\n\nexport type {\n  FormProps,\n  FormFieldProps,\n  FormLabelProps,\n  FormControlProps,\n  FormMessageProps,\n  FormValidityStateProps,\n  FormSubmitProps,\n} from './form';\n"
  },
  {
    "path": "packages/react/form/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/hover-card/CHANGELOG.md",
    "content": "# @radix-ui/react-hover-card\n\n## 1.1.15\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/react-popper@1.2.8`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-dismissable-layer@1.1.11`, `@radix-ui/react-portal@1.1.10`\n\n## 1.1.14\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- 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`\n\n## 1.1.13\n\n- 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`\n\n## 1.1.12\n\n- 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`\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.1.8\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`\n"
  },
  {
    "path": "packages/react/hover-card/README.md",
    "content": "# `react-hover-card`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/hover-card).\n"
  },
  {
    "path": "packages/react/hover-card/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/hover-card/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-hover-card\",\n  \"version\": \"1.1.15\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-popper\": \"workspace:*\",\n    \"@radix-ui/react-portal\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/hover-card/src/hover-card.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * HoverCard\n * -----------------------------------------------------------------------------------------------*/\n\nlet originalBodyUserSelect: string;\n\nconst HOVERCARD_NAME = 'HoverCard';\n\ntype ScopedProps<P> = P & { __scopeHoverCard?: Scope };\nconst [createHoverCardContext, createHoverCardScope] = createContextScope(HOVERCARD_NAME, [\n  createPopperScope,\n]);\nconst usePopperScope = createPopperScope();\n\ntype HoverCardContextValue = {\n  open: boolean;\n  onOpenChange(open: boolean): void;\n  onOpen(): void;\n  onClose(): void;\n  onDismiss(): void;\n  hasSelectionRef: React.MutableRefObject<boolean>;\n  isPointerDownOnContentRef: React.MutableRefObject<boolean>;\n};\n\nconst [HoverCardProvider, useHoverCardContext] =\n  createHoverCardContext<HoverCardContextValue>(HOVERCARD_NAME);\n\ninterface HoverCardProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  openDelay?: number;\n  closeDelay?: number;\n}\n\nconst HoverCard: React.FC<HoverCardProps> = (props: ScopedProps<HoverCardProps>) => {\n  const {\n    __scopeHoverCard,\n    children,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    openDelay = 700,\n    closeDelay = 300,\n  } = props;\n  const popperScope = usePopperScope(__scopeHoverCard);\n  const openTimerRef = React.useRef(0);\n  const closeTimerRef = React.useRef(0);\n  const hasSelectionRef = React.useRef(false);\n  const isPointerDownOnContentRef = React.useRef(false);\n\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n    caller: HOVERCARD_NAME,\n  });\n\n  const handleOpen = React.useCallback(() => {\n    clearTimeout(closeTimerRef.current);\n    openTimerRef.current = window.setTimeout(() => setOpen(true), openDelay);\n  }, [openDelay, setOpen]);\n\n  const handleClose = React.useCallback(() => {\n    clearTimeout(openTimerRef.current);\n    if (!hasSelectionRef.current && !isPointerDownOnContentRef.current) {\n      closeTimerRef.current = window.setTimeout(() => setOpen(false), closeDelay);\n    }\n  }, [closeDelay, setOpen]);\n\n  const handleDismiss = React.useCallback(() => setOpen(false), [setOpen]);\n\n  // cleanup any queued state updates on unmount\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(openTimerRef.current);\n      clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  return (\n    <HoverCardProvider\n      scope={__scopeHoverCard}\n      open={open}\n      onOpenChange={setOpen}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      onDismiss={handleDismiss}\n      hasSelectionRef={hasSelectionRef}\n      isPointerDownOnContentRef={isPointerDownOnContentRef}\n    >\n      <PopperPrimitive.Root {...popperScope}>{children}</PopperPrimitive.Root>\n    </HoverCardProvider>\n  );\n};\n\nHoverCard.displayName = HOVERCARD_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * HoverCardTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'HoverCardTrigger';\n\ntype HoverCardTriggerElement = React.ComponentRef<typeof Primitive.a>;\ntype PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitive.a>;\ninterface HoverCardTriggerProps extends PrimitiveLinkProps {}\n\nconst HoverCardTrigger = React.forwardRef<HoverCardTriggerElement, HoverCardTriggerProps>(\n  (props: ScopedProps<HoverCardTriggerProps>, forwardedRef) => {\n    const { __scopeHoverCard, ...triggerProps } = props;\n    const context = useHoverCardContext(TRIGGER_NAME, __scopeHoverCard);\n    const popperScope = usePopperScope(__scopeHoverCard);\n    return (\n      <PopperPrimitive.Anchor asChild {...popperScope}>\n        <Primitive.a\n          data-state={context.open ? 'open' : 'closed'}\n          {...triggerProps}\n          ref={forwardedRef}\n          onPointerEnter={composeEventHandlers(props.onPointerEnter, excludeTouch(context.onOpen))}\n          onPointerLeave={composeEventHandlers(props.onPointerLeave, excludeTouch(context.onClose))}\n          onFocus={composeEventHandlers(props.onFocus, context.onOpen)}\n          onBlur={composeEventHandlers(props.onBlur, context.onClose)}\n          // prevent focus event on touch devices\n          onTouchStart={composeEventHandlers(props.onTouchStart, (event) => event.preventDefault())}\n        />\n      </PopperPrimitive.Anchor>\n    );\n  },\n);\n\nHoverCardTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * HoverCardPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'HoverCardPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createHoverCardContext<PortalContextValue>(PORTAL_NAME, {\n  forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface HoverCardPortalProps {\n  children?: React.ReactNode;\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: PortalProps['container'];\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst HoverCardPortal: React.FC<HoverCardPortalProps> = (\n  props: ScopedProps<HoverCardPortalProps>,\n) => {\n  const { __scopeHoverCard, forceMount, children, container } = props;\n  const context = useHoverCardContext(PORTAL_NAME, __scopeHoverCard);\n  return (\n    <PortalProvider scope={__scopeHoverCard} forceMount={forceMount}>\n      <Presence present={forceMount || context.open}>\n        <PortalPrimitive asChild container={container}>\n          {children}\n        </PortalPrimitive>\n      </Presence>\n    </PortalProvider>\n  );\n};\n\nHoverCardPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * HoverCardContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'HoverCardContent';\n\ntype HoverCardContentElement = HoverCardContentImplElement;\ninterface HoverCardContentProps extends HoverCardContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(\n  (props: ScopedProps<HoverCardContentProps>, forwardedRef) => {\n    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeHoverCard);\n    const { forceMount = portalContext.forceMount, ...contentProps } = props;\n    const context = useHoverCardContext(CONTENT_NAME, props.__scopeHoverCard);\n    return (\n      <Presence present={forceMount || context.open}>\n        <HoverCardContentImpl\n          data-state={context.open ? 'open' : 'closed'}\n          {...contentProps}\n          onPointerEnter={composeEventHandlers(props.onPointerEnter, excludeTouch(context.onOpen))}\n          onPointerLeave={composeEventHandlers(props.onPointerLeave, excludeTouch(context.onClose))}\n          ref={forwardedRef}\n        />\n      </Presence>\n    );\n  },\n);\n\nHoverCardContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype HoverCardContentImplElement = React.ComponentRef<typeof PopperPrimitive.Content>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;\ntype PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;\ninterface HoverCardContentImplProps extends Omit<PopperContentProps, 'onPlaced'> {\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n  /**\n   * Event handler called when the a `pointerdown` event happens outside of the `HoverCard`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];\n  /**\n   * Event handler called when the focus moves outside of the `HoverCard`.\n   * Can be prevented.\n   */\n  onFocusOutside?: DismissableLayerProps['onFocusOutside'];\n  /**\n   * Event handler called when an interaction happens outside the `HoverCard`.\n   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n   * Can be prevented.\n   */\n  onInteractOutside?: DismissableLayerProps['onInteractOutside'];\n}\n\nconst HoverCardContentImpl = React.forwardRef<\n  HoverCardContentImplElement,\n  HoverCardContentImplProps\n>((props: ScopedProps<HoverCardContentImplProps>, forwardedRef) => {\n  const {\n    __scopeHoverCard,\n    onEscapeKeyDown,\n    onPointerDownOutside,\n    onFocusOutside,\n    onInteractOutside,\n    ...contentProps\n  } = props;\n  const context = useHoverCardContext(CONTENT_NAME, __scopeHoverCard);\n  const popperScope = usePopperScope(__scopeHoverCard);\n  const ref = React.useRef<HoverCardContentImplElement>(null);\n  const composedRefs = useComposedRefs(forwardedRef, ref);\n  const [containSelection, setContainSelection] = React.useState(false);\n\n  React.useEffect(() => {\n    if (containSelection) {\n      const body = document.body;\n\n      // Safari requires prefix\n      originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect;\n\n      body.style.userSelect = 'none';\n      body.style.webkitUserSelect = 'none';\n      return () => {\n        body.style.userSelect = originalBodyUserSelect;\n        body.style.webkitUserSelect = originalBodyUserSelect;\n      };\n    }\n  }, [containSelection]);\n\n  React.useEffect(() => {\n    if (ref.current) {\n      const handlePointerUp = () => {\n        setContainSelection(false);\n        context.isPointerDownOnContentRef.current = false;\n\n        // Delay a frame to ensure we always access the latest selection\n        setTimeout(() => {\n          const hasSelection = document.getSelection()?.toString() !== '';\n          if (hasSelection) context.hasSelectionRef.current = true;\n        });\n      };\n\n      document.addEventListener('pointerup', handlePointerUp);\n      return () => {\n        document.removeEventListener('pointerup', handlePointerUp);\n        context.hasSelectionRef.current = false;\n        context.isPointerDownOnContentRef.current = false;\n      };\n    }\n  }, [context.isPointerDownOnContentRef, context.hasSelectionRef]);\n\n  React.useEffect(() => {\n    if (ref.current) {\n      const tabbables = getTabbableNodes(ref.current);\n      tabbables.forEach((tabbable) => tabbable.setAttribute('tabindex', '-1'));\n    }\n  });\n\n  return (\n    <DismissableLayer\n      asChild\n      disableOutsidePointerEvents={false}\n      onInteractOutside={onInteractOutside}\n      onEscapeKeyDown={onEscapeKeyDown}\n      onPointerDownOutside={onPointerDownOutside}\n      onFocusOutside={composeEventHandlers(onFocusOutside, (event) => {\n        event.preventDefault();\n      })}\n      onDismiss={context.onDismiss}\n    >\n      <PopperPrimitive.Content\n        {...popperScope}\n        {...contentProps}\n        onPointerDown={composeEventHandlers(contentProps.onPointerDown, (event) => {\n          // Contain selection to current layer\n          if (event.currentTarget.contains(event.target as HTMLElement)) {\n            setContainSelection(true);\n          }\n          context.hasSelectionRef.current = false;\n          context.isPointerDownOnContentRef.current = true;\n        })}\n        ref={composedRefs}\n        style={{\n          ...contentProps.style,\n          userSelect: containSelection ? 'text' : undefined,\n          // Safari requires prefix\n          WebkitUserSelect: containSelection ? 'text' : undefined,\n          // re-namespace exposed content custom properties\n          ...{\n            '--radix-hover-card-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-hover-card-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-hover-card-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-hover-card-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-hover-card-trigger-height': 'var(--radix-popper-anchor-height)',\n          },\n        }}\n      />\n    </DismissableLayer>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * HoverCardArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'HoverCardArrow';\n\ntype HoverCardArrowElement = React.ComponentRef<typeof PopperPrimitive.Arrow>;\ntype PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;\ninterface HoverCardArrowProps extends PopperArrowProps {}\n\nconst HoverCardArrow = React.forwardRef<HoverCardArrowElement, HoverCardArrowProps>(\n  (props: ScopedProps<HoverCardArrowProps>, forwardedRef) => {\n    const { __scopeHoverCard, ...arrowProps } = props;\n    const popperScope = usePopperScope(__scopeHoverCard);\n    return <PopperPrimitive.Arrow {...popperScope} {...arrowProps} ref={forwardedRef} />;\n  },\n);\n\nHoverCardArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction excludeTouch<E>(eventHandler: () => void) {\n  return (event: React.PointerEvent<E>) =>\n    event.pointerType === 'touch' ? undefined : eventHandler();\n}\n\n/**\n * Returns a list of nodes that can be in the tab sequence.\n * @see: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n */\nfunction getTabbableNodes(container: HTMLElement) {\n  const nodes: HTMLElement[] = [];\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n    },\n  });\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n  return nodes;\n}\n\nconst Root = HoverCard;\nconst Trigger = HoverCardTrigger;\nconst Portal = HoverCardPortal;\nconst Content = HoverCardContent;\nconst Arrow = HoverCardArrow;\n\nexport {\n  createHoverCardScope,\n  //\n  HoverCard,\n  HoverCardTrigger,\n  HoverCardPortal,\n  HoverCardContent,\n  HoverCardArrow,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  Arrow,\n};\nexport type {\n  HoverCardProps,\n  HoverCardTriggerProps,\n  HoverCardPortalProps,\n  HoverCardContentProps,\n  HoverCardArrowProps,\n};\n"
  },
  {
    "path": "packages/react/hover-card/src/index.ts",
    "content": "'use client';\nexport {\n  createHoverCardScope,\n  //\n  HoverCard,\n  HoverCardTrigger,\n  HoverCardPortal,\n  HoverCardContent,\n  HoverCardArrow,\n  //\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  Arrow,\n} from './hover-card';\nexport type {\n  HoverCardProps,\n  HoverCardTriggerProps,\n  HoverCardPortalProps,\n  HoverCardContentProps,\n  HoverCardArrowProps,\n} from './hover-card';\n"
  },
  {
    "path": "packages/react/hover-card/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/id/README.md",
    "content": "# `react-id`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/id-provider).\n"
  },
  {
    "path": "packages/react/id/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/id/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-id\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  }\n}\n"
  },
  {
    "path": "packages/react/id/src/id.tsx",
    "content": "import * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\n// We spaces with `.trim().toString()` to prevent bundlers from trying to `import { useId } from 'react';`\nconst useReactId = (React as any)[' useId '.trim().toString()] || (() => undefined);\nlet count = 0;\n\nfunction useId(deterministicId?: string): string {\n  const [id, setId] = React.useState<string | undefined>(useReactId());\n  // React versions older than 18 will have client-side ids only.\n  useLayoutEffect(() => {\n    if (!deterministicId) setId((reactId) => reactId ?? String(count++));\n  }, [deterministicId]);\n  return deterministicId || (id ? `radix-${id}` : '');\n}\n\nexport { useId };\n"
  },
  {
    "path": "packages/react/id/src/index.ts",
    "content": "export { useId } from './id';\n"
  },
  {
    "path": "packages/react/id/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/label/CHANGELOG.md",
    "content": "# @radix-ui/react-label\n\n## 2.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.4`\n\n## 2.1.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 2.1.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 2.1.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 2.1.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/label/README.md",
    "content": "# `react-label`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/label).\n"
  },
  {
    "path": "packages/react/label/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/label/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-label\",\n  \"version\": \"2.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-primitive\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/label/src/index.ts",
    "content": "'use client';\nexport {\n  Label,\n  //\n  Root,\n} from './label';\nexport type { LabelProps } from './label';\n"
  },
  {
    "path": "packages/react/label/src/label.tsx",
    "content": "import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Label\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Label';\n\ntype LabelElement = React.ComponentRef<typeof Primitive.label>;\ntype PrimitiveLabelProps = React.ComponentPropsWithoutRef<typeof Primitive.label>;\ninterface LabelProps extends PrimitiveLabelProps {}\n\nconst Label = React.forwardRef<LabelElement, LabelProps>((props, forwardedRef) => {\n  return (\n    <Primitive.label\n      {...props}\n      ref={forwardedRef}\n      onMouseDown={(event) => {\n        // only prevent text selection if clicking inside the label itself\n        const target = event.target as HTMLElement;\n        if (target.closest('button, input, select, textarea')) return;\n\n        props.onMouseDown?.(event);\n        // prevent text selection when double clicking label\n        if (!event.defaultPrevented && event.detail > 1) event.preventDefault();\n      }}\n    />\n  );\n});\n\nLabel.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Label;\n\nexport {\n  Label,\n  //\n  Root,\n};\nexport type { LabelProps };\n"
  },
  {
    "path": "packages/react/label/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/menu/CHANGELOG.md",
    "content": "# @radix-ui/react-menu\n\n## 2.1.16\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/react-slot@1.2.4`, `@radix-ui/react-popper@1.2.8`, `@radix-ui/react-focus-guards@1.1.3`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-dismissable-layer@1.1.11`, `@radix-ui/react-roving-focus@1.1.11`, `@radix-ui/react-focus-scope@1.1.8`, `@radix-ui/react-portal@1.1.10`\n\n## 2.1.15\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-focus-scope@1.1.7`, `@radix-ui/react-popper@1.2.7`, `@radix-ui/react-portal@1.1.9`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 2.1.14\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9`, `@radix-ui/react-dismissable-layer@1.1.9`, `@radix-ui/react-focus-scope@1.1.6`, `@radix-ui/react-popper@1.2.6`, `@radix-ui/react-portal@1.1.8`\n\n## 2.1.13\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8`, `@radix-ui/react-dismissable-layer@1.1.8`, `@radix-ui/react-focus-scope@1.1.5`, `@radix-ui/react-popper@1.2.5`, `@radix-ui/react-portal@1.1.7`\n\n## 2.1.12\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 2.1.11\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.7`\n\n## 2.1.10\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.6`\n\n## 2.1.9\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.5`\n\n## 2.1.8\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-roving-focus@1.1.4`, `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-dismissable-layer@1.1.7`, `@radix-ui/react-focus-scope@1.1.4`, `@radix-ui/react-popper@1.2.4`, `@radix-ui/react-portal@1.1.6`\n"
  },
  {
    "path": "packages/react/menu/README.md",
    "content": "# `react-menu`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/menu/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/menu/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-menu\",\n  \"version\": \"2.1.16\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-focus-guards\": \"workspace:*\",\n    \"@radix-ui/react-focus-scope\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-popper\": \"workspace:*\",\n    \"@radix-ui/react-portal\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-roving-focus\": \"workspace:*\",\n    \"@radix-ui/react-slot\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"aria-hidden\": \"^1.2.4\",\n    \"react-remove-scroll\": \"^2.6.3\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/test-data\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/menu/src/index.ts",
    "content": "'use client';\nexport {\n  createMenuScope,\n  //\n  Menu,\n  MenuAnchor,\n  MenuPortal,\n  MenuContent,\n  MenuGroup,\n  MenuLabel,\n  MenuItem,\n  MenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuItemIndicator,\n  MenuSeparator,\n  MenuArrow,\n  MenuSub,\n  MenuSubTrigger,\n  MenuSubContent,\n  //\n  Root,\n  Anchor,\n  Portal,\n  Content,\n  Group,\n  Label,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  ItemIndicator,\n  Separator,\n  Arrow,\n  Sub,\n  SubTrigger,\n  SubContent,\n} from './menu';\nexport type {\n  MenuProps,\n  MenuAnchorProps,\n  MenuPortalProps,\n  MenuContentProps,\n  MenuGroupProps,\n  MenuLabelProps,\n  MenuItemProps,\n  MenuCheckboxItemProps,\n  MenuRadioGroupProps,\n  MenuRadioItemProps,\n  MenuItemIndicatorProps,\n  MenuSeparatorProps,\n  MenuArrowProps,\n  MenuSubProps,\n  MenuSubTriggerProps,\n  MenuSubContentProps,\n} from './menu';\n"
  },
  {
    "path": "packages/react/menu/src/menu.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useComposedRefs, composeRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { useId } from '@radix-ui/react-id';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { createSlot } from '@radix-ui/react-slot';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { hideOthers } from 'aria-hidden';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst SELECTION_KEYS = ['Enter', ' '];\nconst FIRST_KEYS = ['ArrowDown', 'PageUp', 'Home'];\nconst LAST_KEYS = ['ArrowUp', 'PageDown', 'End'];\nconst FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];\nconst SUB_OPEN_KEYS: Record<Direction, string[]> = {\n  ltr: [...SELECTION_KEYS, 'ArrowRight'],\n  rtl: [...SELECTION_KEYS, 'ArrowLeft'],\n};\nconst SUB_CLOSE_KEYS: Record<Direction, string[]> = {\n  ltr: ['ArrowLeft'],\n  rtl: ['ArrowRight'],\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Menu\n * -----------------------------------------------------------------------------------------------*/\n\nconst MENU_NAME = 'Menu';\n\ntype ItemData = { disabled: boolean; textValue: string };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n  MenuItemElement,\n  ItemData\n>(MENU_NAME);\n\ntype ScopedProps<P> = P & { __scopeMenu?: Scope };\nconst [createMenuContext, createMenuScope] = createContextScope(MENU_NAME, [\n  createCollectionScope,\n  createPopperScope,\n  createRovingFocusGroupScope,\n]);\nconst usePopperScope = createPopperScope();\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype MenuContextValue = {\n  open: boolean;\n  onOpenChange(open: boolean): void;\n  content: MenuContentElement | null;\n  onContentChange(content: MenuContentElement | null): void;\n};\n\nconst [MenuProvider, useMenuContext] = createMenuContext<MenuContextValue>(MENU_NAME);\n\ntype MenuRootContextValue = {\n  onClose(): void;\n  isUsingKeyboardRef: React.RefObject<boolean>;\n  dir: Direction;\n  modal: boolean;\n};\n\nconst [MenuRootProvider, useMenuRootContext] = createMenuContext<MenuRootContextValue>(MENU_NAME);\n\ninterface MenuProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  onOpenChange?(open: boolean): void;\n  dir?: Direction;\n  modal?: boolean;\n}\n\nconst Menu: React.FC<MenuProps> = (props: ScopedProps<MenuProps>) => {\n  const { __scopeMenu, open = false, children, dir, onOpenChange, modal = true } = props;\n  const popperScope = usePopperScope(__scopeMenu);\n  const [content, setContent] = React.useState<MenuContentElement | null>(null);\n  const isUsingKeyboardRef = React.useRef(false);\n  const handleOpenChange = useCallbackRef(onOpenChange);\n  const direction = useDirection(dir);\n\n  React.useEffect(() => {\n    // Capture phase ensures we set the boolean before any side effects execute\n    // in response to the key or pointer event as they might depend on this value.\n    const handleKeyDown = () => {\n      isUsingKeyboardRef.current = true;\n      document.addEventListener('pointerdown', handlePointer, { capture: true, once: true });\n      document.addEventListener('pointermove', handlePointer, { capture: true, once: true });\n    };\n    const handlePointer = () => (isUsingKeyboardRef.current = false);\n    document.addEventListener('keydown', handleKeyDown, { capture: true });\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown, { capture: true });\n      document.removeEventListener('pointerdown', handlePointer, { capture: true });\n      document.removeEventListener('pointermove', handlePointer, { capture: true });\n    };\n  }, []);\n\n  return (\n    <PopperPrimitive.Root {...popperScope}>\n      <MenuProvider\n        scope={__scopeMenu}\n        open={open}\n        onOpenChange={handleOpenChange}\n        content={content}\n        onContentChange={setContent}\n      >\n        <MenuRootProvider\n          scope={__scopeMenu}\n          onClose={React.useCallback(() => handleOpenChange(false), [handleOpenChange])}\n          isUsingKeyboardRef={isUsingKeyboardRef}\n          dir={direction}\n          modal={modal}\n        >\n          {children}\n        </MenuRootProvider>\n      </MenuProvider>\n    </PopperPrimitive.Root>\n  );\n};\n\nMenu.displayName = MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'MenuAnchor';\n\ntype MenuAnchorElement = React.ComponentRef<typeof PopperPrimitive.Anchor>;\ntype PopperAnchorProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;\ninterface MenuAnchorProps extends PopperAnchorProps {}\n\nconst MenuAnchor = React.forwardRef<MenuAnchorElement, MenuAnchorProps>(\n  (props: ScopedProps<MenuAnchorProps>, forwardedRef) => {\n    const { __scopeMenu, ...anchorProps } = props;\n    const popperScope = usePopperScope(__scopeMenu);\n    return <PopperPrimitive.Anchor {...popperScope} {...anchorProps} ref={forwardedRef} />;\n  },\n);\n\nMenuAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'MenuPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createMenuContext<PortalContextValue>(PORTAL_NAME, {\n  forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface MenuPortalProps {\n  children?: React.ReactNode;\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: PortalProps['container'];\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst MenuPortal: React.FC<MenuPortalProps> = (props: ScopedProps<MenuPortalProps>) => {\n  const { __scopeMenu, forceMount, children, container } = props;\n  const context = useMenuContext(PORTAL_NAME, __scopeMenu);\n  return (\n    <PortalProvider scope={__scopeMenu} forceMount={forceMount}>\n      <Presence present={forceMount || context.open}>\n        <PortalPrimitive asChild container={container}>\n          {children}\n        </PortalPrimitive>\n      </Presence>\n    </PortalProvider>\n  );\n};\n\nMenuPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'MenuContent';\n\ntype MenuContentContextValue = {\n  onItemEnter(event: React.PointerEvent): void;\n  onItemLeave(event: React.PointerEvent): void;\n  onTriggerLeave(event: React.PointerEvent): void;\n  searchRef: React.RefObject<string>;\n  pointerGraceTimerRef: React.MutableRefObject<number>;\n  onPointerGraceIntentChange(intent: GraceIntent | null): void;\n};\nconst [MenuContentProvider, useMenuContentContext] =\n  createMenuContext<MenuContentContextValue>(CONTENT_NAME);\n\ntype MenuContentElement = MenuRootContentTypeElement;\n/**\n * We purposefully don't union MenuRootContent and MenuSubContent props here because\n * they have conflicting prop types. We agreed that we would allow MenuSubContent to\n * accept props that it would just ignore.\n */\ninterface MenuContentProps extends MenuRootContentTypeProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst MenuContent = React.forwardRef<MenuContentElement, MenuContentProps>(\n  (props: ScopedProps<MenuContentProps>, forwardedRef) => {\n    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeMenu);\n    const { forceMount = portalContext.forceMount, ...contentProps } = props;\n    const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);\n    const rootContext = useMenuRootContext(CONTENT_NAME, props.__scopeMenu);\n\n    return (\n      <Collection.Provider scope={props.__scopeMenu}>\n        <Presence present={forceMount || context.open}>\n          <Collection.Slot scope={props.__scopeMenu}>\n            {rootContext.modal ? (\n              <MenuRootContentModal {...contentProps} ref={forwardedRef} />\n            ) : (\n              <MenuRootContentNonModal {...contentProps} ref={forwardedRef} />\n            )}\n          </Collection.Slot>\n        </Presence>\n      </Collection.Provider>\n    );\n  },\n);\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype MenuRootContentTypeElement = MenuContentImplElement;\ninterface MenuRootContentTypeProps\n  extends Omit<MenuContentImplProps, keyof MenuContentImplPrivateProps> {}\n\nconst MenuRootContentModal = React.forwardRef<MenuRootContentTypeElement, MenuRootContentTypeProps>(\n  (props: ScopedProps<MenuRootContentTypeProps>, forwardedRef) => {\n    const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);\n    const ref = React.useRef<MenuRootContentTypeElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref);\n\n    // Hide everything from ARIA except the `MenuContent`\n    React.useEffect(() => {\n      const content = ref.current;\n      if (content) return hideOthers(content);\n    }, []);\n\n    return (\n      <MenuContentImpl\n        {...props}\n        ref={composedRefs}\n        // we make sure we're not trapping once it's been closed\n        // (closed !== unmounted when animating out)\n        trapFocus={context.open}\n        // make sure to only disable pointer events when open\n        // this avoids blocking interactions while animating out\n        disableOutsidePointerEvents={context.open}\n        disableOutsideScroll\n        // When focus is trapped, a `focusout` event may still happen.\n        // We make sure we don't trigger our `onDismiss` in such case.\n        onFocusOutside={composeEventHandlers(\n          props.onFocusOutside,\n          (event) => event.preventDefault(),\n          { checkForDefaultPrevented: false },\n        )}\n        onDismiss={() => context.onOpenChange(false)}\n      />\n    );\n  },\n);\n\nconst MenuRootContentNonModal = React.forwardRef<\n  MenuRootContentTypeElement,\n  MenuRootContentTypeProps\n>((props: ScopedProps<MenuRootContentTypeProps>, forwardedRef) => {\n  const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);\n  return (\n    <MenuContentImpl\n      {...props}\n      ref={forwardedRef}\n      trapFocus={false}\n      disableOutsidePointerEvents={false}\n      disableOutsideScroll={false}\n      onDismiss={() => context.onOpenChange(false)}\n    />\n  );\n});\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype MenuContentImplElement = React.ComponentRef<typeof PopperPrimitive.Content>;\ntype FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;\ntype MenuContentImplPrivateProps = {\n  onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];\n  onDismiss?: DismissableLayerProps['onDismiss'];\n  disableOutsidePointerEvents?: DismissableLayerProps['disableOutsidePointerEvents'];\n\n  /**\n   * Whether scrolling outside the `MenuContent` should be prevented\n   * (default: `false`)\n   */\n  disableOutsideScroll?: boolean;\n\n  /**\n   * Whether focus should be trapped within the `MenuContent`\n   * (default: false)\n   */\n  trapFocus?: FocusScopeProps['trapped'];\n};\ninterface MenuContentImplProps\n  extends MenuContentImplPrivateProps,\n    Omit<PopperContentProps, 'dir' | 'onPlaced'> {\n  /**\n   * Event handler called when auto-focusing on close.\n   * Can be prevented.\n   */\n  onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n\n  /**\n   * Whether keyboard navigation should loop around\n   * @defaultValue false\n   */\n  loop?: RovingFocusGroupProps['loop'];\n\n  onEntryFocus?: RovingFocusGroupProps['onEntryFocus'];\n  onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n  onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];\n  onFocusOutside?: DismissableLayerProps['onFocusOutside'];\n  onInteractOutside?: DismissableLayerProps['onInteractOutside'];\n}\n\nconst Slot = createSlot('MenuContent.ScrollLock');\n\nconst MenuContentImpl = React.forwardRef<MenuContentImplElement, MenuContentImplProps>(\n  (props: ScopedProps<MenuContentImplProps>, forwardedRef) => {\n    const {\n      __scopeMenu,\n      loop = false,\n      trapFocus,\n      onOpenAutoFocus,\n      onCloseAutoFocus,\n      disableOutsidePointerEvents,\n      onEntryFocus,\n      onEscapeKeyDown,\n      onPointerDownOutside,\n      onFocusOutside,\n      onInteractOutside,\n      onDismiss,\n      disableOutsideScroll,\n      ...contentProps\n    } = props;\n    const context = useMenuContext(CONTENT_NAME, __scopeMenu);\n    const rootContext = useMenuRootContext(CONTENT_NAME, __scopeMenu);\n    const popperScope = usePopperScope(__scopeMenu);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);\n    const getItems = useCollection(__scopeMenu);\n    const [currentItemId, setCurrentItemId] = React.useState<string | null>(null);\n    const contentRef = React.useRef<HTMLDivElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef, context.onContentChange);\n    const timerRef = React.useRef(0);\n    const searchRef = React.useRef('');\n    const pointerGraceTimerRef = React.useRef(0);\n    const pointerGraceIntentRef = React.useRef<GraceIntent | null>(null);\n    const pointerDirRef = React.useRef<Side>('right');\n    const lastPointerXRef = React.useRef(0);\n\n    const ScrollLockWrapper = disableOutsideScroll ? RemoveScroll : React.Fragment;\n    const scrollLockWrapperProps = disableOutsideScroll\n      ? { as: Slot, allowPinchZoom: true }\n      : undefined;\n\n    const handleTypeaheadSearch = (key: string) => {\n      const search = searchRef.current + key;\n      const items = getItems().filter((item) => !item.disabled);\n      const currentItem = document.activeElement;\n      const currentMatch = items.find((item) => item.ref.current === currentItem)?.textValue;\n      const values = items.map((item) => item.textValue);\n      const nextMatch = getNextMatch(values, search, currentMatch);\n      const newItem = items.find((item) => item.textValue === nextMatch)?.ref.current;\n\n      // Reset `searchRef` 1 second after it was last updated\n      (function updateSearch(value: string) {\n        searchRef.current = value;\n        window.clearTimeout(timerRef.current);\n        if (value !== '') timerRef.current = window.setTimeout(() => updateSearch(''), 1000);\n      })(search);\n\n      if (newItem) {\n        /**\n         * Imperative focus during keydown is risky so we prevent React's batching updates\n         * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n         */\n        setTimeout(() => (newItem as HTMLElement).focus());\n      }\n    };\n\n    React.useEffect(() => {\n      return () => window.clearTimeout(timerRef.current);\n    }, []);\n\n    // Make sure the whole tree has focus guards as our `MenuContent` may be\n    // the last element in the DOM (because of the `Portal`)\n    useFocusGuards();\n\n    const isPointerMovingToSubmenu = React.useCallback((event: React.PointerEvent) => {\n      const isMovingTowards = pointerDirRef.current === pointerGraceIntentRef.current?.side;\n      return isMovingTowards && isPointerInGraceArea(event, pointerGraceIntentRef.current?.area);\n    }, []);\n\n    return (\n      <MenuContentProvider\n        scope={__scopeMenu}\n        searchRef={searchRef}\n        onItemEnter={React.useCallback(\n          (event) => {\n            if (isPointerMovingToSubmenu(event)) event.preventDefault();\n          },\n          [isPointerMovingToSubmenu],\n        )}\n        onItemLeave={React.useCallback(\n          (event) => {\n            if (isPointerMovingToSubmenu(event)) return;\n            contentRef.current?.focus();\n            setCurrentItemId(null);\n          },\n          [isPointerMovingToSubmenu],\n        )}\n        onTriggerLeave={React.useCallback(\n          (event) => {\n            if (isPointerMovingToSubmenu(event)) event.preventDefault();\n          },\n          [isPointerMovingToSubmenu],\n        )}\n        pointerGraceTimerRef={pointerGraceTimerRef}\n        onPointerGraceIntentChange={React.useCallback((intent) => {\n          pointerGraceIntentRef.current = intent;\n        }, [])}\n      >\n        <ScrollLockWrapper {...scrollLockWrapperProps}>\n          <FocusScope\n            asChild\n            trapped={trapFocus}\n            onMountAutoFocus={composeEventHandlers(onOpenAutoFocus, (event) => {\n              // when opening, explicitly focus the content area only and leave\n              // `onEntryFocus` in  control of focusing first item\n              event.preventDefault();\n              contentRef.current?.focus({ preventScroll: true });\n            })}\n            onUnmountAutoFocus={onCloseAutoFocus}\n          >\n            <DismissableLayer\n              asChild\n              disableOutsidePointerEvents={disableOutsidePointerEvents}\n              onEscapeKeyDown={onEscapeKeyDown}\n              onPointerDownOutside={onPointerDownOutside}\n              onFocusOutside={onFocusOutside}\n              onInteractOutside={onInteractOutside}\n              onDismiss={onDismiss}\n            >\n              <RovingFocusGroup.Root\n                asChild\n                {...rovingFocusGroupScope}\n                dir={rootContext.dir}\n                orientation=\"vertical\"\n                loop={loop}\n                currentTabStopId={currentItemId}\n                onCurrentTabStopIdChange={setCurrentItemId}\n                onEntryFocus={composeEventHandlers(onEntryFocus, (event) => {\n                  // only focus first item when using keyboard\n                  if (!rootContext.isUsingKeyboardRef.current) event.preventDefault();\n                })}\n                preventScrollOnEntryFocus\n              >\n                <PopperPrimitive.Content\n                  role=\"menu\"\n                  aria-orientation=\"vertical\"\n                  data-state={getOpenState(context.open)}\n                  data-radix-menu-content=\"\"\n                  dir={rootContext.dir}\n                  {...popperScope}\n                  {...contentProps}\n                  ref={composedRefs}\n                  style={{ outline: 'none', ...contentProps.style }}\n                  onKeyDown={composeEventHandlers(contentProps.onKeyDown, (event) => {\n                    // submenu key events bubble through portals. We only care about keys in this menu.\n                    const target = event.target as HTMLElement;\n                    const isKeyDownInside =\n                      target.closest('[data-radix-menu-content]') === event.currentTarget;\n                    const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n                    const isCharacterKey = event.key.length === 1;\n                    if (isKeyDownInside) {\n                      // menus should not be navigated using tab key so we prevent it\n                      if (event.key === 'Tab') event.preventDefault();\n                      if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key);\n                    }\n                    // focus first/last item based on key pressed\n                    const content = contentRef.current;\n                    if (event.target !== content) return;\n                    if (!FIRST_LAST_KEYS.includes(event.key)) return;\n                    event.preventDefault();\n                    const items = getItems().filter((item) => !item.disabled);\n                    const candidateNodes = items.map((item) => item.ref.current!);\n                    if (LAST_KEYS.includes(event.key)) candidateNodes.reverse();\n                    focusFirst(candidateNodes);\n                  })}\n                  onBlur={composeEventHandlers(props.onBlur, (event) => {\n                    // clear search buffer when leaving the menu\n                    if (!event.currentTarget.contains(event.target)) {\n                      window.clearTimeout(timerRef.current);\n                      searchRef.current = '';\n                    }\n                  })}\n                  onPointerMove={composeEventHandlers(\n                    props.onPointerMove,\n                    whenMouse((event) => {\n                      const target = event.target as HTMLElement;\n                      const pointerXHasChanged = lastPointerXRef.current !== event.clientX;\n\n                      // We don't use `event.movementX` for this check because Safari will\n                      // always return `0` on a pointer event.\n                      if (event.currentTarget.contains(target) && pointerXHasChanged) {\n                        const newDir = event.clientX > lastPointerXRef.current ? 'right' : 'left';\n                        pointerDirRef.current = newDir;\n                        lastPointerXRef.current = event.clientX;\n                      }\n                    }),\n                  )}\n                />\n              </RovingFocusGroup.Root>\n            </DismissableLayer>\n          </FocusScope>\n        </ScrollLockWrapper>\n      </MenuContentProvider>\n    );\n  },\n);\n\nMenuContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'MenuGroup';\n\ntype MenuGroupElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface MenuGroupProps extends PrimitiveDivProps {}\n\nconst MenuGroup = React.forwardRef<MenuGroupElement, MenuGroupProps>(\n  (props: ScopedProps<MenuGroupProps>, forwardedRef) => {\n    const { __scopeMenu, ...groupProps } = props;\n    return <Primitive.div role=\"group\" {...groupProps} ref={forwardedRef} />;\n  },\n);\n\nMenuGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'MenuLabel';\n\ntype MenuLabelElement = React.ComponentRef<typeof Primitive.div>;\ninterface MenuLabelProps extends PrimitiveDivProps {}\n\nconst MenuLabel = React.forwardRef<MenuLabelElement, MenuLabelProps>(\n  (props: ScopedProps<MenuLabelProps>, forwardedRef) => {\n    const { __scopeMenu, ...labelProps } = props;\n    return <Primitive.div {...labelProps} ref={forwardedRef} />;\n  },\n);\n\nMenuLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'MenuItem';\nconst ITEM_SELECT = 'menu.itemSelect';\n\ntype MenuItemElement = MenuItemImplElement;\ninterface MenuItemProps extends Omit<MenuItemImplProps, 'onSelect'> {\n  onSelect?: (event: Event) => void;\n}\n\nconst MenuItem = React.forwardRef<MenuItemElement, MenuItemProps>(\n  (props: ScopedProps<MenuItemProps>, forwardedRef) => {\n    const { disabled = false, onSelect, ...itemProps } = props;\n    const ref = React.useRef<HTMLDivElement>(null);\n    const rootContext = useMenuRootContext(ITEM_NAME, props.__scopeMenu);\n    const contentContext = useMenuContentContext(ITEM_NAME, props.__scopeMenu);\n    const composedRefs = useComposedRefs(forwardedRef, ref);\n    const isPointerDownRef = React.useRef(false);\n\n    const handleSelect = () => {\n      const menuItem = ref.current;\n      if (!disabled && menuItem) {\n        const itemSelectEvent = new CustomEvent(ITEM_SELECT, { bubbles: true, cancelable: true });\n        menuItem.addEventListener(ITEM_SELECT, (event) => onSelect?.(event), { once: true });\n        dispatchDiscreteCustomEvent(menuItem, itemSelectEvent);\n        if (itemSelectEvent.defaultPrevented) {\n          isPointerDownRef.current = false;\n        } else {\n          rootContext.onClose();\n        }\n      }\n    };\n\n    return (\n      <MenuItemImpl\n        {...itemProps}\n        ref={composedRefs}\n        disabled={disabled}\n        onClick={composeEventHandlers(props.onClick, handleSelect)}\n        onPointerDown={(event) => {\n          props.onPointerDown?.(event);\n          isPointerDownRef.current = true;\n        }}\n        onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n          // Pointer down can move to a different menu item which should activate it on pointer up.\n          // We dispatch a click for selection to allow composition with click based triggers and to\n          // prevent Firefox from getting stuck in text selection mode when the menu closes.\n          if (!isPointerDownRef.current) event.currentTarget?.click();\n        })}\n        onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n          const isTypingAhead = contentContext.searchRef.current !== '';\n          if (disabled || (isTypingAhead && event.key === ' ')) return;\n          if (SELECTION_KEYS.includes(event.key)) {\n            event.currentTarget.click();\n            /**\n             * We prevent default browser behaviour for selection keys as they should trigger\n             * a selection only:\n             * - prevents space from scrolling the page.\n             * - if keydown causes focus to move, prevents keydown from firing on the new target.\n             */\n            event.preventDefault();\n          }\n        })}\n      />\n    );\n  },\n);\n\nMenuItem.displayName = ITEM_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype MenuItemImplElement = React.ComponentRef<typeof Primitive.div>;\ninterface MenuItemImplProps extends PrimitiveDivProps {\n  disabled?: boolean;\n  textValue?: string;\n}\n\nconst MenuItemImpl = React.forwardRef<MenuItemImplElement, MenuItemImplProps>(\n  (props: ScopedProps<MenuItemImplProps>, forwardedRef) => {\n    const { __scopeMenu, disabled = false, textValue, ...itemProps } = props;\n    const contentContext = useMenuContentContext(ITEM_NAME, __scopeMenu);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenu);\n    const ref = React.useRef<HTMLDivElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref);\n    const [isFocused, setIsFocused] = React.useState(false);\n\n    // get the item's `.textContent` as default strategy for typeahead `textValue`\n    const [textContent, setTextContent] = React.useState('');\n    React.useEffect(() => {\n      const menuItem = ref.current;\n      if (menuItem) {\n        setTextContent((menuItem.textContent ?? '').trim());\n      }\n    }, [itemProps.children]);\n\n    return (\n      <Collection.ItemSlot\n        scope={__scopeMenu}\n        disabled={disabled}\n        textValue={textValue ?? textContent}\n      >\n        <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!disabled}>\n          <Primitive.div\n            role=\"menuitem\"\n            data-highlighted={isFocused ? '' : undefined}\n            aria-disabled={disabled || undefined}\n            data-disabled={disabled ? '' : undefined}\n            {...itemProps}\n            ref={composedRefs}\n            /**\n             * We focus items on `pointerMove` to achieve the following:\n             *\n             * - Mouse over an item (it focuses)\n             * - Leave mouse where it is and use keyboard to focus a different item\n             * - Wiggle mouse without it leaving previously focused item\n             * - Previously focused item should re-focus\n             *\n             * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse\n             * wiggles. This is to match native menu implementation.\n             */\n            onPointerMove={composeEventHandlers(\n              props.onPointerMove,\n              whenMouse((event) => {\n                if (disabled) {\n                  contentContext.onItemLeave(event);\n                } else {\n                  contentContext.onItemEnter(event);\n                  if (!event.defaultPrevented) {\n                    const item = event.currentTarget;\n                    item.focus({ preventScroll: true });\n                  }\n                }\n              }),\n            )}\n            onPointerLeave={composeEventHandlers(\n              props.onPointerLeave,\n              whenMouse((event) => contentContext.onItemLeave(event)),\n            )}\n            onFocus={composeEventHandlers(props.onFocus, () => setIsFocused(true))}\n            onBlur={composeEventHandlers(props.onBlur, () => setIsFocused(false))}\n          />\n        </RovingFocusGroup.Item>\n      </Collection.ItemSlot>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * MenuCheckboxItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_ITEM_NAME = 'MenuCheckboxItem';\n\ntype MenuCheckboxItemElement = MenuItemElement;\n\ntype CheckedState = boolean | 'indeterminate';\n\ninterface MenuCheckboxItemProps extends MenuItemProps {\n  checked?: CheckedState;\n  // `onCheckedChange` can never be called with `\"indeterminate\"` from the inside\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst MenuCheckboxItem = React.forwardRef<MenuCheckboxItemElement, MenuCheckboxItemProps>(\n  (props: ScopedProps<MenuCheckboxItemProps>, forwardedRef) => {\n    const { checked = false, onCheckedChange, ...checkboxItemProps } = props;\n    return (\n      <ItemIndicatorProvider scope={props.__scopeMenu} checked={checked}>\n        <MenuItem\n          role=\"menuitemcheckbox\"\n          aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n          {...checkboxItemProps}\n          ref={forwardedRef}\n          data-state={getCheckedState(checked)}\n          onSelect={composeEventHandlers(\n            checkboxItemProps.onSelect,\n            () => onCheckedChange?.(isIndeterminate(checked) ? true : !checked),\n            { checkForDefaultPrevented: false },\n          )}\n        />\n      </ItemIndicatorProvider>\n    );\n  },\n);\n\nMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuRadioGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_GROUP_NAME = 'MenuRadioGroup';\n\nconst [RadioGroupProvider, useRadioGroupContext] = createMenuContext<MenuRadioGroupProps>(\n  RADIO_GROUP_NAME,\n  { value: undefined, onValueChange: () => {} },\n);\n\ntype MenuRadioGroupElement = React.ComponentRef<typeof MenuGroup>;\ninterface MenuRadioGroupProps extends MenuGroupProps {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst MenuRadioGroup = React.forwardRef<MenuRadioGroupElement, MenuRadioGroupProps>(\n  (props: ScopedProps<MenuRadioGroupProps>, forwardedRef) => {\n    const { value, onValueChange, ...groupProps } = props;\n    const handleValueChange = useCallbackRef(onValueChange);\n    return (\n      <RadioGroupProvider scope={props.__scopeMenu} value={value} onValueChange={handleValueChange}>\n        <MenuGroup {...groupProps} ref={forwardedRef} />\n      </RadioGroupProvider>\n    );\n  },\n);\n\nMenuRadioGroup.displayName = RADIO_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuRadioItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_ITEM_NAME = 'MenuRadioItem';\n\ntype MenuRadioItemElement = React.ComponentRef<typeof MenuItem>;\ninterface MenuRadioItemProps extends MenuItemProps {\n  value: string;\n}\n\nconst MenuRadioItem = React.forwardRef<MenuRadioItemElement, MenuRadioItemProps>(\n  (props: ScopedProps<MenuRadioItemProps>, forwardedRef) => {\n    const { value, ...radioItemProps } = props;\n    const context = useRadioGroupContext(RADIO_ITEM_NAME, props.__scopeMenu);\n    const checked = value === context.value;\n    return (\n      <ItemIndicatorProvider scope={props.__scopeMenu} checked={checked}>\n        <MenuItem\n          role=\"menuitemradio\"\n          aria-checked={checked}\n          {...radioItemProps}\n          ref={forwardedRef}\n          data-state={getCheckedState(checked)}\n          onSelect={composeEventHandlers(\n            radioItemProps.onSelect,\n            () => context.onValueChange?.(value),\n            { checkForDefaultPrevented: false },\n          )}\n        />\n      </ItemIndicatorProvider>\n    );\n  },\n);\n\nMenuRadioItem.displayName = RADIO_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'MenuItemIndicator';\n\ntype CheckboxContextValue = { checked: CheckedState };\n\nconst [ItemIndicatorProvider, useItemIndicatorContext] = createMenuContext<CheckboxContextValue>(\n  ITEM_INDICATOR_NAME,\n  { checked: false },\n);\n\ntype MenuItemIndicatorElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface MenuItemIndicatorProps extends PrimitiveSpanProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst MenuItemIndicator = React.forwardRef<MenuItemIndicatorElement, MenuItemIndicatorProps>(\n  (props: ScopedProps<MenuItemIndicatorProps>, forwardedRef) => {\n    const { __scopeMenu, forceMount, ...itemIndicatorProps } = props;\n    const indicatorContext = useItemIndicatorContext(ITEM_INDICATOR_NAME, __scopeMenu);\n    return (\n      <Presence\n        present={\n          forceMount ||\n          isIndeterminate(indicatorContext.checked) ||\n          indicatorContext.checked === true\n        }\n      >\n        <Primitive.span\n          {...itemIndicatorProps}\n          ref={forwardedRef}\n          data-state={getCheckedState(indicatorContext.checked)}\n        />\n      </Presence>\n    );\n  },\n);\n\nMenuItemIndicator.displayName = ITEM_INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'MenuSeparator';\n\ntype MenuSeparatorElement = React.ComponentRef<typeof Primitive.div>;\ninterface MenuSeparatorProps extends PrimitiveDivProps {}\n\nconst MenuSeparator = React.forwardRef<MenuSeparatorElement, MenuSeparatorProps>(\n  (props: ScopedProps<MenuSeparatorProps>, forwardedRef) => {\n    const { __scopeMenu, ...separatorProps } = props;\n    return (\n      <Primitive.div\n        role=\"separator\"\n        aria-orientation=\"horizontal\"\n        {...separatorProps}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nMenuSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'MenuArrow';\n\ntype MenuArrowElement = React.ComponentRef<typeof PopperPrimitive.Arrow>;\ntype PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;\ninterface MenuArrowProps extends PopperArrowProps {}\n\nconst MenuArrow = React.forwardRef<MenuArrowElement, MenuArrowProps>(\n  (props: ScopedProps<MenuArrowProps>, forwardedRef) => {\n    const { __scopeMenu, ...arrowProps } = props;\n    const popperScope = usePopperScope(__scopeMenu);\n    return <PopperPrimitive.Arrow {...popperScope} {...arrowProps} ref={forwardedRef} />;\n  },\n);\n\nMenuArrow.displayName = ARROW_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuSub\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_NAME = 'MenuSub';\n\ntype MenuSubContextValue = {\n  contentId: string;\n  triggerId: string;\n  trigger: MenuSubTriggerElement | null;\n  onTriggerChange(trigger: MenuSubTriggerElement | null): void;\n};\n\nconst [MenuSubProvider, useMenuSubContext] = createMenuContext<MenuSubContextValue>(SUB_NAME);\n\ninterface MenuSubProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  onOpenChange?(open: boolean): void;\n}\n\nconst MenuSub: React.FC<MenuSubProps> = (props: ScopedProps<MenuSubProps>) => {\n  const { __scopeMenu, children, open = false, onOpenChange } = props;\n  const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);\n  const popperScope = usePopperScope(__scopeMenu);\n  const [trigger, setTrigger] = React.useState<MenuSubTriggerElement | null>(null);\n  const [content, setContent] = React.useState<MenuContentElement | null>(null);\n  const handleOpenChange = useCallbackRef(onOpenChange);\n\n  // Prevent the parent menu from reopening with open submenus.\n  React.useEffect(() => {\n    if (parentMenuContext.open === false) handleOpenChange(false);\n    return () => handleOpenChange(false);\n  }, [parentMenuContext.open, handleOpenChange]);\n\n  return (\n    <PopperPrimitive.Root {...popperScope}>\n      <MenuProvider\n        scope={__scopeMenu}\n        open={open}\n        onOpenChange={handleOpenChange}\n        content={content}\n        onContentChange={setContent}\n      >\n        <MenuSubProvider\n          scope={__scopeMenu}\n          contentId={useId()}\n          triggerId={useId()}\n          trigger={trigger}\n          onTriggerChange={setTrigger}\n        >\n          {children}\n        </MenuSubProvider>\n      </MenuProvider>\n    </PopperPrimitive.Root>\n  );\n};\n\nMenuSub.displayName = SUB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuSubTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_TRIGGER_NAME = 'MenuSubTrigger';\n\ntype MenuSubTriggerElement = MenuItemImplElement;\ninterface MenuSubTriggerProps extends MenuItemImplProps {}\n\nconst MenuSubTrigger = React.forwardRef<MenuSubTriggerElement, MenuSubTriggerProps>(\n  (props: ScopedProps<MenuSubTriggerProps>, forwardedRef) => {\n    const context = useMenuContext(SUB_TRIGGER_NAME, props.__scopeMenu);\n    const rootContext = useMenuRootContext(SUB_TRIGGER_NAME, props.__scopeMenu);\n    const subContext = useMenuSubContext(SUB_TRIGGER_NAME, props.__scopeMenu);\n    const contentContext = useMenuContentContext(SUB_TRIGGER_NAME, props.__scopeMenu);\n    const openTimerRef = React.useRef<number | null>(null);\n    const { pointerGraceTimerRef, onPointerGraceIntentChange } = contentContext;\n    const scope = { __scopeMenu: props.__scopeMenu };\n\n    const clearOpenTimer = React.useCallback(() => {\n      if (openTimerRef.current) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }, []);\n\n    React.useEffect(() => clearOpenTimer, [clearOpenTimer]);\n\n    React.useEffect(() => {\n      const pointerGraceTimer = pointerGraceTimerRef.current;\n      return () => {\n        window.clearTimeout(pointerGraceTimer);\n        onPointerGraceIntentChange(null);\n      };\n    }, [pointerGraceTimerRef, onPointerGraceIntentChange]);\n\n    return (\n      <MenuAnchor asChild {...scope}>\n        <MenuItemImpl\n          id={subContext.triggerId}\n          aria-haspopup=\"menu\"\n          aria-expanded={context.open}\n          aria-controls={subContext.contentId}\n          data-state={getOpenState(context.open)}\n          {...props}\n          ref={composeRefs(forwardedRef, subContext.onTriggerChange)}\n          // This is redundant for mouse users but we cannot determine pointer type from\n          // click event and we cannot use pointerup event (see git history for reasons why)\n          onClick={(event) => {\n            props.onClick?.(event);\n            if (props.disabled || event.defaultPrevented) return;\n            /**\n             * We manually focus because iOS Safari doesn't always focus on click (e.g. buttons)\n             * and we rely heavily on `onFocusOutside` for submenus to close when switching\n             * between separate submenus.\n             */\n            event.currentTarget.focus();\n            if (!context.open) context.onOpenChange(true);\n          }}\n          onPointerMove={composeEventHandlers(\n            props.onPointerMove,\n            whenMouse((event) => {\n              contentContext.onItemEnter(event);\n              if (event.defaultPrevented) return;\n              if (!props.disabled && !context.open && !openTimerRef.current) {\n                contentContext.onPointerGraceIntentChange(null);\n                openTimerRef.current = window.setTimeout(() => {\n                  context.onOpenChange(true);\n                  clearOpenTimer();\n                }, 100);\n              }\n            }),\n          )}\n          onPointerLeave={composeEventHandlers(\n            props.onPointerLeave,\n            whenMouse((event) => {\n              clearOpenTimer();\n\n              const contentRect = context.content?.getBoundingClientRect();\n              if (contentRect) {\n                // TODO: make sure to update this when we change positioning logic\n                const side = context.content?.dataset.side as Side;\n                const rightSide = side === 'right';\n                const bleed = rightSide ? -5 : +5;\n                const contentNearEdge = contentRect[rightSide ? 'left' : 'right'];\n                const contentFarEdge = contentRect[rightSide ? 'right' : 'left'];\n\n                contentContext.onPointerGraceIntentChange({\n                  area: [\n                    // Apply a bleed on clientX to ensure that our exit point is\n                    // consistently within polygon bounds\n                    { x: event.clientX + bleed, y: event.clientY },\n                    { x: contentNearEdge, y: contentRect.top },\n                    { x: contentFarEdge, y: contentRect.top },\n                    { x: contentFarEdge, y: contentRect.bottom },\n                    { x: contentNearEdge, y: contentRect.bottom },\n                  ],\n                  side,\n                });\n\n                window.clearTimeout(pointerGraceTimerRef.current);\n                pointerGraceTimerRef.current = window.setTimeout(\n                  () => contentContext.onPointerGraceIntentChange(null),\n                  300,\n                );\n              } else {\n                contentContext.onTriggerLeave(event);\n                if (event.defaultPrevented) return;\n\n                // There's 100ms where the user may leave an item before the submenu was opened.\n                contentContext.onPointerGraceIntentChange(null);\n              }\n            }),\n          )}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            const isTypingAhead = contentContext.searchRef.current !== '';\n            if (props.disabled || (isTypingAhead && event.key === ' ')) return;\n            if (SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) {\n              context.onOpenChange(true);\n              // The trigger may hold focus if opened via pointer interaction\n              // so we ensure content is given focus again when switching to keyboard.\n              context.content?.focus();\n              // prevent window from scrolling\n              event.preventDefault();\n            }\n          })}\n        />\n      </MenuAnchor>\n    );\n  },\n);\n\nMenuSubTrigger.displayName = SUB_TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenuSubContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_CONTENT_NAME = 'MenuSubContent';\n\ntype MenuSubContentElement = MenuContentImplElement;\ninterface MenuSubContentProps\n  extends Omit<\n    MenuContentImplProps,\n    keyof MenuContentImplPrivateProps | 'onCloseAutoFocus' | 'onEntryFocus' | 'side' | 'align'\n  > {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst MenuSubContent = React.forwardRef<MenuSubContentElement, MenuSubContentProps>(\n  (props: ScopedProps<MenuSubContentProps>, forwardedRef) => {\n    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeMenu);\n    const { forceMount = portalContext.forceMount, ...subContentProps } = props;\n    const context = useMenuContext(CONTENT_NAME, props.__scopeMenu);\n    const rootContext = useMenuRootContext(CONTENT_NAME, props.__scopeMenu);\n    const subContext = useMenuSubContext(SUB_CONTENT_NAME, props.__scopeMenu);\n    const ref = React.useRef<MenuSubContentElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref);\n    return (\n      <Collection.Provider scope={props.__scopeMenu}>\n        <Presence present={forceMount || context.open}>\n          <Collection.Slot scope={props.__scopeMenu}>\n            <MenuContentImpl\n              id={subContext.contentId}\n              aria-labelledby={subContext.triggerId}\n              {...subContentProps}\n              ref={composedRefs}\n              align=\"start\"\n              side={rootContext.dir === 'rtl' ? 'left' : 'right'}\n              disableOutsidePointerEvents={false}\n              disableOutsideScroll={false}\n              trapFocus={false}\n              onOpenAutoFocus={(event) => {\n                // when opening a submenu, focus content for keyboard users only\n                if (rootContext.isUsingKeyboardRef.current) ref.current?.focus();\n                event.preventDefault();\n              }}\n              // The menu might close because of focusing another menu item in the parent menu. We\n              // don't want it to refocus the trigger in that case so we handle trigger focus ourselves.\n              onCloseAutoFocus={(event) => event.preventDefault()}\n              onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => {\n                // We prevent closing when the trigger is focused to avoid triggering a re-open animation\n                // on pointer interaction.\n                if (event.target !== subContext.trigger) context.onOpenChange(false);\n              })}\n              onEscapeKeyDown={composeEventHandlers(props.onEscapeKeyDown, (event) => {\n                rootContext.onClose();\n                // ensure pressing escape in submenu doesn't escape full screen mode\n                event.preventDefault();\n              })}\n              onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n                // Submenu key events bubble through portals. We only care about keys in this menu.\n                const isKeyDownInside = event.currentTarget.contains(event.target as HTMLElement);\n                const isCloseKey = SUB_CLOSE_KEYS[rootContext.dir].includes(event.key);\n                if (isKeyDownInside && isCloseKey) {\n                  context.onOpenChange(false);\n                  // We focus manually because we prevented it in `onCloseAutoFocus`\n                  subContext.trigger?.focus();\n                  // prevent window from scrolling\n                  event.preventDefault();\n                }\n              })}\n            />\n          </Collection.Slot>\n        </Presence>\n      </Collection.Provider>\n    );\n  },\n);\n\nMenuSubContent.displayName = SUB_CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getOpenState(open: boolean) {\n  return open ? 'open' : 'closed';\n}\n\nfunction isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n  return checked === 'indeterminate';\n}\n\nfunction getCheckedState(checked: CheckedState) {\n  return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';\n}\n\nfunction focusFirst(candidates: HTMLElement[]) {\n  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;\n  for (const candidate of candidates) {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;\n    candidate.focus();\n    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;\n  }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray<T>(array: T[], startIndex: number) {\n  return array.map<T>((_, index) => array[(startIndex + index) % array.length]!);\n}\n\n/**\n * This is the \"meat\" of the typeahead matching logic. It takes in all the values,\n * the search and the current match, and returns the next match (or `undefined`).\n *\n * We normalize the search because if a user has repeatedly pressed a character,\n * we want the exact same behavior as if we only had that one character\n * (ie. cycle through options starting with that character)\n *\n * We also reorder the values by wrapping the array around the current match.\n * This is so we always look forward from the current match, and picking the first\n * match will always be the correct one.\n *\n * Finally, if the normalized search is exactly one character, we exclude the\n * current match from the values because otherwise it would be the first to match always\n * and focus would never move. This is as opposed to the regular case, where we\n * don't want focus to move if the current match still matches.\n */\nfunction getNextMatch(values: string[], search: string, currentMatch?: string) {\n  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);\n  const normalizedSearch = isRepeated ? search[0]! : search;\n  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1;\n  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0));\n  const excludeCurrentMatch = normalizedSearch.length === 1;\n  if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v) => v !== currentMatch);\n  const nextMatch = wrappedValues.find((value) =>\n    value.toLowerCase().startsWith(normalizedSearch.toLowerCase()),\n  );\n  return nextMatch !== currentMatch ? nextMatch : undefined;\n}\n\ntype Point = { x: number; y: number };\ntype Polygon = Point[];\ntype Side = 'left' | 'right';\ntype GraceIntent = { area: Polygon; side: Side };\n\n// Determine if a point is inside of a polygon.\n// Based on https://github.com/substack/point-in-polygon\nfunction isPointInPolygon(point: Point, polygon: Polygon) {\n  const { x, y } = point;\n  let inside = false;\n  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n    const ii = polygon[i]!;\n    const jj = polygon[j]!;\n    const xi = ii.x;\n    const yi = ii.y;\n    const xj = jj.x;\n    const yj = jj.y;\n\n    // prettier-ignore\n    const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);\n    if (intersect) inside = !inside;\n  }\n\n  return inside;\n}\n\nfunction isPointerInGraceArea(event: React.PointerEvent, area?: Polygon) {\n  if (!area) return false;\n  const cursorPos = { x: event.clientX, y: event.clientY };\n  return isPointInPolygon(cursorPos, area);\n}\n\nfunction whenMouse<E>(handler: React.PointerEventHandler<E>): React.PointerEventHandler<E> {\n  return (event) => (event.pointerType === 'mouse' ? handler(event) : undefined);\n}\n\nconst Root = Menu;\nconst Anchor = MenuAnchor;\nconst Portal = MenuPortal;\nconst Content = MenuContent;\nconst Group = MenuGroup;\nconst Label = MenuLabel;\nconst Item = MenuItem;\nconst CheckboxItem = MenuCheckboxItem;\nconst RadioGroup = MenuRadioGroup;\nconst RadioItem = MenuRadioItem;\nconst ItemIndicator = MenuItemIndicator;\nconst Separator = MenuSeparator;\nconst Arrow = MenuArrow;\nconst Sub = MenuSub;\nconst SubTrigger = MenuSubTrigger;\nconst SubContent = MenuSubContent;\n\nexport {\n  createMenuScope,\n  //\n  Menu,\n  MenuAnchor,\n  MenuPortal,\n  MenuContent,\n  MenuGroup,\n  MenuLabel,\n  MenuItem,\n  MenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuItemIndicator,\n  MenuSeparator,\n  MenuArrow,\n  MenuSub,\n  MenuSubTrigger,\n  MenuSubContent,\n  //\n  Root,\n  Anchor,\n  Portal,\n  Content,\n  Group,\n  Label,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  ItemIndicator,\n  Separator,\n  Arrow,\n  Sub,\n  SubTrigger,\n  SubContent,\n};\nexport type {\n  MenuProps,\n  MenuAnchorProps,\n  MenuPortalProps,\n  MenuContentProps,\n  MenuGroupProps,\n  MenuLabelProps,\n  MenuItemProps,\n  MenuCheckboxItemProps,\n  MenuRadioGroupProps,\n  MenuRadioItemProps,\n  MenuItemIndicatorProps,\n  MenuSeparatorProps,\n  MenuArrowProps,\n  MenuSubProps,\n  MenuSubTriggerProps,\n  MenuSubContentProps,\n};\n"
  },
  {
    "path": "packages/react/menu/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/menubar/CHANGELOG.md",
    "content": "# @radix-ui/react-menubar\n\n## 1.1.16\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-menu@2.1.16`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-roving-focus@1.1.11`\n\n## 1.1.15\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-menu@2.1.15`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.14\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-menu@2.1.14`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9`\n\n## 1.1.13\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-menu@2.1.13`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8`\n\n## 1.1.12\n\n- Updated dependencies: `@radix-ui/react-menu@2.1.12`\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.7`, `@radix-ui/react-menu@2.1.11`\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-roving-focus@1.1.6`, `@radix-ui/react-menu@2.1.10`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-roving-focus@1.1.5`, `@radix-ui/react-menu@2.1.9`\n\n## 1.1.8\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-roving-focus@1.1.4`, `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-menu@2.1.8`\n"
  },
  {
    "path": "packages/react/menubar/README.md",
    "content": "# `react-menubar`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/menubar).\n"
  },
  {
    "path": "packages/react/menubar/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/menubar/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-menubar\",\n  \"version\": \"1.1.16\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-menu\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-roving-focus\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/test-data\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/menubar/src/index.ts",
    "content": "'use client';\nexport {\n  createMenubarScope,\n  //\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarPortal,\n  MenubarContent,\n  MenubarGroup,\n  MenubarLabel,\n  MenubarItem,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarItemIndicator,\n  MenubarSeparator,\n  MenubarArrow,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n  //\n  Root,\n  Menu,\n  Trigger,\n  Portal,\n  Content,\n  Group,\n  Label,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  ItemIndicator,\n  Separator,\n  Arrow,\n  Sub,\n  SubTrigger,\n  SubContent,\n} from './menubar';\nexport type {\n  MenubarProps,\n  MenubarMenuProps,\n  MenubarTriggerProps,\n  MenubarPortalProps,\n  MenubarContentProps,\n  MenubarGroupProps,\n  MenubarLabelProps,\n  MenubarItemProps,\n  MenubarCheckboxItemProps,\n  MenubarRadioGroupProps,\n  MenubarRadioItemProps,\n  MenubarItemIndicatorProps,\n  MenubarSeparatorProps,\n  MenubarArrowProps,\n  MenubarSubProps,\n  MenubarSubTriggerProps,\n  MenubarSubContentProps,\n} from './menubar';\n"
  },
  {
    "path": "packages/react/menubar/src/menubar.tsx",
    "content": "import * as React from 'react';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport * as MenuPrimitive from '@radix-ui/react-menu';\nimport { createMenuScope } from '@radix-ui/react-menu';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * Menubar\n * -----------------------------------------------------------------------------------------------*/\n\nconst MENUBAR_NAME = 'Menubar';\n\ntype ItemData = { value: string; disabled: boolean };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n  MenubarTriggerElement,\n  ItemData\n>(MENUBAR_NAME);\n\ntype ScopedProps<P> = P & { __scopeMenubar?: Scope };\nconst [createMenubarContext, createMenubarScope] = createContextScope(MENUBAR_NAME, [\n  createCollectionScope,\n  createRovingFocusGroupScope,\n]);\n\nconst useMenuScope = createMenuScope();\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype MenubarContextValue = {\n  value: string;\n  dir: Direction;\n  loop: boolean;\n  onMenuOpen(value: string): void;\n  onMenuClose(): void;\n  onMenuToggle(value: string): void;\n};\n\nconst [MenubarContextProvider, useMenubarContext] =\n  createMenubarContext<MenubarContextValue>(MENUBAR_NAME);\n\ntype MenubarElement = React.ComponentRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface MenubarProps extends PrimitiveDivProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  loop?: RovingFocusGroupProps['loop'];\n  dir?: RovingFocusGroupProps['dir'];\n}\n\nconst Menubar = React.forwardRef<MenubarElement, MenubarProps>(\n  (props: ScopedProps<MenubarProps>, forwardedRef) => {\n    const {\n      __scopeMenubar,\n      value: valueProp,\n      onValueChange,\n      defaultValue,\n      loop = true,\n      dir,\n      ...menubarProps\n    } = props;\n    const direction = useDirection(dir);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar);\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      onChange: onValueChange,\n      defaultProp: defaultValue ?? '',\n      caller: MENUBAR_NAME,\n    });\n\n    // We need to manage tab stop id manually as `RovingFocusGroup` updates the stop\n    // based on focus, and in some situations our triggers won't ever be given focus\n    // (e.g. click to open and then outside to close)\n    const [currentTabStopId, setCurrentTabStopId] = React.useState<string | null>(null);\n\n    return (\n      <MenubarContextProvider\n        scope={__scopeMenubar}\n        value={value}\n        onMenuOpen={React.useCallback(\n          (value) => {\n            setValue(value);\n            setCurrentTabStopId(value);\n          },\n          [setValue],\n        )}\n        onMenuClose={React.useCallback(() => setValue(''), [setValue])}\n        onMenuToggle={React.useCallback(\n          (value) => {\n            setValue((prevValue) => (prevValue ? '' : value));\n            // `openMenuOpen` and `onMenuToggle` are called exclusively so we\n            // need to update the id in either case.\n            setCurrentTabStopId(value);\n          },\n          [setValue],\n        )}\n        dir={direction}\n        loop={loop}\n      >\n        <Collection.Provider scope={__scopeMenubar}>\n          <Collection.Slot scope={__scopeMenubar}>\n            <RovingFocusGroup.Root\n              asChild\n              {...rovingFocusGroupScope}\n              orientation=\"horizontal\"\n              loop={loop}\n              dir={direction}\n              currentTabStopId={currentTabStopId}\n              onCurrentTabStopIdChange={setCurrentTabStopId}\n            >\n              <Primitive.div role=\"menubar\" {...menubarProps} ref={forwardedRef} />\n            </RovingFocusGroup.Root>\n          </Collection.Slot>\n        </Collection.Provider>\n      </MenubarContextProvider>\n    );\n  },\n);\n\nMenubar.displayName = MENUBAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarMenu\n * -----------------------------------------------------------------------------------------------*/\n\nconst MENU_NAME = 'MenubarMenu';\n\ntype MenubarMenuContextValue = {\n  value: string;\n  triggerId: string;\n  triggerRef: React.RefObject<MenubarTriggerElement | null>;\n  contentId: string;\n  wasKeyboardTriggerOpenRef: React.MutableRefObject<boolean>;\n};\n\nconst [MenubarMenuProvider, useMenubarMenuContext] =\n  createMenubarContext<MenubarMenuContextValue>(MENU_NAME);\n\ninterface MenubarMenuProps {\n  value?: string;\n  children?: React.ReactNode;\n}\n\nconst MenubarMenu = (props: ScopedProps<MenubarMenuProps>) => {\n  const { __scopeMenubar, value: valueProp, ...menuProps } = props;\n  const autoValue = useId();\n  // We need to provide an initial deterministic value as `useId` will return\n  // empty string on the first render and we don't want to match our internal \"closed\" value.\n  const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE';\n  const context = useMenubarContext(MENU_NAME, __scopeMenubar);\n  const menuScope = useMenuScope(__scopeMenubar);\n  const triggerRef = React.useRef<MenubarTriggerElement>(null);\n  const wasKeyboardTriggerOpenRef = React.useRef(false);\n  const open = context.value === value;\n\n  React.useEffect(() => {\n    if (!open) wasKeyboardTriggerOpenRef.current = false;\n  }, [open]);\n\n  return (\n    <MenubarMenuProvider\n      scope={__scopeMenubar}\n      value={value}\n      triggerId={useId()}\n      triggerRef={triggerRef}\n      contentId={useId()}\n      wasKeyboardTriggerOpenRef={wasKeyboardTriggerOpenRef}\n    >\n      <MenuPrimitive.Root\n        {...menuScope}\n        open={open}\n        onOpenChange={(open) => {\n          // Menu only calls `onOpenChange` when dismissing so we\n          // want to close our MenuBar based on the same events.\n          if (!open) context.onMenuClose();\n        }}\n        modal={false}\n        dir={context.dir}\n        {...menuProps}\n      />\n    </MenubarMenuProvider>\n  );\n};\n\nMenubarMenu.displayName = MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'MenubarTrigger';\n\ntype MenubarTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface MenubarTriggerProps extends PrimitiveButtonProps {}\n\nconst MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerProps>(\n  (props: ScopedProps<MenubarTriggerProps>, forwardedRef) => {\n    const { __scopeMenubar, disabled = false, ...triggerProps } = props;\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeMenubar);\n    const menuScope = useMenuScope(__scopeMenubar);\n    const context = useMenubarContext(TRIGGER_NAME, __scopeMenubar);\n    const menuContext = useMenubarMenuContext(TRIGGER_NAME, __scopeMenubar);\n    const ref = React.useRef<MenubarTriggerElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref, menuContext.triggerRef);\n    const [isFocused, setIsFocused] = React.useState(false);\n    const open = context.value === menuContext.value;\n\n    return (\n      <Collection.ItemSlot scope={__scopeMenubar} value={menuContext.value} disabled={disabled}>\n        <RovingFocusGroup.Item\n          asChild\n          {...rovingFocusGroupScope}\n          focusable={!disabled}\n          tabStopId={menuContext.value}\n        >\n          <MenuPrimitive.Anchor asChild {...menuScope}>\n            <Primitive.button\n              type=\"button\"\n              role=\"menuitem\"\n              id={menuContext.triggerId}\n              aria-haspopup=\"menu\"\n              aria-expanded={open}\n              aria-controls={open ? menuContext.contentId : undefined}\n              data-highlighted={isFocused ? '' : undefined}\n              data-state={open ? 'open' : 'closed'}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              {...triggerProps}\n              ref={composedRefs}\n              onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n                // but not when the control key is pressed (avoiding MacOS right click)\n                if (!disabled && event.button === 0 && event.ctrlKey === false) {\n                  context.onMenuOpen(menuContext.value);\n                  // prevent trigger focusing when opening\n                  // this allows the content to be given focus without competition\n                  if (!open) event.preventDefault();\n                }\n              })}\n              onPointerEnter={composeEventHandlers(props.onPointerEnter, () => {\n                const menubarOpen = Boolean(context.value);\n                if (menubarOpen && !open) {\n                  context.onMenuOpen(menuContext.value);\n                  ref.current?.focus();\n                }\n              })}\n              onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(event.key)) context.onMenuToggle(menuContext.value);\n                if (event.key === 'ArrowDown') context.onMenuOpen(menuContext.value);\n                // prevent keydown from scrolling window / first focused item to execute\n                // that keydown (inadvertently closing the menu)\n                if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {\n                  menuContext.wasKeyboardTriggerOpenRef.current = true;\n                  event.preventDefault();\n                }\n              })}\n              onFocus={composeEventHandlers(props.onFocus, () => setIsFocused(true))}\n              onBlur={composeEventHandlers(props.onBlur, () => setIsFocused(false))}\n            />\n          </MenuPrimitive.Anchor>\n        </RovingFocusGroup.Item>\n      </Collection.ItemSlot>\n    );\n  },\n);\n\nMenubarTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'MenubarPortal';\n\ntype MenuPortalProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;\ninterface MenubarPortalProps extends MenuPortalProps {}\n\nconst MenubarPortal: React.FC<MenubarPortalProps> = (props: ScopedProps<MenubarPortalProps>) => {\n  const { __scopeMenubar, ...portalProps } = props;\n  const menuScope = useMenuScope(__scopeMenubar);\n  return <MenuPrimitive.Portal {...menuScope} {...portalProps} />;\n};\n\nMenubarPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'MenubarContent';\n\ntype MenubarContentElement = React.ComponentRef<typeof MenuPrimitive.Content>;\ntype MenuContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Content>;\ninterface MenubarContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}\n\nconst MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentProps>(\n  (props: ScopedProps<MenubarContentProps>, forwardedRef) => {\n    const { __scopeMenubar, align = 'start', ...contentProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    const context = useMenubarContext(CONTENT_NAME, __scopeMenubar);\n    const menuContext = useMenubarMenuContext(CONTENT_NAME, __scopeMenubar);\n    const getItems = useCollection(__scopeMenubar);\n    const hasInteractedOutsideRef = React.useRef(false);\n\n    return (\n      <MenuPrimitive.Content\n        id={menuContext.contentId}\n        aria-labelledby={menuContext.triggerId}\n        data-radix-menubar-content=\"\"\n        {...menuScope}\n        {...contentProps}\n        ref={forwardedRef}\n        align={align}\n        onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n          const menubarOpen = Boolean(context.value);\n          if (!menubarOpen && !hasInteractedOutsideRef.current) {\n            menuContext.triggerRef.current?.focus();\n          }\n\n          hasInteractedOutsideRef.current = false;\n          // Always prevent auto focus because we either focus manually or want user agent focus\n          event.preventDefault();\n        })}\n        onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => {\n          const target = event.target as HTMLElement;\n          const isMenubarTrigger = getItems().some((item) => item.ref.current?.contains(target));\n          if (isMenubarTrigger) event.preventDefault();\n        })}\n        onInteractOutside={composeEventHandlers(props.onInteractOutside, () => {\n          hasInteractedOutsideRef.current = true;\n        })}\n        onEntryFocus={(event) => {\n          if (!menuContext.wasKeyboardTriggerOpenRef.current) event.preventDefault();\n        }}\n        onKeyDown={composeEventHandlers(\n          props.onKeyDown,\n          (event) => {\n            if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n              const target = event.target as HTMLElement;\n              const targetIsSubTrigger = target.hasAttribute('data-radix-menubar-subtrigger');\n              const isKeyDownInsideSubMenu =\n                target.closest('[data-radix-menubar-content]') !== event.currentTarget;\n\n              const prevMenuKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n              const isPrevKey = prevMenuKey === event.key;\n              const isNextKey = !isPrevKey;\n\n              // Prevent navigation when we're opening a submenu\n              if (isNextKey && targetIsSubTrigger) return;\n              // or we're inside a submenu and are moving backwards to close it\n              if (isKeyDownInsideSubMenu && isPrevKey) return;\n\n              const items = getItems().filter((item) => !item.disabled);\n              let candidateValues = items.map((item) => item.value);\n              if (isPrevKey) candidateValues.reverse();\n\n              const currentIndex = candidateValues.indexOf(menuContext.value);\n\n              candidateValues = context.loop\n                ? wrapArray(candidateValues, currentIndex + 1)\n                : candidateValues.slice(currentIndex + 1);\n\n              const [nextValue] = candidateValues;\n              if (nextValue) context.onMenuOpen(nextValue);\n            }\n          },\n          { checkForDefaultPrevented: false },\n        )}\n        style={{\n          ...props.style,\n          // re-namespace exposed content custom properties\n          ...{\n            '--radix-menubar-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-menubar-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-menubar-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-menubar-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-menubar-trigger-height': 'var(--radix-popper-anchor-height)',\n          },\n        }}\n      />\n    );\n  },\n);\n\nMenubarContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'MenubarGroup';\n\ntype MenubarGroupElement = React.ComponentRef<typeof MenuPrimitive.Group>;\ntype MenuGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;\ninterface MenubarGroupProps extends MenuGroupProps {}\n\nconst MenubarGroup = React.forwardRef<MenubarGroupElement, MenubarGroupProps>(\n  (props: ScopedProps<MenubarGroupProps>, forwardedRef) => {\n    const { __scopeMenubar, ...groupProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return <MenuPrimitive.Group {...menuScope} {...groupProps} ref={forwardedRef} />;\n  },\n);\n\nMenubarGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'MenubarLabel';\n\ntype MenubarLabelElement = React.ComponentRef<typeof MenuPrimitive.Label>;\ntype MenuLabelProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Label>;\ninterface MenubarLabelProps extends MenuLabelProps {}\n\nconst MenubarLabel = React.forwardRef<MenubarLabelElement, MenubarLabelProps>(\n  (props: ScopedProps<MenubarLabelProps>, forwardedRef) => {\n    const { __scopeMenubar, ...labelProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return <MenuPrimitive.Label {...menuScope} {...labelProps} ref={forwardedRef} />;\n  },\n);\n\nMenubarLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'MenubarItem';\n\ntype MenubarItemElement = React.ComponentRef<typeof MenuPrimitive.Item>;\ntype MenuItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>;\ninterface MenubarItemProps extends MenuItemProps {}\n\nconst MenubarItem = React.forwardRef<MenubarItemElement, MenubarItemProps>(\n  (props: ScopedProps<MenubarItemProps>, forwardedRef) => {\n    const { __scopeMenubar, ...itemProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return <MenuPrimitive.Item {...menuScope} {...itemProps} ref={forwardedRef} />;\n  },\n);\n\nMenubarItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarCheckboxItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_ITEM_NAME = 'MenubarCheckboxItem';\n\ntype MenubarCheckboxItemElement = React.ComponentRef<typeof MenuPrimitive.CheckboxItem>;\ntype MenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>;\ninterface MenubarCheckboxItemProps extends MenuCheckboxItemProps {}\n\nconst MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, MenubarCheckboxItemProps>(\n  (props: ScopedProps<MenubarCheckboxItemProps>, forwardedRef) => {\n    const { __scopeMenubar, ...checkboxItemProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return <MenuPrimitive.CheckboxItem {...menuScope} {...checkboxItemProps} ref={forwardedRef} />;\n  },\n);\n\nMenubarCheckboxItem.displayName = CHECKBOX_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarRadioGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_GROUP_NAME = 'MenubarRadioGroup';\n\ntype MenubarRadioGroupElement = React.ComponentRef<typeof MenuPrimitive.RadioGroup>;\ntype MenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;\ninterface MenubarRadioGroupProps extends MenuRadioGroupProps {}\n\nconst MenubarRadioGroup = React.forwardRef<MenubarRadioGroupElement, MenubarRadioGroupProps>(\n  (props: ScopedProps<MenubarRadioGroupProps>, forwardedRef) => {\n    const { __scopeMenubar, ...radioGroupProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return <MenuPrimitive.RadioGroup {...menuScope} {...radioGroupProps} ref={forwardedRef} />;\n  },\n);\n\nMenubarRadioGroup.displayName = RADIO_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarRadioItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_ITEM_NAME = 'MenubarRadioItem';\n\ntype MenubarRadioItemElement = React.ComponentRef<typeof MenuPrimitive.RadioItem>;\ntype MenuRadioItemProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;\ninterface MenubarRadioItemProps extends MenuRadioItemProps {}\n\nconst MenubarRadioItem = React.forwardRef<MenubarRadioItemElement, MenubarRadioItemProps>(\n  (props: ScopedProps<MenubarRadioItemProps>, forwardedRef) => {\n    const { __scopeMenubar, ...radioItemProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return <MenuPrimitive.RadioItem {...menuScope} {...radioItemProps} ref={forwardedRef} />;\n  },\n);\n\nMenubarRadioItem.displayName = RADIO_ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'MenubarItemIndicator';\n\ntype MenubarItemIndicatorElement = React.ComponentRef<typeof MenuPrimitive.ItemIndicator>;\ntype MenuItemIndicatorProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;\ninterface MenubarItemIndicatorProps extends MenuItemIndicatorProps {}\n\nconst MenubarItemIndicator = React.forwardRef<\n  MenubarItemIndicatorElement,\n  MenubarItemIndicatorProps\n>((props: ScopedProps<MenubarItemIndicatorProps>, forwardedRef) => {\n  const { __scopeMenubar, ...itemIndicatorProps } = props;\n  const menuScope = useMenuScope(__scopeMenubar);\n  return <MenuPrimitive.ItemIndicator {...menuScope} {...itemIndicatorProps} ref={forwardedRef} />;\n});\n\nMenubarItemIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'MenubarSeparator';\n\ntype MenubarSeparatorElement = React.ComponentRef<typeof MenuPrimitive.Separator>;\ntype MenuSeparatorProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>;\ninterface MenubarSeparatorProps extends MenuSeparatorProps {}\n\nconst MenubarSeparator = React.forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(\n  (props: ScopedProps<MenubarSeparatorProps>, forwardedRef) => {\n    const { __scopeMenubar, ...separatorProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return <MenuPrimitive.Separator {...menuScope} {...separatorProps} ref={forwardedRef} />;\n  },\n);\n\nMenubarSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'MenubarArrow';\n\ntype MenubarArrowElement = React.ComponentRef<typeof MenuPrimitive.Arrow>;\ntype MenuArrowProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>;\ninterface MenubarArrowProps extends MenuArrowProps {}\n\nconst MenubarArrow = React.forwardRef<MenubarArrowElement, MenubarArrowProps>(\n  (props: ScopedProps<MenubarArrowProps>, forwardedRef) => {\n    const { __scopeMenubar, ...arrowProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return <MenuPrimitive.Arrow {...menuScope} {...arrowProps} ref={forwardedRef} />;\n  },\n);\n\nMenubarArrow.displayName = ARROW_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSub\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_NAME = 'MenubarSub';\n\ninterface MenubarSubProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n}\n\nconst MenubarSub: React.FC<MenubarSubProps> = (props: ScopedProps<MenubarSubProps>) => {\n  const { __scopeMenubar, children, open: openProp, onOpenChange, defaultOpen } = props;\n  const menuScope = useMenuScope(__scopeMenubar);\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n    caller: SUB_NAME,\n  });\n\n  return (\n    <MenuPrimitive.Sub {...menuScope} open={open} onOpenChange={setOpen}>\n      {children}\n    </MenuPrimitive.Sub>\n  );\n};\n\nMenubarSub.displayName = SUB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSubTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_TRIGGER_NAME = 'MenubarSubTrigger';\n\ntype MenubarSubTriggerElement = React.ComponentRef<typeof MenuPrimitive.SubTrigger>;\ntype MenuSubTriggerProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;\ninterface MenubarSubTriggerProps extends MenuSubTriggerProps {}\n\nconst MenubarSubTrigger = React.forwardRef<MenubarSubTriggerElement, MenubarSubTriggerProps>(\n  (props: ScopedProps<MenubarSubTriggerProps>, forwardedRef) => {\n    const { __scopeMenubar, ...subTriggerProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n    return (\n      <MenuPrimitive.SubTrigger\n        data-radix-menubar-subtrigger=\"\"\n        {...menuScope}\n        {...subTriggerProps}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nMenubarSubTrigger.displayName = SUB_TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * MenubarSubContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_CONTENT_NAME = 'MenubarSubContent';\n\ntype MenubarSubContentElement = React.ComponentRef<typeof MenuPrimitive.Content>;\ntype MenuSubContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;\ninterface MenubarSubContentProps extends MenuSubContentProps {}\n\nconst MenubarSubContent = React.forwardRef<MenubarSubContentElement, MenubarSubContentProps>(\n  (props: ScopedProps<MenubarSubContentProps>, forwardedRef) => {\n    const { __scopeMenubar, ...subContentProps } = props;\n    const menuScope = useMenuScope(__scopeMenubar);\n\n    return (\n      <MenuPrimitive.SubContent\n        {...menuScope}\n        data-radix-menubar-content=\"\"\n        {...subContentProps}\n        ref={forwardedRef}\n        style={{\n          ...props.style,\n          // re-namespace exposed content custom properties\n          ...{\n            '--radix-menubar-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-menubar-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-menubar-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-menubar-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-menubar-trigger-height': 'var(--radix-popper-anchor-height)',\n          },\n        }}\n      />\n    );\n  },\n);\n\nMenubarSubContent.displayName = SUB_CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray<T>(array: T[], startIndex: number) {\n  return array.map<T>((_, index) => array[(startIndex + index) % array.length]!);\n}\n\nconst Root = Menubar;\nconst Menu = MenubarMenu;\nconst Trigger = MenubarTrigger;\nconst Portal = MenubarPortal;\nconst Content = MenubarContent;\nconst Group = MenubarGroup;\nconst Label = MenubarLabel;\nconst Item = MenubarItem;\nconst CheckboxItem = MenubarCheckboxItem;\nconst RadioGroup = MenubarRadioGroup;\nconst RadioItem = MenubarRadioItem;\nconst ItemIndicator = MenubarItemIndicator;\nconst Separator = MenubarSeparator;\nconst Arrow = MenubarArrow;\nconst Sub = MenubarSub;\nconst SubTrigger = MenubarSubTrigger;\nconst SubContent = MenubarSubContent;\n\nexport {\n  createMenubarScope,\n  //\n  Menubar,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarPortal,\n  MenubarContent,\n  MenubarGroup,\n  MenubarLabel,\n  MenubarItem,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarItemIndicator,\n  MenubarSeparator,\n  MenubarArrow,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n  //\n  Root,\n  Menu,\n  Trigger,\n  Portal,\n  Content,\n  Group,\n  Label,\n  Item,\n  CheckboxItem,\n  RadioGroup,\n  RadioItem,\n  ItemIndicator,\n  Separator,\n  Arrow,\n  Sub,\n  SubTrigger,\n  SubContent,\n};\nexport type {\n  MenubarProps,\n  MenubarMenuProps,\n  MenubarTriggerProps,\n  MenubarPortalProps,\n  MenubarContentProps,\n  MenubarGroupProps,\n  MenubarLabelProps,\n  MenubarItemProps,\n  MenubarCheckboxItemProps,\n  MenubarRadioGroupProps,\n  MenubarRadioItemProps,\n  MenubarItemIndicatorProps,\n  MenubarSeparatorProps,\n  MenubarArrowProps,\n  MenubarSubProps,\n  MenubarSubTriggerProps,\n  MenubarSubContentProps,\n};\n"
  },
  {
    "path": "packages/react/menubar/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/navigation-menu/CHANGELOG.md",
    "content": "# @radix-ui/react-navigation-menu\n\n## 1.2.14\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-dismissable-layer@1.1.11`, `@radix-ui/react-visually-hidden@1.2.4`\n\n## 1.2.13\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- 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`\n\n## 1.2.12\n\n- 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`\n\n## 1.2.11\n\n- 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`\n\n## 1.2.10\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.2.9\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.2.8\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.2.7\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`\n"
  },
  {
    "path": "packages/react/navigation-menu/README.md",
    "content": "# `react-navigation-menu`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/navigation-menu).\n"
  },
  {
    "path": "packages/react/navigation-menu/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/navigation-menu/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-navigation-menu\",\n  \"version\": \"1.2.14\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\",\n    \"@radix-ui/react-use-previous\": \"workspace:*\",\n    \"@radix-ui/react-visually-hidden\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/navigation-menu/src/index.ts",
    "content": "'use client';\nexport {\n  createNavigationMenuScope,\n  //\n  NavigationMenu,\n  NavigationMenuSub,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  //\n  Root,\n  Sub,\n  List,\n  Item,\n  Trigger,\n  Link,\n  Indicator,\n  Content,\n  Viewport,\n} from './navigation-menu';\nexport type {\n  NavigationMenuProps,\n  NavigationMenuSubProps,\n  NavigationMenuListProps,\n  NavigationMenuItemProps,\n  NavigationMenuTriggerProps,\n  NavigationMenuLinkProps,\n  NavigationMenuIndicatorProps,\n  NavigationMenuContentProps,\n  NavigationMenuViewportProps,\n} from './navigation-menu';\n"
  },
  {
    "path": "packages/react/navigation-menu/src/navigation-menu.tsx",
    "content": "import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { composeRefs, useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { Presence } from '@radix-ui/react-presence';\nimport { useId } from '@radix-ui/react-id';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Orientation = 'vertical' | 'horizontal';\ntype Direction = 'ltr' | 'rtl';\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenu\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAVIGATION_MENU_NAME = 'NavigationMenu';\n\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n  NavigationMenuTriggerElement,\n  { value: string }\n>(NAVIGATION_MENU_NAME);\n\nconst [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] =\n  createCollection<FocusGroupItemElement, {}>(NAVIGATION_MENU_NAME);\n\ntype ScopedProps<P> = P & { __scopeNavigationMenu?: Scope };\nconst [createNavigationMenuContext, createNavigationMenuScope] = createContextScope(\n  NAVIGATION_MENU_NAME,\n  [createCollectionScope, createFocusGroupCollectionScope],\n);\n\ntype ContentData = {\n  ref?: React.Ref<ViewportContentMounterElement>;\n} & ViewportContentMounterProps;\n\ntype NavigationMenuContextValue = {\n  isRootMenu: boolean;\n  value: string;\n  previousValue: string;\n  baseId: string;\n  dir: Direction;\n  orientation: Orientation;\n  rootNavigationMenu: NavigationMenuElement | null;\n  indicatorTrack: HTMLDivElement | null;\n  onIndicatorTrackChange(indicatorTrack: HTMLDivElement | null): void;\n  viewport: NavigationMenuViewportElement | null;\n  onViewportChange(viewport: NavigationMenuViewportElement | null): void;\n  onViewportContentChange(contentValue: string, contentData: ContentData): void;\n  onViewportContentRemove(contentValue: string): void;\n  onTriggerEnter(itemValue: string): void;\n  onTriggerLeave(): void;\n  onContentEnter(): void;\n  onContentLeave(): void;\n  onItemSelect(itemValue: string): void;\n  onItemDismiss(): void;\n};\n\nconst [NavigationMenuProviderImpl, useNavigationMenuContext] =\n  createNavigationMenuContext<NavigationMenuContextValue>(NAVIGATION_MENU_NAME);\n\nconst [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext<{\n  items: Map<string, ContentData>;\n}>(NAVIGATION_MENU_NAME);\n\ntype NavigationMenuElement = React.ComponentRef<typeof Primitive.nav>;\ntype PrimitiveNavProps = React.ComponentPropsWithoutRef<typeof Primitive.nav>;\ninterface NavigationMenuProps\n  extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>,\n    PrimitiveNavProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  dir?: Direction;\n  orientation?: Orientation;\n  /**\n   * The duration from when the pointer enters the trigger until the tooltip gets opened.\n   * @defaultValue 200\n   */\n  delayDuration?: number;\n  /**\n   * How much time a user has to enter another trigger without incurring a delay again.\n   * @defaultValue 300\n   */\n  skipDelayDuration?: number;\n}\n\nconst NavigationMenu = React.forwardRef<NavigationMenuElement, NavigationMenuProps>(\n  (props: ScopedProps<NavigationMenuProps>, forwardedRef) => {\n    const {\n      __scopeNavigationMenu,\n      value: valueProp,\n      onValueChange,\n      defaultValue,\n      delayDuration = 200,\n      skipDelayDuration = 300,\n      orientation = 'horizontal',\n      dir,\n      ...NavigationMenuProps\n    } = props;\n    const [navigationMenu, setNavigationMenu] = React.useState<NavigationMenuElement | null>(null);\n    const composedRef = useComposedRefs(forwardedRef, (node) => setNavigationMenu(node));\n    const direction = useDirection(dir);\n    const openTimerRef = React.useRef(0);\n    const closeTimerRef = React.useRef(0);\n    const skipDelayTimerRef = React.useRef(0);\n    const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      onChange: (value) => {\n        const isOpen = value !== '';\n        const hasSkipDelayDuration = skipDelayDuration > 0;\n\n        if (isOpen) {\n          window.clearTimeout(skipDelayTimerRef.current);\n          if (hasSkipDelayDuration) setIsOpenDelayed(false);\n        } else {\n          window.clearTimeout(skipDelayTimerRef.current);\n          skipDelayTimerRef.current = window.setTimeout(\n            () => setIsOpenDelayed(true),\n            skipDelayDuration,\n          );\n        }\n\n        onValueChange?.(value);\n      },\n      defaultProp: defaultValue ?? '',\n      caller: NAVIGATION_MENU_NAME,\n    });\n\n    const startCloseTimer = React.useCallback(() => {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = window.setTimeout(() => setValue(''), 150);\n    }, [setValue]);\n\n    const handleOpen = React.useCallback(\n      (itemValue: string) => {\n        window.clearTimeout(closeTimerRef.current);\n        setValue(itemValue);\n      },\n      [setValue],\n    );\n\n    const handleDelayedOpen = React.useCallback(\n      (itemValue: string) => {\n        const isOpenItem = value === itemValue;\n        if (isOpenItem) {\n          // If the item is already open (e.g. we're transitioning from the content to the trigger)\n          // then we want to clear the close timer immediately.\n          window.clearTimeout(closeTimerRef.current);\n        } else {\n          openTimerRef.current = window.setTimeout(() => {\n            window.clearTimeout(closeTimerRef.current);\n            setValue(itemValue);\n          }, delayDuration);\n        }\n      },\n      [value, setValue, delayDuration],\n    );\n\n    React.useEffect(() => {\n      return () => {\n        window.clearTimeout(openTimerRef.current);\n        window.clearTimeout(closeTimerRef.current);\n        window.clearTimeout(skipDelayTimerRef.current);\n      };\n    }, []);\n\n    return (\n      <NavigationMenuProvider\n        scope={__scopeNavigationMenu}\n        isRootMenu={true}\n        value={value}\n        dir={direction}\n        orientation={orientation}\n        rootNavigationMenu={navigationMenu}\n        onTriggerEnter={(itemValue) => {\n          window.clearTimeout(openTimerRef.current);\n          if (isOpenDelayed) handleDelayedOpen(itemValue);\n          else handleOpen(itemValue);\n        }}\n        onTriggerLeave={() => {\n          window.clearTimeout(openTimerRef.current);\n          startCloseTimer();\n        }}\n        onContentEnter={() => window.clearTimeout(closeTimerRef.current)}\n        onContentLeave={startCloseTimer}\n        onItemSelect={(itemValue) => {\n          setValue((prevValue) => (prevValue === itemValue ? '' : itemValue));\n        }}\n        onItemDismiss={() => setValue('')}\n      >\n        <Primitive.nav\n          aria-label=\"Main\"\n          data-orientation={orientation}\n          dir={direction}\n          {...NavigationMenuProps}\n          ref={composedRef}\n        />\n      </NavigationMenuProvider>\n    );\n  },\n);\n\nNavigationMenu.displayName = NAVIGATION_MENU_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuSub\n * -----------------------------------------------------------------------------------------------*/\n\nconst SUB_NAME = 'NavigationMenuSub';\n\ntype NavigationMenuSubElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface NavigationMenuSubProps\n  extends Omit<NavigationMenuProviderProps, keyof NavigationMenuProviderPrivateProps>,\n    PrimitiveDivProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  orientation?: Orientation;\n}\n\nconst NavigationMenuSub = React.forwardRef<NavigationMenuSubElement, NavigationMenuSubProps>(\n  (props: ScopedProps<NavigationMenuSubProps>, forwardedRef) => {\n    const {\n      __scopeNavigationMenu,\n      value: valueProp,\n      onValueChange,\n      defaultValue,\n      orientation = 'horizontal',\n      ...subProps\n    } = props;\n    const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      onChange: onValueChange,\n      defaultProp: defaultValue ?? '',\n      caller: SUB_NAME,\n    });\n\n    return (\n      <NavigationMenuProvider\n        scope={__scopeNavigationMenu}\n        isRootMenu={false}\n        value={value}\n        dir={context.dir}\n        orientation={orientation}\n        rootNavigationMenu={context.rootNavigationMenu}\n        onTriggerEnter={(itemValue) => setValue(itemValue)}\n        onItemSelect={(itemValue) => setValue(itemValue)}\n        onItemDismiss={() => setValue('')}\n      >\n        <Primitive.div data-orientation={orientation} {...subProps} ref={forwardedRef} />\n      </NavigationMenuProvider>\n    );\n  },\n);\n\nNavigationMenuSub.displayName = SUB_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface NavigationMenuProviderPrivateProps {\n  isRootMenu: boolean;\n  scope: Scope;\n  children: React.ReactNode;\n  orientation: Orientation;\n  dir: Direction;\n  rootNavigationMenu: NavigationMenuElement | null;\n  value: string;\n  onTriggerEnter(itemValue: string): void;\n  onTriggerLeave?(): void;\n  onContentEnter?(): void;\n  onContentLeave?(): void;\n  onItemSelect(itemValue: string): void;\n  onItemDismiss(): void;\n}\n\ninterface NavigationMenuProviderProps extends NavigationMenuProviderPrivateProps {}\n\nconst NavigationMenuProvider: React.FC<NavigationMenuProviderProps> = (\n  props: ScopedProps<NavigationMenuProviderProps>,\n) => {\n  const {\n    scope,\n    isRootMenu,\n    rootNavigationMenu,\n    dir,\n    orientation,\n    children,\n    value,\n    onItemSelect,\n    onItemDismiss,\n    onTriggerEnter,\n    onTriggerLeave,\n    onContentEnter,\n    onContentLeave,\n  } = props;\n  const [viewport, setViewport] = React.useState<NavigationMenuViewportElement | null>(null);\n  const [viewportContent, setViewportContent] = React.useState<Map<string, ContentData>>(new Map());\n  const [indicatorTrack, setIndicatorTrack] = React.useState<HTMLDivElement | null>(null);\n\n  return (\n    <NavigationMenuProviderImpl\n      scope={scope}\n      isRootMenu={isRootMenu}\n      rootNavigationMenu={rootNavigationMenu}\n      value={value}\n      previousValue={usePrevious(value)}\n      baseId={useId()}\n      dir={dir}\n      orientation={orientation}\n      viewport={viewport}\n      onViewportChange={setViewport}\n      indicatorTrack={indicatorTrack}\n      onIndicatorTrackChange={setIndicatorTrack}\n      onTriggerEnter={useCallbackRef(onTriggerEnter)}\n      onTriggerLeave={useCallbackRef(onTriggerLeave)}\n      onContentEnter={useCallbackRef(onContentEnter)}\n      onContentLeave={useCallbackRef(onContentLeave)}\n      onItemSelect={useCallbackRef(onItemSelect)}\n      onItemDismiss={useCallbackRef(onItemDismiss)}\n      onViewportContentChange={React.useCallback((contentValue, contentData) => {\n        setViewportContent((prevContent) => {\n          prevContent.set(contentValue, contentData);\n          return new Map(prevContent);\n        });\n      }, [])}\n      onViewportContentRemove={React.useCallback((contentValue) => {\n        setViewportContent((prevContent) => {\n          if (!prevContent.has(contentValue)) return prevContent;\n          prevContent.delete(contentValue);\n          return new Map(prevContent);\n        });\n      }, [])}\n    >\n      <Collection.Provider scope={scope}>\n        <ViewportContentProvider scope={scope} items={viewportContent}>\n          {children}\n        </ViewportContentProvider>\n      </Collection.Provider>\n    </NavigationMenuProviderImpl>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuList\n * -----------------------------------------------------------------------------------------------*/\n\nconst LIST_NAME = 'NavigationMenuList';\n\ntype NavigationMenuListElement = React.ComponentRef<typeof Primitive.ul>;\ntype PrimitiveUnorderedListProps = React.ComponentPropsWithoutRef<typeof Primitive.ul>;\ninterface NavigationMenuListProps extends PrimitiveUnorderedListProps {}\n\nconst NavigationMenuList = React.forwardRef<NavigationMenuListElement, NavigationMenuListProps>(\n  (props: ScopedProps<NavigationMenuListProps>, forwardedRef) => {\n    const { __scopeNavigationMenu, ...listProps } = props;\n    const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);\n\n    const list = (\n      <Primitive.ul data-orientation={context.orientation} {...listProps} ref={forwardedRef} />\n    );\n\n    return (\n      <Primitive.div style={{ position: 'relative' }} ref={context.onIndicatorTrackChange}>\n        <Collection.Slot scope={__scopeNavigationMenu}>\n          {context.isRootMenu ? <FocusGroup asChild>{list}</FocusGroup> : list}\n        </Collection.Slot>\n      </Primitive.div>\n    );\n  },\n);\n\nNavigationMenuList.displayName = LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'NavigationMenuItem';\n\ntype FocusProxyElement = React.ComponentRef<typeof VisuallyHiddenPrimitive.Root>;\n\ntype NavigationMenuItemContextValue = {\n  value: string;\n  triggerRef: React.RefObject<NavigationMenuTriggerElement | null>;\n  contentRef: React.RefObject<NavigationMenuContentElement | null>;\n  focusProxyRef: React.RefObject<FocusProxyElement | null>;\n  wasEscapeCloseRef: React.MutableRefObject<boolean>;\n  onEntryKeyDown(): void;\n  onFocusProxyEnter(side: 'start' | 'end'): void;\n  onRootContentClose(): void;\n  onContentFocusOutside(): void;\n};\n\nconst [NavigationMenuItemContextProvider, useNavigationMenuItemContext] =\n  createNavigationMenuContext<NavigationMenuItemContextValue>(ITEM_NAME);\n\ntype NavigationMenuItemElement = React.ComponentRef<typeof Primitive.li>;\ntype PrimitiveListItemProps = React.ComponentPropsWithoutRef<typeof Primitive.li>;\ninterface NavigationMenuItemProps extends PrimitiveListItemProps {\n  value?: string;\n}\n\nconst NavigationMenuItem = React.forwardRef<NavigationMenuItemElement, NavigationMenuItemProps>(\n  (props: ScopedProps<NavigationMenuItemProps>, forwardedRef) => {\n    const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;\n    const autoValue = useId();\n    // We need to provide an initial deterministic value as `useId` will return\n    // empty string on the first render and we don't want to match our internal \"closed\" value.\n    const value = valueProp || autoValue || 'LEGACY_REACT_AUTO_VALUE';\n    const contentRef = React.useRef<NavigationMenuContentElement>(null);\n    const triggerRef = React.useRef<NavigationMenuTriggerElement>(null);\n    const focusProxyRef = React.useRef<FocusProxyElement>(null);\n    const restoreContentTabOrderRef = React.useRef(() => {});\n    const wasEscapeCloseRef = React.useRef(false);\n\n    const handleContentEntry = React.useCallback((side = 'start') => {\n      if (contentRef.current) {\n        restoreContentTabOrderRef.current();\n        const candidates = getTabbableCandidates(contentRef.current);\n        if (candidates.length) focusFirst(side === 'start' ? candidates : candidates.reverse());\n      }\n    }, []);\n\n    const handleContentExit = React.useCallback(() => {\n      if (contentRef.current) {\n        const candidates = getTabbableCandidates(contentRef.current);\n        if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);\n      }\n    }, []);\n\n    return (\n      <NavigationMenuItemContextProvider\n        scope={__scopeNavigationMenu}\n        value={value}\n        triggerRef={triggerRef}\n        contentRef={contentRef}\n        focusProxyRef={focusProxyRef}\n        wasEscapeCloseRef={wasEscapeCloseRef}\n        onEntryKeyDown={handleContentEntry}\n        onFocusProxyEnter={handleContentEntry}\n        onRootContentClose={handleContentExit}\n        onContentFocusOutside={handleContentExit}\n      >\n        <Primitive.li {...itemProps} ref={forwardedRef} />\n      </NavigationMenuItemContextProvider>\n    );\n  },\n);\n\nNavigationMenuItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'NavigationMenuTrigger';\n\ntype NavigationMenuTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface NavigationMenuTriggerProps extends PrimitiveButtonProps {}\n\nconst NavigationMenuTrigger = React.forwardRef<\n  NavigationMenuTriggerElement,\n  NavigationMenuTriggerProps\n>((props: ScopedProps<NavigationMenuTriggerProps>, forwardedRef) => {\n  const { __scopeNavigationMenu, disabled, ...triggerProps } = props;\n  const context = useNavigationMenuContext(TRIGGER_NAME, props.__scopeNavigationMenu);\n  const itemContext = useNavigationMenuItemContext(TRIGGER_NAME, props.__scopeNavigationMenu);\n  const ref = React.useRef<NavigationMenuTriggerElement>(null);\n  const composedRefs = useComposedRefs(ref, itemContext.triggerRef, forwardedRef);\n  const triggerId = makeTriggerId(context.baseId, itemContext.value);\n  const contentId = makeContentId(context.baseId, itemContext.value);\n  const hasPointerMoveOpenedRef = React.useRef(false);\n  const wasClickCloseRef = React.useRef(false);\n  const open = itemContext.value === context.value;\n\n  return (\n    <>\n      <Collection.ItemSlot scope={__scopeNavigationMenu} value={itemContext.value}>\n        <FocusGroupItem asChild>\n          <Primitive.button\n            id={triggerId}\n            disabled={disabled}\n            data-disabled={disabled ? '' : undefined}\n            data-state={getOpenState(open)}\n            aria-expanded={open}\n            aria-controls={contentId}\n            {...triggerProps}\n            ref={composedRefs}\n            onPointerEnter={composeEventHandlers(props.onPointerEnter, () => {\n              wasClickCloseRef.current = false;\n              itemContext.wasEscapeCloseRef.current = false;\n            })}\n            onPointerMove={composeEventHandlers(\n              props.onPointerMove,\n              whenMouse(() => {\n                if (\n                  disabled ||\n                  wasClickCloseRef.current ||\n                  itemContext.wasEscapeCloseRef.current ||\n                  hasPointerMoveOpenedRef.current\n                )\n                  return;\n                context.onTriggerEnter(itemContext.value);\n                hasPointerMoveOpenedRef.current = true;\n              }),\n            )}\n            onPointerLeave={composeEventHandlers(\n              props.onPointerLeave,\n              whenMouse(() => {\n                if (disabled) return;\n                context.onTriggerLeave();\n                hasPointerMoveOpenedRef.current = false;\n              }),\n            )}\n            onClick={composeEventHandlers(props.onClick, () => {\n              context.onItemSelect(itemContext.value);\n              wasClickCloseRef.current = open;\n            })}\n            onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n              const verticalEntryKey = context.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n              const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[\n                context.orientation\n              ];\n              if (open && event.key === entryKey) {\n                itemContext.onEntryKeyDown();\n                // Prevent FocusGroupItem from handling the event\n                event.preventDefault();\n              }\n            })}\n          />\n        </FocusGroupItem>\n      </Collection.ItemSlot>\n\n      {/* Proxy tab order between trigger and content */}\n      {open && (\n        <>\n          <VisuallyHiddenPrimitive.Root\n            aria-hidden\n            tabIndex={0}\n            ref={itemContext.focusProxyRef}\n            onFocus={(event) => {\n              const content = itemContext.contentRef.current;\n              const prevFocusedElement = event.relatedTarget as HTMLElement | null;\n              const wasTriggerFocused = prevFocusedElement === ref.current;\n              const wasFocusFromContent = content?.contains(prevFocusedElement);\n\n              if (wasTriggerFocused || !wasFocusFromContent) {\n                itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end');\n              }\n            }}\n          />\n\n          {/* Restructure a11y tree to make content accessible to screen reader when using the viewport */}\n          {context.viewport && <span aria-owns={contentId} />}\n        </>\n      )}\n    </>\n  );\n});\n\nNavigationMenuTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuLink\n * -----------------------------------------------------------------------------------------------*/\n\nconst LINK_NAME = 'NavigationMenuLink';\nconst LINK_SELECT = 'navigationMenu.linkSelect';\n\ntype NavigationMenuLinkElement = React.ComponentRef<typeof Primitive.a>;\ntype PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitive.a>;\ninterface NavigationMenuLinkProps extends Omit<PrimitiveLinkProps, 'onSelect'> {\n  active?: boolean;\n  onSelect?: (event: Event) => void;\n}\n\nconst NavigationMenuLink = React.forwardRef<NavigationMenuLinkElement, NavigationMenuLinkProps>(\n  (props: ScopedProps<NavigationMenuLinkProps>, forwardedRef) => {\n    const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;\n\n    return (\n      <FocusGroupItem asChild>\n        <Primitive.a\n          data-active={active ? '' : undefined}\n          aria-current={active ? 'page' : undefined}\n          {...linkProps}\n          ref={forwardedRef}\n          onClick={composeEventHandlers(\n            props.onClick,\n            (event) => {\n              const target = event.target as HTMLElement;\n              const linkSelectEvent = new CustomEvent(LINK_SELECT, {\n                bubbles: true,\n                cancelable: true,\n              });\n              target.addEventListener(LINK_SELECT, (event) => onSelect?.(event), { once: true });\n              dispatchDiscreteCustomEvent(target, linkSelectEvent);\n\n              if (!linkSelectEvent.defaultPrevented && !event.metaKey) {\n                const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {\n                  bubbles: true,\n                  cancelable: true,\n                });\n                dispatchDiscreteCustomEvent(target, rootContentDismissEvent);\n              }\n            },\n            { checkForDefaultPrevented: false },\n          )}\n        />\n      </FocusGroupItem>\n    );\n  },\n);\n\nNavigationMenuLink.displayName = LINK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'NavigationMenuIndicator';\n\ntype NavigationMenuIndicatorElement = NavigationMenuIndicatorImplElement;\ninterface NavigationMenuIndicatorProps extends NavigationMenuIndicatorImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst NavigationMenuIndicator = React.forwardRef<\n  NavigationMenuIndicatorElement,\n  NavigationMenuIndicatorProps\n>((props: ScopedProps<NavigationMenuIndicatorProps>, forwardedRef) => {\n  const { forceMount, ...indicatorProps } = props;\n  const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);\n  const isVisible = Boolean(context.value);\n\n  return context.indicatorTrack\n    ? ReactDOM.createPortal(\n        <Presence present={forceMount || isVisible}>\n          <NavigationMenuIndicatorImpl {...indicatorProps} ref={forwardedRef} />\n        </Presence>,\n        context.indicatorTrack,\n      )\n    : null;\n});\n\nNavigationMenuIndicator.displayName = INDICATOR_NAME;\n\ntype NavigationMenuIndicatorImplElement = React.ComponentRef<typeof Primitive.div>;\ninterface NavigationMenuIndicatorImplProps extends PrimitiveDivProps {}\n\nconst NavigationMenuIndicatorImpl = React.forwardRef<\n  NavigationMenuIndicatorImplElement,\n  NavigationMenuIndicatorImplProps\n>((props: ScopedProps<NavigationMenuIndicatorImplProps>, forwardedRef) => {\n  const { __scopeNavigationMenu, ...indicatorProps } = props;\n  const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);\n  const getItems = useCollection(__scopeNavigationMenu);\n  const [activeTrigger, setActiveTrigger] = React.useState<NavigationMenuTriggerElement | null>(\n    null,\n  );\n  const [position, setPosition] = React.useState<{ size: number; offset: number } | null>(null);\n  const isHorizontal = context.orientation === 'horizontal';\n  const isVisible = Boolean(context.value);\n\n  React.useEffect(() => {\n    const items = getItems();\n    const triggerNode = items.find((item) => item.value === context.value)?.ref.current;\n    if (triggerNode) setActiveTrigger(triggerNode);\n  }, [getItems, context.value]);\n\n  /**\n   * Update position when the indicator or parent track size changes\n   */\n  const handlePositionChange = () => {\n    if (activeTrigger) {\n      setPosition({\n        size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,\n        offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop,\n      });\n    }\n  };\n  useResizeObserver(activeTrigger, handlePositionChange);\n  useResizeObserver(context.indicatorTrack, handlePositionChange);\n\n  // We need to wait for the indicator position to be available before rendering to\n  // snap immediately into position rather than transitioning from initial\n  return position ? (\n    <Primitive.div\n      aria-hidden\n      data-state={isVisible ? 'visible' : 'hidden'}\n      data-orientation={context.orientation}\n      {...indicatorProps}\n      ref={forwardedRef}\n      style={{\n        position: 'absolute',\n        ...(isHorizontal\n          ? {\n              left: 0,\n              width: position.size + 'px',\n              transform: `translateX(${position.offset}px)`,\n            }\n          : {\n              top: 0,\n              height: position.size + 'px',\n              transform: `translateY(${position.offset}px)`,\n            }),\n        ...indicatorProps.style,\n      }}\n    />\n  ) : null;\n});\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'NavigationMenuContent';\n\ntype NavigationMenuContentElement = NavigationMenuContentImplElement;\ninterface NavigationMenuContentProps\n  extends Omit<NavigationMenuContentImplProps, keyof NavigationMenuContentImplPrivateProps> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst NavigationMenuContent = React.forwardRef<\n  NavigationMenuContentElement,\n  NavigationMenuContentProps\n>((props: ScopedProps<NavigationMenuContentProps>, forwardedRef) => {\n  const { forceMount, ...contentProps } = props;\n  const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);\n  const itemContext = useNavigationMenuItemContext(CONTENT_NAME, props.__scopeNavigationMenu);\n  const composedRefs = useComposedRefs(itemContext.contentRef, forwardedRef);\n  const open = itemContext.value === context.value;\n\n  const commonProps = {\n    value: itemContext.value,\n    triggerRef: itemContext.triggerRef,\n    focusProxyRef: itemContext.focusProxyRef,\n    wasEscapeCloseRef: itemContext.wasEscapeCloseRef,\n    onContentFocusOutside: itemContext.onContentFocusOutside,\n    onRootContentClose: itemContext.onRootContentClose,\n    ...contentProps,\n  };\n\n  return !context.viewport ? (\n    <Presence present={forceMount || open}>\n      <NavigationMenuContentImpl\n        data-state={getOpenState(open)}\n        {...commonProps}\n        ref={composedRefs}\n        onPointerEnter={composeEventHandlers(props.onPointerEnter, context.onContentEnter)}\n        onPointerLeave={composeEventHandlers(\n          props.onPointerLeave,\n          whenMouse(context.onContentLeave),\n        )}\n        style={{\n          // Prevent interaction when animating out\n          pointerEvents: !open && context.isRootMenu ? 'none' : undefined,\n          ...commonProps.style,\n        }}\n      />\n    </Presence>\n  ) : (\n    <ViewportContentMounter forceMount={forceMount} {...commonProps} ref={composedRefs} />\n  );\n});\n\nNavigationMenuContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ViewportContentMounterElement = NavigationMenuContentImplElement;\ninterface ViewportContentMounterProps extends NavigationMenuContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst ViewportContentMounter = React.forwardRef<\n  ViewportContentMounterElement,\n  ViewportContentMounterProps\n>((props: ScopedProps<ViewportContentMounterProps>, forwardedRef) => {\n  const context = useNavigationMenuContext(CONTENT_NAME, props.__scopeNavigationMenu);\n  const { onViewportContentChange, onViewportContentRemove } = context;\n\n  useLayoutEffect(() => {\n    onViewportContentChange(props.value, {\n      ref: forwardedRef,\n      ...props,\n    });\n  }, [props, forwardedRef, onViewportContentChange]);\n\n  useLayoutEffect(() => {\n    return () => onViewportContentRemove(props.value);\n  }, [props.value, onViewportContentRemove]);\n\n  // Content is proxied into the viewport\n  return null;\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss';\n\ntype MotionAttribute = 'to-start' | 'to-end' | 'from-start' | 'from-end';\ntype NavigationMenuContentImplElement = React.ComponentRef<typeof DismissableLayer>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;\n\ninterface NavigationMenuContentImplPrivateProps {\n  value: string;\n  triggerRef: React.RefObject<NavigationMenuTriggerElement | null>;\n  focusProxyRef: React.RefObject<FocusProxyElement | null>;\n  wasEscapeCloseRef: React.MutableRefObject<boolean>;\n  onContentFocusOutside(): void;\n  onRootContentClose(): void;\n}\ninterface NavigationMenuContentImplProps\n  extends Omit<DismissableLayerProps, 'onDismiss' | 'disableOutsidePointerEvents'>,\n    NavigationMenuContentImplPrivateProps {}\n\nconst NavigationMenuContentImpl = React.forwardRef<\n  NavigationMenuContentImplElement,\n  NavigationMenuContentImplProps\n>((props: ScopedProps<NavigationMenuContentImplProps>, forwardedRef) => {\n  const {\n    __scopeNavigationMenu,\n    value,\n    triggerRef,\n    focusProxyRef,\n    wasEscapeCloseRef,\n    onRootContentClose,\n    onContentFocusOutside,\n    ...contentProps\n  } = props;\n  const context = useNavigationMenuContext(CONTENT_NAME, __scopeNavigationMenu);\n  const ref = React.useRef<NavigationMenuContentImplElement>(null);\n  const composedRefs = useComposedRefs(ref, forwardedRef);\n  const triggerId = makeTriggerId(context.baseId, value);\n  const contentId = makeContentId(context.baseId, value);\n  const getItems = useCollection(__scopeNavigationMenu);\n  const prevMotionAttributeRef = React.useRef<MotionAttribute | null>(null);\n\n  const { onItemDismiss } = context;\n\n  React.useEffect(() => {\n    const content = ref.current;\n\n    // Bubble dismiss to the root content node and focus its trigger\n    if (context.isRootMenu && content) {\n      const handleClose = () => {\n        onItemDismiss();\n        onRootContentClose();\n        if (content.contains(document.activeElement)) triggerRef.current?.focus();\n      };\n      content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);\n      return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);\n    }\n  }, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]);\n\n  const motionAttribute = React.useMemo(() => {\n    const items = getItems();\n    const values = items.map((item) => item.value);\n    if (context.dir === 'rtl') values.reverse();\n    const index = values.indexOf(context.value);\n    const prevIndex = values.indexOf(context.previousValue);\n    const isSelected = value === context.value;\n    const wasSelected = prevIndex === values.indexOf(value);\n\n    // We only want to update selected and the last selected content\n    // this avoids animations being interrupted outside of that range\n    if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;\n\n    const attribute = (() => {\n      // Don't provide a direction on the initial open\n      if (index !== prevIndex) {\n        // If we're moving to this item from another\n        if (isSelected && prevIndex !== -1) return index > prevIndex ? 'from-end' : 'from-start';\n        // If we're leaving this item for another\n        if (wasSelected && index !== -1) return index > prevIndex ? 'to-start' : 'to-end';\n      }\n      // Otherwise we're entering from closed or leaving the list\n      // entirely and should not animate in any direction\n      return null;\n    })();\n\n    prevMotionAttributeRef.current = attribute;\n    return attribute;\n  }, [context.previousValue, context.value, context.dir, getItems, value]);\n\n  return (\n    <FocusGroup asChild>\n      <DismissableLayer\n        id={contentId}\n        aria-labelledby={triggerId}\n        data-motion={motionAttribute}\n        data-orientation={context.orientation}\n        {...contentProps}\n        ref={composedRefs}\n        disableOutsidePointerEvents={false}\n        onDismiss={() => {\n          const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {\n            bubbles: true,\n            cancelable: true,\n          });\n          ref.current?.dispatchEvent(rootContentDismissEvent);\n        }}\n        onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => {\n          onContentFocusOutside();\n          const target = event.target as HTMLElement;\n          // Only dismiss content when focus moves outside of the menu\n          if (context.rootNavigationMenu?.contains(target)) event.preventDefault();\n        })}\n        onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n          const target = event.target as HTMLElement;\n          const isTrigger = getItems().some((item) => item.ref.current?.contains(target));\n          const isRootViewport = context.isRootMenu && context.viewport?.contains(target);\n          if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();\n        })}\n        onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;\n          const isTabKey = event.key === 'Tab' && !isMetaKey;\n          if (isTabKey) {\n            const candidates = getTabbableCandidates(event.currentTarget);\n            const focusedElement = document.activeElement;\n            const index = candidates.findIndex((candidate) => candidate === focusedElement);\n            const isMovingBackwards = event.shiftKey;\n            const nextCandidates = isMovingBackwards\n              ? candidates.slice(0, index).reverse()\n              : candidates.slice(index + 1, candidates.length);\n\n            if (focusFirst(nextCandidates)) {\n              // prevent browser tab keydown because we've handled focus\n              event.preventDefault();\n            } else {\n              // If we can't focus that means we're at the edges\n              // so focus the proxy and let browser handle\n              // tab/shift+tab keypress on the proxy instead\n              focusProxyRef.current?.focus();\n            }\n          }\n        })}\n        onEscapeKeyDown={composeEventHandlers(props.onEscapeKeyDown, (_event) => {\n          // prevent the dropdown from reopening\n          // after the escape key has been pressed\n          wasEscapeCloseRef.current = true;\n        })}\n      />\n    </FocusGroup>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * NavigationMenuViewport\n * -----------------------------------------------------------------------------------------------*/\n\nconst VIEWPORT_NAME = 'NavigationMenuViewport';\n\ntype NavigationMenuViewportElement = NavigationMenuViewportImplElement;\ninterface NavigationMenuViewportProps\n  extends Omit<NavigationMenuViewportImplProps, 'activeContentValue'> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst NavigationMenuViewport = React.forwardRef<\n  NavigationMenuViewportElement,\n  NavigationMenuViewportProps\n>((props: ScopedProps<NavigationMenuViewportProps>, forwardedRef) => {\n  const { forceMount, ...viewportProps } = props;\n  const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);\n  const open = Boolean(context.value);\n\n  return (\n    <Presence present={forceMount || open}>\n      <NavigationMenuViewportImpl {...viewportProps} ref={forwardedRef} />\n    </Presence>\n  );\n});\n\nNavigationMenuViewport.displayName = VIEWPORT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype NavigationMenuViewportImplElement = React.ComponentRef<typeof Primitive.div>;\ninterface NavigationMenuViewportImplProps extends PrimitiveDivProps {}\n\nconst NavigationMenuViewportImpl = React.forwardRef<\n  NavigationMenuViewportImplElement,\n  NavigationMenuViewportImplProps\n>((props: ScopedProps<NavigationMenuViewportImplProps>, forwardedRef) => {\n  const { __scopeNavigationMenu, children, ...viewportImplProps } = props;\n  const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);\n  const composedRefs = useComposedRefs(forwardedRef, context.onViewportChange);\n  const viewportContentContext = useViewportContentContext(\n    CONTENT_NAME,\n    props.__scopeNavigationMenu,\n  );\n  const [size, setSize] = React.useState<{ width: number; height: number } | null>(null);\n  const [content, setContent] = React.useState<NavigationMenuContentElement | null>(null);\n  const viewportWidth = size ? size?.width + 'px' : undefined;\n  const viewportHeight = size ? size?.height + 'px' : undefined;\n  const open = Boolean(context.value);\n  // We persist the last active content value as the viewport may be animating out\n  // and we want the content to remain mounted for the lifecycle of the viewport.\n  const activeContentValue = open ? context.value : context.previousValue;\n\n  /**\n   * Update viewport size to match the active content node.\n   * We prefer offset dimensions over `getBoundingClientRect` as the latter respects CSS transform.\n   * For example, if content animates in from `scale(0.5)` the dimensions would be anything\n   * from `0.5` to `1` of the intended size.\n   */\n  const handleSizeChange = () => {\n    if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });\n  };\n  useResizeObserver(content, handleSizeChange);\n\n  return (\n    <Primitive.div\n      data-state={getOpenState(open)}\n      data-orientation={context.orientation}\n      {...viewportImplProps}\n      ref={composedRefs}\n      style={{\n        // Prevent interaction when animating out\n        pointerEvents: !open && context.isRootMenu ? 'none' : undefined,\n        ['--radix-navigation-menu-viewport-width' as any]: viewportWidth,\n        ['--radix-navigation-menu-viewport-height' as any]: viewportHeight,\n        ...viewportImplProps.style,\n      }}\n      onPointerEnter={composeEventHandlers(props.onPointerEnter, context.onContentEnter)}\n      onPointerLeave={composeEventHandlers(props.onPointerLeave, whenMouse(context.onContentLeave))}\n    >\n      {Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props }]) => {\n        const isActive = activeContentValue === value;\n        return (\n          <Presence key={value} present={forceMount || isActive}>\n            <NavigationMenuContentImpl\n              {...props}\n              ref={composeRefs(ref, (node) => {\n                // We only want to update the stored node when another is available\n                // as we need to smoothly transition between them.\n                if (isActive && node) setContent(node);\n              })}\n            />\n          </Presence>\n        );\n      })}\n    </Primitive.div>\n  );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_GROUP_NAME = 'FocusGroup';\n\ntype FocusGroupElement = React.ComponentRef<typeof Primitive.div>;\ninterface FocusGroupProps extends PrimitiveDivProps {}\n\nconst FocusGroup = React.forwardRef<FocusGroupElement, FocusGroupProps>(\n  (props: ScopedProps<FocusGroupProps>, forwardedRef) => {\n    const { __scopeNavigationMenu, ...groupProps } = props;\n    const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);\n\n    return (\n      <FocusGroupCollection.Provider scope={__scopeNavigationMenu}>\n        <FocusGroupCollection.Slot scope={__scopeNavigationMenu}>\n          <Primitive.div dir={context.dir} {...groupProps} ref={forwardedRef} />\n        </FocusGroupCollection.Slot>\n      </FocusGroupCollection.Provider>\n    );\n  },\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\nconst FOCUS_GROUP_ITEM_NAME = 'FocusGroupItem';\n\ntype FocusGroupItemElement = React.ComponentRef<typeof Primitive.button>;\ninterface FocusGroupItemProps extends PrimitiveButtonProps {}\n\nconst FocusGroupItem = React.forwardRef<FocusGroupItemElement, FocusGroupItemProps>(\n  (props: ScopedProps<FocusGroupItemProps>, forwardedRef) => {\n    const { __scopeNavigationMenu, ...groupProps } = props;\n    const getItems = useFocusGroupCollection(__scopeNavigationMenu);\n    const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);\n\n    return (\n      <FocusGroupCollection.ItemSlot scope={__scopeNavigationMenu}>\n        <Primitive.button\n          {...groupProps}\n          ref={forwardedRef}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            const isFocusNavigationKey = ['Home', 'End', ...ARROW_KEYS].includes(event.key);\n            if (isFocusNavigationKey) {\n              let candidateNodes = getItems().map((item) => item.ref.current!);\n              const prevItemKey = context.dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n              const prevKeys = [prevItemKey, 'ArrowUp', 'End'];\n              if (prevKeys.includes(event.key)) candidateNodes.reverse();\n              if (ARROW_KEYS.includes(event.key)) {\n                const currentIndex = candidateNodes.indexOf(event.currentTarget);\n                candidateNodes = candidateNodes.slice(currentIndex + 1);\n              }\n              /**\n               * Imperative focus during keydown is risky so we prevent React's batching updates\n               * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n               */\n              setTimeout(() => focusFirst(candidateNodes));\n\n              // Prevent page scroll while navigating\n              event.preventDefault();\n            }\n          })}\n        />\n      </FocusGroupCollection.ItemSlot>\n    );\n  },\n);\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n  const nodes: HTMLElement[] = [];\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n    },\n  });\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes;\n}\n\nfunction focusFirst(candidates: HTMLElement[]) {\n  const previouslyFocusedElement = document.activeElement;\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement) return true;\n    candidate.focus();\n    return document.activeElement !== previouslyFocusedElement;\n  });\n}\n\nfunction removeFromTabOrder(candidates: HTMLElement[]) {\n  candidates.forEach((candidate) => {\n    candidate.dataset.tabindex = candidate.getAttribute('tabindex') || '';\n    candidate.setAttribute('tabindex', '-1');\n  });\n  return () => {\n    candidates.forEach((candidate) => {\n      const prevTabIndex = candidate.dataset.tabindex as string;\n      candidate.setAttribute('tabindex', prevTabIndex);\n    });\n  };\n}\n\nfunction useResizeObserver(element: HTMLElement | null, onResize: () => void) {\n  const handleResize = useCallbackRef(onResize);\n  useLayoutEffect(() => {\n    let rAF = 0;\n    if (element) {\n      /**\n       * Resize Observer will throw an often benign error that says `ResizeObserver loop\n       * completed with undelivered notifications`. This means that ResizeObserver was not\n       * able to deliver all observations within a single animation frame, so we use\n       * `requestAnimationFrame` to ensure we don't deliver unnecessary observations.\n       * Further reading: https://github.com/WICG/resize-observer/issues/38\n       */\n      const resizeObserver = new ResizeObserver(() => {\n        cancelAnimationFrame(rAF);\n        rAF = window.requestAnimationFrame(handleResize);\n      });\n      resizeObserver.observe(element);\n      return () => {\n        window.cancelAnimationFrame(rAF);\n        resizeObserver.unobserve(element);\n      };\n    }\n  }, [element, handleResize]);\n}\n\nfunction getOpenState(open: boolean) {\n  return open ? 'open' : 'closed';\n}\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`;\n}\n\nfunction whenMouse<E>(handler: React.PointerEventHandler<E>): React.PointerEventHandler<E> {\n  return (event) => (event.pointerType === 'mouse' ? handler(event) : undefined);\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = NavigationMenu;\nconst Sub = NavigationMenuSub;\nconst List = NavigationMenuList;\nconst Item = NavigationMenuItem;\nconst Trigger = NavigationMenuTrigger;\nconst Link = NavigationMenuLink;\nconst Indicator = NavigationMenuIndicator;\nconst Content = NavigationMenuContent;\nconst Viewport = NavigationMenuViewport;\n\nexport {\n  createNavigationMenuScope,\n  //\n  NavigationMenu,\n  NavigationMenuSub,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuContent,\n  NavigationMenuViewport,\n  //\n  Root,\n  Sub,\n  List,\n  Item,\n  Trigger,\n  Link,\n  Indicator,\n  Content,\n  Viewport,\n};\nexport type {\n  NavigationMenuProps,\n  NavigationMenuSubProps,\n  NavigationMenuListProps,\n  NavigationMenuItemProps,\n  NavigationMenuTriggerProps,\n  NavigationMenuLinkProps,\n  NavigationMenuIndicatorProps,\n  NavigationMenuContentProps,\n  NavigationMenuViewportProps,\n};\n"
  },
  {
    "path": "packages/react/navigation-menu/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/one-time-password-field/CHANGELOG.md",
    "content": "# @radix-ui/react-one-time-password-field\n\n## 0.1.8\n\n- Fixed a bug so that all input elements are disabled when the `Root` component is disabled\n- Fixed a bug with iOS Chrome autocomplete (#3641)\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-roving-focus@1.1.11`\n\n## 0.1.7\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 0.1.6\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9`\n\n## 0.1.5\n\n- - Update default input type to `text` and pass to the underlying input element ([#3510](https://github.com/radix-ui/primitives/pull/3510))\n- Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8`\n\n## 0.1.4\n\n- Updated dependencies: `@radix-ui/react-use-is-hydrated@0.1.0`\n\n## 0.1.3\n\n- Fix hydration mismatch error in `OneTimePasswordField` and add opt-in `index` prop\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.7`\n\n## 0.1.2\n\n- Updated dependencies: `@radix-ui/react-use-effect-event@0.0.2`, `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-roving-focus@1.1.6`\n\n## 0.1.1\n\n- Updated dependencies: `@radix-ui/react-use-effect-event@0.0.1`, `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-roving-focus@1.1.5`\n\n## 0.1.0\n\n### Introduce new One Time Password Field primitive\n\nThis new primitive is designed to implement the common design pattern for one-time password fields displayed as separate input fields for each character. This UI is deceptively complex to implement so that interactions follow user expectations. The new primitive handles all of this complexity for you, including:\n\n- Keyboard navigation mimicking the behavior of a single input field\n- Overriding values on paste\n- Password manager autofill support\n- Input validation for numeric and alphanumeric values\n- Auto-submit on completion\n- Focus management\n- Hidden input to provide a single value to form data\n\n### Other updates\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-roving-focus@1.1.4`, `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/one-time-password-field/README.md",
    "content": "# `react-one-time-password-field`\n\n## Installation\n\n```sh\n$ yarn add radix-ui\n# or\n$ npm install radix-ui\n```\n\n## Usage\n\nView docs [here](https://radix-ui.com/primitives/docs/components/one-time-password-field).\n"
  },
  {
    "path": "packages/react/one-time-password-field/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/one-time-password-field/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-one-time-password-field\",\n  \"version\": \"0.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"src\",\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/number\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-roving-focus\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-effect-event\": \"workspace:*\",\n    \"@radix-ui/react-use-is-hydrated\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/one-time-password-field/src/index.ts",
    "content": "'use client';\nexport type {\n  OneTimePasswordFieldProps,\n  OneTimePasswordFieldInputProps,\n  OneTimePasswordFieldHiddenInputProps,\n  InputValidationType,\n} from './one-time-password-field';\nexport {\n  OneTimePasswordField,\n  OneTimePasswordFieldInput,\n  OneTimePasswordFieldHiddenInput,\n  //\n  Root,\n  Input,\n  HiddenInput,\n} from './one-time-password-field';\n"
  },
  {
    "path": "packages/react/one-time-password-field/src/one-time-password-field.test.tsx",
    "content": "import { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { act, cleanup, render, screen, fireEvent } from '@testing-library/react';\nimport * as OneTimePasswordField from './one-time-password-field';\nimport { afterEach, describe, it, beforeEach, expect } from 'vitest';\nimport { userEvent, type UserEvent } from '@testing-library/user-event';\n\ndescribe('given a default OneTimePasswordField', () => {\n  let rendered: RenderResult;\n  let user: UserEvent;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    user = userEvent.setup();\n    rendered = render(\n      <OneTimePasswordField.Root>\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.HiddenInput name=\"code\" />\n      </OneTimePasswordField.Root>,\n    );\n  });\n\n  afterEach(cleanup);\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  it('should mask input value when type is password', async () => {\n    rendered.rerender(\n      <OneTimePasswordField.Root type=\"password\">\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.HiddenInput name=\"code\" />\n      </OneTimePasswordField.Root>,\n    );\n\n    const input = rendered.container.querySelector(\n      'input:not([type=\"hidden\"])',\n    ) as HTMLInputElement;\n\n    await userEvent.type(input, '1');\n    expect(input.type).toBe('password');\n\n    const hiddenInput = rendered.container.querySelector(\n      'input[type=\"hidden\"]',\n    ) as HTMLInputElement;\n    expect(hiddenInput.value).toBe('1');\n  });\n\n  it('should disable all inputs when Root is disabled', () => {\n    rendered.rerender(\n      <OneTimePasswordField.Root disabled>\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.Input />\n        <OneTimePasswordField.HiddenInput name=\"code\" />\n      </OneTimePasswordField.Root>,\n    );\n\n    const inputs = rendered.container.querySelectorAll('input:not([type=\"hidden\"])');\n    inputs.forEach((input) => {\n      expect(input).toBeDisabled();\n    });\n  });\n\n  // TODO: userEvent paste not behaving as expected. Debug and unskip.\n  // Replicated in storybook for now.\n  it.todo('pastes the code into the input', async () => {\n    const inputs = screen.getAllByRole<HTMLInputElement>('textbox', {\n      hidden: false,\n    });\n    const firstInput = inputs[0]!;\n    fireEvent.click(firstInput);\n    await act(async () => await user.paste('1,2,3,4,5,6'));\n    expect(getInputValues(inputs)).toBe('1,2,3,4,5,6');\n  });\n});\n\nfunction getInputValues(inputs: HTMLInputElement[]) {\n  return inputs.map((input) => input.value).join(',');\n}\n"
  },
  {
    "path": "packages/react/one-time-password-field/src/one-time-password-field.tsx",
    "content": "import * as Primitive from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { unstable_createCollection as createCollection } from '@radix-ui/react-collection';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { clamp } from '@radix-ui/number';\nimport { useEffectEvent } from '@radix-ui/react-use-effect-event';\n\ntype InputValidationType = 'alpha' | 'numeric' | 'alphanumeric' | 'none';\n\nconst INPUT_VALIDATION_MAP = {\n  numeric: {\n    type: 'numeric',\n    regexp: /[^\\d]/g,\n    pattern: '\\\\d{1}',\n    inputMode: 'numeric',\n  },\n  alpha: {\n    type: 'alpha',\n    regexp: /[^a-zA-Z]/g,\n    pattern: '[a-zA-Z]{1}',\n    inputMode: 'text',\n  },\n  alphanumeric: {\n    type: 'alphanumeric',\n    regexp: /[^a-zA-Z0-9]/g,\n    pattern: '[a-zA-Z0-9]{1}',\n    inputMode: 'text',\n  },\n  none: null,\n} satisfies InputValidation;\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupProps = RovingFocusGroup.RovingFocusGroupProps;\n\ninterface OneTimePasswordFieldContextValue {\n  attemptSubmit: () => void;\n  autoComplete: AutoComplete;\n  autoFocus: boolean;\n  disabled: boolean;\n  dispatch: Dispatcher;\n  form: string | undefined;\n  hiddenInputRef: React.RefObject<HTMLInputElement | null>;\n  isHydrated: boolean;\n  name: string | undefined;\n  orientation: Exclude<RovingFocusGroupProps['orientation'], undefined>;\n  placeholder: string | undefined;\n  readOnly: boolean;\n  type: InputType;\n  userActionRef: React.RefObject<KeyboardActionDetails | null>;\n  validationType: InputValidationType;\n  value: string[];\n  sanitizeValue: (arg: string | string[]) => string[];\n}\n\nconst ONE_TIME_PASSWORD_FIELD_NAME = 'OneTimePasswordField';\nconst [Collection, { useCollection, createCollectionScope, useInitCollection }] =\n  createCollection<HTMLInputElement>(ONE_TIME_PASSWORD_FIELD_NAME);\nconst [createOneTimePasswordFieldContext] = createContextScope(ONE_TIME_PASSWORD_FIELD_NAME, [\n  createCollectionScope,\n  createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\nconst [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] =\n  createOneTimePasswordFieldContext<OneTimePasswordFieldContextValue>(ONE_TIME_PASSWORD_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordField\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldOwnProps {\n  /**\n   * Specifies what—if any—permission the user agent has to provide automated\n   * assistance in filling out form field values, as well as guidance to the\n   * browser as to the type of information expected in the field. Allows\n   * `\"one-time-code\"` or `\"off\"`.\n   *\n   * @defaultValue `\"one-time-code\"`\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete\n   */\n  autoComplete?: AutoComplete;\n  /**\n   * Whether or not the first fillable input should be focused on page-load.\n   *\n   * @defaultValue `false`\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether or not the component should attempt to automatically submit when\n   * all fields are filled. If the field is associated with an HTML `form`\n   * element, the form's `requestSubmit` method will be called.\n   *\n   * @defaultValue `false`\n   */\n  autoSubmit?: boolean;\n  /**\n   * The initial value of the uncontrolled field.\n   */\n  defaultValue?: string;\n  /**\n   * Indicates the horizontal directionality of the parent element's text.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\n   */\n  dir?: RovingFocusGroupProps['dir'];\n  /**\n   * Whether or not the the field's input elements are disabled.\n   */\n  disabled?: boolean;\n  /**\n   * A string specifying the `form` element with which the input is associated.\n   * This string's value, if present, must match the id of a `form` element in\n   * the same document.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form\n   */\n  form?: string | undefined;\n  /**\n   * A string specifying a name for the input control. This name is submitted\n   * along with the control's value when the form data is submitted.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name\n   */\n  name?: string | undefined;\n  /**\n   * When the `autoSubmit` prop is set to `true`, this callback will be fired\n   * before attempting to submit the associated form. It will be called whether\n   * or not a form is located, or if submission is not allowed.\n   */\n  onAutoSubmit?: (value: string) => void;\n  /**\n   * A callback fired when the field's value changes. When the component is\n   * controlled, this should update the state passed to the `value` prop.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * Indicates the vertical directionality of the input elements.\n   *\n   * @defaultValue `\"horizontal\"`\n   */\n  orientation?: RovingFocusGroupProps['orientation'];\n  /**\n   * Defines the text displayed in a form control when the control has no value.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/placeholder\n   */\n  placeholder?: string | undefined;\n  /**\n   * Whether or not the input elements can be updated by the user.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/readonly\n   */\n  readOnly?: boolean;\n  /**\n   * Function for custom sanitization when `validationType` is set to `\"none\"`.\n   * This function will be called before updating values in response to user\n   * interactions.\n   */\n  sanitizeValue?: (value: string) => string;\n  /**\n   * The input type of the field's input elements. Can be `\"password\"` or `\"text\"`.\n   */\n  type?: InputType;\n  /**\n   * Specifies the type of input validation to be used. Can be `\"alpha\"`,\n   * `\"numeric\"`, `\"alphanumeric\"` or `\"none\"`.\n   *\n   * @defaultValue `\"numeric\"`\n   */\n  validationType?: InputValidationType;\n  /**\n   * The controlled value of the field.\n   */\n  value?: string;\n}\n\ntype ScopedProps<P> = P & { __scopeOneTimePasswordField?: Scope };\n\ninterface OneTimePasswordFieldProps\n  extends OneTimePasswordFieldOwnProps,\n    Omit<Primitive.PrimitivePropsWithRef<'div'>, keyof OneTimePasswordFieldOwnProps> {}\n\nconst OneTimePasswordField = React.forwardRef<HTMLDivElement, OneTimePasswordFieldProps>(\n  function OneTimePasswordFieldImpl(\n    {\n      __scopeOneTimePasswordField,\n      defaultValue,\n      value: valueProp,\n      onValueChange,\n      autoSubmit = false,\n      children,\n      onPaste,\n      onAutoSubmit,\n      disabled = false,\n      readOnly = false,\n      autoComplete = 'one-time-code',\n      autoFocus = false,\n      form,\n      name,\n      placeholder,\n      type = 'text',\n      // TODO: Change default to vertical when inputs use vertical writing mode\n      orientation = 'horizontal',\n      dir,\n      validationType = 'numeric',\n      sanitizeValue: sanitizeValueProp,\n      ...domProps\n    }: ScopedProps<OneTimePasswordFieldProps>,\n    forwardedRef,\n  ) {\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n    const direction = useDirection(dir);\n    const collectionState = useInitCollection();\n    const [collection] = collectionState;\n\n    const validation = INPUT_VALIDATION_MAP[validationType]\n      ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n      : null;\n\n    const sanitizeValue = React.useCallback(\n      (value: string | string[]) => {\n        if (Array.isArray(value)) {\n          value = value.map(removeWhitespace).join('');\n        } else {\n          value = removeWhitespace(value);\n        }\n\n        if (validation) {\n          // global regexp is stateful, so we clone it for each call\n          const regexp = new RegExp(validation.regexp);\n          value = value.replace(regexp, '');\n        } else if (sanitizeValueProp) {\n          value = sanitizeValueProp(value);\n        }\n\n        return value.split('');\n      },\n      [validation, sanitizeValueProp],\n    );\n\n    const controlledValue = React.useMemo(() => {\n      return valueProp != null ? sanitizeValue(valueProp) : undefined;\n    }, [valueProp, sanitizeValue]);\n\n    const [value, setValue] = useControllableState({\n      caller: 'OneTimePasswordField',\n      prop: controlledValue,\n      defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],\n      onChange: React.useCallback(\n        (value: string[]) => onValueChange?.(value.join('')),\n        [onValueChange],\n      ),\n    });\n\n    // Update function *specifically* for event handlers.\n    const dispatch = useEffectEvent<Dispatcher>((action) => {\n      switch (action.type) {\n        case 'SET_CHAR': {\n          const { index, char } = action;\n          const currentTarget = collection.at(index)?.element;\n          if (value[index] === char) {\n            const next = currentTarget && collection.from(currentTarget, 1)?.element;\n            focusInput(next);\n            return;\n          }\n\n          // empty values should be handled in the CLEAR_CHAR action\n          if (char === '') {\n            return;\n          }\n\n          if (validation) {\n            const regexp = new RegExp(validation.regexp);\n            const clean = char.replace(regexp, '');\n            if (clean !== char) {\n              // not valid; ignore\n              return;\n            }\n          }\n\n          // no more space\n          if (value.length >= collection.size) {\n            // replace current value; move to next input\n            const newValue = [...value];\n            newValue[index] = char;\n            flushSync(() => setValue(newValue));\n            const next = currentTarget && collection.from(currentTarget, 1)?.element;\n            focusInput(next);\n            return;\n          }\n\n          const newValue = [...value];\n          newValue[index] = char;\n\n          const lastElement = collection.at(-1)?.element;\n          flushSync(() => setValue(newValue));\n          if (currentTarget !== lastElement) {\n            const next = currentTarget && collection.from(currentTarget, 1)?.element;\n            focusInput(next);\n          } else {\n            currentTarget?.select();\n          }\n          return;\n        }\n\n        case 'CLEAR_CHAR': {\n          const { index, reason } = action;\n          if (!value[index]) {\n            return;\n          }\n\n          const newValue = value.filter((_, i) => i !== index);\n          const currentTarget = collection.at(index)?.element;\n          const previous = currentTarget && collection.from(currentTarget, -1)?.element;\n\n          flushSync(() => setValue(newValue));\n          if (reason === 'Backspace') {\n            focusInput(previous);\n          } else if (reason === 'Delete' || reason === 'Cut') {\n            focusInput(currentTarget);\n          }\n          return;\n        }\n\n        case 'CLEAR': {\n          if (value.length === 0) {\n            return;\n          }\n\n          if (action.reason === 'Backspace' || action.reason === 'Delete') {\n            flushSync(() => setValue([]));\n            focusInput(collection.at(0)?.element);\n          } else {\n            setValue([]);\n          }\n          return;\n        }\n\n        case 'PASTE': {\n          const { value: pastedValue } = action;\n          const value = sanitizeValue(pastedValue);\n          if (!value) {\n            return;\n          }\n\n          flushSync(() => setValue(value));\n          focusInput(collection.at(value.length - 1)?.element);\n          return;\n        }\n      }\n    });\n\n    // re-validate when the validation type changes\n    const validationTypeRef = React.useRef(validation);\n    React.useEffect(() => {\n      if (!validation) {\n        return;\n      }\n\n      if (validationTypeRef.current?.type !== validation.type) {\n        validationTypeRef.current = validation;\n        setValue(sanitizeValue(value.join('')));\n      }\n    }, [sanitizeValue, setValue, validation, value]);\n\n    const hiddenInputRef = React.useRef<HTMLInputElement>(null);\n\n    const userActionRef = React.useRef<KeyboardActionDetails | null>(null);\n    const rootRef = React.useRef<HTMLDivElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, rootRef);\n\n    const firstInput = collection.at(0)?.element;\n    const locateForm = React.useCallback(() => {\n      let formElement: HTMLFormElement | null | undefined;\n      if (form) {\n        const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);\n        if (isFormElement(associatedElement)) {\n          formElement = associatedElement;\n        }\n      } else if (hiddenInputRef.current) {\n        formElement = hiddenInputRef.current.form;\n      } else if (firstInput) {\n        formElement = firstInput.form;\n      }\n\n      return formElement ?? null;\n    }, [form, firstInput]);\n\n    const attemptSubmit = React.useCallback(() => {\n      const formElement = locateForm();\n      formElement?.requestSubmit();\n    }, [locateForm]);\n\n    React.useEffect(() => {\n      const form = locateForm();\n      if (form) {\n        const reset = () => dispatch({ type: 'CLEAR', reason: 'Reset' });\n        form.addEventListener('reset', reset);\n        return () => form.removeEventListener('reset', reset);\n      }\n    }, [dispatch, locateForm]);\n\n    const currentValue = value.join('');\n    const valueRef = React.useRef(currentValue);\n    const length = collection.size;\n    React.useEffect(() => {\n      const previousValue = valueRef.current;\n      valueRef.current = currentValue;\n      if (previousValue === currentValue) {\n        return;\n      }\n\n      if (autoSubmit && value.every((char) => char !== '') && value.length === length) {\n        onAutoSubmit?.(value.join(''));\n        attemptSubmit();\n      }\n    }, [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value]);\n    const isHydrated = useIsHydrated();\n\n    return (\n      <OneTimePasswordFieldContext\n        scope={__scopeOneTimePasswordField}\n        value={value}\n        attemptSubmit={attemptSubmit}\n        disabled={disabled}\n        readOnly={readOnly}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        form={form}\n        name={name}\n        placeholder={placeholder}\n        type={type}\n        hiddenInputRef={hiddenInputRef}\n        userActionRef={userActionRef}\n        dispatch={dispatch}\n        validationType={validationType}\n        orientation={orientation}\n        isHydrated={isHydrated}\n        sanitizeValue={sanitizeValue}\n      >\n        <Collection.Provider scope={__scopeOneTimePasswordField} state={collectionState}>\n          <Collection.Slot scope={__scopeOneTimePasswordField}>\n            <RovingFocusGroup.Root\n              asChild\n              {...rovingFocusGroupScope}\n              orientation={orientation}\n              dir={direction}\n            >\n              <Primitive.Root.div\n                {...domProps}\n                role=\"group\"\n                ref={composedRefs}\n                onPaste={composeEventHandlers(\n                  onPaste,\n                  (event: React.ClipboardEvent<HTMLDivElement>) => {\n                    event.preventDefault();\n                    const pastedValue = event.clipboardData.getData('Text');\n                    dispatch({ type: 'PASTE', value: pastedValue });\n                  },\n                )}\n              >\n                {children}\n              </Primitive.Root.div>\n            </RovingFocusGroup.Root>\n          </Collection.Slot>\n        </Collection.Provider>\n      </OneTimePasswordFieldContext>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldHiddenInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldHiddenInputProps\n  extends Omit<\n    React.ComponentProps<'input'>,\n    | keyof 'value'\n    | 'defaultValue'\n    | 'type'\n    | 'onChange'\n    | 'readOnly'\n    | 'disabled'\n    | 'autoComplete'\n    | 'autoFocus'\n  > {}\n\nconst OneTimePasswordFieldHiddenInput = React.forwardRef<\n  HTMLInputElement,\n  OneTimePasswordFieldHiddenInputProps\n>(function OneTimePasswordFieldHiddenInput(\n  { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,\n  forwardedRef,\n) {\n  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(\n    'OneTimePasswordFieldHiddenInput',\n    __scopeOneTimePasswordField,\n  );\n  const ref = useComposedRefs(hiddenInputRef, forwardedRef);\n  return (\n    <input\n      ref={ref}\n      name={name}\n      value={value.join('').trim()}\n      autoComplete=\"off\"\n      autoFocus={false}\n      autoCapitalize=\"off\"\n      autoCorrect=\"off\"\n      autoSave=\"off\"\n      spellCheck={false}\n      {...props}\n      type=\"hidden\"\n      readOnly\n    />\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * OneTimePasswordFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\ninterface OneTimePasswordFieldInputProps\n  extends Omit<\n    Primitive.PrimitivePropsWithRef<'input'>,\n    | 'value'\n    | 'defaultValue'\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'autoFocus'\n    | 'form'\n    | 'name'\n    | 'placeholder'\n    | 'type'\n  > {\n  /**\n   * Callback fired when the user input fails native HTML input validation.\n   */\n  onInvalidChange?: (character: string) => void;\n  /**\n   * User-provided index to determine the order of the inputs. This is useful if\n   * you need certain index-based attributes to be set on the initial render,\n   * often to prevent flickering after hydration.\n   */\n  index?: number;\n}\n\nconst OneTimePasswordFieldInput = React.forwardRef<\n  HTMLInputElement,\n  OneTimePasswordFieldInputProps\n>(function OneTimePasswordFieldInput(\n  {\n    __scopeOneTimePasswordField,\n    onInvalidChange,\n    index: indexProp,\n    ...props\n  }: ScopedProps<OneTimePasswordFieldInputProps>,\n  forwardedRef,\n) {\n  // TODO: warn if these values are passed\n  const {\n    value: _value,\n    defaultValue: _defaultValue,\n    disabled: _disabled,\n    readOnly: _readOnly,\n    autoComplete: _autoComplete,\n    autoFocus: _autoFocus,\n    form: _form,\n    name: _name,\n    placeholder: _placeholder,\n    type: _type,\n    ...domProps\n  } = props as Primitive.PrimitivePropsWithRef<'input'>;\n\n  const context = useOneTimePasswordFieldContext(\n    'OneTimePasswordFieldInput',\n    __scopeOneTimePasswordField,\n  );\n  const { dispatch, userActionRef, validationType, isHydrated, disabled } = context;\n  const collection = useCollection(__scopeOneTimePasswordField);\n  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeOneTimePasswordField);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [element, setElement] = React.useState<HTMLInputElement | null>(null);\n\n  const index = indexProp ?? (element ? collection.indexOf(element) : -1);\n  const canSetPlaceholder = indexProp != null || isHydrated;\n  let placeholder: string | undefined;\n  if (canSetPlaceholder && context.placeholder && context.value.length === 0) {\n    // only set placeholder after hydration to prevent flickering when indices\n    // are re-calculated\n    placeholder = context.placeholder[index];\n  }\n\n  const composedInputRef = useComposedRefs(forwardedRef, inputRef, setElement);\n  const char = context.value[index] ?? '';\n\n  const keyboardActionTimeoutRef = React.useRef<number | null>(null);\n  React.useEffect(() => {\n    return () => {\n      if (keyboardActionTimeoutRef.current) {\n        window.clearTimeout(keyboardActionTimeoutRef.current);\n      }\n    };\n  }, []);\n\n  const totalValue = context.value.join('').trim();\n  const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);\n  const isFocusable = index <= lastSelectableIndex;\n\n  const validation =\n    validationType in INPUT_VALIDATION_MAP\n      ? INPUT_VALIDATION_MAP[validationType as keyof InputValidation]\n      : undefined;\n\n  return (\n    <Collection.ItemSlot scope={__scopeOneTimePasswordField}>\n      <RovingFocusGroup.Item\n        {...rovingFocusGroupScope}\n        asChild\n        focusable={!context.disabled && isFocusable}\n        active={index === lastSelectableIndex}\n      >\n        {({ hasTabStop, isCurrentTabStop }) => {\n          const supportsAutoComplete = hasTabStop ? isCurrentTabStop : index === 0;\n          return (\n            <Primitive.Root.input\n              ref={composedInputRef}\n              type={context.type}\n              disabled={disabled}\n              aria-label={`Character ${index + 1} of ${collection.size}`}\n              autoComplete={supportsAutoComplete ? context.autoComplete : 'off'}\n              data-1p-ignore={supportsAutoComplete ? undefined : 'true'}\n              data-lpignore={supportsAutoComplete ? undefined : 'true'}\n              data-protonpass-ignore={supportsAutoComplete ? undefined : 'true'}\n              data-bwignore={supportsAutoComplete ? undefined : 'true'}\n              inputMode={validation?.inputMode}\n              maxLength={supportsAutoComplete ? collection.size : 1}\n              pattern={validation?.pattern}\n              readOnly={context.readOnly}\n              value={char}\n              placeholder={placeholder}\n              data-radix-otp-input=\"\"\n              data-radix-index={index}\n              {...domProps}\n              onFocus={composeEventHandlers(props.onFocus, (event) => {\n                event.currentTarget.select();\n              })}\n              onCut={composeEventHandlers(props.onCut, (event) => {\n                const currentValue = event.currentTarget.value;\n                if (currentValue !== '') {\n                  // In this case the value will be cleared, but we don't want to\n                  // set it directly because the user may want to prevent default\n                  // behavior in the onChange handler. The userActionRef will\n                  // be set temporarily so the change handler can behave correctly\n                  // in response to the action.\n                  userActionRef.current = { type: 'cut' };\n                  // Set a short timeout to clear the action tracker after the change\n                  // handler has had time to complete.\n                  keyboardActionTimeoutRef.current = window.setTimeout(() => {\n                    userActionRef.current = null;\n                  }, 10);\n                }\n              })}\n              onInput={composeEventHandlers(props.onInput, (event) => {\n                const value = event.currentTarget.value;\n                if (value.length > 1) {\n                  // Password managers may try to insert the code into a single\n                  // input, in which case form validation will fail to prevent\n                  // additional input. Handle this the same as if a user were\n                  // pasting a value.\n                  event.preventDefault();\n                  userActionRef.current = { type: 'autocomplete-paste' };\n                  dispatch({ type: 'PASTE', value });\n                  keyboardActionTimeoutRef.current = window.setTimeout(() => {\n                    userActionRef.current = null;\n                  }, 10);\n                }\n              })}\n              onChange={composeEventHandlers(props.onChange, (event) => {\n                const value = event.target.value;\n                event.preventDefault();\n                const action = userActionRef.current;\n                userActionRef.current = null;\n\n                if (action) {\n                  switch (action.type) {\n                    case 'cut':\n                      // TODO: do we want to assume the user wants to clear the\n                      // entire value here and copy the code to the clipboard instead\n                      // of just the value of the given input?\n                      dispatch({ type: 'CLEAR_CHAR', index, reason: 'Cut' });\n                      return;\n                    case 'autocomplete-paste':\n                      // the PASTE handler will already set the value and focus the final\n                      // input; we want to skip focusing the wrong element if the browser fires\n                      // onChange for the first input. This sometimes happens during autocomplete.\n                      return;\n                    case 'keydown': {\n                      if (action.key === 'Char') {\n                        // update resulting from a keydown event that set a value\n                        // directly. Ignore.\n                        return;\n                      }\n\n                      const isClearing =\n                        action.key === 'Backspace' && (action.metaKey || action.ctrlKey);\n                      if (action.key === 'Clear' || isClearing) {\n                        dispatch({ type: 'CLEAR', reason: 'Backspace' });\n                      } else {\n                        dispatch({ type: 'CLEAR_CHAR', index, reason: action.key });\n                      }\n                      return;\n                    }\n                    default:\n                      action satisfies never;\n                      return;\n                  }\n                }\n\n                // Only update the value if it matches the input pattern\n                if (event.target.validity.valid) {\n                  if (value === '') {\n                    let reason: 'Backspace' | 'Delete' | 'Cut' = 'Backspace';\n                    if (isInputEvent(event.nativeEvent)) {\n                      const inputType = event.nativeEvent.inputType;\n                      if (inputType === 'deleteContentBackward') {\n                        reason = 'Backspace';\n                      } else if (inputType === 'deleteByCut') {\n                        reason = 'Cut';\n                      }\n                    }\n                    dispatch({ type: 'CLEAR_CHAR', index, reason });\n                  } else {\n                    dispatch({ type: 'SET_CHAR', char: value, index, event });\n                  }\n                } else {\n                  const element = event.target;\n                  onInvalidChange?.(element.value);\n                  requestAnimationFrame(() => {\n                    if (element.ownerDocument.activeElement === element) {\n                      element.select();\n                    }\n                  });\n                }\n              })}\n              onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n                switch (event.key) {\n                  case 'Clear':\n                  case 'Delete':\n                  case 'Backspace': {\n                    const currentValue = event.currentTarget.value;\n                    // if current value is empty, no change event will fire\n                    if (currentValue === '') {\n                      // if the user presses delete when there is no value, noop\n                      if (event.key === 'Delete') return;\n\n                      const isClearing = event.key === 'Clear' || event.metaKey || event.ctrlKey;\n                      if (isClearing) {\n                        dispatch({ type: 'CLEAR', reason: 'Backspace' });\n                      } else {\n                        const element = event.currentTarget;\n                        requestAnimationFrame(() => {\n                          focusInput(collection.from(element, -1)?.element);\n                        });\n                      }\n                    } else {\n                      // In this case the value will be cleared, but we don't want\n                      // to set it directly because the user may want to prevent\n                      // default behavior in the onChange handler. The userActionRef\n                      // will is set temporarily so the change handler can behave\n                      // correctly in response to the key vs. clearing the value by\n                      // setting state externally.\n                      userActionRef.current = {\n                        type: 'keydown',\n                        key: event.key,\n                        metaKey: event.metaKey,\n                        ctrlKey: event.ctrlKey,\n                      };\n                      // Set a short timeout to clear the action tracker after the change\n                      // handler has had time to complete.\n                      keyboardActionTimeoutRef.current = window.setTimeout(() => {\n                        userActionRef.current = null;\n                      }, 10);\n                    }\n\n                    return;\n                  }\n                  case 'Enter': {\n                    event.preventDefault();\n                    context.attemptSubmit();\n                    return;\n                  }\n                  case 'ArrowDown':\n                  case 'ArrowUp': {\n                    if (context.orientation === 'horizontal') {\n                      // in horizontal orientation, the up/down will de-select the\n                      // input instead of moving focus\n                      event.preventDefault();\n                    }\n                    return;\n                  }\n                  // TODO: Handle left/right arrow keys in vertical writing mode\n                  default: {\n                    if (event.currentTarget.value === event.key) {\n                      // if current value is same as the key press, no change event\n                      // will fire. Focus the next input.\n                      const element = event.currentTarget;\n                      event.preventDefault();\n                      focusInput(collection.from(element, 1)?.element);\n                      return;\n                    } else if (\n                      // input already has a value, but...\n                      event.currentTarget.value &&\n                      // the value is not selected\n                      !(\n                        event.currentTarget.selectionStart === 0 &&\n                        event.currentTarget.selectionEnd != null &&\n                        event.currentTarget.selectionEnd > 0\n                      )\n                    ) {\n                      const attemptedValue = event.key;\n                      if (event.key.length > 1 || event.key === ' ') {\n                        // not a character; do nothing\n                        return;\n                      } else {\n                        // user is attempting to enter a character, but the input\n                        // will not update by default since it's limited to a single\n                        // character.\n                        const nextInput = collection.from(event.currentTarget, 1)?.element;\n                        const lastInput = collection.at(-1)?.element;\n                        if (nextInput !== lastInput && event.currentTarget !== lastInput) {\n                          // if selection is before the value, set the value of the\n                          // current input. Otherwise set the value of the next\n                          // input.\n                          if (event.currentTarget.selectionStart === 0) {\n                            dispatch({ type: 'SET_CHAR', char: attemptedValue, index, event });\n                          } else {\n                            dispatch({\n                              type: 'SET_CHAR',\n                              char: attemptedValue,\n                              index: index + 1,\n                              event,\n                            });\n                          }\n\n                          userActionRef.current = {\n                            type: 'keydown',\n                            key: 'Char',\n                            metaKey: event.metaKey,\n                            ctrlKey: event.ctrlKey,\n                          };\n                          keyboardActionTimeoutRef.current = window.setTimeout(() => {\n                            userActionRef.current = null;\n                          }, 10);\n                        }\n                      }\n                    }\n                  }\n                }\n              })}\n              onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n                event.preventDefault();\n                const indexToFocus = Math.min(index, lastSelectableIndex);\n                const element = collection.at(indexToFocus)?.element;\n                focusInput(element);\n              })}\n            />\n          );\n        }}\n      </RovingFocusGroup.Item>\n    </Collection.ItemSlot>\n  );\n});\n\nexport {\n  OneTimePasswordField,\n  OneTimePasswordFieldInput,\n  OneTimePasswordFieldHiddenInput,\n  //\n  OneTimePasswordField as Root,\n  OneTimePasswordFieldInput as Input,\n  OneTimePasswordFieldHiddenInput as HiddenInput,\n};\nexport type {\n  OneTimePasswordFieldProps,\n  OneTimePasswordFieldInputProps,\n  OneTimePasswordFieldHiddenInputProps,\n  InputValidationType,\n};\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isFormElement(element: Element | null | undefined): element is HTMLFormElement {\n  return element?.tagName === 'FORM';\n}\n\nfunction removeWhitespace(value: string) {\n  return value.replace(/\\s/g, '');\n}\n\nfunction focusInput(element: HTMLInputElement | null | undefined) {\n  if (!element) return;\n  if (element.ownerDocument.activeElement === element) {\n    // if the element is already focused, select the value in the next\n    // animation frame\n    window.requestAnimationFrame(() => {\n      element.select?.();\n    });\n  } else {\n    element.focus();\n  }\n}\n\nfunction isInputEvent(event: Event): event is InputEvent {\n  return event.type === 'input';\n}\n\ntype InputType = 'password' | 'text';\ntype AutoComplete = 'off' | 'one-time-code';\ntype KeyboardActionDetails =\n  | {\n      type: 'keydown';\n      key: 'Backspace' | 'Delete' | 'Clear' | 'Char';\n      metaKey: boolean;\n      ctrlKey: boolean;\n    }\n  | { type: 'cut' }\n  | { type: 'autocomplete-paste' };\n\ntype UpdateAction =\n  | {\n      type: 'SET_CHAR';\n      char: string;\n      index: number;\n      event: React.KeyboardEvent | React.ChangeEvent;\n    }\n  | { type: 'CLEAR_CHAR'; index: number; reason: 'Backspace' | 'Delete' | 'Cut' }\n  | { type: 'CLEAR'; reason: 'Reset' | 'Backspace' | 'Delete' | 'Clear' }\n  | { type: 'PASTE'; value: string };\ntype Dispatcher = React.Dispatch<UpdateAction>;\ntype InputValidation = Record<\n  InputValidationType,\n  {\n    type: InputValidationType;\n    regexp: RegExp;\n    pattern: string;\n    inputMode: 'text' | 'numeric';\n  } | null\n>;\n"
  },
  {
    "path": "packages/react/one-time-password-field/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/password-toggle-field/CHANGELOG.md",
    "content": "# @radix-ui/react-password-toggle-field\n\n## 0.1.3\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 0.1.2\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 0.1.1\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 0.1.0\n\n### Introduce new Password Toggle Field primitive\n\nThis new primitive provides components for rendering a password input alongside a button to toggle its visibility. Aside from its primary functionality, it also includes:\n\n- Returning focus to the input when toggling with a pointer\n- Maintaining focus when toggling with keyboard or virtual navigation\n- Resetting visibility to hidden after form submission to prevent accidental storage\n- Implicit accessible labeling for icon-based toggle buttons\n\nThis API is currently unstable, and we hope you'll help us test it out! Import the primitive using the `unstable_` prefix.\n\n```tsx\nimport { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';\n\nfunction FieldWithIconToggle() {\n  return (\n    <PasswordToggleField.Root>\n      <PasswordToggleField.Input />\n      <PasswordToggleField.Toggle>\n        <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />\n      </PasswordToggleField.Toggle>\n    </PasswordToggleField.Root>\n  );\n}\n\nfunction FieldWithTextToggle() {\n  return (\n    <PasswordToggleField.Root>\n      <PasswordToggleField.Input />\n      <PasswordToggleField.Toggle>\n        <PasswordToggleField.Slot visible=\"Hide password\" hidden=\"Show password\" />\n      </PasswordToggleField.Toggle>\n    </PasswordToggleField.Root>\n  );\n}\n```\n\n### Other updates\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n"
  },
  {
    "path": "packages/react/password-toggle-field/README.md",
    "content": "# `react-password-toggle-field`\n\n## Installation\n\n```sh\n$ yarn add radix-ui\n# or\n$ npm install radix-ui\n```\n\n## Usage\n\nView docs [here](https://radix-ui.com/primitives/docs/components/password-toggle-field).\n"
  },
  {
    "path": "packages/react/password-toggle-field/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/password-toggle-field/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-password-toggle-field\",\n  \"version\": \"0.1.3\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"src\",\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-effect-event\": \"workspace:*\",\n    \"@radix-ui/react-use-is-hydrated\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/password-toggle-field/src/index.ts",
    "content": "'use client';\nexport type {\n  PasswordToggleFieldProps,\n  PasswordToggleFieldInputProps,\n  PasswordToggleFieldToggleProps,\n  PasswordToggleFieldIconProps,\n  PasswordToggleFieldSlotProps,\n} from './password-toggle-field';\nexport {\n  PasswordToggleField,\n  PasswordToggleFieldInput,\n  PasswordToggleFieldToggle,\n  PasswordToggleFieldIcon,\n  PasswordToggleFieldSlot,\n  //\n  Root,\n  Input,\n  Toggle,\n  Icon,\n  Slot,\n} from './password-toggle-field';\n"
  },
  {
    "path": "packages/react/password-toggle-field/src/password-toggle-field.test.tsx",
    "content": "import { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { act, cleanup, render, screen } from '@testing-library/react';\nimport * as PasswordToggleField from './password-toggle-field';\nimport { afterEach, describe, it, beforeEach, expect } from 'vitest';\nimport { userEvent, type UserEvent } from '@testing-library/user-event';\n\ndescribe('given a default PasswordToggleField', () => {\n  let rendered: RenderResult;\n  let user: UserEvent;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    user = userEvent.setup();\n    rendered = render(\n      <>\n        <label htmlFor=\"password\">Password</label>\n        <PasswordToggleField.Root>\n          <PasswordToggleField.Input id=\"password\" />\n          <PasswordToggleField.Toggle>\n            <PasswordToggleField.Slot visible=\"Hide\" hidden=\"Show\" />\n          </PasswordToggleField.Toggle>\n        </PasswordToggleField.Root>\n      </>,\n    );\n  });\n\n  afterEach(cleanup);\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  it('should initially be hidden', () => {\n    const toggle = screen.getByRole('button', { name: 'Show' });\n    expect(toggle.textContent).toBe('Show');\n  });\n\n  it('toggles the children when clicked', async () => {\n    const toggle = screen.getByRole('button', { name: 'Show' });\n    await act(async () => await user.click(toggle));\n    expect(toggle.textContent).toBe('Hide');\n  });\n\n  it('should initially render input as `type=password`', async () => {\n    const input = screen.getByLabelText<HTMLInputElement>('Password');\n    expect(input.type).toBe('password');\n  });\n\n  it('should initially render input as `type=text` when toggled', async () => {\n    const input = screen.getByLabelText<HTMLInputElement>('Password');\n    const toggle = screen.getByRole('button', { name: 'Show' });\n    await act(async () => await user.click(toggle));\n    expect(input.type).toBe('text');\n  });\n\n  it('should re-focus the input after toggling', async () => {\n    const input = screen.getByLabelText<HTMLInputElement>('Password');\n    const toggle = screen.getByRole('button', { name: 'Show' });\n    await act(async () => await user.click(toggle));\n    expect(document.activeElement).toBe(input);\n  });\n\n  it(\"should restore the input's selection after toggling\", async () => {\n    const input = screen.getByLabelText<HTMLInputElement>('Password');\n    const toggle = screen.getByRole('button', { name: 'Show' });\n    await act(async () => await user.click(input));\n    await act(async () => await user.type(input, 'p'));\n    await act(async () => await user.click(toggle));\n    // selection should be at the end of the input value\n    expect(input.selectionStart).toBe(1);\n    expect(input.selectionEnd).toBe(1);\n\n    await act(async () => await user.type(input, 'assword'));\n    input.selectionStart = 0;\n    input.selectionEnd = 4;\n\n    await act(async () => await user.click(toggle));\n    expect(input.selectionStart).toBe(0);\n    expect(input.selectionEnd).toBe(4);\n  });\n});\n\ndescribe('given a PasswordToggleField with an Icon', () => {\n  let rendered: RenderResult;\n  let user: UserEvent;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    user = userEvent.setup();\n    rendered = render(\n      <>\n        <label htmlFor=\"password\">Password</label>\n        <PasswordToggleField.Root>\n          <PasswordToggleField.Input id=\"password\" />\n          <PasswordToggleField.Toggle>\n            <PasswordToggleField.Icon\n              visible={<EyeOpenIcon data-testid=\"open\" />}\n              hidden={<EyeClosedIcon data-testid=\"closed\" />}\n            />\n          </PasswordToggleField.Toggle>\n        </PasswordToggleField.Root>\n      </>,\n    );\n  });\n\n  afterEach(cleanup);\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  it('should initially be hidden', () => {\n    const icon = screen.getByTestId('closed');\n    expect(icon).toBeVisible();\n    expect(screen.queryByTestId('open')).not.toBeInTheDocument();\n  });\n\n  it('toggles the icon when clicked', async () => {\n    const toggle = screen.getByRole('button', { name: 'Show password' });\n    await act(async () => await user.click(toggle));\n    expect(screen.getByTestId('open')).toBeVisible();\n    expect(screen.queryByTestId('closed')).not.toBeInTheDocument();\n  });\n\n  it('should initially render input as `type=password`', async () => {\n    const input = screen.getByLabelText<HTMLInputElement>('Password');\n    expect(input.type).toBe('password');\n  });\n\n  it('should initially render input as `type=text` when toggled', async () => {\n    const input = screen.getByLabelText<HTMLInputElement>('Password');\n    const toggle = screen.getByRole('button', { name: 'Show password' });\n    await act(async () => await user.click(toggle));\n    expect(input.type).toBe('text');\n  });\n\n  it('should retain its value when toggled', async () => {\n    const input = screen.getByLabelText('Password');\n    const toggle = screen.getByRole('button', { name: 'Show password' });\n    await act(async () => await user.type(input, 'pass123'));\n    await act(async () => await user.click(toggle));\n    expect(input).toHaveValue('pass123');\n  });\n});\n\ndescribe('given a PasswordToggleField in a form', () => {\n  let user: UserEvent;\n\n  afterEach(cleanup);\n\n  beforeEach(() => {\n    user = userEvent.setup();\n    render(\n      <form onSubmit={(e) => e.preventDefault()}>\n        <label htmlFor=\"password\">Password</label>\n        <PasswordToggleField.Root>\n          <PasswordToggleField.Input id=\"password\" />\n          <PasswordToggleField.Toggle>\n            <PasswordToggleField.Slot visible=\"Hide\" hidden=\"Show\" />\n          </PasswordToggleField.Toggle>\n        </PasswordToggleField.Root>\n        <button>Submit</button>\n      </form>,\n    );\n  });\n\n  afterEach(cleanup);\n\n  it('should reset visibility to hidden after submission', async () => {\n    const toggle = screen.getByRole('button', { name: 'Show' });\n    const input = screen.getByLabelText<HTMLInputElement>('Password');\n    await act(() => user.click(toggle));\n    expect(input.type).toBe('text');\n    const submitButton = screen.getByText('Submit');\n    await act(() => user.click(submitButton));\n    expect(input.type).toBe('password');\n  });\n});\n\nfunction EyeClosedIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"15\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 10.9999 7.50001 10.9999C6.99965 10.9999 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.3989 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 9.99991 7.50001 9.99991C10.3078 9.99991 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nfunction EyeOpenIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"15\"\n      height=\"15\"\n      viewBox=\"0 0 15 15\"\n      fill=\"currentColor\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z\"\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n"
  },
  {
    "path": "packages/react/password-toggle-field/src/password-toggle-field.tsx",
    "content": "import * as React from 'react';\nimport { flushSync } from 'react-dom';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useId } from '@radix-ui/react-id';\nimport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nimport { useEffectEvent } from '@radix-ui/react-use-effect-event';\nimport type { Scope } from '@radix-ui/react-context';\nimport { createContextScope } from '@radix-ui/react-context';\n\nconst PASSWORD_TOGGLE_FIELD_NAME = 'PasswordToggleField';\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldProvider\n * -----------------------------------------------------------------------------------------------*/\n\ntype InternalFocusState = {\n  clickTriggered: boolean;\n  selectionStart: number | null;\n  selectionEnd: number | null;\n};\n\ninterface PasswordToggleFieldContextValue {\n  inputId: string;\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  visible: boolean;\n  setVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  syncInputId: (providedId: string | number | undefined) => void;\n  focusState: React.RefObject<InternalFocusState>;\n}\n\nconst [createPasswordToggleFieldContext] = createContextScope(PASSWORD_TOGGLE_FIELD_NAME);\nconst [PasswordToggleFieldProvider, usePasswordToggleFieldContext] =\n  createPasswordToggleFieldContext<PasswordToggleFieldContextValue>(PASSWORD_TOGGLE_FIELD_NAME);\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleField\n * -----------------------------------------------------------------------------------------------*/\n\ntype ScopedProps<P> = P & { __scopePasswordToggleField?: Scope };\n\ninterface PasswordToggleFieldProps {\n  id?: string;\n  visible?: boolean;\n  defaultVisible?: boolean;\n  onVisiblityChange?: (visible: boolean) => void;\n  children?: React.ReactNode;\n}\n\nconst INITIAL_FOCUS_STATE: InternalFocusState = {\n  clickTriggered: false,\n  selectionStart: null,\n  selectionEnd: null,\n};\n\nconst PasswordToggleField: React.FC<PasswordToggleFieldProps> = ({\n  __scopePasswordToggleField,\n  ...props\n}: ScopedProps<PasswordToggleFieldProps>) => {\n  const baseId = useId(props.id);\n  const defaultInputId = `${baseId}-input`;\n  const [inputIdState, setInputIdState] = React.useState<null | string>(defaultInputId);\n  const inputId = inputIdState ?? defaultInputId;\n  const syncInputId = React.useCallback(\n    (providedId: string | number | undefined) =>\n      setInputIdState(providedId != null ? String(providedId) : null),\n    [],\n  );\n\n  const { visible: visibleProp, defaultVisible, onVisiblityChange, children } = props;\n  const [visible = false, setVisible] = useControllableState({\n    caller: PASSWORD_TOGGLE_FIELD_NAME,\n    prop: visibleProp,\n    defaultProp: defaultVisible ?? false,\n    onChange: onVisiblityChange,\n  });\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n  const focusState = React.useRef<InternalFocusState>(INITIAL_FOCUS_STATE);\n\n  return (\n    <PasswordToggleFieldProvider\n      scope={__scopePasswordToggleField}\n      inputId={inputId}\n      inputRef={inputRef}\n      setVisible={setVisible}\n      syncInputId={syncInputId}\n      visible={visible}\n      focusState={focusState}\n    >\n      {children}\n    </PasswordToggleFieldProvider>\n  );\n};\nPasswordToggleField.displayName = PASSWORD_TOGGLE_FIELD_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_INPUT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Input';\n\ntype PrimitiveInputProps = React.ComponentPropsWithoutRef<'input'>;\n\ninterface PasswordToggleFieldOwnProps {\n  autoComplete?: 'current-password' | 'new-password';\n}\n\ninterface PasswordToggleFieldInputProps\n  extends PasswordToggleFieldOwnProps,\n    Omit<PrimitiveInputProps, keyof PasswordToggleFieldOwnProps | 'type'> {\n  autoComplete?: 'current-password' | 'new-password';\n}\n\nconst PasswordToggleFieldInput = React.forwardRef<HTMLInputElement, PasswordToggleFieldInputProps>(\n  (\n    {\n      __scopePasswordToggleField,\n      autoComplete = 'current-password',\n      autoCapitalize = 'off',\n      spellCheck = false,\n      id: idProp,\n      ...props\n    }: ScopedProps<PasswordToggleFieldInputProps>,\n    forwardedRef,\n  ) => {\n    const { visible, inputRef, inputId, syncInputId, setVisible, focusState } =\n      usePasswordToggleFieldContext(PASSWORD_TOGGLE_FIELD_INPUT_NAME, __scopePasswordToggleField);\n\n    React.useEffect(() => {\n      syncInputId(idProp);\n    }, [idProp, syncInputId]);\n\n    // We want to reset the visibility to `false` to revert the input to\n    // `type=\"password\"` when:\n    // - The form is reset (for consistency with other form controls)\n    // - The form is submitted (to prevent the browser from remembering the\n    //   input's value.\n    //\n    // See \"Keeping things secure\":\n    //   https://technology.blog.gov.uk/2021/04/19/simple-things-are-complicated-making-a-show-password-option/)\n    const _setVisible = useEffectEvent(setVisible);\n    React.useEffect(() => {\n      const inputElement = inputRef.current;\n      const form = inputElement?.form;\n      if (!form) {\n        return;\n      }\n\n      const controller = new AbortController();\n      form.addEventListener(\n        'reset',\n        (event) => {\n          if (!event.defaultPrevented) {\n            _setVisible(false);\n          }\n        },\n        { signal: controller.signal },\n      );\n      form.addEventListener(\n        'submit',\n        () => {\n          // always reset the visibility on submit regardless of whether the\n          // default action is prevented\n          _setVisible(false);\n        },\n        { signal: controller.signal },\n      );\n      return () => {\n        controller.abort();\n      };\n    }, [inputRef, _setVisible]);\n\n    return (\n      <Primitive.input\n        {...props}\n        id={idProp ?? inputId}\n        autoCapitalize={autoCapitalize}\n        autoComplete={autoComplete}\n        ref={useComposedRefs(forwardedRef, inputRef)}\n        spellCheck={spellCheck}\n        type={visible ? 'text' : 'password'}\n        onBlur={composeEventHandlers(props.onBlur, (event) => {\n          // get the cursor position\n          const { selectionStart, selectionEnd } = event.currentTarget;\n          focusState.current.selectionStart = selectionStart;\n          focusState.current.selectionEnd = selectionEnd;\n        })}\n      />\n    );\n  },\n);\nPasswordToggleFieldInput.displayName = PASSWORD_TOGGLE_FIELD_INPUT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldToggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_TOGGLE_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Toggle';\n\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<'button'>;\n\ninterface PasswordToggleFieldToggleProps extends Omit<PrimitiveButtonProps, 'type'> {}\n\nconst PasswordToggleFieldToggle = React.forwardRef<\n  HTMLButtonElement,\n  PasswordToggleFieldToggleProps\n>(\n  (\n    {\n      __scopePasswordToggleField,\n      onClick,\n      onPointerDown,\n      onPointerCancel,\n      onPointerUp,\n      onFocus,\n      children,\n      'aria-label': ariaLabelProp,\n      'aria-controls': ariaControls,\n      'aria-hidden': ariaHidden,\n      tabIndex,\n      ...props\n    }: ScopedProps<PasswordToggleFieldToggleProps>,\n    forwardedRef,\n  ) => {\n    const { setVisible, visible, inputRef, inputId, focusState } = usePasswordToggleFieldContext(\n      PASSWORD_TOGGLE_FIELD_TOGGLE_NAME,\n      __scopePasswordToggleField,\n    );\n    const [internalAriaLabel, setInternalAriaLabel] = React.useState<string | undefined>(undefined);\n    const elementRef = React.useRef<HTMLButtonElement>(null);\n    const ref = useComposedRefs(forwardedRef, elementRef);\n    const isHydrated = useIsHydrated();\n\n    React.useEffect(() => {\n      const element = elementRef.current;\n      if (!element || ariaLabelProp) {\n        setInternalAriaLabel(undefined);\n        return;\n      }\n\n      const DEFAULT_ARIA_LABEL = visible ? 'Hide password' : 'Show password';\n\n      function checkForInnerTextLabel(textContent: string | undefined | null) {\n        const text = textContent ? textContent : undefined;\n        // If the element has inner text, no need to force an aria-label.\n        setInternalAriaLabel(text ? undefined : DEFAULT_ARIA_LABEL);\n      }\n\n      checkForInnerTextLabel(element.textContent);\n\n      const observer = new MutationObserver((entries) => {\n        let textContent: string | undefined;\n        for (const entry of entries) {\n          if (entry.type === 'characterData') {\n            if (element.textContent) {\n              textContent = element.textContent;\n            }\n          }\n        }\n        checkForInnerTextLabel(textContent);\n      });\n      observer.observe(element, { characterData: true, subtree: true });\n      return () => {\n        observer.disconnect();\n      };\n    }, [visible, ariaLabelProp]);\n\n    const ariaLabel = ariaLabelProp || internalAriaLabel;\n\n    // Before hydration the button will not work, but we want to render it\n    // regardless to prevent potential layout shift. Hide it from assistive tech\n    // by default. Post-hydration it will be visible, focusable and associated\n    // with the input via aria-controls.\n    if (!isHydrated) {\n      ariaHidden ??= true;\n      tabIndex ??= -1;\n    } else {\n      ariaControls ??= inputId;\n    }\n\n    React.useEffect(() => {\n      let cleanup = () => {};\n      const ownerWindow = elementRef.current?.ownerDocument?.defaultView || window;\n      const reset = () => (focusState.current.clickTriggered = false);\n      const handlePointerUp = () => (cleanup = requestIdleCallback(ownerWindow, reset));\n      ownerWindow.addEventListener('pointerup', handlePointerUp);\n      return () => {\n        cleanup();\n        ownerWindow.removeEventListener('pointerup', handlePointerUp);\n      };\n    }, [focusState]);\n\n    return (\n      <Primitive.button\n        aria-controls={ariaControls}\n        aria-hidden={ariaHidden}\n        aria-label={ariaLabel}\n        ref={ref}\n        id={inputId}\n        {...props}\n        onPointerDown={composeEventHandlers(onPointerDown, () => {\n          focusState.current.clickTriggered = true;\n        })}\n        onPointerCancel={(event) => {\n          // do not use `composeEventHandlers` here because we always want to\n          // reset the ref on cancellation, regardless of whether the user has\n          // called preventDefault on the event\n          onPointerCancel?.(event);\n          focusState.current = INITIAL_FOCUS_STATE;\n        }}\n        // do not use `composeEventHandlers` here because we always want to\n        // reset the ref after click, regardless of whether the user has\n        // called preventDefault on the event\n        onClick={(event) => {\n          onClick?.(event);\n          if (event.defaultPrevented) {\n            focusState.current = INITIAL_FOCUS_STATE;\n            return;\n          }\n\n          flushSync(() => {\n            setVisible((s) => !s);\n          });\n          if (focusState.current.clickTriggered) {\n            const input = inputRef.current;\n            if (input) {\n              const { selectionStart, selectionEnd } = focusState.current;\n              input.focus();\n              if (selectionStart !== null || selectionEnd !== null) {\n                // wait a tick so that focus has settled, then restore select position\n                requestAnimationFrame(() => {\n                  // make sure the input still has focus (developer may have\n                  // programatically moved focus elsewhere)\n                  if (input.ownerDocument.activeElement === input) {\n                    input.selectionStart = selectionStart;\n                    input.selectionEnd = selectionEnd;\n                  }\n                });\n              }\n            }\n          }\n          focusState.current = INITIAL_FOCUS_STATE;\n        }}\n        onPointerUp={(event) => {\n          onPointerUp?.(event);\n          // if click handler hasn't been called at this point, it may have been\n          // intercepted, in which case we still want to reset our internal\n          // state\n          setTimeout(() => {\n            focusState.current = INITIAL_FOCUS_STATE;\n          }, 50);\n        }}\n        type=\"button\"\n      >\n        {children}\n      </Primitive.button>\n    );\n  },\n);\nPasswordToggleFieldToggle.displayName = PASSWORD_TOGGLE_FIELD_TOGGLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldSlot\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_SLOT_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Slot';\n\ninterface PasswordToggleFieldSlotDeclarativeProps {\n  visible: React.ReactNode;\n  hidden: React.ReactNode;\n}\n\ninterface PasswordToggleFieldSlotRenderProps {\n  render: (args: { visible: boolean }) => React.ReactElement;\n}\n\ntype PasswordToggleFieldSlotProps =\n  | PasswordToggleFieldSlotDeclarativeProps\n  | PasswordToggleFieldSlotRenderProps;\n\nconst PasswordToggleFieldSlot: React.FC<PasswordToggleFieldSlotProps> = ({\n  __scopePasswordToggleField,\n  ...props\n}: ScopedProps<PasswordToggleFieldSlotProps>) => {\n  const { visible } = usePasswordToggleFieldContext(\n    PASSWORD_TOGGLE_FIELD_SLOT_NAME,\n    __scopePasswordToggleField,\n  );\n\n  return 'render' in props\n    ? //\n      props.render({ visible })\n    : visible\n      ? props.visible\n      : props.hidden;\n};\nPasswordToggleFieldSlot.displayName = PASSWORD_TOGGLE_FIELD_SLOT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PasswordToggleFieldIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst PASSWORD_TOGGLE_FIELD_ICON_NAME = PASSWORD_TOGGLE_FIELD_NAME + 'Icon';\n\ntype PrimitiveSvgProps = React.ComponentPropsWithoutRef<'svg'>;\n\ninterface PasswordToggleFieldIconProps extends Omit<PrimitiveSvgProps, 'children'> {\n  visible: React.ReactElement;\n  hidden: React.ReactElement;\n}\n\nconst PasswordToggleFieldIcon = React.forwardRef<SVGSVGElement, PasswordToggleFieldIconProps>(\n  (\n    {\n      __scopePasswordToggleField,\n      // @ts-expect-error\n      children,\n      ...props\n    }: ScopedProps<PasswordToggleFieldIconProps>,\n    forwardedRef,\n  ) => {\n    const { visible } = usePasswordToggleFieldContext(\n      PASSWORD_TOGGLE_FIELD_ICON_NAME,\n      __scopePasswordToggleField,\n    );\n    const { visible: visibleIcon, hidden: hiddenIcon, ...domProps } = props;\n    return (\n      <Primitive.svg {...domProps} ref={forwardedRef} aria-hidden asChild>\n        {visible ? visibleIcon : hiddenIcon}\n      </Primitive.svg>\n    );\n  },\n);\nPasswordToggleFieldIcon.displayName = PASSWORD_TOGGLE_FIELD_ICON_NAME;\n\nexport {\n  PasswordToggleField,\n  PasswordToggleFieldInput,\n  PasswordToggleFieldToggle,\n  PasswordToggleFieldSlot,\n  PasswordToggleFieldIcon,\n  //\n  PasswordToggleField as Root,\n  PasswordToggleFieldInput as Input,\n  PasswordToggleFieldToggle as Toggle,\n  PasswordToggleFieldSlot as Slot,\n  PasswordToggleFieldIcon as Icon,\n};\nexport type {\n  PasswordToggleFieldProps,\n  PasswordToggleFieldInputProps,\n  PasswordToggleFieldToggleProps,\n  PasswordToggleFieldIconProps,\n  PasswordToggleFieldSlotProps,\n};\n\nfunction requestIdleCallback(\n  window: Window,\n  callback: IdleRequestCallback,\n  options?: IdleRequestOptions,\n): () => void {\n  if ((window as any).requestIdleCallback) {\n    const id = window.requestIdleCallback(callback, options);\n    return () => {\n      window.cancelIdleCallback(id);\n    };\n  }\n  const start = Date.now();\n  const id = window.setTimeout(() => {\n    const timeRemaining = () => Math.max(0, 50 - (Date.now() - start));\n    callback({ didTimeout: false, timeRemaining });\n  }, 1);\n  return () => {\n    window.clearTimeout(id);\n  };\n}\n"
  },
  {
    "path": "packages/react/password-toggle-field/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/popover/CHANGELOG.md",
    "content": "# @radix-ui/react-popover\n\n## 1.1.15\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/react-slot@1.2.4`, `@radix-ui/react-popper@1.2.8`, `@radix-ui/react-focus-guards@1.1.3`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-dismissable-layer@1.1.11`, `@radix-ui/react-focus-scope@1.1.8`, `@radix-ui/react-portal@1.1.10`\n\n## 1.1.14\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-focus-scope@1.1.7`, `@radix-ui/react-popper@1.2.7`, `@radix-ui/react-portal@1.1.9`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.13\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-dismissable-layer@1.1.9`, `@radix-ui/react-focus-scope@1.1.6`, `@radix-ui/react-popper@1.2.6`, `@radix-ui/react-portal@1.1.8`\n\n## 1.1.12\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-dismissable-layer@1.1.8`, `@radix-ui/react-focus-scope@1.1.5`, `@radix-ui/react-popper@1.2.5`, `@radix-ui/react-portal@1.1.7`\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.1.8\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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-focus-scope@1.1.4`, `@radix-ui/react-popper@1.2.4`, `@radix-ui/react-portal@1.1.6`\n"
  },
  {
    "path": "packages/react/popover/README.md",
    "content": "# `react-popover`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/popover).\n"
  },
  {
    "path": "packages/react/popover/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/popover/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-popover\",\n  \"version\": \"1.1.15\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-focus-guards\": \"workspace:*\",\n    \"@radix-ui/react-focus-scope\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-popper\": \"workspace:*\",\n    \"@radix-ui/react-portal\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-slot\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"aria-hidden\": \"^1.2.4\",\n    \"react-remove-scroll\": \"^2.6.3\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/popover/src/index.ts",
    "content": "'use client';\nexport {\n  createPopoverScope,\n  //\n  Popover,\n  PopoverAnchor,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverContent,\n  PopoverClose,\n  PopoverArrow,\n  //\n  Root,\n  Anchor,\n  Trigger,\n  Portal,\n  Content,\n  Close,\n  Arrow,\n} from './popover';\nexport type {\n  PopoverProps,\n  PopoverAnchorProps,\n  PopoverTriggerProps,\n  PopoverPortalProps,\n  PopoverContentProps,\n  PopoverCloseProps,\n  PopoverArrowProps,\n} from './popover';\n"
  },
  {
    "path": "packages/react/popover/src/popover.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { useId } from '@radix-ui/react-id';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createSlot } from '@radix-ui/react-slot';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { hideOthers } from 'aria-hidden';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPOVER_NAME = 'Popover';\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope };\nconst [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [\n  createPopperScope,\n]);\nconst usePopperScope = createPopperScope();\n\ntype PopoverContextValue = {\n  triggerRef: React.RefObject<HTMLButtonElement | null>;\n  contentId: string;\n  open: boolean;\n  onOpenChange(open: boolean): void;\n  onOpenToggle(): void;\n  hasCustomAnchor: boolean;\n  onCustomAnchorAdd(): void;\n  onCustomAnchorRemove(): void;\n  modal: boolean;\n};\n\nconst [PopoverProvider, usePopoverContext] =\n  createPopoverContext<PopoverContextValue>(POPOVER_NAME);\n\ninterface PopoverProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  modal?: boolean;\n}\n\nconst Popover: React.FC<PopoverProps> = (props: ScopedProps<PopoverProps>) => {\n  const {\n    __scopePopover,\n    children,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    modal = false,\n  } = props;\n  const popperScope = usePopperScope(__scopePopover);\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n    caller: POPOVER_NAME,\n  });\n\n  return (\n    <PopperPrimitive.Root {...popperScope}>\n      <PopoverProvider\n        scope={__scopePopover}\n        contentId={useId()}\n        triggerRef={triggerRef}\n        open={open}\n        onOpenChange={setOpen}\n        onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n        hasCustomAnchor={hasCustomAnchor}\n        onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n        onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n        modal={modal}\n      >\n        {children}\n      </PopoverProvider>\n    </PopperPrimitive.Root>\n  );\n};\n\nPopover.displayName = POPOVER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor';\n\ntype PopoverAnchorElement = React.ComponentRef<typeof PopperPrimitive.Anchor>;\ntype PopperAnchorProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;\ninterface PopoverAnchorProps extends PopperAnchorProps {}\n\nconst PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n  (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n    const { __scopePopover, ...anchorProps } = props;\n    const context = usePopoverContext(ANCHOR_NAME, __scopePopover);\n    const popperScope = usePopperScope(__scopePopover);\n    const { onCustomAnchorAdd, onCustomAnchorRemove } = context;\n\n    React.useEffect(() => {\n      onCustomAnchorAdd();\n      return () => onCustomAnchorRemove();\n    }, [onCustomAnchorAdd, onCustomAnchorRemove]);\n\n    return <PopperPrimitive.Anchor {...popperScope} {...anchorProps} ref={forwardedRef} />;\n  },\n);\n\nPopoverAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger';\n\ntype PopoverTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface PopoverTriggerProps extends PrimitiveButtonProps {}\n\nconst PopoverTrigger = React.forwardRef<PopoverTriggerElement, PopoverTriggerProps>(\n  (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n    const { __scopePopover, ...triggerProps } = props;\n    const context = usePopoverContext(TRIGGER_NAME, __scopePopover);\n    const popperScope = usePopperScope(__scopePopover);\n    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n\n    const trigger = (\n      <Primitive.button\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={context.open}\n        aria-controls={context.contentId}\n        data-state={getState(context.open)}\n        {...triggerProps}\n        ref={composedTriggerRef}\n        onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n      />\n    );\n\n    return context.hasCustomAnchor ? (\n      trigger\n    ) : (\n      <PopperPrimitive.Anchor asChild {...popperScope}>\n        {trigger}\n      </PopperPrimitive.Anchor>\n    );\n  },\n);\n\nPopoverTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'PopoverPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createPopoverContext<PortalContextValue>(PORTAL_NAME, {\n  forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface PopoverPortalProps {\n  children?: React.ReactNode;\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: PortalProps['container'];\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst PopoverPortal: React.FC<PopoverPortalProps> = (props: ScopedProps<PopoverPortalProps>) => {\n  const { __scopePopover, forceMount, children, container } = props;\n  const context = usePopoverContext(PORTAL_NAME, __scopePopover);\n  return (\n    <PortalProvider scope={__scopePopover} forceMount={forceMount}>\n      <Presence present={forceMount || context.open}>\n        <PortalPrimitive asChild container={container}>\n          {children}\n        </PortalPrimitive>\n      </Presence>\n    </PortalProvider>\n  );\n};\n\nPopoverPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent';\n\ninterface PopoverContentProps extends PopoverContentTypeProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentProps>(\n  (props: ScopedProps<PopoverContentProps>, forwardedRef) => {\n    const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);\n    const { forceMount = portalContext.forceMount, ...contentProps } = props;\n    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);\n    return (\n      <Presence present={forceMount || context.open}>\n        {context.modal ? (\n          <PopoverContentModal {...contentProps} ref={forwardedRef} />\n        ) : (\n          <PopoverContentNonModal {...contentProps} ref={forwardedRef} />\n        )}\n      </Presence>\n    );\n  },\n);\n\nPopoverContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Slot = createSlot('PopoverContent.RemoveScroll');\n\ntype PopoverContentTypeElement = PopoverContentImplElement;\ninterface PopoverContentTypeProps\n  extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}\n\nconst PopoverContentModal = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n  (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);\n    const contentRef = React.useRef<HTMLDivElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n    const isRightClickOutsideRef = React.useRef(false);\n\n    // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n    React.useEffect(() => {\n      const content = contentRef.current;\n      if (content) return hideOthers(content);\n    }, []);\n\n    return (\n      <RemoveScroll as={Slot} allowPinchZoom>\n        <PopoverContentImpl\n          {...props}\n          ref={composedRefs}\n          // we make sure we're not trapping once it's been closed\n          // (closed !== unmounted when animating out)\n          trapFocus={context.open}\n          disableOutsidePointerEvents\n          onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n            event.preventDefault();\n            if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();\n          })}\n          onPointerDownOutside={composeEventHandlers(\n            props.onPointerDownOutside,\n            (event) => {\n              const originalEvent = event.detail.originalEvent;\n              const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n              const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n\n              isRightClickOutsideRef.current = isRightClick;\n            },\n            { checkForDefaultPrevented: false },\n          )}\n          // When focus is trapped, a `focusout` event may still happen.\n          // We make sure we don't trigger our `onDismiss` in such case.\n          onFocusOutside={composeEventHandlers(\n            props.onFocusOutside,\n            (event) => event.preventDefault(),\n            { checkForDefaultPrevented: false },\n          )}\n        />\n      </RemoveScroll>\n    );\n  },\n);\n\nconst PopoverContentNonModal = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n  (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);\n    const hasInteractedOutsideRef = React.useRef(false);\n    const hasPointerDownOutsideRef = React.useRef(false);\n\n    return (\n      <PopoverContentImpl\n        {...props}\n        ref={forwardedRef}\n        trapFocus={false}\n        disableOutsidePointerEvents={false}\n        onCloseAutoFocus={(event) => {\n          props.onCloseAutoFocus?.(event);\n\n          if (!event.defaultPrevented) {\n            if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();\n            // Always prevent auto focus because we either focus manually or want user agent focus\n            event.preventDefault();\n          }\n\n          hasInteractedOutsideRef.current = false;\n          hasPointerDownOutsideRef.current = false;\n        }}\n        onInteractOutside={(event) => {\n          props.onInteractOutside?.(event);\n\n          if (!event.defaultPrevented) {\n            hasInteractedOutsideRef.current = true;\n            if (event.detail.originalEvent.type === 'pointerdown') {\n              hasPointerDownOutsideRef.current = true;\n            }\n          }\n\n          // Prevent dismissing when clicking the trigger.\n          // As the trigger is already setup to close, without doing so would\n          // cause it to close and immediately open.\n          const target = event.target as HTMLElement;\n          const targetIsTrigger = context.triggerRef.current?.contains(target);\n          if (targetIsTrigger) event.preventDefault();\n\n          // On Safari if the trigger is inside a container with tabIndex={0}, when clicked\n          // we will get the pointer down outside event on the trigger, but then a subsequent\n          // focus outside event on the container, we ignore any focus outside event when we've\n          // already had a pointer down outside event.\n          if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) {\n            event.preventDefault();\n          }\n        }}\n      />\n    );\n  },\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ComponentRef<typeof PopperPrimitive.Content>;\ntype FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;\ntype PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;\ninterface PopoverContentImplProps\n  extends Omit<PopperContentProps, 'onPlaced'>,\n    Omit<DismissableLayerProps, 'onDismiss'> {\n  /**\n   * Whether focus should be trapped within the `Popover`\n   * (default: false)\n   */\n  trapFocus?: FocusScopeProps['trapped'];\n\n  /**\n   * Event handler called when auto-focusing on open.\n   * Can be prevented.\n   */\n  onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];\n\n  /**\n   * Event handler called when auto-focusing on close.\n   * Can be prevented.\n   */\n  onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n}\n\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, PopoverContentImplProps>(\n  (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n    const {\n      __scopePopover,\n      trapFocus,\n      onOpenAutoFocus,\n      onCloseAutoFocus,\n      disableOutsidePointerEvents,\n      onEscapeKeyDown,\n      onPointerDownOutside,\n      onFocusOutside,\n      onInteractOutside,\n      ...contentProps\n    } = props;\n    const context = usePopoverContext(CONTENT_NAME, __scopePopover);\n    const popperScope = usePopperScope(__scopePopover);\n\n    // Make sure the whole tree has focus guards as our `Popover` may be\n    // the last element in the DOM (because of the `Portal`)\n    useFocusGuards();\n\n    return (\n      <FocusScope\n        asChild\n        loop\n        trapped={trapFocus}\n        onMountAutoFocus={onOpenAutoFocus}\n        onUnmountAutoFocus={onCloseAutoFocus}\n      >\n        <DismissableLayer\n          asChild\n          disableOutsidePointerEvents={disableOutsidePointerEvents}\n          onInteractOutside={onInteractOutside}\n          onEscapeKeyDown={onEscapeKeyDown}\n          onPointerDownOutside={onPointerDownOutside}\n          onFocusOutside={onFocusOutside}\n          onDismiss={() => context.onOpenChange(false)}\n        >\n          <PopperPrimitive.Content\n            data-state={getState(context.open)}\n            role=\"dialog\"\n            id={context.contentId}\n            {...popperScope}\n            {...contentProps}\n            ref={forwardedRef}\n            style={{\n              ...contentProps.style,\n              // re-namespace exposed content custom properties\n              ...{\n                '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',\n                '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',\n                '--radix-popover-content-available-height': 'var(--radix-popper-available-height)',\n                '--radix-popover-trigger-width': 'var(--radix-popper-anchor-width)',\n                '--radix-popover-trigger-height': 'var(--radix-popper-anchor-height)',\n              },\n            }}\n          />\n        </DismissableLayer>\n      </FocusScope>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose';\n\ntype PopoverCloseElement = React.ComponentRef<typeof Primitive.button>;\ninterface PopoverCloseProps extends PrimitiveButtonProps {}\n\nconst PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n  (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n    const { __scopePopover, ...closeProps } = props;\n    const context = usePopoverContext(CLOSE_NAME, __scopePopover);\n    return (\n      <Primitive.button\n        type=\"button\"\n        {...closeProps}\n        ref={forwardedRef}\n        onClick={composeEventHandlers(props.onClick, () => context.onOpenChange(false))}\n      />\n    );\n  },\n);\n\nPopoverClose.displayName = CLOSE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow';\n\ntype PopoverArrowElement = React.ComponentRef<typeof PopperPrimitive.Arrow>;\ntype PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;\ninterface PopoverArrowProps extends PopperArrowProps {}\n\nconst PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n  (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n    const { __scopePopover, ...arrowProps } = props;\n    const popperScope = usePopperScope(__scopePopover);\n    return <PopperPrimitive.Arrow {...popperScope} {...arrowProps} ref={forwardedRef} />;\n  },\n);\n\nPopoverArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n  return open ? 'open' : 'closed';\n}\n\nconst Root = Popover;\nconst Anchor = PopoverAnchor;\nconst Trigger = PopoverTrigger;\nconst Portal = PopoverPortal;\nconst Content = PopoverContent;\nconst Close = PopoverClose;\nconst Arrow = PopoverArrow;\n\nexport {\n  createPopoverScope,\n  //\n  Popover,\n  PopoverAnchor,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverContent,\n  PopoverClose,\n  PopoverArrow,\n  //\n  Root,\n  Anchor,\n  Trigger,\n  Portal,\n  Content,\n  Close,\n  Arrow,\n};\nexport type {\n  PopoverProps,\n  PopoverAnchorProps,\n  PopoverTriggerProps,\n  PopoverPortalProps,\n  PopoverContentProps,\n  PopoverCloseProps,\n  PopoverArrowProps,\n};\n"
  },
  {
    "path": "packages/react/popover/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/popper/CHANGELOG.md",
    "content": "# @radix-ui/react-popper\n\n## 1.2.8\n\n- Fixed a bug to prevent infinite render loops\n- Updated dependencies: `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-arrow@1.1.8`\n\n## 1.2.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-arrow@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.2.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-arrow@1.1.6`\n\n## 1.2.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-arrow@1.1.5`\n\n## 1.2.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-arrow@1.1.4`\n"
  },
  {
    "path": "packages/react/popper/README.md",
    "content": "# `react-popper`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/popper/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/popper/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-popper\",\n  \"version\": \"1.2.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@floating-ui/react-dom\": \"^2.0.0\",\n    \"@radix-ui/react-arrow\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\",\n    \"@radix-ui/react-use-rect\": \"workspace:*\",\n    \"@radix-ui/react-use-size\": \"workspace:*\",\n    \"@radix-ui/rect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/popper/src/index.ts",
    "content": "'use client';\nexport {\n  createPopperScope,\n  //\n  Popper,\n  PopperAnchor,\n  PopperContent,\n  PopperArrow,\n  //\n  Root,\n  Anchor,\n  Content,\n  Arrow,\n  //\n  SIDE_OPTIONS,\n  ALIGN_OPTIONS,\n} from './popper';\nexport type {\n  PopperProps,\n  PopperAnchorProps,\n  PopperContentProps,\n  PopperArrowProps,\n} from './popper';\n"
  },
  {
    "path": "packages/react/popper/src/popper.tsx",
    "content": "import * as React from 'react';\nimport {\n  useFloating,\n  autoUpdate,\n  offset,\n  shift,\n  limitShift,\n  hide,\n  arrow as floatingUIarrow,\n  flip,\n  size,\n} from '@floating-ui/react-dom';\nimport * as ArrowPrimitive from '@radix-ui/react-arrow';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useSize } from '@radix-ui/react-use-size';\n\nimport type { Placement, Middleware } from '@floating-ui/react-dom';\nimport type { Scope } from '@radix-ui/react-context';\nimport type { Measurable } from '@radix-ui/rect';\n\nconst SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const;\nconst ALIGN_OPTIONS = ['start', 'center', 'end'] as const;\n\ntype Side = (typeof SIDE_OPTIONS)[number];\ntype Align = (typeof ALIGN_OPTIONS)[number];\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper';\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope };\nconst [createPopperContext, createPopperScope] = createContextScope(POPPER_NAME);\n\ntype PopperContextValue = {\n  anchor: Measurable | null;\n  onAnchorChange(anchor: Measurable | null): void;\n};\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME);\n\ninterface PopperProps {\n  children?: React.ReactNode;\n}\nconst Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n  const { __scopePopper, children } = props;\n  const [anchor, setAnchor] = React.useState<Measurable | null>(null);\n  return (\n    <PopperProvider scope={__scopePopper} anchor={anchor} onAnchorChange={setAnchor}>\n      {children}\n    </PopperProvider>\n  );\n};\n\nPopper.displayName = POPPER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor';\n\ntype PopperAnchorElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PopperAnchorProps extends PrimitiveDivProps {\n  virtualRef?: React.RefObject<Measurable>;\n}\n\nconst PopperAnchor = React.forwardRef<PopperAnchorElement, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n    const { __scopePopper, virtualRef, ...anchorProps } = props;\n    const context = usePopperContext(ANCHOR_NAME, __scopePopper);\n    const ref = React.useRef<PopperAnchorElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref);\n\n    const anchorRef = React.useRef<Measurable | null>(null);\n    React.useEffect(() => {\n      const previousAnchor = anchorRef.current;\n      anchorRef.current = virtualRef?.current || ref.current;\n      if (previousAnchor !== anchorRef.current) {\n        // Consumer can anchor the popper to something that isn't\n        // a DOM node e.g. pointer position, so we override the\n        // `anchorRef` with their virtual ref in this case.\n        context.onAnchorChange(anchorRef.current);\n      }\n    });\n\n    return virtualRef ? null : <Primitive.div {...anchorProps} ref={composedRefs} />;\n  },\n);\n\nPopperAnchor.displayName = ANCHOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent';\n\ntype PopperContentContextValue = {\n  placedSide: Side;\n  onArrowChange(arrow: HTMLSpanElement | null): void;\n  arrowX?: number;\n  arrowY?: number;\n  shouldHideArrow: boolean;\n};\n\nconst [PopperContentProvider, useContentContext] =\n  createPopperContext<PopperContentContextValue>(CONTENT_NAME);\n\ntype Boundary = Element | null;\n\ntype PopperContentElement = React.ComponentRef<typeof Primitive.div>;\ninterface PopperContentProps extends PrimitiveDivProps {\n  side?: Side;\n  sideOffset?: number;\n  align?: Align;\n  alignOffset?: number;\n  arrowPadding?: number;\n  avoidCollisions?: boolean;\n  collisionBoundary?: Boundary | Boundary[];\n  collisionPadding?: number | Partial<Record<Side, number>>;\n  sticky?: 'partial' | 'always';\n  hideWhenDetached?: boolean;\n  updatePositionStrategy?: 'optimized' | 'always';\n  onPlaced?: () => void;\n}\n\nconst PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(\n  (props: ScopedProps<PopperContentProps>, forwardedRef) => {\n    const {\n      __scopePopper,\n      side = 'bottom',\n      sideOffset = 0,\n      align = 'center',\n      alignOffset = 0,\n      arrowPadding = 0,\n      avoidCollisions = true,\n      collisionBoundary = [],\n      collisionPadding: collisionPaddingProp = 0,\n      sticky = 'partial',\n      hideWhenDetached = false,\n      updatePositionStrategy = 'optimized',\n      onPlaced,\n      ...contentProps\n    } = props;\n\n    const context = usePopperContext(CONTENT_NAME, __scopePopper);\n\n    const [content, setContent] = React.useState<HTMLDivElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n\n    const [arrow, setArrow] = React.useState<HTMLSpanElement | null>(null);\n    const arrowSize = useSize(arrow);\n    const arrowWidth = arrowSize?.width ?? 0;\n    const arrowHeight = arrowSize?.height ?? 0;\n\n    const desiredPlacement = (side + (align !== 'center' ? '-' + align : '')) as Placement;\n\n    const collisionPadding =\n      typeof collisionPaddingProp === 'number'\n        ? collisionPaddingProp\n        : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };\n\n    const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];\n    const hasExplicitBoundaries = boundary.length > 0;\n\n    const detectOverflowOptions = {\n      padding: collisionPadding,\n      boundary: boundary.filter(isNotNull),\n      // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries\n      altBoundary: hasExplicitBoundaries,\n    };\n\n    const { refs, floatingStyles, placement, isPositioned, middlewareData } = useFloating({\n      // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues\n      strategy: 'fixed',\n      placement: desiredPlacement,\n      whileElementsMounted: (...args) => {\n        const cleanup = autoUpdate(...args, {\n          animationFrame: updatePositionStrategy === 'always',\n        });\n        return cleanup;\n      },\n      elements: {\n        reference: context.anchor,\n      },\n      middleware: [\n        offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),\n        avoidCollisions &&\n          shift({\n            mainAxis: true,\n            crossAxis: false,\n            limiter: sticky === 'partial' ? limitShift() : undefined,\n            ...detectOverflowOptions,\n          }),\n        avoidCollisions && flip({ ...detectOverflowOptions }),\n        size({\n          ...detectOverflowOptions,\n          apply: ({ elements, rects, availableWidth, availableHeight }) => {\n            const { width: anchorWidth, height: anchorHeight } = rects.reference;\n            const contentStyle = elements.floating.style;\n            contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);\n            contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);\n            contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);\n            contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);\n          },\n        }),\n        arrow && floatingUIarrow({ element: arrow, padding: arrowPadding }),\n        transformOrigin({ arrowWidth, arrowHeight }),\n        hideWhenDetached && hide({ strategy: 'referenceHidden', ...detectOverflowOptions }),\n      ],\n    });\n\n    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);\n\n    const handlePlaced = useCallbackRef(onPlaced);\n    useLayoutEffect(() => {\n      if (isPositioned) {\n        handlePlaced?.();\n      }\n    }, [isPositioned, handlePlaced]);\n\n    const arrowX = middlewareData.arrow?.x;\n    const arrowY = middlewareData.arrow?.y;\n    const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;\n\n    const [contentZIndex, setContentZIndex] = React.useState<string>();\n    useLayoutEffect(() => {\n      if (content) setContentZIndex(window.getComputedStyle(content).zIndex);\n    }, [content]);\n\n    return (\n      <div\n        ref={refs.setFloating}\n        data-radix-popper-content-wrapper=\"\"\n        style={{\n          ...floatingStyles,\n          transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', // keep off the page when measuring\n          minWidth: 'max-content',\n          zIndex: contentZIndex,\n          ['--radix-popper-transform-origin' as any]: [\n            middlewareData.transformOrigin?.x,\n            middlewareData.transformOrigin?.y,\n          ].join(' '),\n\n          // hide the content if using the hide middleware and should be hidden\n          // set visibility to hidden and disable pointer events so the UI behaves\n          // as if the PopperContent isn't there at all\n          ...(middlewareData.hide?.referenceHidden && {\n            visibility: 'hidden',\n            pointerEvents: 'none',\n          }),\n        }}\n        // Floating UI interally calculates logical alignment based the `dir` attribute on\n        // the reference/floating node, we must add this attribute here to ensure\n        // this is calculated when portalled as well as inline.\n        dir={props.dir}\n      >\n        <PopperContentProvider\n          scope={__scopePopper}\n          placedSide={placedSide}\n          onArrowChange={setArrow}\n          arrowX={arrowX}\n          arrowY={arrowY}\n          shouldHideArrow={cannotCenterArrow}\n        >\n          <Primitive.div\n            data-side={placedSide}\n            data-align={placedAlign}\n            {...contentProps}\n            ref={composedRefs}\n            style={{\n              ...contentProps.style,\n              // if the PopperContent hasn't been placed yet (not all measurements done)\n              // we prevent animations so that users's animation don't kick in too early referring wrong sides\n              animation: !isPositioned ? 'none' : undefined,\n            }}\n          />\n        </PopperContentProvider>\n      </div>\n    );\n  },\n);\n\nPopperContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow';\n\nconst OPPOSITE_SIDE: Record<Side, Side> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\ntype PopperArrowElement = React.ComponentRef<typeof ArrowPrimitive.Root>;\ntype ArrowProps = React.ComponentPropsWithoutRef<typeof ArrowPrimitive.Root>;\ninterface PopperArrowProps extends ArrowProps {}\n\nconst PopperArrow = React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n  props: ScopedProps<PopperArrowProps>,\n  forwardedRef,\n) {\n  const { __scopePopper, ...arrowProps } = props;\n  const contentContext = useContentContext(ARROW_NAME, __scopePopper);\n  const baseSide = OPPOSITE_SIDE[contentContext.placedSide];\n\n  return (\n    // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)\n    // doesn't report size as we'd expect on SVG elements.\n    // it reports their bounding box which is effectively the largest path inside the SVG.\n    <span\n      ref={contentContext.onArrowChange}\n      style={{\n        position: 'absolute',\n        left: contentContext.arrowX,\n        top: contentContext.arrowY,\n        [baseSide]: 0,\n        transformOrigin: {\n          top: '',\n          right: '0 0',\n          bottom: 'center 0',\n          left: '100% 0',\n        }[contentContext.placedSide],\n        transform: {\n          top: 'translateY(100%)',\n          right: 'translateY(50%) rotate(90deg) translateX(-50%)',\n          bottom: `rotate(180deg)`,\n          left: 'translateY(50%) rotate(-90deg) translateX(50%)',\n        }[contentContext.placedSide],\n        visibility: contentContext.shouldHideArrow ? 'hidden' : undefined,\n      }}\n    >\n      <ArrowPrimitive.Root\n        {...arrowProps}\n        ref={forwardedRef}\n        style={{\n          ...arrowProps.style,\n          // ensures the element can be measured correctly (mostly for if SVG)\n          display: 'block',\n        }}\n      />\n    </span>\n  );\n});\n\nPopperArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isNotNull<T>(value: T | null): value is T {\n  return value !== null;\n}\n\nconst transformOrigin = (options: { arrowWidth: number; arrowHeight: number }): Middleware => ({\n  name: 'transformOrigin',\n  options,\n  fn(data) {\n    const { placement, rects, middlewareData } = data;\n\n    const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;\n    const isArrowHidden = cannotCenterArrow;\n    const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;\n    const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;\n\n    const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);\n    const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign];\n\n    const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;\n    const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;\n\n    let x = '';\n    let y = '';\n\n    if (placedSide === 'bottom') {\n      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;\n      y = `${-arrowHeight}px`;\n    } else if (placedSide === 'top') {\n      x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;\n      y = `${rects.floating.height + arrowHeight}px`;\n    } else if (placedSide === 'right') {\n      x = `${-arrowHeight}px`;\n      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;\n    } else if (placedSide === 'left') {\n      x = `${rects.floating.width + arrowHeight}px`;\n      y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;\n    }\n    return { data: { x, y } };\n  },\n});\n\nfunction getSideAndAlignFromPlacement(placement: Placement) {\n  const [side, align = 'center'] = placement.split('-');\n  return [side as Side, align as Align] as const;\n}\n\nconst Root = Popper;\nconst Anchor = PopperAnchor;\nconst Content = PopperContent;\nconst Arrow = PopperArrow;\n\nexport {\n  createPopperScope,\n  //\n  Popper,\n  PopperAnchor,\n  PopperContent,\n  PopperArrow,\n  //\n  Root,\n  Anchor,\n  Content,\n  Arrow,\n  //\n  SIDE_OPTIONS,\n  ALIGN_OPTIONS,\n};\nexport type { PopperProps, PopperAnchorProps, PopperContentProps, PopperArrowProps };\n"
  },
  {
    "path": "packages/react/popper/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/portal/CHANGELOG.md",
    "content": "# @radix-ui/react-portal\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.9\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/portal/README.md",
    "content": "# `react-portal`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/portal).\n"
  },
  {
    "path": "packages/react/portal/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/portal/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-portal\",\n  \"version\": \"1.1.10\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/portal/src/index.ts",
    "content": "'use client';\nexport {\n  Portal,\n  //\n  Root,\n} from './portal';\nexport type { PortalProps } from './portal';\n"
  },
  {
    "path": "packages/react/portal/src/portal.tsx",
    "content": "import * as React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\n/* -------------------------------------------------------------------------------------------------\n * Portal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'Portal';\n\ntype PortalElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface PortalProps extends PrimitiveDivProps {\n  /**\n   * An optional container where the portaled content should be appended.\n   */\n  container?: Element | DocumentFragment | null;\n}\n\nconst Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {\n  const { container: containerProp, ...portalProps } = props;\n  const [mounted, setMounted] = React.useState(false);\n  useLayoutEffect(() => setMounted(true), []);\n  const container = containerProp || (mounted && globalThis?.document?.body);\n  return container\n    ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)\n    : null;\n});\n\nPortal.displayName = PORTAL_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Portal;\n\nexport {\n  Portal,\n  //\n  Root,\n};\nexport type { PortalProps };\n"
  },
  {
    "path": "packages/react/portal/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/presence/CHANGELOG.md",
    "content": "# @radix-ui/react-presence\n\n## 1.1.5\n\n- Ensured that the `animationend` event is handled correctly when the keyframe has escapable characters (#2763)\n\n## 1.1.4\n\n- Fix memory leak in Presence\n"
  },
  {
    "path": "packages/react/presence/README.md",
    "content": "# `react-presence`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/presence/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/presence/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-presence\",\n  \"version\": \"1.1.5\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/presence/src/index.ts",
    "content": "'use client';\nexport { Presence, Root } from './presence';\nexport type { PresenceProps } from './presence';\n"
  },
  {
    "path": "packages/react/presence/src/presence.tsx",
    "content": "import * as React from 'react';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { useStateMachine } from './use-state-machine';\n\ninterface PresenceProps {\n  children: React.ReactElement | ((props: { present: boolean }) => React.ReactElement);\n  present: boolean;\n}\n\nconst Presence: React.FC<PresenceProps> = (props) => {\n  const { present, children } = props;\n  const presence = usePresence(present);\n\n  const child = (\n    typeof children === 'function'\n      ? children({ present: presence.isPresent })\n      : React.Children.only(children)\n  ) as React.ReactElement<{ ref?: React.Ref<HTMLElement> }>;\n\n  const ref = useComposedRefs(presence.ref, getElementRef(child));\n  const forceMount = typeof children === 'function';\n  return forceMount || presence.isPresent ? React.cloneElement(child, { ref }) : null;\n};\n\nPresence.displayName = 'Presence';\n\n/* -------------------------------------------------------------------------------------------------\n * usePresence\n * -----------------------------------------------------------------------------------------------*/\n\nfunction usePresence(present: boolean) {\n  const [node, setNode] = React.useState<HTMLElement>();\n  const stylesRef = React.useRef<CSSStyleDeclaration | null>(null);\n  const prevPresentRef = React.useRef(present);\n  const prevAnimationNameRef = React.useRef<string>('none');\n  const initialState = present ? 'mounted' : 'unmounted';\n  const [state, send] = useStateMachine(initialState, {\n    mounted: {\n      UNMOUNT: 'unmounted',\n      ANIMATION_OUT: 'unmountSuspended',\n    },\n    unmountSuspended: {\n      MOUNT: 'mounted',\n      ANIMATION_END: 'unmounted',\n    },\n    unmounted: {\n      MOUNT: 'mounted',\n    },\n  });\n\n  React.useEffect(() => {\n    const currentAnimationName = getAnimationName(stylesRef.current);\n    prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none';\n  }, [state]);\n\n  useLayoutEffect(() => {\n    const styles = stylesRef.current;\n    const wasPresent = prevPresentRef.current;\n    const hasPresentChanged = wasPresent !== present;\n\n    if (hasPresentChanged) {\n      const prevAnimationName = prevAnimationNameRef.current;\n      const currentAnimationName = getAnimationName(styles);\n\n      if (present) {\n        send('MOUNT');\n      } else if (currentAnimationName === 'none' || styles?.display === 'none') {\n        // If there is no exit animation or the element is hidden, animations won't run\n        // so we unmount instantly\n        send('UNMOUNT');\n      } else {\n        /**\n         * When `present` changes to `false`, we check changes to animation-name to\n         * determine whether an animation has started. We chose this approach (reading\n         * computed styles) because there is no `animationrun` event and `animationstart`\n         * fires after `animation-delay` has expired which would be too late.\n         */\n        const isAnimating = prevAnimationName !== currentAnimationName;\n\n        if (wasPresent && isAnimating) {\n          send('ANIMATION_OUT');\n        } else {\n          send('UNMOUNT');\n        }\n      }\n\n      prevPresentRef.current = present;\n    }\n  }, [present, send]);\n\n  useLayoutEffect(() => {\n    if (node) {\n      let timeoutId: number;\n      const ownerWindow = node.ownerDocument.defaultView ?? window;\n      /**\n       * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n       * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n       * make sure we only trigger ANIMATION_END for the currently active animation.\n       */\n      const handleAnimationEnd = (event: AnimationEvent) => {\n        const currentAnimationName = getAnimationName(stylesRef.current);\n        // The event.animationName is unescaped for CSS syntax,\n        // so we need to escape it to compare with the animationName computed from the style.\n        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));\n        if (event.target === node && isCurrentAnimation) {\n          // With React 18 concurrency this update is applied a frame after the\n          // animation ends, creating a flash of visible content. By setting the\n          // animation fill mode to \"forwards\", we force the node to keep the\n          // styles of the last keyframe, removing the flash.\n          //\n          // Previously we flushed the update via ReactDom.flushSync, but with\n          // exit animations this resulted in the node being removed from the\n          // DOM before the synthetic animationEnd event was dispatched, meaning\n          // user-provided event handlers would not be called.\n          // https://github.com/radix-ui/primitives/pull/1849\n          send('ANIMATION_END');\n          if (!prevPresentRef.current) {\n            const currentFillMode = node.style.animationFillMode;\n            node.style.animationFillMode = 'forwards';\n            // Reset the style after the node had time to unmount (for cases\n            // where the component chooses not to unmount). Doing this any\n            // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n            // still causes a flash.\n            timeoutId = ownerWindow.setTimeout(() => {\n              if (node.style.animationFillMode === 'forwards') {\n                node.style.animationFillMode = currentFillMode;\n              }\n            });\n          }\n        }\n      };\n      const handleAnimationStart = (event: AnimationEvent) => {\n        if (event.target === node) {\n          // if animation occurred, store its name as the previous animation.\n          prevAnimationNameRef.current = getAnimationName(stylesRef.current);\n        }\n      };\n      node.addEventListener('animationstart', handleAnimationStart);\n      node.addEventListener('animationcancel', handleAnimationEnd);\n      node.addEventListener('animationend', handleAnimationEnd);\n      return () => {\n        ownerWindow.clearTimeout(timeoutId);\n        node.removeEventListener('animationstart', handleAnimationStart);\n        node.removeEventListener('animationcancel', handleAnimationEnd);\n        node.removeEventListener('animationend', handleAnimationEnd);\n      };\n    } else {\n      // Transition to the unmounted state if the node is removed prematurely.\n      // We avoid doing so during cleanup as the node may change but still exist.\n      send('ANIMATION_END');\n    }\n  }, [node, send]);\n\n  return {\n    isPresent: ['mounted', 'unmountSuspended'].includes(state),\n    ref: React.useCallback((node: HTMLElement) => {\n      stylesRef.current = node ? getComputedStyle(node) : null;\n      setNode(node);\n    }, []),\n  };\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getAnimationName(styles: CSSStyleDeclaration | null) {\n  return styles?.animationName || 'none';\n}\n\n// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`\n// After React 19 accessing `element.ref` does the opposite.\n// https://github.com/facebook/react/pull/28348\n//\n// Access the ref using the method that doesn't yield a warning.\nfunction getElementRef(element: React.ReactElement<{ ref?: React.Ref<unknown> }>) {\n  // React <=18 in DEV\n  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;\n  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n  if (mayWarn) {\n    return (element as any).ref;\n  }\n\n  // React 19 in DEV\n  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;\n  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n  if (mayWarn) {\n    return element.props.ref;\n  }\n\n  // Not DEV\n  return element.props.ref || (element as any).ref;\n}\n\nconst Root = Presence;\n\nexport {\n  Presence,\n  //\n  Root,\n};\nexport type { PresenceProps };\n"
  },
  {
    "path": "packages/react/presence/src/use-state-machine.tsx",
    "content": "import * as React from 'react';\n\ntype Machine<S> = { [k: string]: { [k: string]: S } };\ntype MachineState<T> = keyof T;\ntype MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;\n\n// 🤯 https://fettblog.eu/typescript-union-to-intersection/\ntype UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any\n  ? R\n  : never;\n\nexport function useStateMachine<M>(\n  initialState: MachineState<M>,\n  machine: M & Machine<MachineState<M>>,\n) {\n  return React.useReducer((state: MachineState<M>, event: MachineEvent<M>): MachineState<M> => {\n    const nextState = (machine[state] as any)[event];\n    return nextState ?? state;\n  }, initialState);\n}\n"
  },
  {
    "path": "packages/react/presence/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/primitive/CHANGELOG.md",
    "content": "# @radix-ui/react-primitive\n\n## 2.1.4\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.4`\n\n## 2.1.3\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.3`\n\n## 2.1.2\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`\n\n## 2.1.1\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`\n\n## 2.1.0\n\n- 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.\n"
  },
  {
    "path": "packages/react/primitive/README.md",
    "content": "# `react-primitive`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/primitive/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/primitive/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-primitive\",\n  \"version\": \"2.1.4\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-slot\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/primitive/src/index.ts",
    "content": "export {\n  Primitive,\n  //\n  Root,\n  //\n  dispatchDiscreteCustomEvent,\n} from './primitive';\nexport type { PrimitivePropsWithRef } from './primitive';\n"
  },
  {
    "path": "packages/react/primitive/src/primitive.tsx",
    "content": "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { createSlot } from '@radix-ui/react-slot';\n\nconst NODES = [\n  'a',\n  'button',\n  'div',\n  'form',\n  'h2',\n  'h3',\n  'img',\n  'input',\n  'label',\n  'li',\n  'nav',\n  'ol',\n  'p',\n  'select',\n  'span',\n  'svg',\n  'ul',\n] as const;\n\ntype Primitives = { [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E> };\ntype PrimitivePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {\n  asChild?: boolean;\n};\n\ninterface PrimitiveForwardRefComponent<E extends React.ElementType>\n  extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {}\n\n/* -------------------------------------------------------------------------------------------------\n * Primitive\n * -----------------------------------------------------------------------------------------------*/\n\nconst Primitive = NODES.reduce((primitive, node) => {\n  const Slot = createSlot(`Primitive.${node}`);\n  const Node = React.forwardRef((props: PrimitivePropsWithRef<typeof node>, forwardedRef: any) => {\n    const { asChild, ...primitiveProps } = props;\n    const Comp: any = asChild ? Slot : node;\n\n    if (typeof window !== 'undefined') {\n      (window as any)[Symbol.for('radix-ui')] = true;\n    }\n\n    return <Comp {...primitiveProps} ref={forwardedRef} />;\n  });\n\n  Node.displayName = `Primitive.${node}`;\n\n  return { ...primitive, [node]: Node };\n}, {} as Primitives);\n\n/* -------------------------------------------------------------------------------------------------\n * Utils\n * -----------------------------------------------------------------------------------------------*/\n\n/**\n * Flush custom event dispatch\n * https://github.com/radix-ui/primitives/pull/1378\n *\n * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.\n *\n * Internally, React prioritises events in the following order:\n *  - discrete\n *  - continuous\n *  - default\n *\n * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350\n *\n * `discrete` is an  important distinction as updates within these events are applied immediately.\n * React however, is not able to infer the priority of custom event types due to how they are detected internally.\n * Because of this, it's possible for updates from custom events to be unexpectedly batched when\n * dispatched by another `discrete` event.\n *\n * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.\n * This utility should be used when dispatching a custom event from within another `discrete` event, this utility\n * is not necessary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.\n * For example:\n *\n * dispatching a known click 👎\n * target.dispatchEvent(new Event(‘click’))\n *\n * dispatching a custom type within a non-discrete event 👎\n * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}\n *\n * dispatching a custom type within a `discrete` event 👍\n * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}\n *\n * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use\n * this utility with them. This is because it's possible for those handlers to be called implicitly during render\n * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.\n */\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E) {\n  if (target) ReactDOM.flushSync(() => target.dispatchEvent(event));\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = Primitive;\n\nexport {\n  Primitive,\n  //\n  Root,\n  //\n  dispatchDiscreteCustomEvent,\n};\nexport type { PrimitivePropsWithRef };\n"
  },
  {
    "path": "packages/react/primitive/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/progress/CHANGELOG.md",
    "content": "# @radix-ui/react-progress\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/progress/README.md",
    "content": "# `react-progress`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/progress).\n"
  },
  {
    "path": "packages/react/progress/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/progress/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-progress\",\n  \"version\": \"1.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/progress/src/index.ts",
    "content": "'use client';\nexport {\n  createProgressScope,\n  //\n  Progress,\n  ProgressIndicator,\n  //\n  Root,\n  Indicator,\n} from './progress';\nexport type { ProgressProps, ProgressIndicatorProps } from './progress';\n"
  },
  {
    "path": "packages/react/progress/src/progress.tsx",
    "content": "import * as React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Progress\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROGRESS_NAME = 'Progress';\nconst DEFAULT_MAX = 100;\n\ntype ScopedProps<P> = P & { __scopeProgress?: Scope };\nconst [createProgressContext, createProgressScope] = createContextScope(PROGRESS_NAME);\n\ntype ProgressState = 'indeterminate' | 'complete' | 'loading';\ntype ProgressContextValue = { value: number | null; max: number };\nconst [ProgressProvider, useProgressContext] =\n  createProgressContext<ProgressContextValue>(PROGRESS_NAME);\n\ntype ProgressElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ProgressProps extends PrimitiveDivProps {\n  value?: number | null | undefined;\n  max?: number;\n  getValueLabel?(value: number, max: number): string;\n}\n\nconst Progress = React.forwardRef<ProgressElement, ProgressProps>(\n  (props: ScopedProps<ProgressProps>, forwardedRef) => {\n    const {\n      __scopeProgress,\n      value: valueProp = null,\n      max: maxProp,\n      getValueLabel = defaultGetValueLabel,\n      ...progressProps\n    } = props;\n\n    if ((maxProp || maxProp === 0) && !isValidMaxNumber(maxProp)) {\n      console.error(getInvalidMaxError(`${maxProp}`, 'Progress'));\n    }\n\n    const max = isValidMaxNumber(maxProp) ? maxProp : DEFAULT_MAX;\n\n    if (valueProp !== null && !isValidValueNumber(valueProp, max)) {\n      console.error(getInvalidValueError(`${valueProp}`, 'Progress'));\n    }\n\n    const value = isValidValueNumber(valueProp, max) ? valueProp : null;\n    const valueLabel = isNumber(value) ? getValueLabel(value, max) : undefined;\n\n    return (\n      <ProgressProvider scope={__scopeProgress} value={value} max={max}>\n        <Primitive.div\n          aria-valuemax={max}\n          aria-valuemin={0}\n          aria-valuenow={isNumber(value) ? value : undefined}\n          aria-valuetext={valueLabel}\n          role=\"progressbar\"\n          data-state={getProgressState(value, max)}\n          data-value={value ?? undefined}\n          data-max={max}\n          {...progressProps}\n          ref={forwardedRef}\n        />\n      </ProgressProvider>\n    );\n  },\n);\n\nProgress.displayName = PROGRESS_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ProgressIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'ProgressIndicator';\n\ntype ProgressIndicatorElement = React.ComponentRef<typeof Primitive.div>;\ninterface ProgressIndicatorProps extends PrimitiveDivProps {}\n\nconst ProgressIndicator = React.forwardRef<ProgressIndicatorElement, ProgressIndicatorProps>(\n  (props: ScopedProps<ProgressIndicatorProps>, forwardedRef) => {\n    const { __scopeProgress, ...indicatorProps } = props;\n    const context = useProgressContext(INDICATOR_NAME, __scopeProgress);\n    return (\n      <Primitive.div\n        data-state={getProgressState(context.value, context.max)}\n        data-value={context.value ?? undefined}\n        data-max={context.max}\n        {...indicatorProps}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nProgressIndicator.displayName = INDICATOR_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction defaultGetValueLabel(value: number, max: number) {\n  return `${Math.round((value / max) * 100)}%`;\n}\n\nfunction getProgressState(value: number | undefined | null, maxValue: number): ProgressState {\n  return value == null ? 'indeterminate' : value === maxValue ? 'complete' : 'loading';\n}\n\nfunction isNumber(value: any): value is number {\n  return typeof value === 'number';\n}\n\nfunction isValidMaxNumber(max: any): max is number {\n  // prettier-ignore\n  return (\n    isNumber(max) &&\n    !isNaN(max) &&\n    max > 0\n  );\n}\n\nfunction isValidValueNumber(value: any, max: number): value is number {\n  // prettier-ignore\n  return (\n    isNumber(value) &&\n    !isNaN(value) &&\n    value <= max &&\n    value >= 0\n  );\n}\n\n// Split this out for clearer readability of the error message.\nfunction getInvalidMaxError(propValue: string, componentName: string) {\n  return `Invalid prop \\`max\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. Only numbers greater than 0 are valid max values. Defaulting to \\`${DEFAULT_MAX}\\`.`;\n}\n\nfunction getInvalidValueError(propValue: string, componentName: string) {\n  return `Invalid prop \\`value\\` of value \\`${propValue}\\` supplied to \\`${componentName}\\`. The \\`value\\` prop must be:\n  - a positive number\n  - less than the value passed to \\`max\\` (or ${DEFAULT_MAX} if no \\`max\\` prop is set)\n  - \\`null\\` or \\`undefined\\` if the progress is indeterminate.\n\nDefaulting to \\`null\\`.`;\n}\n\nconst Root = Progress;\nconst Indicator = ProgressIndicator;\n\nexport {\n  createProgressScope,\n  //\n  Progress,\n  ProgressIndicator,\n  //\n  Root,\n  Indicator,\n};\nexport type { ProgressProps, ProgressIndicatorProps };\n"
  },
  {
    "path": "packages/react/progress/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/radio-group/CHANGELOG.md",
    "content": "# @radix-ui/react-radio-group\n\n## 1.3.8\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-roving-focus@1.1.11`\n\n## 1.3.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.3.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9`\n\n## 1.3.5\n\n- Allow passing value of `null` to controlled Radio Group when all items are unchecked\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8`\n\n## 1.3.4\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.3.3\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.7`\n\n## 1.3.2\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-roving-focus@1.1.6`\n\n## 1.3.1\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-roving-focus@1.1.5`\n\n## 1.3.0\n\n- 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.\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`\n"
  },
  {
    "path": "packages/react/radio-group/README.md",
    "content": "# `react-radio-group`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/radio-group).\n"
  },
  {
    "path": "packages/react/radio-group/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/radio-group/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-radio-group\",\n  \"version\": \"1.3.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-roving-focus\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-previous\": \"workspace:*\",\n    \"@radix-ui/react-use-size\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/radio-group/src/index.ts",
    "content": "'use client';\nexport {\n  createRadioGroupScope,\n  //\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupIndicator,\n  //\n  Root,\n  Item,\n  Indicator,\n} from './radio-group';\nexport type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps } from './radio-group';\n"
  },
  {
    "path": "packages/react/radio-group/src/radio-group.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { Radio, RadioIndicator, createRadioScope } from './radio';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n/* -------------------------------------------------------------------------------------------------\n * RadioGroup\n * -----------------------------------------------------------------------------------------------*/\nconst RADIO_GROUP_NAME = 'RadioGroup';\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope };\nconst [createRadioGroupContext, createRadioGroupScope] = createContextScope(RADIO_GROUP_NAME, [\n  createRovingFocusGroupScope,\n  createRadioScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\nconst useRadioScope = createRadioScope();\n\ntype RadioGroupContextValue = {\n  name?: string;\n  required: boolean;\n  disabled: boolean;\n  value: string | null;\n  onValueChange(value: string): void;\n};\n\nconst [RadioGroupProvider, useRadioGroupContext] =\n  createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME);\n\ntype RadioGroupElement = React.ComponentRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface RadioGroupProps extends PrimitiveDivProps {\n  name?: RadioGroupContextValue['name'];\n  required?: React.ComponentPropsWithoutRef<typeof Radio>['required'];\n  disabled?: React.ComponentPropsWithoutRef<typeof Radio>['disabled'];\n  dir?: RovingFocusGroupProps['dir'];\n  orientation?: RovingFocusGroupProps['orientation'];\n  loop?: RovingFocusGroupProps['loop'];\n  defaultValue?: string;\n  value?: string | null;\n  onValueChange?: RadioGroupContextValue['onValueChange'];\n}\n\nconst RadioGroup = React.forwardRef<RadioGroupElement, RadioGroupProps>(\n  (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n    const {\n      __scopeRadioGroup,\n      name,\n      defaultValue,\n      value: valueProp,\n      required = false,\n      disabled = false,\n      orientation,\n      dir,\n      loop = true,\n      onValueChange,\n      ...groupProps\n    } = props;\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);\n    const direction = useDirection(dir);\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      defaultProp: defaultValue ?? null,\n      onChange: onValueChange as (value: string | null) => void,\n      caller: RADIO_GROUP_NAME,\n    });\n\n    return (\n      <RadioGroupProvider\n        scope={__scopeRadioGroup}\n        name={name}\n        required={required}\n        disabled={disabled}\n        value={value}\n        onValueChange={setValue}\n      >\n        <RovingFocusGroup.Root\n          asChild\n          {...rovingFocusGroupScope}\n          orientation={orientation}\n          dir={direction}\n          loop={loop}\n        >\n          <Primitive.div\n            role=\"radiogroup\"\n            aria-required={required}\n            aria-orientation={orientation}\n            data-disabled={disabled ? '' : undefined}\n            dir={direction}\n            {...groupProps}\n            ref={forwardedRef}\n          />\n        </RovingFocusGroup.Root>\n      </RadioGroupProvider>\n    );\n  },\n);\n\nRadioGroup.displayName = RADIO_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * RadioGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'RadioGroupItem';\n\ntype RadioGroupItemElement = React.ComponentRef<typeof Radio>;\ntype RadioProps = React.ComponentPropsWithoutRef<typeof Radio>;\ninterface RadioGroupItemProps extends Omit<RadioProps, 'onCheck' | 'name'> {\n  value: string;\n}\n\nconst RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n  (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n    const { __scopeRadioGroup, disabled, ...itemProps } = props;\n    const context = useRadioGroupContext(ITEM_NAME, __scopeRadioGroup);\n    const isDisabled = context.disabled || disabled;\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);\n    const radioScope = useRadioScope(__scopeRadioGroup);\n    const ref = React.useRef<React.ComponentRef<typeof Radio>>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref);\n    const checked = context.value === itemProps.value;\n    const isArrowKeyPressedRef = React.useRef(false);\n\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (ARROW_KEYS.includes(event.key)) {\n          isArrowKeyPressedRef.current = true;\n        }\n      };\n      const handleKeyUp = () => (isArrowKeyPressedRef.current = false);\n      document.addEventListener('keydown', handleKeyDown);\n      document.addEventListener('keyup', handleKeyUp);\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown);\n        document.removeEventListener('keyup', handleKeyUp);\n      };\n    }, []);\n\n    return (\n      <RovingFocusGroup.Item\n        asChild\n        {...rovingFocusGroupScope}\n        focusable={!isDisabled}\n        active={checked}\n      >\n        <Radio\n          disabled={isDisabled}\n          required={context.required}\n          checked={checked}\n          {...radioScope}\n          {...itemProps}\n          name={context.name}\n          ref={composedRefs}\n          onCheck={() => context.onValueChange(itemProps.value)}\n          onKeyDown={composeEventHandlers((event) => {\n            // According to WAI ARIA, radio groups don't activate items on enter keypress\n            if (event.key === 'Enter') event.preventDefault();\n          })}\n          onFocus={composeEventHandlers(itemProps.onFocus, () => {\n            /**\n             * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n             * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n             * of updating `context.value`) so that the radio change event fires.\n             */\n            if (isArrowKeyPressedRef.current) ref.current?.click();\n          })}\n        />\n      </RovingFocusGroup.Item>\n    );\n  },\n);\n\nRadioGroupItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * RadioGroupIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'RadioGroupIndicator';\n\ntype RadioGroupIndicatorElement = React.ComponentRef<typeof RadioIndicator>;\ntype RadioIndicatorProps = React.ComponentPropsWithoutRef<typeof RadioIndicator>;\ninterface RadioGroupIndicatorProps extends RadioIndicatorProps {}\n\nconst RadioGroupIndicator = React.forwardRef<RadioGroupIndicatorElement, RadioGroupIndicatorProps>(\n  (props: ScopedProps<RadioGroupIndicatorProps>, forwardedRef) => {\n    const { __scopeRadioGroup, ...indicatorProps } = props;\n    const radioScope = useRadioScope(__scopeRadioGroup);\n    return <RadioIndicator {...radioScope} {...indicatorProps} ref={forwardedRef} />;\n  },\n);\n\nRadioGroupIndicator.displayName = INDICATOR_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = RadioGroup;\nconst Item = RadioGroupItem;\nconst Indicator = RadioGroupIndicator;\n\nexport {\n  createRadioGroupScope,\n  //\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupIndicator,\n  //\n  Root,\n  Item,\n  Indicator,\n};\nexport type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps };\n"
  },
  {
    "path": "packages/react/radio-group/src/radio.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Radio\n * -----------------------------------------------------------------------------------------------*/\n\nconst RADIO_NAME = 'Radio';\n\ntype ScopedProps<P> = P & { __scopeRadio?: Scope };\nconst [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);\n\ntype RadioContextValue = { checked: boolean; disabled?: boolean };\nconst [RadioProvider, useRadioContext] = createRadioContext<RadioContextValue>(RADIO_NAME);\n\ntype RadioElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface RadioProps extends PrimitiveButtonProps {\n  checked?: boolean;\n  required?: boolean;\n  onCheck?(): void;\n}\n\nconst Radio = React.forwardRef<RadioElement, RadioProps>(\n  (props: ScopedProps<RadioProps>, forwardedRef) => {\n    const {\n      __scopeRadio,\n      name,\n      checked = false,\n      required,\n      disabled,\n      value = 'on',\n      onCheck,\n      form,\n      ...radioProps\n    } = props;\n    const [button, setButton] = React.useState<HTMLButtonElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));\n    const hasConsumerStoppedPropagationRef = React.useRef(false);\n    // We set this to true by default so that events bubble to forms without JS (SSR)\n    const isFormControl = button ? form || !!button.closest('form') : true;\n\n    return (\n      <RadioProvider scope={__scopeRadio} checked={checked} disabled={disabled}>\n        <Primitive.button\n          type=\"button\"\n          role=\"radio\"\n          aria-checked={checked}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          disabled={disabled}\n          value={value}\n          {...radioProps}\n          ref={composedRefs}\n          onClick={composeEventHandlers(props.onClick, (event) => {\n            // radios cannot be unchecked so we only communicate a checked state\n            if (!checked) onCheck?.();\n            if (isFormControl) {\n              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n              // if radio is in a form, stop propagation from the button so that we only propagate\n              // one click event (from the input). We propagate changes from an input so that native\n              // form validation works and form events reflect radio updates.\n              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n            }\n          })}\n        />\n        {isFormControl && (\n          <RadioBubbleInput\n            control={button}\n            bubbles={!hasConsumerStoppedPropagationRef.current}\n            name={name}\n            value={value}\n            checked={checked}\n            required={required}\n            disabled={disabled}\n            form={form}\n            // We transform because the input is absolutely positioned but we have\n            // rendered it **after** the button. This pulls it back to sit on top\n            // of the button.\n            style={{ transform: 'translateX(-100%)' }}\n          />\n        )}\n      </RadioProvider>\n    );\n  },\n);\n\nRadio.displayName = RADIO_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * RadioIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'RadioIndicator';\n\ntype RadioIndicatorElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\nexport interface RadioIndicatorProps extends PrimitiveSpanProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst RadioIndicator = React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n  (props: ScopedProps<RadioIndicatorProps>, forwardedRef) => {\n    const { __scopeRadio, forceMount, ...indicatorProps } = props;\n    const context = useRadioContext(INDICATOR_NAME, __scopeRadio);\n    return (\n      <Presence present={forceMount || context.checked}>\n        <Primitive.span\n          data-state={getState(context.checked)}\n          data-disabled={context.disabled ? '' : undefined}\n          {...indicatorProps}\n          ref={forwardedRef}\n        />\n      </Presence>\n    );\n  },\n);\n\nRadioIndicator.displayName = INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * RadioBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'RadioBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface RadioBubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean;\n  control: HTMLElement | null;\n  bubbles: boolean;\n}\n\nconst RadioBubbleInput = React.forwardRef<HTMLInputElement, RadioBubbleInputProps>(\n  (\n    {\n      __scopeRadio,\n      control,\n      checked,\n      bubbles = true,\n      ...props\n    }: ScopedProps<RadioBubbleInputProps>,\n    forwardedRef,\n  ) => {\n    const ref = React.useRef<HTMLInputElement>(null);\n    const composedRefs = useComposedRefs(ref, forwardedRef);\n    const prevChecked = usePrevious(checked);\n    const controlSize = useSize(control);\n\n    // Bubble checked change to parents (e.g form change event)\n    React.useEffect(() => {\n      const input = ref.current;\n      if (!input) return;\n\n      const inputProto = window.HTMLInputElement.prototype;\n      const descriptor = Object.getOwnPropertyDescriptor(\n        inputProto,\n        'checked',\n      ) as PropertyDescriptor;\n      const setChecked = descriptor.set;\n      if (prevChecked !== checked && setChecked) {\n        const event = new Event('click', { bubbles });\n        setChecked.call(input, checked);\n        input.dispatchEvent(event);\n      }\n    }, [prevChecked, checked, bubbles]);\n\n    return (\n      <Primitive.input\n        type=\"radio\"\n        aria-hidden\n        defaultChecked={checked}\n        {...props}\n        tabIndex={-1}\n        ref={composedRefs}\n        style={{\n          ...props.style,\n          ...controlSize,\n          position: 'absolute',\n          pointerEvents: 'none',\n          opacity: 0,\n          margin: 0,\n        }}\n      />\n    );\n  },\n);\n\nRadioBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked';\n}\n\nexport {\n  createRadioScope,\n  //\n  Radio,\n  RadioIndicator,\n};\nexport type { RadioProps };\n"
  },
  {
    "path": "packages/react/radio-group/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/radix-ui/CHANGELOG.md",
    "content": "# radix-ui\n\n## 1.4.3\n\n### One-Time Password Field\n\n- Fixed a bug so that all input elements are disabled when the `Root` component is disabled\n- Fixed a bug with iOS Chrome autocomplete (#3641)\n\n### Popper\n\n- Fixed a bug causing infinite render loops\n\n### Presence\n\n- Ensured that the `animationend` event is handled correctly when the keyframe has escapable characters (#2763)\n\n### Slot\n\n- Fixed an issue with how slot components interact with lazy React components in React 19. In the case of a lazy component instance, the resulting promise must be consumed to render the desired component.\n\n### Toast\n\n- Fixed several accessibility issues:\n  - Removed `aria-hidden` from the focusable element, as these elements are already empty and won't be read by screen readers\n  - Removed `role=status` from list item element (see [w3.org documentation for List Item](https://www.w3.org/TR/html-aria/#docconformance))\n  - Remove useless default `aria-atomic` from `role=status`\n\n### Other changes\n\n- Added `displayName` to internal context objects for improved debugging\n\n## 1.4.2\n\n- Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-navigation-menu@1.2.13`, `@radix-ui/react-visually-hidden@1.2.3`, `@radix-ui/react-dropdown-menu@2.1.15`, `@radix-ui/react-alert-dialog@1.1.14`, `@radix-ui/react-aspect-ratio@1.1.7`, `@radix-ui/react-context-menu@2.2.15`, `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-toggle-group@1.1.10`, `@radix-ui/react-collapsible@1.1.11`, `@radix-ui/react-focus-scope@1.1.7`, `@radix-ui/react-radio-group@1.3.7`, `@radix-ui/react-scroll-area@1.2.9`, `@radix-ui/react-hover-card@1.1.14`, `@radix-ui/react-accordion@1.2.11`, `@radix-ui/react-separator@1.1.7`, `@radix-ui/react-checkbox@1.3.2`, `@radix-ui/react-progress@1.1.7`, `@radix-ui/react-menubar@1.1.15`, `@radix-ui/react-popover@1.1.14`, `@radix-ui/react-toolbar@1.1.10`, `@radix-ui/react-tooltip@1.2.7`, `@radix-ui/react-avatar@1.1.10`, `@radix-ui/react-dialog@1.1.14`, `@radix-ui/react-popper@1.2.7`, `@radix-ui/react-portal@1.1.9`, `@radix-ui/react-select@2.2.5`, `@radix-ui/react-slider@1.3.5`, `@radix-ui/react-switch@1.2.5`, `@radix-ui/react-toggle@1.1.9`, `@radix-ui/react-arrow@1.1.7`, `@radix-ui/react-label@2.1.7`, `@radix-ui/react-toast@1.2.14`, `@radix-ui/react-form@0.1.7`, `@radix-ui/react-menu@2.1.15`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-tabs@1.1.12`, `@radix-ui/react-accessible-icon@1.1.7`, `@radix-ui/react-one-time-password-field@0.1.7`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`, `@radix-ui/react-password-toggle-field@0.1.2`\n\n## 1.4.1\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@radix-ui/react-checkbox@1.3.1`, `@radix-ui/react-alert-dialog@1.1.13`, `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-dialog@1.1.13`, `@radix-ui/react-menu@2.1.14`, `@radix-ui/react-popover@1.1.13`, `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-select@2.2.4`, `@radix-ui/react-tooltip@1.2.6`, `@radix-ui/react-accordion@1.2.10`, `@radix-ui/react-menubar@1.1.14`, `@radix-ui/react-navigation-menu@1.2.12`, `@radix-ui/react-one-time-password-field@0.1.6`, `@radix-ui/react-roving-focus@1.1.9`, `@radix-ui/react-slider@1.3.4`, `@radix-ui/react-toast@1.2.13`, `@radix-ui/react-context-menu@2.2.14`, `@radix-ui/react-dropdown-menu@2.1.14`, `@radix-ui/react-arrow@1.1.6`, `@radix-ui/react-aspect-ratio@1.1.6`, `@radix-ui/react-avatar@1.1.9`, `@radix-ui/react-collapsible@1.1.10`, `@radix-ui/react-dismissable-layer@1.1.9`, `@radix-ui/react-focus-scope@1.1.6`, `@radix-ui/react-form@0.1.6`, `@radix-ui/react-hover-card@1.1.13`, `@radix-ui/react-label@2.1.6`, `@radix-ui/react-password-toggle-field@0.1.1`, `@radix-ui/react-popper@1.2.6`, `@radix-ui/react-portal@1.1.8`, `@radix-ui/react-progress@1.1.6`, `@radix-ui/react-radio-group@1.3.6`, `@radix-ui/react-scroll-area@1.2.8`, `@radix-ui/react-separator@1.1.6`, `@radix-ui/react-switch@1.2.4`, `@radix-ui/react-tabs@1.1.11`, `@radix-ui/react-toggle@1.1.8`, `@radix-ui/react-toggle-group@1.1.9`, `@radix-ui/react-toolbar@1.1.9`, `@radix-ui/react-visually-hidden@1.2.2`, `@radix-ui/react-accessible-icon@1.1.6`\n\n## 1.4.0\n\n### Introduce new Password Toggle Field primitive\n\nThis new primitive provides components for rendering a password input alongside a button to toggle its visibility. Aside from its primary functionality, it also includes:\n\n- Returning focus to the input when toggling with a pointer\n- Maintaining focus when toggling with keyboard or virtual navigation\n- Resetting visibility to hidden after form submission to prevent accidental storage\n- Implicit accessible labeling for icon-based toggle buttons\n\nThis API is currently unstable, and we hope you'll help us test it out! Import the primitive using the `unstable_` prefix.\n\n```tsx\nimport { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';\n\nfunction FieldWithIconToggle() {\n  return (\n    <PasswordToggleField.Root>\n      <PasswordToggleField.Input />\n      <PasswordToggleField.Toggle>\n        <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />\n      </PasswordToggleField.Toggle>\n    </PasswordToggleField.Root>\n  );\n}\n\nfunction FieldWithTextToggle() {\n  return (\n    <PasswordToggleField.Root>\n      <PasswordToggleField.Input />\n      <PasswordToggleField.Toggle>\n        <PasswordToggleField.Slot visible=\"Hide password\" hidden=\"Show password\" />\n      </PasswordToggleField.Toggle>\n    </PasswordToggleField.Root>\n  );\n}\n```\n\n### Other updates\n\n- Add unstable `Provider`, `Trigger` and `BubbleInput` parts to Checkbox ([#3459](https://github.com/radix-ui/primitives/pull/3459))\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@radix-ui/react-one-time-password-field@0.1.5`, `@radix-ui/react-checkbox@1.3.0`, `@radix-ui/react-radio-group@1.3.5`, `@radix-ui/react-password-toggle-field@0.1.0`, `@radix-ui/react-alert-dialog@1.1.12`, `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-dialog@1.1.12`, `@radix-ui/react-menu@2.1.13`, `@radix-ui/react-popover@1.1.12`, `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-select@2.2.3`, `@radix-ui/react-tooltip@1.2.5`, `@radix-ui/react-accordion@1.2.9`, `@radix-ui/react-menubar@1.1.13`, `@radix-ui/react-navigation-menu@1.2.11`, `@radix-ui/react-roving-focus@1.1.8`, `@radix-ui/react-slider@1.3.3`, `@radix-ui/react-toast@1.2.12`, `@radix-ui/react-context-menu@2.2.13`, `@radix-ui/react-dropdown-menu@2.1.13`, `@radix-ui/react-arrow@1.1.5`, `@radix-ui/react-aspect-ratio@1.1.5`, `@radix-ui/react-avatar@1.1.8`, `@radix-ui/react-collapsible@1.1.9`, `@radix-ui/react-dismissable-layer@1.1.8`, `@radix-ui/react-focus-scope@1.1.5`, `@radix-ui/react-form@0.1.5`, `@radix-ui/react-hover-card@1.1.12`, `@radix-ui/react-label@2.1.5`, `@radix-ui/react-popper@1.2.5`, `@radix-ui/react-portal@1.1.7`, `@radix-ui/react-progress@1.1.5`, `@radix-ui/react-scroll-area@1.2.7`, `@radix-ui/react-separator@1.1.5`, `@radix-ui/react-switch@1.2.3`, `@radix-ui/react-tabs@1.1.10`, `@radix-ui/react-toggle@1.1.7`, `@radix-ui/react-toggle-group@1.1.8`, `@radix-ui/react-toolbar@1.1.8`, `@radix-ui/react-visually-hidden@1.2.1`, `@radix-ui/react-accessible-icon@1.1.5`\n\n## 1.3.4\n\n- Updated dependencies: `@radix-ui/react-use-is-hydrated@0.1.0`, `@radix-ui/react-presence@1.1.4`, `@radix-ui/react-avatar@1.1.7`, `@radix-ui/react-one-time-password-field@0.1.4`, `@radix-ui/react-checkbox@1.2.3`, `@radix-ui/react-collapsible@1.1.8`, `@radix-ui/react-dialog@1.1.11`, `@radix-ui/react-hover-card@1.1.11`, `@radix-ui/react-menu@2.1.12`, `@radix-ui/react-navigation-menu@1.2.10`, `@radix-ui/react-popover@1.1.11`, `@radix-ui/react-radio-group@1.3.4`, `@radix-ui/react-scroll-area@1.2.6`, `@radix-ui/react-tabs@1.1.9`, `@radix-ui/react-toast@1.2.11`, `@radix-ui/react-tooltip@1.2.4`, `@radix-ui/react-accordion@1.2.8`, `@radix-ui/react-alert-dialog@1.1.11`, `@radix-ui/react-context-menu@2.2.12`, `@radix-ui/react-dropdown-menu@2.1.12`, `@radix-ui/react-menubar@1.1.12`\n\n## 1.3.3\n\n- Updated dependencies: `@radix-ui/react-one-time-password-field@0.1.3`, `@radix-ui/react-roving-focus@1.1.7`, `@radix-ui/react-menu@2.1.11`, `@radix-ui/react-menubar@1.1.11`, `@radix-ui/react-radio-group@1.3.3`, `@radix-ui/react-tabs@1.1.8`, `@radix-ui/react-toggle-group@1.1.7`, `@radix-ui/react-toolbar@1.1.7`, `@radix-ui/react-context-menu@2.2.11`, `@radix-ui/react-dropdown-menu@2.1.11`\n\n## 1.3.2\n\n- Updated dependencies: `@radix-ui/react-use-effect-event@0.0.2`, `@radix-ui/react-avatar@1.1.6`, `@radix-ui/react-one-time-password-field@0.1.2`, `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-accordion@1.2.7`, `@radix-ui/react-checkbox@1.2.2`, `@radix-ui/react-collapsible@1.1.7`, `@radix-ui/react-context-menu@2.2.10`, `@radix-ui/react-dialog@1.1.10`, `@radix-ui/react-dropdown-menu@2.1.10`, `@radix-ui/react-hover-card@1.1.10`, `@radix-ui/react-menubar@1.1.10`, `@radix-ui/react-navigation-menu@1.2.9`, `@radix-ui/react-popover@1.1.10`, `@radix-ui/react-radio-group@1.3.2`, `@radix-ui/react-roving-focus@1.1.6`, `@radix-ui/react-select@2.2.2`, `@radix-ui/react-slider@1.3.2`, `@radix-ui/react-switch@1.2.2`, `@radix-ui/react-tabs@1.1.7`, `@radix-ui/react-toast@1.2.10`, `@radix-ui/react-toggle@1.1.6`, `@radix-ui/react-toggle-group@1.1.6`, `@radix-ui/react-tooltip@1.2.3`, `@radix-ui/react-alert-dialog@1.1.10`, `@radix-ui/react-menu@2.1.10`, `@radix-ui/react-toolbar@1.1.6`\n\n## 1.3.1\n\n- Updated dependencies: `@radix-ui/react-use-effect-event@0.0.1`, `@radix-ui/react-one-time-password-field@0.1.1`, `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-accordion@1.2.6`, `@radix-ui/react-checkbox@1.2.1`, `@radix-ui/react-collapsible@1.1.6`, `@radix-ui/react-context-menu@2.2.9`, `@radix-ui/react-dialog@1.1.9`, `@radix-ui/react-dropdown-menu@2.1.9`, `@radix-ui/react-hover-card@1.1.9`, `@radix-ui/react-menubar@1.1.9`, `@radix-ui/react-navigation-menu@1.2.8`, `@radix-ui/react-popover@1.1.9`, `@radix-ui/react-radio-group@1.3.1`, `@radix-ui/react-roving-focus@1.1.5`, `@radix-ui/react-select@2.2.1`, `@radix-ui/react-slider@1.3.1`, `@radix-ui/react-switch@1.2.1`, `@radix-ui/react-tabs@1.1.6`, `@radix-ui/react-toast@1.2.9`, `@radix-ui/react-toggle@1.1.5`, `@radix-ui/react-toggle-group@1.1.5`, `@radix-ui/react-tooltip@1.2.2`, `@radix-ui/react-alert-dialog@1.1.9`, `@radix-ui/react-menu@2.1.9`, `@radix-ui/react-toolbar@1.1.5`\n\n## 1.3.0\n\n### Introduce new One Time Password Field primitive\n\nThis new primitive is designed to implement the common design pattern for one-time password fields displayed as separate input fields for each character. This UI is deceptively complex to implement so that interactions follow user expectations. The new primitive handles all of this complexity for you, including:\n\n- Keyboard navigation mimicking the behavior of a single input field\n- Overriding values on paste\n- Password manager autofill support\n- Input validation for numeric and alphanumeric values\n- Auto-submit on completion\n- Focus management\n- Hidden input to provide a single value to form data\n\nThis API is currently unstable, and we hope you'll help us test it out! Import the primitive using the `unstable_` prefix.\n\n```tsx\nimport { unstable_OneTimePasswordField as OneTimePasswordField } from 'radix-ui';\n\nexport function Verify() {\n  return (\n    <OneTimePasswordField.Root>\n      <OneTimePasswordField.Input />\n      <OneTimePasswordField.Input />\n      <OneTimePasswordField.Input />\n      <OneTimePasswordField.Input />\n      <OneTimePasswordField.Input />\n      <OneTimePasswordField.Input />\n      <OneTimePasswordField.HiddenInput />\n    </OneTimePasswordField.Root>\n  );\n}\n```\n\n### Other updates\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.4`, `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-navigation-menu@1.2.7`, `@radix-ui/react-dropdown-menu@2.1.8`, `@radix-ui/react-context-menu@2.2.8`, `@radix-ui/react-roving-focus@1.1.4`, `@radix-ui/react-toggle-group@1.1.4`, `@radix-ui/react-collapsible@1.1.5`, `@radix-ui/react-radio-group@1.3.0`, `@radix-ui/react-hover-card@1.1.8`, `@radix-ui/react-accordion@1.2.5`, `@radix-ui/react-checkbox@1.2.0`, `@radix-ui/react-menubar@1.1.8`, `@radix-ui/react-popover@1.1.8`, `@radix-ui/react-tooltip@1.2.1`, `@radix-ui/react-dialog@1.1.8`, `@radix-ui/react-select@2.2.0`, `@radix-ui/react-switch@1.2.0`, `@radix-ui/react-toggle@1.1.4`, `@radix-ui/react-toast@1.2.8`, `@radix-ui/react-tabs@1.1.5`, `@radix-ui/react-one-time-password-field@0.1.0`, `@radix-ui/react-visually-hidden@1.2.0`, `@radix-ui/react-primitive@2.1.0`, `@radix-ui/react-slider@1.3.0`, `@radix-ui/react-menu@2.1.8`, `@radix-ui/react-toolbar@1.1.4`, `@radix-ui/react-alert-dialog@1.1.8`, `@radix-ui/react-accessible-icon@1.1.4`, `@radix-ui/react-arrow@1.1.4`, `@radix-ui/react-aspect-ratio@1.1.4`, `@radix-ui/react-avatar@1.1.5`, `@radix-ui/react-dismissable-layer@1.1.7`, `@radix-ui/react-focus-scope@1.1.4`, `@radix-ui/react-form@0.1.4`, `@radix-ui/react-label@2.1.4`, `@radix-ui/react-popper@1.2.4`, `@radix-ui/react-portal@1.1.6`, `@radix-ui/react-progress@1.1.4`, `@radix-ui/react-scroll-area@1.2.5`, `@radix-ui/react-separator@1.1.4`\n"
  },
  {
    "path": "packages/react/radix-ui/README.md",
    "content": "[![Radix Primitives Logo](https://raw.githubusercontent.com/radix-ui/primitives/main/primitives.png)](https://radix-ui.com/primitives)\n\n# Radix Primitives\n\n**An open-source UI component library for building high-quality, accessible design systems and web apps.**\n\nRadix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.\n\n---\n\n## Documentation\n\nFor full documentation, visit [radix-ui.com/docs/primitives](https://radix-ui.com/docs/primitives).\n\n## Releases\n\nFor changelog, visit [radix-ui.com/docs/primitives/overview/releases](https://radix-ui.com/docs/primitives/overview/releases).\n\n---\n\n## Community\n\n- [Discord](https://discord.com/invite/7Xb99uG) - To get involved with the Radix community, ask questions and share tips.\n- [Twitter](https://twitter.com/radix_ui) - To receive updates, announcements, blog posts, and general Radix tips.\n\n## Thanks\n\n<a href=\"https://www.chromatic.com/\"><img src=\"https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" /></a>\n\nThanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.\n\n---\n\n## License\n\nLicensed under the MIT License, Copyright © 2022-present [WorkOS](https://workos.com).\n"
  },
  {
    "path": "packages/react/radix-ui/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/radix-ui/package.json",
    "content": "{\n  \"name\": \"radix-ui\",\n  \"version\": \"1.4.3\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"exports\": {\n    \".\": \"./src/index.ts\",\n    \"./*\": \"./src/*.ts\"\n  },\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      },\n      \"./*\": {\n        \"import\": {\n          \"types\": \"./dist/*.d.mts\",\n          \"default\": \"./dist/*.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/*.d.ts\",\n          \"default\": \"./dist/*.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"src\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build:esm\": \"tsc\",\n    \"build:cjs\": \"tsc --module commonjs --moduleResolution node --outDir dist/cjs\",\n    \"// build\": \"pnpm run --parallel \\\"/^build:.*/\\\"\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-accessible-icon\": \"workspace:*\",\n    \"@radix-ui/react-accordion\": \"workspace:*\",\n    \"@radix-ui/react-alert-dialog\": \"workspace:*\",\n    \"@radix-ui/react-arrow\": \"workspace:*\",\n    \"@radix-ui/react-aspect-ratio\": \"workspace:*\",\n    \"@radix-ui/react-avatar\": \"workspace:*\",\n    \"@radix-ui/react-checkbox\": \"workspace:*\",\n    \"@radix-ui/react-collapsible\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-context-menu\": \"workspace:*\",\n    \"@radix-ui/react-dialog\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-dropdown-menu\": \"workspace:*\",\n    \"@radix-ui/react-focus-guards\": \"workspace:*\",\n    \"@radix-ui/react-focus-scope\": \"workspace:*\",\n    \"@radix-ui/react-form\": \"workspace:*\",\n    \"@radix-ui/react-hover-card\": \"workspace:*\",\n    \"@radix-ui/react-label\": \"workspace:*\",\n    \"@radix-ui/react-menu\": \"workspace:*\",\n    \"@radix-ui/react-menubar\": \"workspace:*\",\n    \"@radix-ui/react-navigation-menu\": \"workspace:*\",\n    \"@radix-ui/react-one-time-password-field\": \"workspace:*\",\n    \"@radix-ui/react-password-toggle-field\": \"workspace:*\",\n    \"@radix-ui/react-popover\": \"workspace:*\",\n    \"@radix-ui/react-popper\": \"workspace:*\",\n    \"@radix-ui/react-portal\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-progress\": \"workspace:*\",\n    \"@radix-ui/react-radio-group\": \"workspace:*\",\n    \"@radix-ui/react-roving-focus\": \"workspace:*\",\n    \"@radix-ui/react-scroll-area\": \"workspace:*\",\n    \"@radix-ui/react-select\": \"workspace:*\",\n    \"@radix-ui/react-separator\": \"workspace:*\",\n    \"@radix-ui/react-slider\": \"workspace:*\",\n    \"@radix-ui/react-slot\": \"workspace:*\",\n    \"@radix-ui/react-switch\": \"workspace:*\",\n    \"@radix-ui/react-tabs\": \"workspace:*\",\n    \"@radix-ui/react-toast\": \"workspace:*\",\n    \"@radix-ui/react-toggle\": \"workspace:*\",\n    \"@radix-ui/react-toggle-group\": \"workspace:*\",\n    \"@radix-ui/react-toolbar\": \"workspace:*\",\n    \"@radix-ui/react-tooltip\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-effect-event\": \"workspace:*\",\n    \"@radix-ui/react-use-escape-keydown\": \"workspace:*\",\n    \"@radix-ui/react-use-is-hydrated\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\",\n    \"@radix-ui/react-use-size\": \"workspace:*\",\n    \"@radix-ui/react-visually-hidden\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/radix-ui/src/index.ts",
    "content": "export * as AccessibleIcon from '@radix-ui/react-accessible-icon';\nexport * as Accordion from '@radix-ui/react-accordion';\nexport * as AlertDialog from '@radix-ui/react-alert-dialog';\nexport * as AspectRatio from '@radix-ui/react-aspect-ratio';\nexport * as Avatar from '@radix-ui/react-avatar';\nexport * as Checkbox from '@radix-ui/react-checkbox';\nexport * as Collapsible from '@radix-ui/react-collapsible';\nexport * as ContextMenu from '@radix-ui/react-context-menu';\nexport * as Dialog from '@radix-ui/react-dialog';\nexport * as Direction from '@radix-ui/react-direction';\nexport * as DropdownMenu from '@radix-ui/react-dropdown-menu';\nexport * as Form from '@radix-ui/react-form';\nexport * as HoverCard from '@radix-ui/react-hover-card';\nexport * as Label from '@radix-ui/react-label';\nexport * as Menubar from '@radix-ui/react-menubar';\nexport * as NavigationMenu from '@radix-ui/react-navigation-menu';\nexport * as unstable_OneTimePasswordField from '@radix-ui/react-one-time-password-field';\nexport * as unstable_PasswordToggleField from '@radix-ui/react-password-toggle-field';\nexport * as Popover from '@radix-ui/react-popover';\nexport * as Portal from '@radix-ui/react-portal';\nexport * as Progress from '@radix-ui/react-progress';\nexport * as RadioGroup from '@radix-ui/react-radio-group';\nexport * as ScrollArea from '@radix-ui/react-scroll-area';\nexport * as Select from '@radix-ui/react-select';\nexport * as Separator from '@radix-ui/react-separator';\nexport * as Slider from '@radix-ui/react-slider';\nexport * as Slot from '@radix-ui/react-slot';\nexport * as Switch from '@radix-ui/react-switch';\nexport * as Tabs from '@radix-ui/react-tabs';\nexport * as Toast from '@radix-ui/react-toast';\nexport * as Toggle from '@radix-ui/react-toggle';\nexport * as ToggleGroup from '@radix-ui/react-toggle-group';\nexport * as Toolbar from '@radix-ui/react-toolbar';\nexport * as Tooltip from '@radix-ui/react-tooltip';\nexport * as VisuallyHidden from '@radix-ui/react-visually-hidden';\n"
  },
  {
    "path": "packages/react/radix-ui/src/internal.ts",
    "content": "import { Primitive as BasePrimitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nexport * as Arrow from '@radix-ui/react-arrow';\nexport * as Collection from '@radix-ui/react-collection';\nexport { composeRefs, useComposedRefs } from '@radix-ui/react-compose-refs';\nexport * as Context from '@radix-ui/react-context';\nexport * as DismissableLayer from '@radix-ui/react-dismissable-layer';\nexport * as FocusGuards from '@radix-ui/react-focus-guards';\nexport * as FocusScope from '@radix-ui/react-focus-scope';\nexport * as Menu from '@radix-ui/react-menu';\nexport * as Popper from '@radix-ui/react-popper';\nexport * as Presence from '@radix-ui/react-presence';\nexport type { PrimitivePropsWithRef } from '@radix-ui/react-primitive';\nexport * as RovingFocus from '@radix-ui/react-roving-focus';\nexport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nexport {\n  useControllableState,\n  useControllableStateReducer,\n} from '@radix-ui/react-use-controllable-state';\nexport { useEffectEvent } from '@radix-ui/react-use-effect-event';\nexport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\nexport { useIsHydrated } from '@radix-ui/react-use-is-hydrated';\nexport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nexport { useSize } from '@radix-ui/react-use-size';\nexport { composeEventHandlers } from '@radix-ui/primitive';\n\nconst Primitive = BasePrimitive as typeof BasePrimitive & {\n  Root: typeof BasePrimitive;\n  dispatchDiscreteCustomEvent: typeof dispatchDiscreteCustomEvent;\n};\nPrimitive.dispatchDiscreteCustomEvent = dispatchDiscreteCustomEvent;\nPrimitive.Root = BasePrimitive;\nexport { Primitive };\n"
  },
  {
    "path": "packages/react/radix-ui/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/roving-focus/CHANGELOG.md",
    "content": "# @radix-ui/react-roving-focus\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.10\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.7\n\n- Internal changes to render props\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.1.4\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- Accept function as child\n- 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`\n"
  },
  {
    "path": "packages/react/roving-focus/README.md",
    "content": "# `react-roving-focus`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/roving-focus/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/roving-focus/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-roving-focus\",\n  \"version\": \"1.1.11\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/roving-focus/src/index.ts",
    "content": "'use client';\nexport {\n  createRovingFocusGroupScope,\n  //\n  RovingFocusGroup,\n  RovingFocusGroupItem,\n  //\n  Root,\n  Item,\n} from './roving-focus-group';\nexport type { RovingFocusGroupProps, RovingFocusItemProps } from './roving-focus-group';\n"
  },
  {
    "path": "packages/react/roving-focus/src/roving-focus-group.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type { Scope } from '@radix-ui/react-context';\n\nconst ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';\nconst EVENT_OPTIONS = { bubbles: false, cancelable: true };\n\n/* -------------------------------------------------------------------------------------------------\n * RovingFocusGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'RovingFocusGroup';\n\ntype ItemData = { id: string; focusable: boolean; active: boolean };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n  HTMLSpanElement,\n  ItemData\n>(GROUP_NAME);\n\ntype ScopedProps<P> = P & { __scopeRovingFocusGroup?: Scope };\nconst [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(\n  GROUP_NAME,\n  [createCollectionScope],\n);\n\ntype Orientation = React.AriaAttributes['aria-orientation'];\ntype Direction = 'ltr' | 'rtl';\n\ninterface RovingFocusGroupOptions {\n  /**\n   * The orientation of the group.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   */\n  orientation?: Orientation;\n  /**\n   * The direction of navigation between items.\n   */\n  dir?: Direction;\n  /**\n   * Whether keyboard navigation should loop around\n   * @defaultValue false\n   */\n  loop?: boolean;\n}\n\ntype RovingContextValue = RovingFocusGroupOptions & {\n  currentTabStopId: string | null;\n  onItemFocus(tabStopId: string): void;\n  onItemShiftTab(): void;\n  onFocusableItemAdd(): void;\n  onFocusableItemRemove(): void;\n};\n\nconst [RovingFocusProvider, useRovingFocusContext] =\n  createRovingFocusGroupContext<RovingContextValue>(GROUP_NAME);\n\ntype RovingFocusGroupElement = RovingFocusGroupImplElement;\ninterface RovingFocusGroupProps extends RovingFocusGroupImplProps {}\n\nconst RovingFocusGroup = React.forwardRef<RovingFocusGroupElement, RovingFocusGroupProps>(\n  (props: ScopedProps<RovingFocusGroupProps>, forwardedRef) => {\n    return (\n      <Collection.Provider scope={props.__scopeRovingFocusGroup}>\n        <Collection.Slot scope={props.__scopeRovingFocusGroup}>\n          <RovingFocusGroupImpl {...props} ref={forwardedRef} />\n        </Collection.Slot>\n      </Collection.Provider>\n    );\n  },\n);\n\nRovingFocusGroup.displayName = GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype RovingFocusGroupImplElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface RovingFocusGroupImplProps\n  extends Omit<PrimitiveDivProps, 'dir'>,\n    RovingFocusGroupOptions {\n  currentTabStopId?: string | null;\n  defaultCurrentTabStopId?: string;\n  onCurrentTabStopIdChange?: (tabStopId: string | null) => void;\n  onEntryFocus?: (event: Event) => void;\n  preventScrollOnEntryFocus?: boolean;\n}\n\nconst RovingFocusGroupImpl = React.forwardRef<\n  RovingFocusGroupImplElement,\n  RovingFocusGroupImplProps\n>((props: ScopedProps<RovingFocusGroupImplProps>, forwardedRef) => {\n  const {\n    __scopeRovingFocusGroup,\n    orientation,\n    loop = false,\n    dir,\n    currentTabStopId: currentTabStopIdProp,\n    defaultCurrentTabStopId,\n    onCurrentTabStopIdChange,\n    onEntryFocus,\n    preventScrollOnEntryFocus = false,\n    ...groupProps\n  } = props;\n  const ref = React.useRef<RovingFocusGroupImplElement>(null);\n  const composedRefs = useComposedRefs(forwardedRef, ref);\n  const direction = useDirection(dir);\n  const [currentTabStopId, setCurrentTabStopId] = useControllableState({\n    prop: currentTabStopIdProp,\n    defaultProp: defaultCurrentTabStopId ?? null,\n    onChange: onCurrentTabStopIdChange,\n    caller: GROUP_NAME,\n  });\n  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);\n  const handleEntryFocus = useCallbackRef(onEntryFocus);\n  const getItems = useCollection(__scopeRovingFocusGroup);\n  const isClickFocusRef = React.useRef(false);\n  const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);\n\n  React.useEffect(() => {\n    const node = ref.current;\n    if (node) {\n      node.addEventListener(ENTRY_FOCUS, handleEntryFocus);\n      return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);\n    }\n  }, [handleEntryFocus]);\n\n  return (\n    <RovingFocusProvider\n      scope={__scopeRovingFocusGroup}\n      orientation={orientation}\n      dir={direction}\n      loop={loop}\n      currentTabStopId={currentTabStopId}\n      onItemFocus={React.useCallback(\n        (tabStopId) => setCurrentTabStopId(tabStopId),\n        [setCurrentTabStopId],\n      )}\n      onItemShiftTab={React.useCallback(() => setIsTabbingBackOut(true), [])}\n      onFocusableItemAdd={React.useCallback(\n        () => setFocusableItemsCount((prevCount) => prevCount + 1),\n        [],\n      )}\n      onFocusableItemRemove={React.useCallback(\n        () => setFocusableItemsCount((prevCount) => prevCount - 1),\n        [],\n      )}\n    >\n      <Primitive.div\n        tabIndex={isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0}\n        data-orientation={orientation}\n        {...groupProps}\n        ref={composedRefs}\n        style={{ outline: 'none', ...props.style }}\n        onMouseDown={composeEventHandlers(props.onMouseDown, () => {\n          isClickFocusRef.current = true;\n        })}\n        onFocus={composeEventHandlers(props.onFocus, (event) => {\n          // We normally wouldn't need this check, because we already check\n          // that the focus is on the current target and not bubbling to it.\n          // We do this because Safari doesn't focus buttons when clicked, and\n          // instead, the wrapper will get focused and not through a bubbling event.\n          const isKeyboardFocus = !isClickFocusRef.current;\n\n          if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {\n            const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);\n            event.currentTarget.dispatchEvent(entryFocusEvent);\n\n            if (!entryFocusEvent.defaultPrevented) {\n              const items = getItems().filter((item) => item.focusable);\n              const activeItem = items.find((item) => item.active);\n              const currentItem = items.find((item) => item.id === currentTabStopId);\n              const candidateItems = [activeItem, currentItem, ...items].filter(\n                Boolean,\n              ) as typeof items;\n              const candidateNodes = candidateItems.map((item) => item.ref.current!);\n              focusFirst(candidateNodes, preventScrollOnEntryFocus);\n            }\n          }\n\n          isClickFocusRef.current = false;\n        })}\n        onBlur={composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))}\n      />\n    </RovingFocusProvider>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * RovingFocusGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'RovingFocusGroupItem';\n\ntype RovingFocusItemElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface RovingFocusItemProps extends Omit<PrimitiveSpanProps, 'children'> {\n  tabStopId?: string;\n  focusable?: boolean;\n  active?: boolean;\n  children?:\n    | React.ReactNode\n    | ((props: { hasTabStop: boolean; isCurrentTabStop: boolean }) => React.ReactNode);\n}\n\nconst RovingFocusGroupItem = React.forwardRef<RovingFocusItemElement, RovingFocusItemProps>(\n  (props: ScopedProps<RovingFocusItemProps>, forwardedRef) => {\n    const {\n      __scopeRovingFocusGroup,\n      focusable = true,\n      active = false,\n      tabStopId,\n      children,\n      ...itemProps\n    } = props;\n    const autoId = useId();\n    const id = tabStopId || autoId;\n    const context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);\n    const isCurrentTabStop = context.currentTabStopId === id;\n    const getItems = useCollection(__scopeRovingFocusGroup);\n\n    const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;\n\n    React.useEffect(() => {\n      if (focusable) {\n        onFocusableItemAdd();\n        return () => onFocusableItemRemove();\n      }\n    }, [focusable, onFocusableItemAdd, onFocusableItemRemove]);\n\n    return (\n      <Collection.ItemSlot\n        scope={__scopeRovingFocusGroup}\n        id={id}\n        focusable={focusable}\n        active={active}\n      >\n        <Primitive.span\n          tabIndex={isCurrentTabStop ? 0 : -1}\n          data-orientation={context.orientation}\n          {...itemProps}\n          ref={forwardedRef}\n          onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n            // We prevent focusing non-focusable items on `mousedown`.\n            // Even though the item has tabIndex={-1}, that only means take it out of the tab order.\n            if (!focusable) event.preventDefault();\n            // Safari doesn't focus a button when clicked so we run our logic on mousedown also\n            else context.onItemFocus(id);\n          })}\n          onFocus={composeEventHandlers(props.onFocus, () => context.onItemFocus(id))}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            if (event.key === 'Tab' && event.shiftKey) {\n              context.onItemShiftTab();\n              return;\n            }\n\n            if (event.target !== event.currentTarget) return;\n\n            const focusIntent = getFocusIntent(event, context.orientation, context.dir);\n\n            if (focusIntent !== undefined) {\n              if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;\n              event.preventDefault();\n              const items = getItems().filter((item) => item.focusable);\n              let candidateNodes = items.map((item) => item.ref.current!);\n\n              if (focusIntent === 'last') candidateNodes.reverse();\n              else if (focusIntent === 'prev' || focusIntent === 'next') {\n                if (focusIntent === 'prev') candidateNodes.reverse();\n                const currentIndex = candidateNodes.indexOf(event.currentTarget);\n                candidateNodes = context.loop\n                  ? wrapArray(candidateNodes, currentIndex + 1)\n                  : candidateNodes.slice(currentIndex + 1);\n              }\n\n              /**\n               * Imperative focus during keydown is risky so we prevent React's batching updates\n               * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n               */\n              setTimeout(() => focusFirst(candidateNodes));\n            }\n          })}\n        >\n          {typeof children === 'function'\n            ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null })\n            : children}\n        </Primitive.span>\n      </Collection.ItemSlot>\n    );\n  },\n);\n\nRovingFocusGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\n// prettier-ignore\nconst MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {\n  ArrowLeft: 'prev', ArrowUp: 'prev',\n  ArrowRight: 'next', ArrowDown: 'next',\n  PageUp: 'first', Home: 'first',\n  PageDown: 'last', End: 'last',\n};\n\nfunction getDirectionAwareKey(key: string, dir?: Direction) {\n  if (dir !== 'rtl') return key;\n  return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;\n}\n\ntype FocusIntent = 'first' | 'last' | 'prev' | 'next';\n\nfunction getFocusIntent(event: React.KeyboardEvent, orientation?: Orientation, dir?: Direction) {\n  const key = getDirectionAwareKey(event.key, dir);\n  if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key)) return undefined;\n  if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key)) return undefined;\n  return MAP_KEY_TO_FOCUS_INTENT[key];\n}\n\nfunction focusFirst(candidates: HTMLElement[], preventScroll = false) {\n  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;\n  for (const candidate of candidates) {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;\n    candidate.focus({ preventScroll });\n    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;\n  }\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray<T>(array: T[], startIndex: number) {\n  return array.map<T>((_, index) => array[(startIndex + index) % array.length]!);\n}\n\nconst Root = RovingFocusGroup;\nconst Item = RovingFocusGroupItem;\n\nexport {\n  createRovingFocusGroupScope,\n  //\n  RovingFocusGroup,\n  RovingFocusGroupItem,\n  //\n  Root,\n  Item,\n};\nexport type { RovingFocusGroupProps, RovingFocusItemProps };\n"
  },
  {
    "path": "packages/react/roving-focus/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/scroll-area/CHANGELOG.md",
    "content": "# @radix-ui/react-scroll-area\n\n## 1.2.10\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.2.9\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.2.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.2.7\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.2.6\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.2.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/scroll-area/README.md",
    "content": "# `react-scroll-area`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/scroll-area).\n"
  },
  {
    "path": "packages/react/scroll-area/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/scroll-area/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-scroll-area\",\n  \"version\": \"1.2.10\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/number\": \"workspace:*\",\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/scroll-area/src/index.ts",
    "content": "'use client';\nexport {\n  createScrollAreaScope,\n  //\n  ScrollArea,\n  ScrollAreaViewport,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaCorner,\n  //\n  Root,\n  Viewport,\n  Scrollbar,\n  Thumb,\n  Corner,\n} from './scroll-area';\nexport type {\n  ScrollAreaProps,\n  ScrollAreaViewportProps,\n  ScrollAreaScrollbarProps,\n  ScrollAreaThumbProps,\n  ScrollAreaCornerProps,\n} from './scroll-area';\n"
  },
  {
    "path": "packages/react/scroll-area/src/scroll-area.tsx",
    "content": "import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Presence } from '@radix-ui/react-presence';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useStateMachine } from './use-state-machine';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\ntype Sizes = {\n  content: number;\n  viewport: number;\n  scrollbar: {\n    size: number;\n    paddingStart: number;\n    paddingEnd: number;\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ScrollArea\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_AREA_NAME = 'ScrollArea';\n\ntype ScopedProps<P> = P & { __scopeScrollArea?: Scope };\nconst [createScrollAreaContext, createScrollAreaScope] = createContextScope(SCROLL_AREA_NAME);\n\ntype ScrollAreaContextValue = {\n  type: 'auto' | 'always' | 'scroll' | 'hover';\n  dir: Direction;\n  scrollHideDelay: number;\n  scrollArea: ScrollAreaElement | null;\n  viewport: ScrollAreaViewportElement | null;\n  onViewportChange(viewport: ScrollAreaViewportElement | null): void;\n  content: HTMLDivElement | null;\n  onContentChange(content: HTMLDivElement): void;\n  scrollbarX: ScrollAreaScrollbarElement | null;\n  onScrollbarXChange(scrollbar: ScrollAreaScrollbarElement | null): void;\n  scrollbarXEnabled: boolean;\n  onScrollbarXEnabledChange(rendered: boolean): void;\n  scrollbarY: ScrollAreaScrollbarElement | null;\n  onScrollbarYChange(scrollbar: ScrollAreaScrollbarElement | null): void;\n  scrollbarYEnabled: boolean;\n  onScrollbarYEnabledChange(rendered: boolean): void;\n  onCornerWidthChange(width: number): void;\n  onCornerHeightChange(height: number): void;\n};\n\nconst [ScrollAreaProvider, useScrollAreaContext] =\n  createScrollAreaContext<ScrollAreaContextValue>(SCROLL_AREA_NAME);\n\ntype ScrollAreaElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ScrollAreaProps extends PrimitiveDivProps {\n  type?: ScrollAreaContextValue['type'];\n  dir?: ScrollAreaContextValue['dir'];\n  scrollHideDelay?: number;\n}\n\nconst ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>(\n  (props: ScopedProps<ScrollAreaProps>, forwardedRef) => {\n    const {\n      __scopeScrollArea,\n      type = 'hover',\n      dir,\n      scrollHideDelay = 600,\n      ...scrollAreaProps\n    } = props;\n    const [scrollArea, setScrollArea] = React.useState<ScrollAreaElement | null>(null);\n    const [viewport, setViewport] = React.useState<ScrollAreaViewportElement | null>(null);\n    const [content, setContent] = React.useState<HTMLDivElement | null>(null);\n    const [scrollbarX, setScrollbarX] = React.useState<ScrollAreaScrollbarElement | null>(null);\n    const [scrollbarY, setScrollbarY] = React.useState<ScrollAreaScrollbarElement | null>(null);\n    const [cornerWidth, setCornerWidth] = React.useState(0);\n    const [cornerHeight, setCornerHeight] = React.useState(0);\n    const [scrollbarXEnabled, setScrollbarXEnabled] = React.useState(false);\n    const [scrollbarYEnabled, setScrollbarYEnabled] = React.useState(false);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setScrollArea(node));\n    const direction = useDirection(dir);\n\n    return (\n      <ScrollAreaProvider\n        scope={__scopeScrollArea}\n        type={type}\n        dir={direction}\n        scrollHideDelay={scrollHideDelay}\n        scrollArea={scrollArea}\n        viewport={viewport}\n        onViewportChange={setViewport}\n        content={content}\n        onContentChange={setContent}\n        scrollbarX={scrollbarX}\n        onScrollbarXChange={setScrollbarX}\n        scrollbarXEnabled={scrollbarXEnabled}\n        onScrollbarXEnabledChange={setScrollbarXEnabled}\n        scrollbarY={scrollbarY}\n        onScrollbarYChange={setScrollbarY}\n        scrollbarYEnabled={scrollbarYEnabled}\n        onScrollbarYEnabledChange={setScrollbarYEnabled}\n        onCornerWidthChange={setCornerWidth}\n        onCornerHeightChange={setCornerHeight}\n      >\n        <Primitive.div\n          dir={direction}\n          {...scrollAreaProps}\n          ref={composedRefs}\n          style={{\n            position: 'relative',\n            // Pass corner sizes as CSS vars to reduce re-renders of context consumers\n            ['--radix-scroll-area-corner-width' as any]: cornerWidth + 'px',\n            ['--radix-scroll-area-corner-height' as any]: cornerHeight + 'px',\n            ...props.style,\n          }}\n        />\n      </ScrollAreaProvider>\n    );\n  },\n);\n\nScrollArea.displayName = SCROLL_AREA_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ScrollAreaViewport\n * -----------------------------------------------------------------------------------------------*/\n\nconst VIEWPORT_NAME = 'ScrollAreaViewport';\n\ntype ScrollAreaViewportElement = React.ComponentRef<typeof Primitive.div>;\ninterface ScrollAreaViewportProps extends PrimitiveDivProps {\n  nonce?: string;\n}\n\nconst ScrollAreaViewport = React.forwardRef<ScrollAreaViewportElement, ScrollAreaViewportProps>(\n  (props: ScopedProps<ScrollAreaViewportProps>, forwardedRef) => {\n    const { __scopeScrollArea, children, nonce, ...viewportProps } = props;\n    const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);\n    const ref = React.useRef<ScrollAreaViewportElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);\n    return (\n      <>\n        {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`,\n          }}\n          nonce={nonce}\n        />\n        <Primitive.div\n          data-radix-scroll-area-viewport=\"\"\n          {...viewportProps}\n          ref={composedRefs}\n          style={{\n            /**\n             * We don't support `visible` because the intention is to have at least one scrollbar\n             * if this component is used and `visible` will behave like `auto` in that case\n             * https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#description\n             *\n             * We don't handle `auto` because the intention is for the native implementation\n             * to be hidden if using this component. We just want to ensure the node is scrollable\n             * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent\n             * the browser from having to work out whether to render native scrollbars or not,\n             * we tell it to with the intention of hiding them in CSS.\n             */\n            overflowX: context.scrollbarXEnabled ? 'scroll' : 'hidden',\n            overflowY: context.scrollbarYEnabled ? 'scroll' : 'hidden',\n            ...props.style,\n          }}\n        >\n          {/**\n           * `display: table` ensures our content div will match the size of its children in both\n           * horizontal and vertical axis so we can determine if scroll width/height changed and\n           * recalculate thumb sizes. This doesn't account for children with *percentage*\n           * widths that change. We'll wait to see what use-cases consumers come up with there\n           * before trying to resolve it.\n           */}\n          <div ref={context.onContentChange} style={{ minWidth: '100%', display: 'table' }}>\n            {children}\n          </div>\n        </Primitive.div>\n      </>\n    );\n  },\n);\n\nScrollAreaViewport.displayName = VIEWPORT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ScrollAreaScrollbar\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLLBAR_NAME = 'ScrollAreaScrollbar';\n\ntype ScrollAreaScrollbarElement = ScrollAreaScrollbarVisibleElement;\ninterface ScrollAreaScrollbarProps extends ScrollAreaScrollbarVisibleProps {\n  forceMount?: true;\n}\n\nconst ScrollAreaScrollbar = React.forwardRef<ScrollAreaScrollbarElement, ScrollAreaScrollbarProps>(\n  (props: ScopedProps<ScrollAreaScrollbarProps>, forwardedRef) => {\n    const { forceMount, ...scrollbarProps } = props;\n    const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n    const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;\n    const isHorizontal = props.orientation === 'horizontal';\n\n    React.useEffect(() => {\n      isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);\n      return () => {\n        isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);\n      };\n    }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);\n\n    return context.type === 'hover' ? (\n      <ScrollAreaScrollbarHover {...scrollbarProps} ref={forwardedRef} forceMount={forceMount} />\n    ) : context.type === 'scroll' ? (\n      <ScrollAreaScrollbarScroll {...scrollbarProps} ref={forwardedRef} forceMount={forceMount} />\n    ) : context.type === 'auto' ? (\n      <ScrollAreaScrollbarAuto {...scrollbarProps} ref={forwardedRef} forceMount={forceMount} />\n    ) : context.type === 'always' ? (\n      <ScrollAreaScrollbarVisible {...scrollbarProps} ref={forwardedRef} />\n    ) : null;\n  },\n);\n\nScrollAreaScrollbar.displayName = SCROLLBAR_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollAreaScrollbarHoverElement = ScrollAreaScrollbarAutoElement;\ninterface ScrollAreaScrollbarHoverProps extends ScrollAreaScrollbarAutoProps {\n  forceMount?: true;\n}\n\nconst ScrollAreaScrollbarHover = React.forwardRef<\n  ScrollAreaScrollbarHoverElement,\n  ScrollAreaScrollbarHoverProps\n>((props: ScopedProps<ScrollAreaScrollbarHoverProps>, forwardedRef) => {\n  const { forceMount, ...scrollbarProps } = props;\n  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n  const [visible, setVisible] = React.useState(false);\n\n  React.useEffect(() => {\n    const scrollArea = context.scrollArea;\n    let hideTimer = 0;\n    if (scrollArea) {\n      const handlePointerEnter = () => {\n        window.clearTimeout(hideTimer);\n        setVisible(true);\n      };\n      const handlePointerLeave = () => {\n        hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);\n      };\n      scrollArea.addEventListener('pointerenter', handlePointerEnter);\n      scrollArea.addEventListener('pointerleave', handlePointerLeave);\n      return () => {\n        window.clearTimeout(hideTimer);\n        scrollArea.removeEventListener('pointerenter', handlePointerEnter);\n        scrollArea.removeEventListener('pointerleave', handlePointerLeave);\n      };\n    }\n  }, [context.scrollArea, context.scrollHideDelay]);\n\n  return (\n    <Presence present={forceMount || visible}>\n      <ScrollAreaScrollbarAuto\n        data-state={visible ? 'visible' : 'hidden'}\n        {...scrollbarProps}\n        ref={forwardedRef}\n      />\n    </Presence>\n  );\n});\n\ntype ScrollAreaScrollbarScrollElement = ScrollAreaScrollbarVisibleElement;\ninterface ScrollAreaScrollbarScrollProps extends ScrollAreaScrollbarVisibleProps {\n  forceMount?: true;\n}\n\nconst ScrollAreaScrollbarScroll = React.forwardRef<\n  ScrollAreaScrollbarScrollElement,\n  ScrollAreaScrollbarScrollProps\n>((props: ScopedProps<ScrollAreaScrollbarScrollProps>, forwardedRef) => {\n  const { forceMount, ...scrollbarProps } = props;\n  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n  const isHorizontal = props.orientation === 'horizontal';\n  const debounceScrollEnd = useDebounceCallback(() => send('SCROLL_END'), 100);\n  const [state, send] = useStateMachine('hidden', {\n    hidden: {\n      SCROLL: 'scrolling',\n    },\n    scrolling: {\n      SCROLL_END: 'idle',\n      POINTER_ENTER: 'interacting',\n    },\n    interacting: {\n      SCROLL: 'interacting',\n      POINTER_LEAVE: 'idle',\n    },\n    idle: {\n      HIDE: 'hidden',\n      SCROLL: 'scrolling',\n      POINTER_ENTER: 'interacting',\n    },\n  });\n\n  React.useEffect(() => {\n    if (state === 'idle') {\n      const hideTimer = window.setTimeout(() => send('HIDE'), context.scrollHideDelay);\n      return () => window.clearTimeout(hideTimer);\n    }\n  }, [state, context.scrollHideDelay, send]);\n\n  React.useEffect(() => {\n    const viewport = context.viewport;\n    const scrollDirection = isHorizontal ? 'scrollLeft' : 'scrollTop';\n\n    if (viewport) {\n      let prevScrollPos = viewport[scrollDirection];\n      const handleScroll = () => {\n        const scrollPos = viewport[scrollDirection];\n        const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;\n        if (hasScrollInDirectionChanged) {\n          send('SCROLL');\n          debounceScrollEnd();\n        }\n        prevScrollPos = scrollPos;\n      };\n      viewport.addEventListener('scroll', handleScroll);\n      return () => viewport.removeEventListener('scroll', handleScroll);\n    }\n  }, [context.viewport, isHorizontal, send, debounceScrollEnd]);\n\n  return (\n    <Presence present={forceMount || state !== 'hidden'}>\n      <ScrollAreaScrollbarVisible\n        data-state={state === 'hidden' ? 'hidden' : 'visible'}\n        {...scrollbarProps}\n        ref={forwardedRef}\n        onPointerEnter={composeEventHandlers(props.onPointerEnter, () => send('POINTER_ENTER'))}\n        onPointerLeave={composeEventHandlers(props.onPointerLeave, () => send('POINTER_LEAVE'))}\n      />\n    </Presence>\n  );\n});\n\ntype ScrollAreaScrollbarAutoElement = ScrollAreaScrollbarVisibleElement;\ninterface ScrollAreaScrollbarAutoProps extends ScrollAreaScrollbarVisibleProps {\n  forceMount?: true;\n}\n\nconst ScrollAreaScrollbarAuto = React.forwardRef<\n  ScrollAreaScrollbarAutoElement,\n  ScrollAreaScrollbarAutoProps\n>((props: ScopedProps<ScrollAreaScrollbarAutoProps>, forwardedRef) => {\n  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n  const { forceMount, ...scrollbarProps } = props;\n  const [visible, setVisible] = React.useState(false);\n  const isHorizontal = props.orientation === 'horizontal';\n  const handleResize = useDebounceCallback(() => {\n    if (context.viewport) {\n      const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;\n      const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;\n      setVisible(isHorizontal ? isOverflowX : isOverflowY);\n    }\n  }, 10);\n\n  useResizeObserver(context.viewport, handleResize);\n  useResizeObserver(context.content, handleResize);\n\n  return (\n    <Presence present={forceMount || visible}>\n      <ScrollAreaScrollbarVisible\n        data-state={visible ? 'visible' : 'hidden'}\n        {...scrollbarProps}\n        ref={forwardedRef}\n      />\n    </Presence>\n  );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollAreaScrollbarVisibleElement = ScrollAreaScrollbarAxisElement;\ninterface ScrollAreaScrollbarVisibleProps\n  extends Omit<ScrollAreaScrollbarAxisProps, keyof ScrollAreaScrollbarAxisPrivateProps> {\n  orientation?: 'horizontal' | 'vertical';\n}\n\nconst ScrollAreaScrollbarVisible = React.forwardRef<\n  ScrollAreaScrollbarVisibleElement,\n  ScrollAreaScrollbarVisibleProps\n>((props: ScopedProps<ScrollAreaScrollbarVisibleProps>, forwardedRef) => {\n  const { orientation = 'vertical', ...scrollbarProps } = props;\n  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n  const thumbRef = React.useRef<ScrollAreaThumbElement | null>(null);\n  const pointerOffsetRef = React.useRef(0);\n  const [sizes, setSizes] = React.useState<Sizes>({\n    content: 0,\n    viewport: 0,\n    scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n  });\n  const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);\n\n  type UncommonProps = 'onThumbPositionChange' | 'onDragScroll' | 'onWheelScroll';\n  const commonProps: Omit<ScrollAreaScrollbarAxisPrivateProps, UncommonProps> = {\n    ...scrollbarProps,\n    sizes,\n    onSizesChange: setSizes,\n    hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),\n    onThumbChange: (thumb) => (thumbRef.current = thumb),\n    onThumbPointerUp: () => (pointerOffsetRef.current = 0),\n    onThumbPointerDown: (pointerPos) => (pointerOffsetRef.current = pointerPos),\n  };\n\n  function getScrollPosition(pointerPos: number, dir?: Direction) {\n    return getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);\n  }\n\n  if (orientation === 'horizontal') {\n    return (\n      <ScrollAreaScrollbarX\n        {...commonProps}\n        ref={forwardedRef}\n        onThumbPositionChange={() => {\n          if (context.viewport && thumbRef.current) {\n            const scrollPos = context.viewport.scrollLeft;\n            const offset = getThumbOffsetFromScroll(scrollPos, sizes, context.dir);\n            thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;\n          }\n        }}\n        onWheelScroll={(scrollPos) => {\n          if (context.viewport) context.viewport.scrollLeft = scrollPos;\n        }}\n        onDragScroll={(pointerPos) => {\n          if (context.viewport) {\n            context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);\n          }\n        }}\n      />\n    );\n  }\n\n  if (orientation === 'vertical') {\n    return (\n      <ScrollAreaScrollbarY\n        {...commonProps}\n        ref={forwardedRef}\n        onThumbPositionChange={() => {\n          if (context.viewport && thumbRef.current) {\n            const scrollPos = context.viewport.scrollTop;\n            const offset = getThumbOffsetFromScroll(scrollPos, sizes);\n            thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;\n          }\n        }}\n        onWheelScroll={(scrollPos) => {\n          if (context.viewport) context.viewport.scrollTop = scrollPos;\n        }}\n        onDragScroll={(pointerPos) => {\n          if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);\n        }}\n      />\n    );\n  }\n\n  return null;\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollAreaScrollbarAxisPrivateProps = {\n  hasThumb: boolean;\n  sizes: Sizes;\n  onSizesChange(sizes: Sizes): void;\n  onThumbChange(thumb: ScrollAreaThumbElement | null): void;\n  onThumbPointerDown(pointerPos: number): void;\n  onThumbPointerUp(): void;\n  onThumbPositionChange(): void;\n  onWheelScroll(scrollPos: number): void;\n  onDragScroll(pointerPos: number): void;\n};\n\ntype ScrollAreaScrollbarAxisElement = ScrollAreaScrollbarImplElement;\ninterface ScrollAreaScrollbarAxisProps\n  extends Omit<ScrollAreaScrollbarImplProps, keyof ScrollAreaScrollbarImplPrivateProps>,\n    ScrollAreaScrollbarAxisPrivateProps {}\n\nconst ScrollAreaScrollbarX = React.forwardRef<\n  ScrollAreaScrollbarAxisElement,\n  ScrollAreaScrollbarAxisProps\n>((props: ScopedProps<ScrollAreaScrollbarAxisProps>, forwardedRef) => {\n  const { sizes, onSizesChange, ...scrollbarProps } = props;\n  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n  const [computedStyle, setComputedStyle] = React.useState<CSSStyleDeclaration>();\n  const ref = React.useRef<ScrollAreaScrollbarAxisElement>(null);\n  const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);\n\n  React.useEffect(() => {\n    if (ref.current) setComputedStyle(getComputedStyle(ref.current));\n  }, [ref]);\n\n  return (\n    <ScrollAreaScrollbarImpl\n      data-orientation=\"horizontal\"\n      {...scrollbarProps}\n      ref={composeRefs}\n      sizes={sizes}\n      style={{\n        bottom: 0,\n        left: context.dir === 'rtl' ? 'var(--radix-scroll-area-corner-width)' : 0,\n        right: context.dir === 'ltr' ? 'var(--radix-scroll-area-corner-width)' : 0,\n        ['--radix-scroll-area-thumb-width' as any]: getThumbSize(sizes) + 'px',\n        ...props.style,\n      }}\n      onThumbPointerDown={(pointerPos) => props.onThumbPointerDown(pointerPos.x)}\n      onDragScroll={(pointerPos) => props.onDragScroll(pointerPos.x)}\n      onWheelScroll={(event, maxScrollPos) => {\n        if (context.viewport) {\n          const scrollPos = context.viewport.scrollLeft + event.deltaX;\n          props.onWheelScroll(scrollPos);\n          // prevent window scroll when wheeling on scrollbar\n          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {\n            event.preventDefault();\n          }\n        }\n      }}\n      onResize={() => {\n        if (ref.current && context.viewport && computedStyle) {\n          onSizesChange({\n            content: context.viewport.scrollWidth,\n            viewport: context.viewport.offsetWidth,\n            scrollbar: {\n              size: ref.current.clientWidth,\n              paddingStart: toInt(computedStyle.paddingLeft),\n              paddingEnd: toInt(computedStyle.paddingRight),\n            },\n          });\n        }\n      }}\n    />\n  );\n});\n\nconst ScrollAreaScrollbarY = React.forwardRef<\n  ScrollAreaScrollbarAxisElement,\n  ScrollAreaScrollbarAxisProps\n>((props: ScopedProps<ScrollAreaScrollbarAxisProps>, forwardedRef) => {\n  const { sizes, onSizesChange, ...scrollbarProps } = props;\n  const context = useScrollAreaContext(SCROLLBAR_NAME, props.__scopeScrollArea);\n  const [computedStyle, setComputedStyle] = React.useState<CSSStyleDeclaration>();\n  const ref = React.useRef<ScrollAreaScrollbarAxisElement>(null);\n  const composeRefs = useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);\n\n  React.useEffect(() => {\n    if (ref.current) setComputedStyle(getComputedStyle(ref.current));\n  }, [ref]);\n\n  return (\n    <ScrollAreaScrollbarImpl\n      data-orientation=\"vertical\"\n      {...scrollbarProps}\n      ref={composeRefs}\n      sizes={sizes}\n      style={{\n        top: 0,\n        right: context.dir === 'ltr' ? 0 : undefined,\n        left: context.dir === 'rtl' ? 0 : undefined,\n        bottom: 'var(--radix-scroll-area-corner-height)',\n        ['--radix-scroll-area-thumb-height' as any]: getThumbSize(sizes) + 'px',\n        ...props.style,\n      }}\n      onThumbPointerDown={(pointerPos) => props.onThumbPointerDown(pointerPos.y)}\n      onDragScroll={(pointerPos) => props.onDragScroll(pointerPos.y)}\n      onWheelScroll={(event, maxScrollPos) => {\n        if (context.viewport) {\n          const scrollPos = context.viewport.scrollTop + event.deltaY;\n          props.onWheelScroll(scrollPos);\n          // prevent window scroll when wheeling on scrollbar\n          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {\n            event.preventDefault();\n          }\n        }\n      }}\n      onResize={() => {\n        if (ref.current && context.viewport && computedStyle) {\n          onSizesChange({\n            content: context.viewport.scrollHeight,\n            viewport: context.viewport.offsetHeight,\n            scrollbar: {\n              size: ref.current.clientHeight,\n              paddingStart: toInt(computedStyle.paddingTop),\n              paddingEnd: toInt(computedStyle.paddingBottom),\n            },\n          });\n        }\n      }}\n    />\n  );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollbarContext = {\n  hasThumb: boolean;\n  scrollbar: ScrollAreaScrollbarElement | null;\n  onThumbChange(thumb: ScrollAreaThumbElement | null): void;\n  onThumbPointerUp(): void;\n  onThumbPointerDown(pointerPos: { x: number; y: number }): void;\n  onThumbPositionChange(): void;\n};\n\nconst [ScrollbarProvider, useScrollbarContext] =\n  createScrollAreaContext<ScrollbarContext>(SCROLLBAR_NAME);\n\ntype ScrollAreaScrollbarImplElement = React.ComponentRef<typeof Primitive.div>;\ntype ScrollAreaScrollbarImplPrivateProps = {\n  sizes: Sizes;\n  hasThumb: boolean;\n  onThumbChange: ScrollbarContext['onThumbChange'];\n  onThumbPointerUp: ScrollbarContext['onThumbPointerUp'];\n  onThumbPointerDown: ScrollbarContext['onThumbPointerDown'];\n  onThumbPositionChange: ScrollbarContext['onThumbPositionChange'];\n  onWheelScroll(event: WheelEvent, maxScrollPos: number): void;\n  onDragScroll(pointerPos: { x: number; y: number }): void;\n  onResize(): void;\n};\ninterface ScrollAreaScrollbarImplProps\n  extends Omit<PrimitiveDivProps, keyof ScrollAreaScrollbarImplPrivateProps>,\n    ScrollAreaScrollbarImplPrivateProps {}\n\nconst ScrollAreaScrollbarImpl = React.forwardRef<\n  ScrollAreaScrollbarImplElement,\n  ScrollAreaScrollbarImplProps\n>((props: ScopedProps<ScrollAreaScrollbarImplProps>, forwardedRef) => {\n  const {\n    __scopeScrollArea,\n    sizes,\n    hasThumb,\n    onThumbChange,\n    onThumbPointerUp,\n    onThumbPointerDown,\n    onThumbPositionChange,\n    onDragScroll,\n    onWheelScroll,\n    onResize,\n    ...scrollbarProps\n  } = props;\n  const context = useScrollAreaContext(SCROLLBAR_NAME, __scopeScrollArea);\n  const [scrollbar, setScrollbar] = React.useState<ScrollAreaScrollbarElement | null>(null);\n  const composeRefs = useComposedRefs(forwardedRef, (node) => setScrollbar(node));\n  const rectRef = React.useRef<DOMRect | null>(null);\n  const prevWebkitUserSelectRef = React.useRef<string>('');\n  const viewport = context.viewport;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const handleWheelScroll = useCallbackRef(onWheelScroll);\n  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n  const handleResize = useDebounceCallback(onResize, 10);\n\n  function handleDragScroll(event: React.PointerEvent<HTMLElement>) {\n    if (rectRef.current) {\n      const x = event.clientX - rectRef.current.left;\n      const y = event.clientY - rectRef.current.top;\n      onDragScroll({ x, y });\n    }\n  }\n\n  /**\n   * We bind wheel event imperatively so we can switch off passive\n   * mode for document wheel event to allow it to be prevented\n   */\n  React.useEffect(() => {\n    const handleWheel = (event: WheelEvent) => {\n      const element = event.target as HTMLElement;\n      const isScrollbarWheel = scrollbar?.contains(element);\n      if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);\n    };\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);\n\n  /**\n   * Update thumb position on sizes change\n   */\n  React.useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);\n\n  useResizeObserver(scrollbar, handleResize);\n  useResizeObserver(context.content, handleResize);\n\n  return (\n    <ScrollbarProvider\n      scope={__scopeScrollArea}\n      scrollbar={scrollbar}\n      hasThumb={hasThumb}\n      onThumbChange={useCallbackRef(onThumbChange)}\n      onThumbPointerUp={useCallbackRef(onThumbPointerUp)}\n      onThumbPositionChange={handleThumbPositionChange}\n      onThumbPointerDown={useCallbackRef(onThumbPointerDown)}\n    >\n      <Primitive.div\n        {...scrollbarProps}\n        ref={composeRefs}\n        style={{ position: 'absolute', ...scrollbarProps.style }}\n        onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n          const mainPointer = 0;\n          if (event.button === mainPointer) {\n            const element = event.target as HTMLElement;\n            element.setPointerCapture(event.pointerId);\n            rectRef.current = scrollbar!.getBoundingClientRect();\n            // pointer capture doesn't prevent text selection in Safari\n            // so we remove text selection manually when scrolling\n            prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;\n            document.body.style.webkitUserSelect = 'none';\n            if (context.viewport) context.viewport.style.scrollBehavior = 'auto';\n            handleDragScroll(event);\n          }\n        })}\n        onPointerMove={composeEventHandlers(props.onPointerMove, handleDragScroll)}\n        onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n          const element = event.target as HTMLElement;\n          if (element.hasPointerCapture(event.pointerId)) {\n            element.releasePointerCapture(event.pointerId);\n          }\n          document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n          if (context.viewport) context.viewport.style.scrollBehavior = '';\n          rectRef.current = null;\n        })}\n      />\n    </ScrollbarProvider>\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * ScrollAreaThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'ScrollAreaThumb';\n\ntype ScrollAreaThumbElement = ScrollAreaThumbImplElement;\ninterface ScrollAreaThumbProps extends ScrollAreaThumbImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst ScrollAreaThumb = React.forwardRef<ScrollAreaThumbElement, ScrollAreaThumbProps>(\n  (props: ScopedProps<ScrollAreaThumbProps>, forwardedRef) => {\n    const { forceMount, ...thumbProps } = props;\n    const scrollbarContext = useScrollbarContext(THUMB_NAME, props.__scopeScrollArea);\n    return (\n      <Presence present={forceMount || scrollbarContext.hasThumb}>\n        <ScrollAreaThumbImpl ref={forwardedRef} {...thumbProps} />\n      </Presence>\n    );\n  },\n);\n\ntype ScrollAreaThumbImplElement = React.ComponentRef<typeof Primitive.div>;\ninterface ScrollAreaThumbImplProps extends PrimitiveDivProps {}\n\nconst ScrollAreaThumbImpl = React.forwardRef<ScrollAreaThumbImplElement, ScrollAreaThumbImplProps>(\n  (props: ScopedProps<ScrollAreaThumbImplProps>, forwardedRef) => {\n    const { __scopeScrollArea, style, ...thumbProps } = props;\n    const scrollAreaContext = useScrollAreaContext(THUMB_NAME, __scopeScrollArea);\n    const scrollbarContext = useScrollbarContext(THUMB_NAME, __scopeScrollArea);\n    const { onThumbPositionChange } = scrollbarContext;\n    const composedRef = useComposedRefs(forwardedRef, (node) =>\n      scrollbarContext.onThumbChange(node),\n    );\n    const removeUnlinkedScrollListenerRef = React.useRef<() => void>(undefined);\n    const debounceScrollEnd = useDebounceCallback(() => {\n      if (removeUnlinkedScrollListenerRef.current) {\n        removeUnlinkedScrollListenerRef.current();\n        removeUnlinkedScrollListenerRef.current = undefined;\n      }\n    }, 100);\n\n    React.useEffect(() => {\n      const viewport = scrollAreaContext.viewport;\n      if (viewport) {\n        /**\n         * We only bind to native scroll event so we know when scroll starts and ends.\n         * When scroll starts we start a requestAnimationFrame loop that checks for\n         * changes to scroll position. That rAF loop triggers our thumb position change\n         * when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.\n         * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\n         */\n        const handleScroll = () => {\n          debounceScrollEnd();\n          if (!removeUnlinkedScrollListenerRef.current) {\n            const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);\n            removeUnlinkedScrollListenerRef.current = listener;\n            onThumbPositionChange();\n          }\n        };\n        onThumbPositionChange();\n        viewport.addEventListener('scroll', handleScroll);\n        return () => viewport.removeEventListener('scroll', handleScroll);\n      }\n    }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);\n\n    return (\n      <Primitive.div\n        data-state={scrollbarContext.hasThumb ? 'visible' : 'hidden'}\n        {...thumbProps}\n        ref={composedRef}\n        style={{\n          width: 'var(--radix-scroll-area-thumb-width)',\n          height: 'var(--radix-scroll-area-thumb-height)',\n          ...style,\n        }}\n        onPointerDownCapture={composeEventHandlers(props.onPointerDownCapture, (event) => {\n          const thumb = event.target as HTMLElement;\n          const thumbRect = thumb.getBoundingClientRect();\n          const x = event.clientX - thumbRect.left;\n          const y = event.clientY - thumbRect.top;\n          scrollbarContext.onThumbPointerDown({ x, y });\n        })}\n        onPointerUp={composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)}\n      />\n    );\n  },\n);\n\nScrollAreaThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ScrollAreaCorner\n * -----------------------------------------------------------------------------------------------*/\n\nconst CORNER_NAME = 'ScrollAreaCorner';\n\ntype ScrollAreaCornerElement = ScrollAreaCornerImplElement;\ninterface ScrollAreaCornerProps extends ScrollAreaCornerImplProps {}\n\nconst ScrollAreaCorner = React.forwardRef<ScrollAreaCornerElement, ScrollAreaCornerProps>(\n  (props: ScopedProps<ScrollAreaCornerProps>, forwardedRef) => {\n    const context = useScrollAreaContext(CORNER_NAME, props.__scopeScrollArea);\n    const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);\n    const hasCorner = context.type !== 'scroll' && hasBothScrollbarsVisible;\n    return hasCorner ? <ScrollAreaCornerImpl {...props} ref={forwardedRef} /> : null;\n  },\n);\n\nScrollAreaCorner.displayName = CORNER_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ScrollAreaCornerImplElement = React.ComponentRef<typeof Primitive.div>;\ninterface ScrollAreaCornerImplProps extends PrimitiveDivProps {}\n\nconst ScrollAreaCornerImpl = React.forwardRef<\n  ScrollAreaCornerImplElement,\n  ScrollAreaCornerImplProps\n>((props: ScopedProps<ScrollAreaCornerImplProps>, forwardedRef) => {\n  const { __scopeScrollArea, ...cornerProps } = props;\n  const context = useScrollAreaContext(CORNER_NAME, __scopeScrollArea);\n  const [width, setWidth] = React.useState(0);\n  const [height, setHeight] = React.useState(0);\n  const hasSize = Boolean(width && height);\n\n  useResizeObserver(context.scrollbarX, () => {\n    const height = context.scrollbarX?.offsetHeight || 0;\n    context.onCornerHeightChange(height);\n    setHeight(height);\n  });\n\n  useResizeObserver(context.scrollbarY, () => {\n    const width = context.scrollbarY?.offsetWidth || 0;\n    context.onCornerWidthChange(width);\n    setWidth(width);\n  });\n\n  return hasSize ? (\n    <Primitive.div\n      {...cornerProps}\n      ref={forwardedRef}\n      style={{\n        width,\n        height,\n        position: 'absolute',\n        right: context.dir === 'ltr' ? 0 : undefined,\n        left: context.dir === 'rtl' ? 0 : undefined,\n        bottom: 0,\n        ...props.style,\n      }}\n    />\n  ) : null;\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction toInt(value?: string) {\n  return value ? parseInt(value, 10) : 0;\n}\n\nfunction getThumbRatio(viewportSize: number, contentSize: number) {\n  const ratio = viewportSize / contentSize;\n  return isNaN(ratio) ? 0 : ratio;\n}\n\nfunction getThumbSize(sizes: Sizes) {\n  const ratio = getThumbRatio(sizes.viewport, sizes.content);\n  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;\n  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;\n  // minimum of 18 matches macOS minimum\n  return Math.max(thumbSize, 18);\n}\n\nfunction getScrollPositionFromPointer(\n  pointerPos: number,\n  pointerOffset: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes);\n  const thumbCenter = thumbSizePx / 2;\n  const offset = pointerOffset || thumbCenter;\n  const thumbOffsetFromEnd = thumbSizePx - offset;\n  const minPointerPos = sizes.scrollbar.paddingStart + offset;\n  const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const scrollRange = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0];\n  const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange as [number, number]);\n  return interpolate(pointerPos);\n}\n\nfunction getThumbOffsetFromScroll(scrollPos: number, sizes: Sizes, dir: Direction = 'ltr') {\n  const thumbSizePx = getThumbSize(sizes);\n  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;\n  const scrollbar = sizes.scrollbar.size - scrollbarPadding;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const maxThumbPos = scrollbar - thumbSizePx;\n  const scrollClampRange = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0];\n  const scrollWithoutMomentum = clamp(scrollPos, scrollClampRange as [number, number]);\n  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);\n  return interpolate(scrollWithoutMomentum);\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1]) return output[0];\n    const ratio = (output[1] - output[0]) / (input[1] - input[0]);\n    return output[0] + ratio * (value - input[0]);\n  };\n}\n\nfunction isScrollingWithinScrollbarBounds(scrollPos: number, maxScrollPos: number) {\n  return scrollPos > 0 && scrollPos < maxScrollPos;\n}\n\n// Custom scroll handler to avoid scroll-linked effects\n// https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\nconst addUnlinkedScrollListener = (node: HTMLElement, handler = () => {}) => {\n  let prevPosition = { left: node.scrollLeft, top: node.scrollTop };\n  let rAF = 0;\n  (function loop() {\n    const position = { left: node.scrollLeft, top: node.scrollTop };\n    const isHorizontalScroll = prevPosition.left !== position.left;\n    const isVerticalScroll = prevPosition.top !== position.top;\n    if (isHorizontalScroll || isVerticalScroll) handler();\n    prevPosition = position;\n    rAF = window.requestAnimationFrame(loop);\n  })();\n  return () => window.cancelAnimationFrame(rAF);\n};\n\nfunction useDebounceCallback(callback: () => void, delay: number) {\n  const handleCallback = useCallbackRef(callback);\n  const debounceTimerRef = React.useRef(0);\n  React.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n  return React.useCallback(() => {\n    window.clearTimeout(debounceTimerRef.current);\n    debounceTimerRef.current = window.setTimeout(handleCallback, delay);\n  }, [handleCallback, delay]);\n}\n\nfunction useResizeObserver(element: HTMLElement | null, onResize: () => void) {\n  const handleResize = useCallbackRef(onResize);\n  useLayoutEffect(() => {\n    let rAF = 0;\n    if (element) {\n      /**\n       * Resize Observer will throw an often benign error that says `ResizeObserver loop\n       * completed with undelivered notifications`. This means that ResizeObserver was not\n       * able to deliver all observations within a single animation frame, so we use\n       * `requestAnimationFrame` to ensure we don't deliver unnecessary observations.\n       * Further reading: https://github.com/WICG/resize-observer/issues/38\n       */\n      const resizeObserver = new ResizeObserver(() => {\n        cancelAnimationFrame(rAF);\n        rAF = window.requestAnimationFrame(handleResize);\n      });\n      resizeObserver.observe(element);\n      return () => {\n        window.cancelAnimationFrame(rAF);\n        resizeObserver.unobserve(element);\n      };\n    }\n  }, [element, handleResize]);\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = ScrollArea;\nconst Viewport = ScrollAreaViewport;\nconst Scrollbar = ScrollAreaScrollbar;\nconst Thumb = ScrollAreaThumb;\nconst Corner = ScrollAreaCorner;\n\nexport {\n  createScrollAreaScope,\n  //\n  ScrollArea,\n  ScrollAreaViewport,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaCorner,\n  //\n  Root,\n  Viewport,\n  Scrollbar,\n  Thumb,\n  Corner,\n};\nexport type {\n  ScrollAreaProps,\n  ScrollAreaViewportProps,\n  ScrollAreaScrollbarProps,\n  ScrollAreaThumbProps,\n  ScrollAreaCornerProps,\n};\n"
  },
  {
    "path": "packages/react/scroll-area/src/use-state-machine.ts",
    "content": "import * as React from 'react';\n\ntype Machine<S> = { [k: string]: { [k: string]: S } };\ntype MachineState<T> = keyof T;\ntype MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>;\n\n// 🤯 https://fettblog.eu/typescript-union-to-intersection/\ntype UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any\n  ? R\n  : never;\n\nexport function useStateMachine<M>(\n  initialState: MachineState<M>,\n  machine: M & Machine<MachineState<M>>,\n) {\n  return React.useReducer((state: MachineState<M>, event: MachineEvent<M>): MachineState<M> => {\n    const nextState = (machine[state] as any)[event];\n    return nextState ?? state;\n  }, initialState);\n}\n"
  },
  {
    "path": "packages/react/scroll-area/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/select/CHANGELOG.md",
    "content": "# @radix-ui/react-select\n\n## 2.2.6\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.4`, `@radix-ui/react-popper@1.2.8`, `@radix-ui/react-focus-guards@1.1.3`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-dismissable-layer@1.1.11`, `@radix-ui/react-focus-scope@1.1.8`, `@radix-ui/react-portal@1.1.10`, `@radix-ui/react-visually-hidden@1.2.4`\n\n## 2.2.5\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-visually-hidden@1.2.3`, `@radix-ui/react-focus-scope@1.1.7`, `@radix-ui/react-popper@1.2.7`, `@radix-ui/react-portal@1.1.9`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 2.2.4\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@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-focus-scope@1.1.6`, `@radix-ui/react-popper@1.2.6`, `@radix-ui/react-portal@1.1.8`, `@radix-ui/react-visually-hidden@1.2.2`\n\n## 2.2.3\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@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-focus-scope@1.1.5`, `@radix-ui/react-popper@1.2.5`, `@radix-ui/react-portal@1.1.7`, `@radix-ui/react-visually-hidden@1.2.1`\n\n## 2.2.2\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 2.2.1\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 2.2.0\n\n- 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.\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`, `@radix-ui/react-focus-scope@1.1.4`, `@radix-ui/react-popper@1.2.4`, `@radix-ui/react-portal@1.1.6`\n"
  },
  {
    "path": "packages/react/select/README.md",
    "content": "# `react-select`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/select).\n"
  },
  {
    "path": "packages/react/select/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/select/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-select\",\n  \"version\": \"2.2.6\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/number\": \"workspace:*\",\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-focus-guards\": \"workspace:*\",\n    \"@radix-ui/react-focus-scope\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-popper\": \"workspace:*\",\n    \"@radix-ui/react-portal\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-slot\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\",\n    \"@radix-ui/react-use-previous\": \"workspace:*\",\n    \"@radix-ui/react-visually-hidden\": \"workspace:*\",\n    \"aria-hidden\": \"^1.2.4\",\n    \"react-remove-scroll\": \"^2.6.3\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/test-data\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/select/src/index.ts",
    "content": "'use client';\nexport {\n  createSelectScope,\n  //\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectGroup,\n  SelectLabel,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n  SelectSeparator,\n  SelectArrow,\n  //\n  Root,\n  Trigger,\n  Value,\n  Icon,\n  Portal,\n  Content,\n  Viewport,\n  Group,\n  Label,\n  Item,\n  ItemText,\n  ItemIndicator,\n  ScrollUpButton,\n  ScrollDownButton,\n  Separator,\n  Arrow,\n} from './select';\nexport type {\n  SelectProps,\n  SelectTriggerProps,\n  SelectValueProps,\n  SelectIconProps,\n  SelectPortalProps,\n  SelectContentProps,\n  SelectViewportProps,\n  SelectGroupProps,\n  SelectLabelProps,\n  SelectItemProps,\n  SelectItemTextProps,\n  SelectItemIndicatorProps,\n  SelectScrollUpButtonProps,\n  SelectScrollDownButtonProps,\n  SelectSeparatorProps,\n  SelectArrowProps,\n} from './select';\n"
  },
  {
    "path": "packages/react/select/src/select.tsx",
    "content": "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { useId } from '@radix-ui/react-id';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createSlot } from '@radix-ui/react-slot';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { VISUALLY_HIDDEN_STYLES } from '@radix-ui/react-visually-hidden';\nimport { hideOthers } from 'aria-hidden';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst OPEN_KEYS = [' ', 'Enter', 'ArrowUp', 'ArrowDown'];\nconst SELECTION_KEYS = [' ', 'Enter'];\n\n/* -------------------------------------------------------------------------------------------------\n * Select\n * -----------------------------------------------------------------------------------------------*/\n\nconst SELECT_NAME = 'Select';\n\ntype ItemData = { value: string; disabled: boolean; textValue: string };\nconst [Collection, useCollection, createCollectionScope] = createCollection<\n  SelectItemElement,\n  ItemData\n>(SELECT_NAME);\n\ntype ScopedProps<P> = P & { __scopeSelect?: Scope };\nconst [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [\n  createCollectionScope,\n  createPopperScope,\n]);\nconst usePopperScope = createPopperScope();\n\ntype SelectContextValue = {\n  trigger: SelectTriggerElement | null;\n  onTriggerChange(node: SelectTriggerElement | null): void;\n  valueNode: SelectValueElement | null;\n  onValueNodeChange(node: SelectValueElement): void;\n  valueNodeHasChildren: boolean;\n  onValueNodeHasChildrenChange(hasChildren: boolean): void;\n  contentId: string;\n  value: string | undefined;\n  onValueChange(value: string): void;\n  open: boolean;\n  required?: boolean;\n  onOpenChange(open: boolean): void;\n  dir: SelectProps['dir'];\n  triggerPointerDownPosRef: React.MutableRefObject<{ x: number; y: number } | null>;\n  disabled?: boolean;\n};\n\nconst [SelectProvider, useSelectContext] = createSelectContext<SelectContextValue>(SELECT_NAME);\n\ntype NativeOption = React.ReactElement<React.ComponentProps<'option'>>;\n\ntype SelectNativeOptionsContextValue = {\n  onNativeOptionAdd(option: NativeOption): void;\n  onNativeOptionRemove(option: NativeOption): void;\n};\nconst [SelectNativeOptionsProvider, useSelectNativeOptionsContext] =\n  createSelectContext<SelectNativeOptionsContextValue>(SELECT_NAME);\n\ninterface ControlledClearableSelectProps {\n  value: string | undefined;\n  defaultValue?: never;\n  onValueChange: (value: string | undefined) => void;\n}\n\ninterface ControlledUnclearableSelectProps {\n  value: string;\n  defaultValue?: never;\n  onValueChange: (value: string) => void;\n}\n\ninterface UncontrolledSelectProps {\n  value?: never;\n  defaultValue?: string;\n  onValueChange?: {\n    (value: string): void;\n    (value: string | undefined): void;\n  };\n}\n\ntype SelectControlProps =\n  | ControlledClearableSelectProps\n  | ControlledUnclearableSelectProps\n  | UncontrolledSelectProps;\n\ninterface SelectSharedProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n  dir?: Direction;\n  name?: string;\n  autoComplete?: string;\n  disabled?: boolean;\n  required?: boolean;\n  form?: string;\n}\n\n// TODO: Should improve typing somewhat, but this would be a breaking change.\n// Consider using in the next major version (along with some testing to be sure\n// it works as expected and doesn't cause problems)\ntype _FutureSelectProps = SelectSharedProps & SelectControlProps;\n\ntype SelectProps = SelectSharedProps & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?(value: string): void;\n};\n\nconst Select: React.FC<SelectProps> = (props: ScopedProps<SelectProps>) => {\n  const {\n    __scopeSelect,\n    children,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    dir,\n    name,\n    autoComplete,\n    disabled,\n    required,\n    form,\n  } = props;\n  const popperScope = usePopperScope(__scopeSelect);\n  const [trigger, setTrigger] = React.useState<SelectTriggerElement | null>(null);\n  const [valueNode, setValueNode] = React.useState<SelectValueElement | null>(null);\n  const [valueNodeHasChildren, setValueNodeHasChildren] = React.useState(false);\n  const direction = useDirection(dir);\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: onOpenChange,\n    caller: SELECT_NAME,\n  });\n  const [value, setValue] = useControllableState({\n    prop: valueProp,\n    defaultProp: defaultValue,\n    onChange: onValueChange as any,\n    caller: SELECT_NAME,\n  });\n  const triggerPointerDownPosRef = React.useRef<{ x: number; y: number } | null>(null);\n\n  // We set this to true by default so that events bubble to forms without JS (SSR)\n  const isFormControl = trigger ? form || !!trigger.closest('form') : true;\n  const [nativeOptionsSet, setNativeOptionsSet] = React.useState(new Set<NativeOption>());\n\n  // The native `select` only associates the correct default value if the corresponding\n  // `option` is rendered as a child **at the same time** as itself.\n  // Because it might take a few renders for our items to gather the information to build\n  // the native `option`(s), we generate a key on the `select` to make sure React re-builds it\n  // each time the options change.\n  const nativeSelectKey = Array.from(nativeOptionsSet)\n    .map((option) => option.props.value)\n    .join(';');\n\n  return (\n    <PopperPrimitive.Root {...popperScope}>\n      <SelectProvider\n        required={required}\n        scope={__scopeSelect}\n        trigger={trigger}\n        onTriggerChange={setTrigger}\n        valueNode={valueNode}\n        onValueNodeChange={setValueNode}\n        valueNodeHasChildren={valueNodeHasChildren}\n        onValueNodeHasChildrenChange={setValueNodeHasChildren}\n        contentId={useId()}\n        value={value}\n        onValueChange={setValue}\n        open={open}\n        onOpenChange={setOpen}\n        dir={direction}\n        triggerPointerDownPosRef={triggerPointerDownPosRef}\n        disabled={disabled}\n      >\n        <Collection.Provider scope={__scopeSelect}>\n          <SelectNativeOptionsProvider\n            scope={props.__scopeSelect}\n            onNativeOptionAdd={React.useCallback((option) => {\n              setNativeOptionsSet((prev) => new Set(prev).add(option));\n            }, [])}\n            onNativeOptionRemove={React.useCallback((option) => {\n              setNativeOptionsSet((prev) => {\n                const optionsSet = new Set(prev);\n                optionsSet.delete(option);\n                return optionsSet;\n              });\n            }, [])}\n          >\n            {children}\n          </SelectNativeOptionsProvider>\n        </Collection.Provider>\n\n        {isFormControl ? (\n          <SelectBubbleInput\n            key={nativeSelectKey}\n            aria-hidden\n            required={required}\n            tabIndex={-1}\n            name={name}\n            autoComplete={autoComplete}\n            value={value}\n            // enable form autofill\n            onChange={(event) => setValue(event.target.value)}\n            disabled={disabled}\n            form={form}\n          >\n            {value === undefined ? <option value=\"\" /> : null}\n            {Array.from(nativeOptionsSet)}\n          </SelectBubbleInput>\n        ) : null}\n      </SelectProvider>\n    </PopperPrimitive.Root>\n  );\n};\n\nSelect.displayName = SELECT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'SelectTrigger';\n\ntype SelectTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface SelectTriggerProps extends PrimitiveButtonProps {}\n\nconst SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(\n  (props: ScopedProps<SelectTriggerProps>, forwardedRef) => {\n    const { __scopeSelect, disabled = false, ...triggerProps } = props;\n    const popperScope = usePopperScope(__scopeSelect);\n    const context = useSelectContext(TRIGGER_NAME, __scopeSelect);\n    const isDisabled = context.disabled || disabled;\n    const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);\n    const getItems = useCollection(__scopeSelect);\n    const pointerTypeRef = React.useRef<React.PointerEvent['pointerType']>('touch');\n\n    const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {\n      const enabledItems = getItems().filter((item) => !item.disabled);\n      const currentItem = enabledItems.find((item) => item.value === context.value);\n      const nextItem = findNextItem(enabledItems, search, currentItem);\n      if (nextItem !== undefined) {\n        context.onValueChange(nextItem.value);\n      }\n    });\n\n    const handleOpen = (pointerEvent?: React.MouseEvent | React.PointerEvent) => {\n      if (!isDisabled) {\n        context.onOpenChange(true);\n        // reset typeahead when we open\n        resetTypeahead();\n      }\n\n      if (pointerEvent) {\n        context.triggerPointerDownPosRef.current = {\n          x: Math.round(pointerEvent.pageX),\n          y: Math.round(pointerEvent.pageY),\n        };\n      }\n    };\n\n    return (\n      <PopperPrimitive.Anchor asChild {...popperScope}>\n        <Primitive.button\n          type=\"button\"\n          role=\"combobox\"\n          aria-controls={context.contentId}\n          aria-expanded={context.open}\n          aria-required={context.required}\n          aria-autocomplete=\"none\"\n          dir={context.dir}\n          data-state={context.open ? 'open' : 'closed'}\n          disabled={isDisabled}\n          data-disabled={isDisabled ? '' : undefined}\n          data-placeholder={shouldShowPlaceholder(context.value) ? '' : undefined}\n          {...triggerProps}\n          ref={composedRefs}\n          // Enable compatibility with native label or custom `Label` \"click\" for Safari:\n          onClick={composeEventHandlers(triggerProps.onClick, (event) => {\n            // Whilst browsers generally have no issue focusing the trigger when clicking\n            // on a label, Safari seems to struggle with the fact that there's no `onClick`.\n            // We force `focus` in this case. Note: this doesn't create any other side-effect\n            // because we are preventing default in `onPointerDown` so effectively\n            // this only runs for a label \"click\"\n            event.currentTarget.focus();\n\n            // Open on click when using a touch or pen device\n            if (pointerTypeRef.current !== 'mouse') {\n              handleOpen(event);\n            }\n          })}\n          onPointerDown={composeEventHandlers(triggerProps.onPointerDown, (event) => {\n            pointerTypeRef.current = event.pointerType;\n\n            // prevent implicit pointer capture\n            // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture\n            const target = event.target as HTMLElement;\n            if (target.hasPointerCapture(event.pointerId)) {\n              target.releasePointerCapture(event.pointerId);\n            }\n\n            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n            // but not when the control key is pressed (avoiding MacOS right click); also not for touch\n            // devices because that would open the menu on scroll. (pen devices behave as touch on iOS).\n            if (event.button === 0 && event.ctrlKey === false && event.pointerType === 'mouse') {\n              handleOpen(event);\n              // prevent trigger from stealing focus from the active item after opening.\n              event.preventDefault();\n            }\n          })}\n          onKeyDown={composeEventHandlers(triggerProps.onKeyDown, (event) => {\n            const isTypingAhead = searchRef.current !== '';\n            const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n            if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);\n            if (isTypingAhead && event.key === ' ') return;\n            if (OPEN_KEYS.includes(event.key)) {\n              handleOpen();\n              event.preventDefault();\n            }\n          })}\n        />\n      </PopperPrimitive.Anchor>\n    );\n  },\n);\n\nSelectTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectValue\n * -----------------------------------------------------------------------------------------------*/\n\nconst VALUE_NAME = 'SelectValue';\n\ntype SelectValueElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SelectValueProps extends Omit<PrimitiveSpanProps, 'placeholder'> {\n  placeholder?: React.ReactNode;\n}\n\nconst SelectValue = React.forwardRef<SelectValueElement, SelectValueProps>(\n  (props: ScopedProps<SelectValueProps>, forwardedRef) => {\n    // We ignore `className` and `style` as this part shouldn't be styled.\n    const { __scopeSelect, className, style, children, placeholder = '', ...valueProps } = props;\n    const context = useSelectContext(VALUE_NAME, __scopeSelect);\n    const { onValueNodeHasChildrenChange } = context;\n    const hasChildren = children !== undefined;\n    const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);\n\n    useLayoutEffect(() => {\n      onValueNodeHasChildrenChange(hasChildren);\n    }, [onValueNodeHasChildrenChange, hasChildren]);\n\n    return (\n      <Primitive.span\n        {...valueProps}\n        ref={composedRefs}\n        // we don't want events from the portalled `SelectValue` children to bubble\n        // through the item they came from\n        style={{ pointerEvents: 'none' }}\n      >\n        {shouldShowPlaceholder(context.value) ? <>{placeholder}</> : children}\n      </Primitive.span>\n    );\n  },\n);\n\nSelectValue.displayName = VALUE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectIcon\n * -----------------------------------------------------------------------------------------------*/\n\nconst ICON_NAME = 'SelectIcon';\n\ntype SelectIconElement = React.ComponentRef<typeof Primitive.span>;\ninterface SelectIconProps extends PrimitiveSpanProps {}\n\nconst SelectIcon = React.forwardRef<SelectIconElement, SelectIconProps>(\n  (props: ScopedProps<SelectIconProps>, forwardedRef) => {\n    const { __scopeSelect, children, ...iconProps } = props;\n    return (\n      <Primitive.span aria-hidden {...iconProps} ref={forwardedRef}>\n        {children || '▼'}\n      </Primitive.span>\n    );\n  },\n);\n\nSelectIcon.displayName = ICON_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'SelectPortal';\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface SelectPortalProps {\n  children?: React.ReactNode;\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: PortalProps['container'];\n}\n\nconst SelectPortal: React.FC<SelectPortalProps> = (props: ScopedProps<SelectPortalProps>) => {\n  return <PortalPrimitive asChild {...props} />;\n};\n\nSelectPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'SelectContent';\n\ntype SelectContentElement = SelectContentImplElement;\ninterface SelectContentProps extends SelectContentImplProps {}\n\nconst SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(\n  (props: ScopedProps<SelectContentProps>, forwardedRef) => {\n    const context = useSelectContext(CONTENT_NAME, props.__scopeSelect);\n    const [fragment, setFragment] = React.useState<DocumentFragment>();\n\n    // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server\n    useLayoutEffect(() => {\n      setFragment(new DocumentFragment());\n    }, []);\n\n    if (!context.open) {\n      const frag = fragment as Element | undefined;\n      return frag\n        ? ReactDOM.createPortal(\n            <SelectContentProvider scope={props.__scopeSelect}>\n              <Collection.Slot scope={props.__scopeSelect}>\n                <div>{props.children}</div>\n              </Collection.Slot>\n            </SelectContentProvider>,\n            frag,\n          )\n        : null;\n    }\n\n    return <SelectContentImpl {...props} ref={forwardedRef} />;\n  },\n);\n\nSelectContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectContentImpl\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_MARGIN = 10;\n\ntype SelectContentContextValue = {\n  content?: SelectContentElement | null;\n  viewport?: SelectViewportElement | null;\n  onViewportChange?: (node: SelectViewportElement | null) => void;\n  itemRefCallback?: (node: SelectItemElement | null, value: string, disabled: boolean) => void;\n  selectedItem?: SelectItemElement | null;\n  onItemLeave?: () => void;\n  itemTextRefCallback?: (\n    node: SelectItemTextElement | null,\n    value: string,\n    disabled: boolean,\n  ) => void;\n  focusSelectedItem?: () => void;\n  selectedItemText?: SelectItemTextElement | null;\n  position?: SelectContentProps['position'];\n  isPositioned?: boolean;\n  searchRef?: React.RefObject<string>;\n};\n\nconst [SelectContentProvider, useSelectContentContext] =\n  createSelectContext<SelectContentContextValue>(CONTENT_NAME);\n\nconst CONTENT_IMPL_NAME = 'SelectContentImpl';\n\ntype SelectContentImplElement = SelectPopperPositionElement | SelectItemAlignedPositionElement;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;\ntype FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;\n\ntype SelectPopperPrivateProps = { onPlaced?: PopperContentProps['onPlaced'] };\n\ninterface SelectContentImplProps\n  extends Omit<SelectPopperPositionProps, keyof SelectPopperPrivateProps>,\n    Omit<SelectItemAlignedPositionProps, keyof SelectPopperPrivateProps> {\n  /**\n   * Event handler called when auto-focusing on close.\n   * Can be prevented.\n   */\n  onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n  /**\n   * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];\n\n  position?: 'item-aligned' | 'popper';\n}\n\nconst Slot = createSlot('SelectContent.RemoveScroll');\n\nconst SelectContentImpl = React.forwardRef<SelectContentImplElement, SelectContentImplProps>(\n  (props: ScopedProps<SelectContentImplProps>, forwardedRef) => {\n    const {\n      __scopeSelect,\n      position = 'item-aligned',\n      onCloseAutoFocus,\n      onEscapeKeyDown,\n      onPointerDownOutside,\n      //\n      // PopperContent props\n      side,\n      sideOffset,\n      align,\n      alignOffset,\n      arrowPadding,\n      collisionBoundary,\n      collisionPadding,\n      sticky,\n      hideWhenDetached,\n      avoidCollisions,\n      //\n      ...contentProps\n    } = props;\n    const context = useSelectContext(CONTENT_NAME, __scopeSelect);\n    const [content, setContent] = React.useState<SelectContentImplElement | null>(null);\n    const [viewport, setViewport] = React.useState<SelectViewportElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n    const [selectedItem, setSelectedItem] = React.useState<SelectItemElement | null>(null);\n    const [selectedItemText, setSelectedItemText] = React.useState<SelectItemTextElement | null>(\n      null,\n    );\n    const getItems = useCollection(__scopeSelect);\n    const [isPositioned, setIsPositioned] = React.useState(false);\n    const firstValidItemFoundRef = React.useRef(false);\n\n    // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n    React.useEffect(() => {\n      if (content) return hideOthers(content);\n    }, [content]);\n\n    // Make sure the whole tree has focus guards as our `Select` may be\n    // the last element in the DOM (because of the `Portal`)\n    useFocusGuards();\n\n    const focusFirst = React.useCallback(\n      (candidates: Array<HTMLElement | null>) => {\n        const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);\n        const [lastItem] = restItems.slice(-1);\n\n        const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;\n        for (const candidate of candidates) {\n          // if focus is already where we want to go, we don't want to keep going through the candidates\n          if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;\n          candidate?.scrollIntoView({ block: 'nearest' });\n          // viewport might have padding so scroll to its edges when focusing first/last items.\n          if (candidate === firstItem && viewport) viewport.scrollTop = 0;\n          if (candidate === lastItem && viewport) viewport.scrollTop = viewport.scrollHeight;\n          candidate?.focus();\n          if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;\n        }\n      },\n      [getItems, viewport],\n    );\n\n    const focusSelectedItem = React.useCallback(\n      () => focusFirst([selectedItem, content]),\n      [focusFirst, selectedItem, content],\n    );\n\n    // Since this is not dependent on layout, we want to ensure this runs at the same time as\n    // other effects across components. Hence why we don't call `focusSelectedItem` inside `position`.\n    React.useEffect(() => {\n      if (isPositioned) {\n        focusSelectedItem();\n      }\n    }, [isPositioned, focusSelectedItem]);\n\n    // prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n    // and close on `pointerup` outside.\n    const { onOpenChange, triggerPointerDownPosRef } = context;\n    React.useEffect(() => {\n      if (content) {\n        let pointerMoveDelta = { x: 0, y: 0 };\n\n        const handlePointerMove = (event: PointerEvent) => {\n          pointerMoveDelta = {\n            x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.current?.x ?? 0)),\n            y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.current?.y ?? 0)),\n          };\n        };\n        const handlePointerUp = (event: PointerEvent) => {\n          // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n          if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n            event.preventDefault();\n          } else {\n            // otherwise, if the event was outside the content, close.\n            if (!content.contains(event.target as HTMLElement)) {\n              onOpenChange(false);\n            }\n          }\n          document.removeEventListener('pointermove', handlePointerMove);\n          triggerPointerDownPosRef.current = null;\n        };\n\n        if (triggerPointerDownPosRef.current !== null) {\n          document.addEventListener('pointermove', handlePointerMove);\n          document.addEventListener('pointerup', handlePointerUp, { capture: true, once: true });\n        }\n\n        return () => {\n          document.removeEventListener('pointermove', handlePointerMove);\n          document.removeEventListener('pointerup', handlePointerUp, { capture: true });\n        };\n      }\n    }, [content, onOpenChange, triggerPointerDownPosRef]);\n\n    React.useEffect(() => {\n      const close = () => onOpenChange(false);\n      window.addEventListener('blur', close);\n      window.addEventListener('resize', close);\n      return () => {\n        window.removeEventListener('blur', close);\n        window.removeEventListener('resize', close);\n      };\n    }, [onOpenChange]);\n\n    const [searchRef, handleTypeaheadSearch] = useTypeaheadSearch((search) => {\n      const enabledItems = getItems().filter((item) => !item.disabled);\n      const currentItem = enabledItems.find((item) => item.ref.current === document.activeElement);\n      const nextItem = findNextItem(enabledItems, search, currentItem);\n      if (nextItem) {\n        /**\n         * Imperative focus during keydown is risky so we prevent React's batching updates\n         * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n         */\n        setTimeout(() => (nextItem.ref.current as HTMLElement).focus());\n      }\n    });\n\n    const itemRefCallback = React.useCallback(\n      (node: SelectItemElement | null, value: string, disabled: boolean) => {\n        const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;\n        const isSelectedItem = context.value !== undefined && context.value === value;\n        if (isSelectedItem || isFirstValidItem) {\n          setSelectedItem(node);\n          if (isFirstValidItem) firstValidItemFoundRef.current = true;\n        }\n      },\n      [context.value],\n    );\n    const handleItemLeave = React.useCallback(() => content?.focus(), [content]);\n    const itemTextRefCallback = React.useCallback(\n      (node: SelectItemTextElement | null, value: string, disabled: boolean) => {\n        const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;\n        const isSelectedItem = context.value !== undefined && context.value === value;\n        if (isSelectedItem || isFirstValidItem) {\n          setSelectedItemText(node);\n        }\n      },\n      [context.value],\n    );\n\n    const SelectPosition = position === 'popper' ? SelectPopperPosition : SelectItemAlignedPosition;\n\n    // Silently ignore props that are not supported by `SelectItemAlignedPosition`\n    const popperContentProps =\n      SelectPosition === SelectPopperPosition\n        ? {\n            side,\n            sideOffset,\n            align,\n            alignOffset,\n            arrowPadding,\n            collisionBoundary,\n            collisionPadding,\n            sticky,\n            hideWhenDetached,\n            avoidCollisions,\n          }\n        : {};\n\n    return (\n      <SelectContentProvider\n        scope={__scopeSelect}\n        content={content}\n        viewport={viewport}\n        onViewportChange={setViewport}\n        itemRefCallback={itemRefCallback}\n        selectedItem={selectedItem}\n        onItemLeave={handleItemLeave}\n        itemTextRefCallback={itemTextRefCallback}\n        focusSelectedItem={focusSelectedItem}\n        selectedItemText={selectedItemText}\n        position={position}\n        isPositioned={isPositioned}\n        searchRef={searchRef}\n      >\n        <RemoveScroll as={Slot} allowPinchZoom>\n          <FocusScope\n            asChild\n            // we make sure we're not trapping once it's been closed\n            // (closed !== unmounted when animating out)\n            trapped={context.open}\n            onMountAutoFocus={(event) => {\n              // we prevent open autofocus because we manually focus the selected item\n              event.preventDefault();\n            }}\n            onUnmountAutoFocus={composeEventHandlers(onCloseAutoFocus, (event) => {\n              context.trigger?.focus({ preventScroll: true });\n              event.preventDefault();\n            })}\n          >\n            <DismissableLayer\n              asChild\n              disableOutsidePointerEvents\n              onEscapeKeyDown={onEscapeKeyDown}\n              onPointerDownOutside={onPointerDownOutside}\n              // When focus is trapped, a focusout event may still happen.\n              // We make sure we don't trigger our `onDismiss` in such case.\n              onFocusOutside={(event) => event.preventDefault()}\n              onDismiss={() => context.onOpenChange(false)}\n            >\n              <SelectPosition\n                role=\"listbox\"\n                id={context.contentId}\n                data-state={context.open ? 'open' : 'closed'}\n                dir={context.dir}\n                onContextMenu={(event) => event.preventDefault()}\n                {...contentProps}\n                {...popperContentProps}\n                onPlaced={() => setIsPositioned(true)}\n                ref={composedRefs}\n                style={{\n                  // flex layout so we can place the scroll buttons properly\n                  display: 'flex',\n                  flexDirection: 'column',\n                  // reset the outline by default as the content MAY get focused\n                  outline: 'none',\n                  ...contentProps.style,\n                }}\n                onKeyDown={composeEventHandlers(contentProps.onKeyDown, (event) => {\n                  const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;\n\n                  // select should not be navigated using tab key so we prevent it\n                  if (event.key === 'Tab') event.preventDefault();\n\n                  if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);\n\n                  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n                    const items = getItems().filter((item) => !item.disabled);\n                    let candidateNodes = items.map((item) => item.ref.current!);\n\n                    if (['ArrowUp', 'End'].includes(event.key)) {\n                      candidateNodes = candidateNodes.slice().reverse();\n                    }\n                    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n                      const currentElement = event.target as SelectItemElement;\n                      const currentIndex = candidateNodes.indexOf(currentElement);\n                      candidateNodes = candidateNodes.slice(currentIndex + 1);\n                    }\n\n                    /**\n                     * Imperative focus during keydown is risky so we prevent React's batching updates\n                     * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\n                     */\n                    setTimeout(() => focusFirst(candidateNodes));\n\n                    event.preventDefault();\n                  }\n                })}\n              />\n            </DismissableLayer>\n          </FocusScope>\n        </RemoveScroll>\n      </SelectContentProvider>\n    );\n  },\n);\n\nSelectContentImpl.displayName = CONTENT_IMPL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemAlignedPosition\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_ALIGNED_POSITION_NAME = 'SelectItemAlignedPosition';\n\ntype SelectItemAlignedPositionElement = React.ComponentRef<typeof Primitive.div>;\ninterface SelectItemAlignedPositionProps extends PrimitiveDivProps, SelectPopperPrivateProps {}\n\nconst SelectItemAlignedPosition = React.forwardRef<\n  SelectItemAlignedPositionElement,\n  SelectItemAlignedPositionProps\n>((props: ScopedProps<SelectItemAlignedPositionProps>, forwardedRef) => {\n  const { __scopeSelect, onPlaced, ...popperProps } = props;\n  const context = useSelectContext(CONTENT_NAME, __scopeSelect);\n  const contentContext = useSelectContentContext(CONTENT_NAME, __scopeSelect);\n  const [contentWrapper, setContentWrapper] = React.useState<HTMLDivElement | null>(null);\n  const [content, setContent] = React.useState<SelectItemAlignedPositionElement | null>(null);\n  const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));\n  const getItems = useCollection(__scopeSelect);\n  const shouldExpandOnScrollRef = React.useRef(false);\n  const shouldRepositionRef = React.useRef(true);\n\n  const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;\n  const position = React.useCallback(() => {\n    if (\n      context.trigger &&\n      context.valueNode &&\n      contentWrapper &&\n      content &&\n      viewport &&\n      selectedItem &&\n      selectedItemText\n    ) {\n      const triggerRect = context.trigger.getBoundingClientRect();\n\n      // -----------------------------------------------------------------------------------------\n      //  Horizontal positioning\n      // -----------------------------------------------------------------------------------------\n      const contentRect = content.getBoundingClientRect();\n      const valueNodeRect = context.valueNode.getBoundingClientRect();\n      const itemTextRect = selectedItemText.getBoundingClientRect();\n\n      if (context.dir !== 'rtl') {\n        const itemTextOffset = itemTextRect.left - contentRect.left;\n        const left = valueNodeRect.left - itemTextOffset;\n        const leftDelta = triggerRect.left - left;\n        const minContentWidth = triggerRect.width + leftDelta;\n        const contentWidth = Math.max(minContentWidth, contentRect.width);\n        const rightEdge = window.innerWidth - CONTENT_MARGIN;\n        const clampedLeft = clamp(left, [\n          CONTENT_MARGIN,\n          // Prevents the content from going off the starting edge of the\n          // viewport. It may still go off the ending edge, but this can be\n          // controlled by the user since they may want to manage overflow in a\n          // specific way.\n          // https://github.com/radix-ui/primitives/issues/2049\n          Math.max(CONTENT_MARGIN, rightEdge - contentWidth),\n        ]);\n\n        contentWrapper.style.minWidth = minContentWidth + 'px';\n        contentWrapper.style.left = clampedLeft + 'px';\n      } else {\n        const itemTextOffset = contentRect.right - itemTextRect.right;\n        const right = window.innerWidth - valueNodeRect.right - itemTextOffset;\n        const rightDelta = window.innerWidth - triggerRect.right - right;\n        const minContentWidth = triggerRect.width + rightDelta;\n        const contentWidth = Math.max(minContentWidth, contentRect.width);\n        const leftEdge = window.innerWidth - CONTENT_MARGIN;\n        const clampedRight = clamp(right, [\n          CONTENT_MARGIN,\n          Math.max(CONTENT_MARGIN, leftEdge - contentWidth),\n        ]);\n\n        contentWrapper.style.minWidth = minContentWidth + 'px';\n        contentWrapper.style.right = clampedRight + 'px';\n      }\n\n      // -----------------------------------------------------------------------------------------\n      // Vertical positioning\n      // -----------------------------------------------------------------------------------------\n      const items = getItems();\n      const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;\n      const itemsHeight = viewport.scrollHeight;\n\n      const contentStyles = window.getComputedStyle(content);\n      const contentBorderTopWidth = parseInt(contentStyles.borderTopWidth, 10);\n      const contentPaddingTop = parseInt(contentStyles.paddingTop, 10);\n      const contentBorderBottomWidth = parseInt(contentStyles.borderBottomWidth, 10);\n      const contentPaddingBottom = parseInt(contentStyles.paddingBottom, 10);\n      const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth; // prettier-ignore\n      const minContentHeight = Math.min(selectedItem.offsetHeight * 5, fullContentHeight);\n\n      const viewportStyles = window.getComputedStyle(viewport);\n      const viewportPaddingTop = parseInt(viewportStyles.paddingTop, 10);\n      const viewportPaddingBottom = parseInt(viewportStyles.paddingBottom, 10);\n\n      const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;\n      const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;\n\n      const selectedItemHalfHeight = selectedItem.offsetHeight / 2;\n      const itemOffsetMiddle = selectedItem.offsetTop + selectedItemHalfHeight;\n      const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;\n      const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;\n\n      const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;\n\n      if (willAlignWithoutTopOverflow) {\n        const isLastItem =\n          items.length > 0 && selectedItem === items[items.length - 1]!.ref.current;\n        contentWrapper.style.bottom = 0 + 'px';\n        const viewportOffsetBottom =\n          content.clientHeight - viewport.offsetTop - viewport.offsetHeight;\n        const clampedTriggerMiddleToBottomEdge = Math.max(\n          triggerMiddleToBottomEdge,\n          selectedItemHalfHeight +\n            // viewport might have padding bottom, include it to avoid a scrollable viewport\n            (isLastItem ? viewportPaddingBottom : 0) +\n            viewportOffsetBottom +\n            contentBorderBottomWidth,\n        );\n        const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;\n        contentWrapper.style.height = height + 'px';\n      } else {\n        const isFirstItem = items.length > 0 && selectedItem === items[0]!.ref.current;\n        contentWrapper.style.top = 0 + 'px';\n        const clampedTopEdgeToTriggerMiddle = Math.max(\n          topEdgeToTriggerMiddle,\n          contentBorderTopWidth +\n            viewport.offsetTop +\n            // viewport might have padding top, include it to avoid a scrollable viewport\n            (isFirstItem ? viewportPaddingTop : 0) +\n            selectedItemHalfHeight,\n        );\n        const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;\n        contentWrapper.style.height = height + 'px';\n        viewport.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.offsetTop;\n      }\n\n      contentWrapper.style.margin = `${CONTENT_MARGIN}px 0`;\n      contentWrapper.style.minHeight = minContentHeight + 'px';\n      contentWrapper.style.maxHeight = availableHeight + 'px';\n      // -----------------------------------------------------------------------------------------\n\n      onPlaced?.();\n\n      // we don't want the initial scroll position adjustment to trigger \"expand on scroll\"\n      // so we explicitly turn it on only after they've registered.\n      requestAnimationFrame(() => (shouldExpandOnScrollRef.current = true));\n    }\n  }, [\n    getItems,\n    context.trigger,\n    context.valueNode,\n    contentWrapper,\n    content,\n    viewport,\n    selectedItem,\n    selectedItemText,\n    context.dir,\n    onPlaced,\n  ]);\n\n  useLayoutEffect(() => position(), [position]);\n\n  // copy z-index from content to wrapper\n  const [contentZIndex, setContentZIndex] = React.useState<string>();\n  useLayoutEffect(() => {\n    if (content) setContentZIndex(window.getComputedStyle(content).zIndex);\n  }, [content]);\n\n  // When the viewport becomes scrollable at the top, the scroll up button will mount.\n  // Because it is part of the normal flow, it will push down the viewport, thus throwing our\n  // trigger => selectedItem alignment off by the amount the viewport was pushed down.\n  // We wait for this to happen and then re-run the positining logic one more time to account for it.\n  const handleScrollButtonChange = React.useCallback(\n    (node: SelectScrollButtonImplElement | null) => {\n      if (node && shouldRepositionRef.current === true) {\n        position();\n        focusSelectedItem?.();\n        shouldRepositionRef.current = false;\n      }\n    },\n    [position, focusSelectedItem],\n  );\n\n  return (\n    <SelectViewportProvider\n      scope={__scopeSelect}\n      contentWrapper={contentWrapper}\n      shouldExpandOnScrollRef={shouldExpandOnScrollRef}\n      onScrollButtonChange={handleScrollButtonChange}\n    >\n      <div\n        ref={setContentWrapper}\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          position: 'fixed',\n          zIndex: contentZIndex,\n        }}\n      >\n        <Primitive.div\n          {...popperProps}\n          ref={composedRefs}\n          style={{\n            // When we get the height of the content, it includes borders. If we were to set\n            // the height without having `boxSizing: 'border-box'` it would be too big.\n            boxSizing: 'border-box',\n            // We need to ensure the content doesn't get taller than the wrapper\n            maxHeight: '100%',\n            ...popperProps.style,\n          }}\n        />\n      </div>\n    </SelectViewportProvider>\n  );\n});\n\nSelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectPopperPosition\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_POSITION_NAME = 'SelectPopperPosition';\n\ntype SelectPopperPositionElement = React.ComponentRef<typeof PopperPrimitive.Content>;\ntype PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;\ninterface SelectPopperPositionProps extends PopperContentProps, SelectPopperPrivateProps {}\n\nconst SelectPopperPosition = React.forwardRef<\n  SelectPopperPositionElement,\n  SelectPopperPositionProps\n>((props: ScopedProps<SelectPopperPositionProps>, forwardedRef) => {\n  const {\n    __scopeSelect,\n    align = 'start',\n    collisionPadding = CONTENT_MARGIN,\n    ...popperProps\n  } = props;\n  const popperScope = usePopperScope(__scopeSelect);\n\n  return (\n    <PopperPrimitive.Content\n      {...popperScope}\n      {...popperProps}\n      ref={forwardedRef}\n      align={align}\n      collisionPadding={collisionPadding}\n      style={{\n        // Ensure border-box for floating-ui calculations\n        boxSizing: 'border-box',\n        ...popperProps.style,\n        // re-namespace exposed content custom properties\n        ...{\n          '--radix-select-content-transform-origin': 'var(--radix-popper-transform-origin)',\n          '--radix-select-content-available-width': 'var(--radix-popper-available-width)',\n          '--radix-select-content-available-height': 'var(--radix-popper-available-height)',\n          '--radix-select-trigger-width': 'var(--radix-popper-anchor-width)',\n          '--radix-select-trigger-height': 'var(--radix-popper-anchor-height)',\n        },\n      }}\n    />\n  );\n});\n\nSelectPopperPosition.displayName = POPPER_POSITION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectViewport\n * -----------------------------------------------------------------------------------------------*/\n\ntype SelectViewportContextValue = {\n  contentWrapper?: HTMLDivElement | null;\n  shouldExpandOnScrollRef?: React.RefObject<boolean>;\n  onScrollButtonChange?: (node: SelectScrollButtonImplElement | null) => void;\n};\n\nconst [SelectViewportProvider, useSelectViewportContext] =\n  createSelectContext<SelectViewportContextValue>(CONTENT_NAME, {});\n\nconst VIEWPORT_NAME = 'SelectViewport';\n\ntype SelectViewportElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface SelectViewportProps extends PrimitiveDivProps {\n  nonce?: string;\n}\n\nconst SelectViewport = React.forwardRef<SelectViewportElement, SelectViewportProps>(\n  (props: ScopedProps<SelectViewportProps>, forwardedRef) => {\n    const { __scopeSelect, nonce, ...viewportProps } = props;\n    const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);\n    const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);\n    const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);\n    const prevScrollTopRef = React.useRef(0);\n    return (\n      <>\n        {/* Hide scrollbars cross-browser and enable momentum scroll for touch devices */}\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`,\n          }}\n          nonce={nonce}\n        />\n        <Collection.Slot scope={__scopeSelect}>\n          <Primitive.div\n            data-radix-select-viewport=\"\"\n            role=\"presentation\"\n            {...viewportProps}\n            ref={composedRefs}\n            style={{\n              // we use position: 'relative' here on the `viewport` so that when we call\n              // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n              // (independent of the scrollUpButton).\n              position: 'relative',\n              flex: 1,\n              // Viewport should only be scrollable in the vertical direction.\n              // This won't work in vertical writing modes, so we'll need to\n              // revisit this if/when that is supported\n              // https://developer.chrome.com/blog/vertical-form-controls\n              overflow: 'hidden auto',\n              ...viewportProps.style,\n            }}\n            onScroll={composeEventHandlers(viewportProps.onScroll, (event) => {\n              const viewport = event.currentTarget;\n              const { contentWrapper, shouldExpandOnScrollRef } = viewportContext;\n              if (shouldExpandOnScrollRef?.current && contentWrapper) {\n                const scrolledBy = Math.abs(prevScrollTopRef.current - viewport.scrollTop);\n                if (scrolledBy > 0) {\n                  const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;\n                  const cssMinHeight = parseFloat(contentWrapper.style.minHeight);\n                  const cssHeight = parseFloat(contentWrapper.style.height);\n                  const prevHeight = Math.max(cssMinHeight, cssHeight);\n\n                  if (prevHeight < availableHeight) {\n                    const nextHeight = prevHeight + scrolledBy;\n                    const clampedNextHeight = Math.min(availableHeight, nextHeight);\n                    const heightDiff = nextHeight - clampedNextHeight;\n\n                    contentWrapper.style.height = clampedNextHeight + 'px';\n                    if (contentWrapper.style.bottom === '0px') {\n                      viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;\n                      // ensure the content stays pinned to the bottom\n                      contentWrapper.style.justifyContent = 'flex-end';\n                    }\n                  }\n                }\n              }\n              prevScrollTopRef.current = viewport.scrollTop;\n            })}\n          />\n        </Collection.Slot>\n      </>\n    );\n  },\n);\n\nSelectViewport.displayName = VIEWPORT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst GROUP_NAME = 'SelectGroup';\n\ntype SelectGroupContextValue = { id: string };\n\nconst [SelectGroupContextProvider, useSelectGroupContext] =\n  createSelectContext<SelectGroupContextValue>(GROUP_NAME);\n\ntype SelectGroupElement = React.ComponentRef<typeof Primitive.div>;\ninterface SelectGroupProps extends PrimitiveDivProps {}\n\nconst SelectGroup = React.forwardRef<SelectGroupElement, SelectGroupProps>(\n  (props: ScopedProps<SelectGroupProps>, forwardedRef) => {\n    const { __scopeSelect, ...groupProps } = props;\n    const groupId = useId();\n    return (\n      <SelectGroupContextProvider scope={__scopeSelect} id={groupId}>\n        <Primitive.div role=\"group\" aria-labelledby={groupId} {...groupProps} ref={forwardedRef} />\n      </SelectGroupContextProvider>\n    );\n  },\n);\n\nSelectGroup.displayName = GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectLabel\n * -----------------------------------------------------------------------------------------------*/\n\nconst LABEL_NAME = 'SelectLabel';\n\ntype SelectLabelElement = React.ComponentRef<typeof Primitive.div>;\ninterface SelectLabelProps extends PrimitiveDivProps {}\n\nconst SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(\n  (props: ScopedProps<SelectLabelProps>, forwardedRef) => {\n    const { __scopeSelect, ...labelProps } = props;\n    const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);\n    return <Primitive.div id={groupContext.id} {...labelProps} ref={forwardedRef} />;\n  },\n);\n\nSelectLabel.displayName = LABEL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'SelectItem';\n\ntype SelectItemContextValue = {\n  value: string;\n  disabled: boolean;\n  textId: string;\n  isSelected: boolean;\n  onItemTextChange(node: SelectItemTextElement | null): void;\n};\n\nconst [SelectItemContextProvider, useSelectItemContext] =\n  createSelectContext<SelectItemContextValue>(ITEM_NAME);\n\ntype SelectItemElement = React.ComponentRef<typeof Primitive.div>;\ninterface SelectItemProps extends PrimitiveDivProps {\n  value: string;\n  disabled?: boolean;\n  textValue?: string;\n}\n\nconst SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>(\n  (props: ScopedProps<SelectItemProps>, forwardedRef) => {\n    const {\n      __scopeSelect,\n      value,\n      disabled = false,\n      textValue: textValueProp,\n      ...itemProps\n    } = props;\n    const context = useSelectContext(ITEM_NAME, __scopeSelect);\n    const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);\n    const isSelected = context.value === value;\n    const [textValue, setTextValue] = React.useState(textValueProp ?? '');\n    const [isFocused, setIsFocused] = React.useState(false);\n    const composedRefs = useComposedRefs(forwardedRef, (node) =>\n      contentContext.itemRefCallback?.(node, value, disabled),\n    );\n    const textId = useId();\n    const pointerTypeRef = React.useRef<React.PointerEvent['pointerType']>('touch');\n\n    const handleSelect = () => {\n      if (!disabled) {\n        context.onValueChange(value);\n        context.onOpenChange(false);\n      }\n    };\n\n    if (value === '') {\n      throw new Error(\n        'A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.',\n      );\n    }\n\n    return (\n      <SelectItemContextProvider\n        scope={__scopeSelect}\n        value={value}\n        disabled={disabled}\n        textId={textId}\n        isSelected={isSelected}\n        onItemTextChange={React.useCallback((node) => {\n          setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? '').trim());\n        }, [])}\n      >\n        <Collection.ItemSlot\n          scope={__scopeSelect}\n          value={value}\n          disabled={disabled}\n          textValue={textValue}\n        >\n          <Primitive.div\n            role=\"option\"\n            aria-labelledby={textId}\n            data-highlighted={isFocused ? '' : undefined}\n            // `isFocused` caveat fixes stuttering in VoiceOver\n            aria-selected={isSelected && isFocused}\n            data-state={isSelected ? 'checked' : 'unchecked'}\n            aria-disabled={disabled || undefined}\n            data-disabled={disabled ? '' : undefined}\n            tabIndex={disabled ? undefined : -1}\n            {...itemProps}\n            ref={composedRefs}\n            onFocus={composeEventHandlers(itemProps.onFocus, () => setIsFocused(true))}\n            onBlur={composeEventHandlers(itemProps.onBlur, () => setIsFocused(false))}\n            onClick={composeEventHandlers(itemProps.onClick, () => {\n              // Open on click when using a touch or pen device\n              if (pointerTypeRef.current !== 'mouse') handleSelect();\n            })}\n            onPointerUp={composeEventHandlers(itemProps.onPointerUp, () => {\n              // Using a mouse you should be able to do pointer down, move through\n              // the list, and release the pointer over the item to select it.\n              if (pointerTypeRef.current === 'mouse') handleSelect();\n            })}\n            onPointerDown={composeEventHandlers(itemProps.onPointerDown, (event) => {\n              pointerTypeRef.current = event.pointerType;\n            })}\n            onPointerMove={composeEventHandlers(itemProps.onPointerMove, (event) => {\n              // Remember pointer type when sliding over to this item from another one\n              pointerTypeRef.current = event.pointerType;\n              if (disabled) {\n                contentContext.onItemLeave?.();\n              } else if (pointerTypeRef.current === 'mouse') {\n                // even though safari doesn't support this option, it's acceptable\n                // as it only means it might scroll a few pixels when using the pointer.\n                event.currentTarget.focus({ preventScroll: true });\n              }\n            })}\n            onPointerLeave={composeEventHandlers(itemProps.onPointerLeave, (event) => {\n              if (event.currentTarget === document.activeElement) {\n                contentContext.onItemLeave?.();\n              }\n            })}\n            onKeyDown={composeEventHandlers(itemProps.onKeyDown, (event) => {\n              const isTypingAhead = contentContext.searchRef?.current !== '';\n              if (isTypingAhead && event.key === ' ') return;\n              if (SELECTION_KEYS.includes(event.key)) handleSelect();\n              // prevent page scroll if using the space key to select an item\n              if (event.key === ' ') event.preventDefault();\n            })}\n          />\n        </Collection.ItemSlot>\n      </SelectItemContextProvider>\n    );\n  },\n);\n\nSelectItem.displayName = ITEM_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemText\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_TEXT_NAME = 'SelectItemText';\n\ntype SelectItemTextElement = React.ComponentRef<typeof Primitive.span>;\ninterface SelectItemTextProps extends PrimitiveSpanProps {}\n\nconst SelectItemText = React.forwardRef<SelectItemTextElement, SelectItemTextProps>(\n  (props: ScopedProps<SelectItemTextProps>, forwardedRef) => {\n    // We ignore `className` and `style` as this part shouldn't be styled.\n    const { __scopeSelect, className, style, ...itemTextProps } = props;\n    const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);\n    const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);\n    const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);\n    const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);\n    const [itemTextNode, setItemTextNode] = React.useState<SelectItemTextElement | null>(null);\n    const composedRefs = useComposedRefs(\n      forwardedRef,\n      (node) => setItemTextNode(node),\n      itemContext.onItemTextChange,\n      (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled),\n    );\n\n    const textContent = itemTextNode?.textContent;\n    const nativeOption = React.useMemo(\n      () => (\n        <option key={itemContext.value} value={itemContext.value} disabled={itemContext.disabled}>\n          {textContent}\n        </option>\n      ),\n      [itemContext.disabled, itemContext.value, textContent],\n    );\n\n    const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;\n    useLayoutEffect(() => {\n      onNativeOptionAdd(nativeOption);\n      return () => onNativeOptionRemove(nativeOption);\n    }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);\n\n    return (\n      <>\n        <Primitive.span id={itemContext.textId} {...itemTextProps} ref={composedRefs} />\n\n        {/* Portal the select item text into the trigger value node */}\n        {itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren\n          ? ReactDOM.createPortal(itemTextProps.children, context.valueNode)\n          : null}\n      </>\n    );\n  },\n);\n\nSelectItemText.displayName = ITEM_TEXT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectItemIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_INDICATOR_NAME = 'SelectItemIndicator';\n\ntype SelectItemIndicatorElement = React.ComponentRef<typeof Primitive.span>;\ninterface SelectItemIndicatorProps extends PrimitiveSpanProps {}\n\nconst SelectItemIndicator = React.forwardRef<SelectItemIndicatorElement, SelectItemIndicatorProps>(\n  (props: ScopedProps<SelectItemIndicatorProps>, forwardedRef) => {\n    const { __scopeSelect, ...itemIndicatorProps } = props;\n    const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);\n    return itemContext.isSelected ? (\n      <Primitive.span aria-hidden {...itemIndicatorProps} ref={forwardedRef} />\n    ) : null;\n  },\n);\n\nSelectItemIndicator.displayName = ITEM_INDICATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollUpButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_UP_BUTTON_NAME = 'SelectScrollUpButton';\n\ntype SelectScrollUpButtonElement = SelectScrollButtonImplElement;\ninterface SelectScrollUpButtonProps extends Omit<SelectScrollButtonImplProps, 'onAutoScroll'> {}\n\nconst SelectScrollUpButton = React.forwardRef<\n  SelectScrollUpButtonElement,\n  SelectScrollUpButtonProps\n>((props: ScopedProps<SelectScrollUpButtonProps>, forwardedRef) => {\n  const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);\n  const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);\n  const [canScrollUp, setCanScrollUp] = React.useState(false);\n  const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);\n\n  useLayoutEffect(() => {\n    if (contentContext.viewport && contentContext.isPositioned) {\n      const viewport = contentContext.viewport;\n      function handleScroll() {\n        const canScrollUp = viewport.scrollTop > 0;\n        setCanScrollUp(canScrollUp);\n      }\n      handleScroll();\n      viewport.addEventListener('scroll', handleScroll);\n      return () => viewport.removeEventListener('scroll', handleScroll);\n    }\n  }, [contentContext.viewport, contentContext.isPositioned]);\n\n  return canScrollUp ? (\n    <SelectScrollButtonImpl\n      {...props}\n      ref={composedRefs}\n      onAutoScroll={() => {\n        const { viewport, selectedItem } = contentContext;\n        if (viewport && selectedItem) {\n          viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;\n        }\n      }}\n    />\n  ) : null;\n});\n\nSelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectScrollDownButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst SCROLL_DOWN_BUTTON_NAME = 'SelectScrollDownButton';\n\ntype SelectScrollDownButtonElement = SelectScrollButtonImplElement;\ninterface SelectScrollDownButtonProps extends Omit<SelectScrollButtonImplProps, 'onAutoScroll'> {}\n\nconst SelectScrollDownButton = React.forwardRef<\n  SelectScrollDownButtonElement,\n  SelectScrollDownButtonProps\n>((props: ScopedProps<SelectScrollDownButtonProps>, forwardedRef) => {\n  const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);\n  const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);\n  const [canScrollDown, setCanScrollDown] = React.useState(false);\n  const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);\n\n  useLayoutEffect(() => {\n    if (contentContext.viewport && contentContext.isPositioned) {\n      const viewport = contentContext.viewport;\n      function handleScroll() {\n        const maxScroll = viewport.scrollHeight - viewport.clientHeight;\n        // we use Math.ceil here because if the UI is zoomed-in\n        // `scrollTop` is not always reported as an integer\n        const canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;\n        setCanScrollDown(canScrollDown);\n      }\n      handleScroll();\n      viewport.addEventListener('scroll', handleScroll);\n      return () => viewport.removeEventListener('scroll', handleScroll);\n    }\n  }, [contentContext.viewport, contentContext.isPositioned]);\n\n  return canScrollDown ? (\n    <SelectScrollButtonImpl\n      {...props}\n      ref={composedRefs}\n      onAutoScroll={() => {\n        const { viewport, selectedItem } = contentContext;\n        if (viewport && selectedItem) {\n          viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;\n        }\n      }}\n    />\n  ) : null;\n});\n\nSelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;\n\ntype SelectScrollButtonImplElement = React.ComponentRef<typeof Primitive.div>;\ninterface SelectScrollButtonImplProps extends PrimitiveDivProps {\n  onAutoScroll(): void;\n}\n\nconst SelectScrollButtonImpl = React.forwardRef<\n  SelectScrollButtonImplElement,\n  SelectScrollButtonImplProps\n>((props: ScopedProps<SelectScrollButtonImplProps>, forwardedRef) => {\n  const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;\n  const contentContext = useSelectContentContext('SelectScrollButton', __scopeSelect);\n  const autoScrollTimerRef = React.useRef<number | null>(null);\n  const getItems = useCollection(__scopeSelect);\n\n  const clearAutoScrollTimer = React.useCallback(() => {\n    if (autoScrollTimerRef.current !== null) {\n      window.clearInterval(autoScrollTimerRef.current);\n      autoScrollTimerRef.current = null;\n    }\n  }, []);\n\n  React.useEffect(() => {\n    return () => clearAutoScrollTimer();\n  }, [clearAutoScrollTimer]);\n\n  // When the viewport becomes scrollable on either side, the relevant scroll button will mount.\n  // Because it is part of the normal flow, it will push down (top button) or shrink (bottom button)\n  // the viewport, potentially causing the active item to now be partially out of view.\n  // We re-run the `scrollIntoView` logic to make sure it stays within the viewport.\n  useLayoutEffect(() => {\n    const activeItem = getItems().find((item) => item.ref.current === document.activeElement);\n    activeItem?.ref.current?.scrollIntoView({ block: 'nearest' });\n  }, [getItems]);\n\n  return (\n    <Primitive.div\n      aria-hidden\n      {...scrollIndicatorProps}\n      ref={forwardedRef}\n      style={{ flexShrink: 0, ...scrollIndicatorProps.style }}\n      onPointerDown={composeEventHandlers(scrollIndicatorProps.onPointerDown, () => {\n        if (autoScrollTimerRef.current === null) {\n          autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);\n        }\n      })}\n      onPointerMove={composeEventHandlers(scrollIndicatorProps.onPointerMove, () => {\n        contentContext.onItemLeave?.();\n        if (autoScrollTimerRef.current === null) {\n          autoScrollTimerRef.current = window.setInterval(onAutoScroll, 50);\n        }\n      })}\n      onPointerLeave={composeEventHandlers(scrollIndicatorProps.onPointerLeave, () => {\n        clearAutoScrollTimer();\n      })}\n    />\n  );\n});\n\n/* -------------------------------------------------------------------------------------------------\n * SelectSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'SelectSeparator';\n\ntype SelectSeparatorElement = React.ComponentRef<typeof Primitive.div>;\ninterface SelectSeparatorProps extends PrimitiveDivProps {}\n\nconst SelectSeparator = React.forwardRef<SelectSeparatorElement, SelectSeparatorProps>(\n  (props: ScopedProps<SelectSeparatorProps>, forwardedRef) => {\n    const { __scopeSelect, ...separatorProps } = props;\n    return <Primitive.div aria-hidden {...separatorProps} ref={forwardedRef} />;\n  },\n);\n\nSelectSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'SelectArrow';\n\ntype SelectArrowElement = React.ComponentRef<typeof PopperPrimitive.Arrow>;\ntype PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;\ninterface SelectArrowProps extends PopperArrowProps {}\n\nconst SelectArrow = React.forwardRef<SelectArrowElement, SelectArrowProps>(\n  (props: ScopedProps<SelectArrowProps>, forwardedRef) => {\n    const { __scopeSelect, ...arrowProps } = props;\n    const popperScope = usePopperScope(__scopeSelect);\n    const context = useSelectContext(ARROW_NAME, __scopeSelect);\n    const contentContext = useSelectContentContext(ARROW_NAME, __scopeSelect);\n    return context.open && contentContext.position === 'popper' ? (\n      <PopperPrimitive.Arrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n    ) : null;\n  },\n);\n\nSelectArrow.displayName = ARROW_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SelectBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'SelectBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.select>;\ninterface SwitchBubbleInputProps extends InputProps {}\n\nconst SelectBubbleInput = React.forwardRef<HTMLSelectElement, SwitchBubbleInputProps>(\n  ({ __scopeSelect, value, ...props }: ScopedProps<SwitchBubbleInputProps>, forwardedRef) => {\n    const ref = React.useRef<HTMLSelectElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref);\n    const prevValue = usePrevious(value);\n\n    // Bubble value change to parents (e.g form change event)\n    React.useEffect(() => {\n      const select = ref.current;\n      if (!select) return;\n\n      const selectProto = window.HTMLSelectElement.prototype;\n      const descriptor = Object.getOwnPropertyDescriptor(\n        selectProto,\n        'value',\n      ) as PropertyDescriptor;\n      const setValue = descriptor.set;\n      if (prevValue !== value && setValue) {\n        const event = new Event('change', { bubbles: true });\n        setValue.call(select, value);\n        select.dispatchEvent(event);\n      }\n    }, [prevValue, value]);\n\n    /**\n     * We purposefully use a `select` here to support form autofill as much as\n     * possible.\n     *\n     * We purposefully do not add the `value` attribute here to allow the value\n     * to be set programmatically and bubble to any parent form `onChange`\n     * event. Adding the `value` will cause React to consider the programmatic\n     * dispatch a duplicate and it will get swallowed.\n     *\n     * We use visually hidden styles rather than `display: \"none\"` because\n     * Safari autofill won't work otherwise.\n     */\n    return (\n      <Primitive.select\n        {...props}\n        style={{ ...VISUALLY_HIDDEN_STYLES, ...props.style }}\n        ref={composedRefs}\n        defaultValue={value}\n      />\n    );\n  },\n);\n\nSelectBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction shouldShowPlaceholder(value?: string) {\n  return value === '' || value === undefined;\n}\n\nfunction useTypeaheadSearch(onSearchChange: (search: string) => void) {\n  const handleSearchChange = useCallbackRef(onSearchChange);\n  const searchRef = React.useRef('');\n  const timerRef = React.useRef(0);\n\n  const handleTypeaheadSearch = React.useCallback(\n    (key: string) => {\n      const search = searchRef.current + key;\n      handleSearchChange(search);\n\n      (function updateSearch(value: string) {\n        searchRef.current = value;\n        window.clearTimeout(timerRef.current);\n        // Reset `searchRef` 1 second after it was last updated\n        if (value !== '') timerRef.current = window.setTimeout(() => updateSearch(''), 1000);\n      })(search);\n    },\n    [handleSearchChange],\n  );\n\n  const resetTypeahead = React.useCallback(() => {\n    searchRef.current = '';\n    window.clearTimeout(timerRef.current);\n  }, []);\n\n  React.useEffect(() => {\n    return () => window.clearTimeout(timerRef.current);\n  }, []);\n\n  return [searchRef, handleTypeaheadSearch, resetTypeahead] as const;\n}\n\n/**\n * This is the \"meat\" of the typeahead matching logic. It takes in a list of items,\n * the search and the current item, and returns the next item (or `undefined`).\n *\n * We normalize the search because if a user has repeatedly pressed a character,\n * we want the exact same behavior as if we only had that one character\n * (ie. cycle through items starting with that character)\n *\n * We also reorder the items by wrapping the array around the current item.\n * This is so we always look forward from the current item, and picking the first\n * item will always be the correct one.\n *\n * Finally, if the normalized search is exactly one character, we exclude the\n * current item from the values because otherwise it would be the first to match always\n * and focus would never move. This is as opposed to the regular case, where we\n * don't want focus to move if the current item still matches.\n */\nfunction findNextItem<T extends { textValue: string }>(\n  items: T[],\n  search: string,\n  currentItem?: T,\n) {\n  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);\n  const normalizedSearch = isRepeated ? search[0]! : search;\n  const currentItemIndex = currentItem ? items.indexOf(currentItem) : -1;\n  let wrappedItems = wrapArray(items, Math.max(currentItemIndex, 0));\n  const excludeCurrentItem = normalizedSearch.length === 1;\n  if (excludeCurrentItem) wrappedItems = wrappedItems.filter((v) => v !== currentItem);\n  const nextItem = wrappedItems.find((item) =>\n    item.textValue.toLowerCase().startsWith(normalizedSearch.toLowerCase()),\n  );\n  return nextItem !== currentItem ? nextItem : undefined;\n}\n\n/**\n * Wraps an array around itself at a given start index\n * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`\n */\nfunction wrapArray<T>(array: T[], startIndex: number) {\n  return array.map<T>((_, index) => array[(startIndex + index) % array.length]!);\n}\n\nconst Root = Select;\nconst Trigger = SelectTrigger;\nconst Value = SelectValue;\nconst Icon = SelectIcon;\nconst Portal = SelectPortal;\nconst Content = SelectContent;\nconst Viewport = SelectViewport;\nconst Group = SelectGroup;\nconst Label = SelectLabel;\nconst Item = SelectItem;\nconst ItemText = SelectItemText;\nconst ItemIndicator = SelectItemIndicator;\nconst ScrollUpButton = SelectScrollUpButton;\nconst ScrollDownButton = SelectScrollDownButton;\nconst Separator = SelectSeparator;\nconst Arrow = SelectArrow;\n\nexport {\n  createSelectScope,\n  //\n  Select,\n  SelectTrigger,\n  SelectValue,\n  SelectIcon,\n  SelectPortal,\n  SelectContent,\n  SelectViewport,\n  SelectGroup,\n  SelectLabel,\n  SelectItem,\n  SelectItemText,\n  SelectItemIndicator,\n  SelectScrollUpButton,\n  SelectScrollDownButton,\n  SelectSeparator,\n  SelectArrow,\n  //\n  Root,\n  Trigger,\n  Value,\n  Icon,\n  Portal,\n  Content,\n  Viewport,\n  Group,\n  Label,\n  Item,\n  ItemText,\n  ItemIndicator,\n  ScrollUpButton,\n  ScrollDownButton,\n  Separator,\n  Arrow,\n};\nexport type {\n  SelectProps,\n  SelectTriggerProps,\n  SelectValueProps,\n  SelectIconProps,\n  SelectPortalProps,\n  SelectContentProps,\n  SelectViewportProps,\n  SelectGroupProps,\n  SelectLabelProps,\n  SelectItemProps,\n  SelectItemTextProps,\n  SelectItemIndicatorProps,\n  SelectScrollUpButtonProps,\n  SelectScrollDownButtonProps,\n  SelectSeparatorProps,\n  SelectArrowProps,\n};\n"
  },
  {
    "path": "packages/react/select/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/separator/CHANGELOG.md",
    "content": "# @radix-ui/react-separator\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/separator/README.md",
    "content": "# `react-separator`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/separator).\n"
  },
  {
    "path": "packages/react/separator/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/separator/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-separator\",\n  \"version\": \"1.1.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-primitive\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/separator/src/index.ts",
    "content": "export {\n  Separator,\n  //\n  Root,\n} from './separator';\nexport type { SeparatorProps } from './separator';\n"
  },
  {
    "path": "packages/react/separator/src/separator.tsx",
    "content": "import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n *  Separator\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Separator';\nconst DEFAULT_ORIENTATION = 'horizontal';\nconst ORIENTATIONS = ['horizontal', 'vertical'] as const;\n\ntype Orientation = (typeof ORIENTATIONS)[number];\ntype SeparatorElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface SeparatorProps extends PrimitiveDivProps {\n  /**\n   * Either `vertical` or `horizontal`. Defaults to `horizontal`.\n   */\n  orientation?: Orientation;\n  /**\n   * Whether or not the component is purely decorative. When true, accessibility-related attributes\n   * are updated so that that the rendered element is removed from the accessibility tree.\n   */\n  decorative?: boolean;\n}\n\nconst Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {\n  const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;\n  const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;\n  // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical\n  const ariaOrientation = orientation === 'vertical' ? orientation : undefined;\n  const semanticProps = decorative\n    ? { role: 'none' }\n    : { 'aria-orientation': ariaOrientation, role: 'separator' };\n\n  return (\n    <Primitive.div\n      data-orientation={orientation}\n      {...semanticProps}\n      {...domProps}\n      ref={forwardedRef}\n    />\n  );\n});\n\nSeparator.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction isValidOrientation(orientation: any): orientation is Orientation {\n  return ORIENTATIONS.includes(orientation);\n}\n\nconst Root = Separator;\n\nexport {\n  Separator,\n  //\n  Root,\n};\nexport type { SeparatorProps };\n"
  },
  {
    "path": "packages/react/separator/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/slider/CHANGELOG.md",
    "content": "# @radix-ui/react-slider\n\n## 1.3.6\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.3.5\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.3.4\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.6`, `@radix-ui/react-primitive@2.1.2`\n\n## 1.3.3\n\n- Updated dependencies: `@radix-ui/react-collection@1.1.5`, `@radix-ui/react-primitive@2.1.1`\n\n## 1.3.2\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.3.1\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.3.0\n\n- 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.\n- 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`\n"
  },
  {
    "path": "packages/react/slider/README.md",
    "content": "# `react-slider`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/slider).\n"
  },
  {
    "path": "packages/react/slider/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/slider/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-slider\",\n  \"version\": \"1.3.6\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/number\": \"workspace:*\",\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\",\n    \"@radix-ui/react-use-previous\": \"workspace:*\",\n    \"@radix-ui/react-use-size\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/slider/src/index.ts",
    "content": "'use client';\nexport {\n  createSliderScope,\n  //\n  Slider,\n  SliderTrack,\n  SliderRange,\n  SliderThumb,\n  //\n  Root,\n  Track,\n  Range,\n  Thumb,\n} from './slider';\nexport type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps } from './slider';\n"
  },
  {
    "path": "packages/react/slider/src/slider.tsx",
    "content": "import * as React from 'react';\nimport { clamp } from '@radix-ui/number';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createCollection } from '@radix-ui/react-collection';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype Direction = 'ltr' | 'rtl';\n\nconst PAGE_KEYS = ['PageUp', 'PageDown'];\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\ntype SlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top';\nconst BACK_KEYS: Record<SlideDirection, string[]> = {\n  'from-left': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-right': ['Home', 'PageDown', 'ArrowDown', 'ArrowRight'],\n  'from-bottom': ['Home', 'PageDown', 'ArrowDown', 'ArrowLeft'],\n  'from-top': ['Home', 'PageDown', 'ArrowUp', 'ArrowLeft'],\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Slider\n * -----------------------------------------------------------------------------------------------*/\n\nconst SLIDER_NAME = 'Slider';\n\nconst [Collection, useCollection, createCollectionScope] =\n  createCollection<SliderThumbElement>(SLIDER_NAME);\n\ntype ScopedProps<P> = P & { __scopeSlider?: Scope };\nconst [createSliderContext, createSliderScope] = createContextScope(SLIDER_NAME, [\n  createCollectionScope,\n]);\n\ntype SliderContextValue = {\n  name: string | undefined;\n  disabled: boolean | undefined;\n  min: number;\n  max: number;\n  values: number[];\n  valueIndexToChangeRef: React.MutableRefObject<number>;\n  thumbs: Set<SliderThumbElement>;\n  orientation: SliderProps['orientation'];\n  form: string | undefined;\n};\n\nconst [SliderProvider, useSliderContext] = createSliderContext<SliderContextValue>(SLIDER_NAME);\n\ntype SliderElement = SliderHorizontalElement | SliderVerticalElement;\ninterface SliderProps\n  extends Omit<\n    SliderHorizontalProps | SliderVerticalProps,\n    keyof SliderOrientationPrivateProps | 'defaultValue'\n  > {\n  name?: string;\n  disabled?: boolean;\n  orientation?: React.AriaAttributes['aria-orientation'];\n  dir?: Direction;\n  min?: number;\n  max?: number;\n  step?: number;\n  minStepsBetweenThumbs?: number;\n  value?: number[];\n  defaultValue?: number[];\n  onValueChange?(value: number[]): void;\n  onValueCommit?(value: number[]): void;\n  inverted?: boolean;\n  form?: string;\n}\n\nconst Slider = React.forwardRef<SliderElement, SliderProps>(\n  (props: ScopedProps<SliderProps>, forwardedRef) => {\n    const {\n      name,\n      min = 0,\n      max = 100,\n      step = 1,\n      orientation = 'horizontal',\n      disabled = false,\n      minStepsBetweenThumbs = 0,\n      defaultValue = [min],\n      value,\n      onValueChange = () => {},\n      onValueCommit = () => {},\n      inverted = false,\n      form,\n      ...sliderProps\n    } = props;\n    const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set());\n    const valueIndexToChangeRef = React.useRef<number>(0);\n    const isHorizontal = orientation === 'horizontal';\n    const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;\n\n    const [values = [], setValues] = useControllableState({\n      prop: value,\n      defaultProp: defaultValue,\n      onChange: (value) => {\n        const thumbs = [...thumbRefs.current];\n        thumbs[valueIndexToChangeRef.current]?.focus();\n        onValueChange(value);\n      },\n    });\n    const valuesBeforeSlideStartRef = React.useRef(values);\n\n    function handleSlideStart(value: number) {\n      const closestIndex = getClosestValueIndex(values, value);\n      updateValues(value, closestIndex);\n    }\n\n    function handleSlideMove(value: number) {\n      updateValues(value, valueIndexToChangeRef.current);\n    }\n\n    function handleSlideEnd() {\n      const prevValue = valuesBeforeSlideStartRef.current[valueIndexToChangeRef.current];\n      const nextValue = values[valueIndexToChangeRef.current];\n      const hasChanged = nextValue !== prevValue;\n      if (hasChanged) onValueCommit(values);\n    }\n\n    function updateValues(value: number, atIndex: number, { commit } = { commit: false }) {\n      const decimalCount = getDecimalCount(step);\n      const snapToStep = roundValue(Math.round((value - min) / step) * step + min, decimalCount);\n      const nextValue = clamp(snapToStep, [min, max]);\n\n      setValues((prevValues = []) => {\n        const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);\n        if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {\n          valueIndexToChangeRef.current = nextValues.indexOf(nextValue);\n          const hasChanged = String(nextValues) !== String(prevValues);\n          if (hasChanged && commit) onValueCommit(nextValues);\n          return hasChanged ? nextValues : prevValues;\n        } else {\n          return prevValues;\n        }\n      });\n    }\n\n    return (\n      <SliderProvider\n        scope={props.__scopeSlider}\n        name={name}\n        disabled={disabled}\n        min={min}\n        max={max}\n        valueIndexToChangeRef={valueIndexToChangeRef}\n        thumbs={thumbRefs.current}\n        values={values}\n        orientation={orientation}\n        form={form}\n      >\n        <Collection.Provider scope={props.__scopeSlider}>\n          <Collection.Slot scope={props.__scopeSlider}>\n            <SliderOrientation\n              aria-disabled={disabled}\n              data-disabled={disabled ? '' : undefined}\n              {...sliderProps}\n              ref={forwardedRef}\n              onPointerDown={composeEventHandlers(sliderProps.onPointerDown, () => {\n                if (!disabled) valuesBeforeSlideStartRef.current = values;\n              })}\n              min={min}\n              max={max}\n              inverted={inverted}\n              onSlideStart={disabled ? undefined : handleSlideStart}\n              onSlideMove={disabled ? undefined : handleSlideMove}\n              onSlideEnd={disabled ? undefined : handleSlideEnd}\n              onHomeKeyDown={() => !disabled && updateValues(min, 0, { commit: true })}\n              onEndKeyDown={() =>\n                !disabled && updateValues(max, values.length - 1, { commit: true })\n              }\n              onStepKeyDown={({ event, direction: stepDirection }) => {\n                if (!disabled) {\n                  const isPageKey = PAGE_KEYS.includes(event.key);\n                  const isSkipKey = isPageKey || (event.shiftKey && ARROW_KEYS.includes(event.key));\n                  const multiplier = isSkipKey ? 10 : 1;\n                  const atIndex = valueIndexToChangeRef.current;\n                  const value = values[atIndex]!;\n                  const stepInDirection = step * multiplier * stepDirection;\n                  updateValues(value + stepInDirection, atIndex, { commit: true });\n                }\n              }}\n            />\n          </Collection.Slot>\n        </Collection.Provider>\n      </SliderProvider>\n    );\n  },\n);\n\nSlider.displayName = SLIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderHorizontal\n * -----------------------------------------------------------------------------------------------*/\n\ntype Side = 'top' | 'right' | 'bottom' | 'left';\n\nconst [SliderOrientationProvider, useSliderOrientationContext] = createSliderContext<{\n  startEdge: Side;\n  endEdge: Side;\n  size: keyof NonNullable<ReturnType<typeof useSize>>;\n  direction: number;\n}>(SLIDER_NAME, {\n  startEdge: 'left',\n  endEdge: 'right',\n  size: 'width',\n  direction: 1,\n});\n\ntype SliderOrientationPrivateProps = {\n  min: number;\n  max: number;\n  inverted: boolean;\n  onSlideStart?(value: number): void;\n  onSlideMove?(value: number): void;\n  onSlideEnd?(): void;\n  onHomeKeyDown(event: React.KeyboardEvent): void;\n  onEndKeyDown(event: React.KeyboardEvent): void;\n  onStepKeyDown(step: { event: React.KeyboardEvent; direction: number }): void;\n};\ninterface SliderOrientationProps\n  extends Omit<SliderImplProps, keyof SliderImplPrivateProps>,\n    SliderOrientationPrivateProps {}\n\ntype SliderHorizontalElement = SliderImplElement;\ninterface SliderHorizontalProps extends SliderOrientationProps {\n  dir?: Direction;\n}\n\nconst SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizontalProps>(\n  (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {\n    const {\n      min,\n      max,\n      dir,\n      inverted,\n      onSlideStart,\n      onSlideMove,\n      onSlideEnd,\n      onStepKeyDown,\n      ...sliderProps\n    } = props;\n    const [slider, setSlider] = React.useState<SliderImplElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setSlider(node));\n    const rectRef = React.useRef<DOMRect>(undefined);\n    const direction = useDirection(dir);\n    const isDirectionLTR = direction === 'ltr';\n    const isSlidingFromLeft = (isDirectionLTR && !inverted) || (!isDirectionLTR && inverted);\n\n    function getValueFromPointer(pointerPosition: number) {\n      const rect = rectRef.current || slider!.getBoundingClientRect();\n      const input: [number, number] = [0, rect.width];\n      const output: [number, number] = isSlidingFromLeft ? [min, max] : [max, min];\n      const value = linearScale(input, output);\n\n      rectRef.current = rect;\n      return value(pointerPosition - rect.left);\n    }\n\n    return (\n      <SliderOrientationProvider\n        scope={props.__scopeSlider}\n        startEdge={isSlidingFromLeft ? 'left' : 'right'}\n        endEdge={isSlidingFromLeft ? 'right' : 'left'}\n        direction={isSlidingFromLeft ? 1 : -1}\n        size=\"width\"\n      >\n        <SliderImpl\n          dir={direction}\n          data-orientation=\"horizontal\"\n          {...sliderProps}\n          ref={composedRefs}\n          style={{\n            ...sliderProps.style,\n            ['--radix-slider-thumb-transform' as any]: 'translateX(-50%)',\n          }}\n          onSlideStart={(event) => {\n            const value = getValueFromPointer(event.clientX);\n            onSlideStart?.(value);\n          }}\n          onSlideMove={(event) => {\n            const value = getValueFromPointer(event.clientX);\n            onSlideMove?.(value);\n          }}\n          onSlideEnd={() => {\n            rectRef.current = undefined;\n            onSlideEnd?.();\n          }}\n          onStepKeyDown={(event) => {\n            const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';\n            const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n            onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n          }}\n        />\n      </SliderOrientationProvider>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderVertical\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderVerticalElement = SliderImplElement;\ninterface SliderVerticalProps extends SliderOrientationProps {}\n\nconst SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(\n  (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {\n    const {\n      min,\n      max,\n      inverted,\n      onSlideStart,\n      onSlideMove,\n      onSlideEnd,\n      onStepKeyDown,\n      ...sliderProps\n    } = props;\n    const sliderRef = React.useRef<SliderImplElement>(null);\n    const ref = useComposedRefs(forwardedRef, sliderRef);\n    const rectRef = React.useRef<DOMRect>(undefined);\n    const isSlidingFromBottom = !inverted;\n\n    function getValueFromPointer(pointerPosition: number) {\n      const rect = rectRef.current || sliderRef.current!.getBoundingClientRect();\n      const input: [number, number] = [0, rect.height];\n      const output: [number, number] = isSlidingFromBottom ? [max, min] : [min, max];\n      const value = linearScale(input, output);\n\n      rectRef.current = rect;\n      return value(pointerPosition - rect.top);\n    }\n\n    return (\n      <SliderOrientationProvider\n        scope={props.__scopeSlider}\n        startEdge={isSlidingFromBottom ? 'bottom' : 'top'}\n        endEdge={isSlidingFromBottom ? 'top' : 'bottom'}\n        size=\"height\"\n        direction={isSlidingFromBottom ? 1 : -1}\n      >\n        <SliderImpl\n          data-orientation=\"vertical\"\n          {...sliderProps}\n          ref={ref}\n          style={{\n            ...sliderProps.style,\n            ['--radix-slider-thumb-transform' as any]: 'translateY(50%)',\n          }}\n          onSlideStart={(event) => {\n            const value = getValueFromPointer(event.clientY);\n            onSlideStart?.(value);\n          }}\n          onSlideMove={(event) => {\n            const value = getValueFromPointer(event.clientY);\n            onSlideMove?.(value);\n          }}\n          onSlideEnd={() => {\n            rectRef.current = undefined;\n            onSlideEnd?.();\n          }}\n          onStepKeyDown={(event) => {\n            const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';\n            const isBackKey = BACK_KEYS[slideDirection].includes(event.key);\n            onStepKeyDown?.({ event, direction: isBackKey ? -1 : 1 });\n          }}\n        />\n      </SliderOrientationProvider>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\ntype SliderImplElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ntype SliderImplPrivateProps = {\n  onSlideStart(event: React.PointerEvent): void;\n  onSlideMove(event: React.PointerEvent): void;\n  onSlideEnd(event: React.PointerEvent): void;\n  onHomeKeyDown(event: React.KeyboardEvent): void;\n  onEndKeyDown(event: React.KeyboardEvent): void;\n  onStepKeyDown(event: React.KeyboardEvent): void;\n};\ninterface SliderImplProps extends PrimitiveDivProps, SliderImplPrivateProps {}\n\nconst SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(\n  (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n    const {\n      __scopeSlider,\n      onSlideStart,\n      onSlideMove,\n      onSlideEnd,\n      onHomeKeyDown,\n      onEndKeyDown,\n      onStepKeyDown,\n      ...sliderProps\n    } = props;\n    const context = useSliderContext(SLIDER_NAME, __scopeSlider);\n\n    return (\n      <Primitive.span\n        {...sliderProps}\n        ref={forwardedRef}\n        onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n          if (event.key === 'Home') {\n            onHomeKeyDown(event);\n            // Prevent scrolling to page start\n            event.preventDefault();\n          } else if (event.key === 'End') {\n            onEndKeyDown(event);\n            // Prevent scrolling to page end\n            event.preventDefault();\n          } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n            onStepKeyDown(event);\n            // Prevent scrolling for directional key presses\n            event.preventDefault();\n          }\n        })}\n        onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n          const target = event.target as HTMLElement;\n          target.setPointerCapture(event.pointerId);\n          // Prevent browser focus behaviour because we focus a thumb manually when values change.\n          event.preventDefault();\n          // Touch devices have a delay before focusing so won't focus if touch immediately moves\n          // away from target (sliding). We want thumb to focus regardless.\n          if (context.thumbs.has(target)) {\n            target.focus();\n          } else {\n            onSlideStart(event);\n          }\n        })}\n        onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) onSlideMove(event);\n        })}\n        onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n          const target = event.target as HTMLElement;\n          if (target.hasPointerCapture(event.pointerId)) {\n            target.releasePointerCapture(event.pointerId);\n            onSlideEnd(event);\n          }\n        })}\n      />\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * SliderTrack\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRACK_NAME = 'SliderTrack';\n\ntype SliderTrackElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SliderTrackProps extends PrimitiveSpanProps {}\n\nconst SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(\n  (props: ScopedProps<SliderTrackProps>, forwardedRef) => {\n    const { __scopeSlider, ...trackProps } = props;\n    const context = useSliderContext(TRACK_NAME, __scopeSlider);\n    return (\n      <Primitive.span\n        data-disabled={context.disabled ? '' : undefined}\n        data-orientation={context.orientation}\n        {...trackProps}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSliderTrack.displayName = TRACK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderRange\n * -----------------------------------------------------------------------------------------------*/\n\nconst RANGE_NAME = 'SliderRange';\n\ntype SliderRangeElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderRangeProps extends PrimitiveSpanProps {}\n\nconst SliderRange = React.forwardRef<SliderRangeElement, SliderRangeProps>(\n  (props: ScopedProps<SliderRangeProps>, forwardedRef) => {\n    const { __scopeSlider, ...rangeProps } = props;\n    const context = useSliderContext(RANGE_NAME, __scopeSlider);\n    const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider);\n    const ref = React.useRef<HTMLSpanElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref);\n    const valuesCount = context.values.length;\n    const percentages = context.values.map((value) =>\n      convertValueToPercentage(value, context.min, context.max),\n    );\n    const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;\n    const offsetEnd = 100 - Math.max(...percentages);\n\n    return (\n      <Primitive.span\n        data-orientation={context.orientation}\n        data-disabled={context.disabled ? '' : undefined}\n        {...rangeProps}\n        ref={composedRefs}\n        style={{\n          ...props.style,\n          [orientation.startEdge]: offsetStart + '%',\n          [orientation.endEdge]: offsetEnd + '%',\n        }}\n      />\n    );\n  },\n);\n\nSliderRange.displayName = RANGE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SliderThumb';\n\ntype SliderThumbElement = SliderThumbImplElement;\ninterface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {}\n\nconst SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(\n  (props: ScopedProps<SliderThumbProps>, forwardedRef) => {\n    const getItems = useCollection(props.__scopeSlider);\n    const [thumb, setThumb] = React.useState<SliderThumbImplElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n    const index = React.useMemo(\n      () => (thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1),\n      [getItems, thumb],\n    );\n    return <SliderThumbImpl {...props} ref={composedRefs} index={index} />;\n  },\n);\n\ntype SliderThumbImplElement = React.ComponentRef<typeof Primitive.span>;\ninterface SliderThumbImplProps extends PrimitiveSpanProps {\n  index: number;\n  name?: string;\n}\n\nconst SliderThumbImpl = React.forwardRef<SliderThumbImplElement, SliderThumbImplProps>(\n  (props: ScopedProps<SliderThumbImplProps>, forwardedRef) => {\n    const { __scopeSlider, index, name, ...thumbProps } = props;\n    const context = useSliderContext(THUMB_NAME, __scopeSlider);\n    const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);\n    const [thumb, setThumb] = React.useState<HTMLSpanElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));\n    // We set this to true by default so that events bubble to forms without JS (SSR)\n    const isFormControl = thumb ? context.form || !!thumb.closest('form') : true;\n    const size = useSize(thumb);\n    // We cast because index could be `-1` which would return undefined\n    const value = context.values[index] as number | undefined;\n    const percent =\n      value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max);\n    const label = getLabel(index, context.values.length);\n    const orientationSize = size?.[orientation.size];\n    const thumbInBoundsOffset = orientationSize\n      ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction)\n      : 0;\n\n    React.useEffect(() => {\n      if (thumb) {\n        context.thumbs.add(thumb);\n        return () => {\n          context.thumbs.delete(thumb);\n        };\n      }\n    }, [thumb, context.thumbs]);\n\n    return (\n      <span\n        style={{\n          transform: 'var(--radix-slider-thumb-transform)',\n          position: 'absolute',\n          [orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,\n        }}\n      >\n        <Collection.ItemSlot scope={props.__scopeSlider}>\n          <Primitive.span\n            role=\"slider\"\n            aria-label={props['aria-label'] || label}\n            aria-valuemin={context.min}\n            aria-valuenow={value}\n            aria-valuemax={context.max}\n            aria-orientation={context.orientation}\n            data-orientation={context.orientation}\n            data-disabled={context.disabled ? '' : undefined}\n            tabIndex={context.disabled ? undefined : 0}\n            {...thumbProps}\n            ref={composedRefs}\n            /**\n             * There will be no value on initial render while we work out the index so we hide thumbs\n             * without a value, otherwise SSR will render them in the wrong position before they\n             * snap into the correct position during hydration which would be visually jarring for\n             * slower connections.\n             */\n            style={value === undefined ? { display: 'none' } : props.style}\n            onFocus={composeEventHandlers(props.onFocus, () => {\n              context.valueIndexToChangeRef.current = index;\n            })}\n          />\n        </Collection.ItemSlot>\n\n        {isFormControl && (\n          <SliderBubbleInput\n            key={index}\n            name={\n              name ??\n              (context.name ? context.name + (context.values.length > 1 ? '[]' : '') : undefined)\n            }\n            form={context.form}\n            value={value}\n          />\n        )}\n      </span>\n    );\n  },\n);\n\nSliderThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SliderBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'RadioBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SliderBubbleInputProps extends InputProps {}\n\nconst SliderBubbleInput = React.forwardRef<HTMLInputElement, SliderBubbleInputProps>(\n  ({ __scopeSlider, value, ...props }: ScopedProps<SliderBubbleInputProps>, forwardedRef) => {\n    const ref = React.useRef<HTMLInputElement>(null);\n    const composedRefs = useComposedRefs(ref, forwardedRef);\n    const prevValue = usePrevious(value);\n\n    // Bubble value change to parents (e.g form change event)\n    React.useEffect(() => {\n      const input = ref.current;\n      if (!input) return;\n\n      const inputProto = window.HTMLInputElement.prototype;\n      const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor;\n      const setValue = descriptor.set;\n      if (prevValue !== value && setValue) {\n        const event = new Event('input', { bubbles: true });\n        setValue.call(input, value);\n        input.dispatchEvent(event);\n      }\n    }, [prevValue, value]);\n\n    /**\n     * We purposefully do not use `type=\"hidden\"` here otherwise forms that\n     * wrap it will not be able to access its value via the FormData API.\n     *\n     * We purposefully do not add the `value` attribute here to allow the value\n     * to be set programmatically and bubble to any parent form `onChange` event.\n     * Adding the `value` will cause React to consider the programmatic\n     * dispatch a duplicate and it will get swallowed.\n     */\n    return (\n      <Primitive.input\n        style={{ display: 'none' }}\n        {...props}\n        ref={composedRefs}\n        defaultValue={value}\n      />\n    );\n  },\n);\n\nSliderBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues];\n  nextValues[atIndex] = nextValue;\n  return nextValues.sort((a, b) => a - b);\n}\n\nfunction convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min;\n  const percentPerStep = 100 / maxSteps;\n  const percentage = percentPerStep * (value - min);\n  return clamp(percentage, [0, 100]);\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nfunction getLabel(index: number, totalValues: number) {\n  if (totalValues > 2) {\n    return `Value ${index + 1} of ${totalValues}`;\n  } else if (totalValues === 2) {\n    return ['Minimum', 'Maximum'][index];\n  } else {\n    return undefined;\n  }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nfunction getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1) return 0;\n  const distances = values.map((value) => Math.abs(value - nextValue));\n  const closestDistance = Math.min(...distances);\n  return distances.indexOf(closestDistance);\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nfunction getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2;\n  const halfPercent = 50;\n  const offset = linearScale([0, halfPercent], [0, halfWidth]);\n  return (halfWidth - offset(left) * direction) * direction;\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1]! - value);\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nfunction hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values);\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);\n    return actualMinStepsBetweenValues >= minStepsBetweenValues;\n  }\n  return true;\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1]) return output[0];\n    const ratio = (output[1] - output[0]) / (input[1] - input[0]);\n    return output[0] + ratio * (value - input[0]);\n  };\n}\n\nfunction getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length;\n}\n\nfunction roundValue(value: number, decimalCount: number) {\n  const rounder = Math.pow(10, decimalCount);\n  return Math.round(value * rounder) / rounder;\n}\n\nconst Root = Slider;\nconst Track = SliderTrack;\nconst Range = SliderRange;\nconst Thumb = SliderThumb;\n\nexport {\n  createSliderScope,\n  //\n  Slider,\n  SliderTrack,\n  SliderRange,\n  SliderThumb,\n  //\n  Root,\n  Track,\n  Range,\n  Thumb,\n};\nexport type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps };\n"
  },
  {
    "path": "packages/react/slider/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/slot/CHANGELOG.md",
    "content": "# @radix-ui/react-slot\n\n## 1.2.4\n\n- Fixed an issue with how slot components interact with lazy React components. In the case of a lazy component instance, the resulting promise must be consumed to render the desired component.\n\n## 1.2.3\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Revert slot changes causing errors in server components\n\n## 1.2.2\n\n- Add `use client` to slot entry to prevent RSC errors\n\n## 1.2.1\n\n- Use stable composed refs in SlotClone ([#3477](https://github.com/radix-ui/primitives/pull/3477))\n"
  },
  {
    "path": "packages/react/slot/README.md",
    "content": "# `react-slot`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/slot).\n"
  },
  {
    "path": "packages/react/slot/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/slot/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-slot\",\n  \"version\": \"1.2.4\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-compose-refs\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/slot/src/__snapshots__/slot.test.tsx.snap",
    "content": "// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html\n\nexports[`given a Button with Slottable > with asChild > should render a link with icon on the left/right 1`] = `\n<div>\n  <a\n    href=\"https://radix-ui.com\"\n  >\n    <span>\n      left\n    </span>\n    Button \n    <em>\n      text\n    </em>\n    <span>\n      right\n    </span>\n  </a>\n</div>\n`;\n\nexports[`given a Button with Slottable > without asChild > should render a button with icon on the left/right 1`] = `\n<div>\n  <button>\n    <span>\n      left\n    </span>\n    Button \n    <em>\n      text\n    </em>\n    <span>\n      right\n    </span>\n  </button>\n</div>\n`;\n\nexports[`given a Slot with React lazy components > with a lazy component in Button with Slottable > should render a lazy link with icon on the left/right 1`] = `\n<div>\n  <a\n    href=\"https://radix-ui.com\"\n  >\n    <span>\n      left\n    </span>\n    Button \n    <em>\n      text\n    </em>\n    <span>\n      right\n    </span>\n  </a>\n</div>\n`;\n"
  },
  {
    "path": "packages/react/slot/src/index.ts",
    "content": "export {\n  Slot,\n  Slottable,\n  //\n  Root,\n  createSlot,\n  createSlottable,\n} from './slot';\nexport type { SlotProps } from './slot';\n"
  },
  {
    "path": "packages/react/slot/src/slot.test.tsx",
    "content": "import * as React from 'react';\nimport { cleanup, render, screen, fireEvent } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { Slot, Slottable } from './slot';\nimport { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';\n\ndescribe('given a slotted Trigger', () => {\n  afterEach(cleanup);\n  describe('with onClick on itself', () => {\n    const handleClick = vi.fn();\n\n    beforeEach(() => {\n      handleClick.mockReset();\n      render(\n        <Trigger as={Slot} onClick={handleClick}>\n          <button type=\"button\">Click me</button>\n        </Trigger>,\n      );\n      fireEvent.click(screen.getByRole('button'));\n    });\n\n    it('should call the onClick passed to the Trigger', async () => {\n      expect(handleClick).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe('with onClick on the child', () => {\n    const handleClick = vi.fn();\n\n    beforeEach(() => {\n      handleClick.mockReset();\n      render(\n        <Trigger as={Slot}>\n          <button type=\"button\" onClick={handleClick}>\n            Click me\n          </button>\n        </Trigger>,\n      );\n      fireEvent.click(screen.getByRole('button'));\n    });\n\n    it(\"should call the child's onClick\", async () => {\n      expect(handleClick).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe('with onClick on itself AND the child', () => {\n    const handleTriggerClick = vi.fn();\n    const handleChildClick = vi.fn();\n\n    beforeEach(() => {\n      handleTriggerClick.mockReset();\n      handleChildClick.mockReset();\n      render(\n        <Trigger as={Slot} onClick={handleTriggerClick}>\n          <button type=\"button\" onClick={handleChildClick}>\n            Click me\n          </button>\n        </Trigger>,\n      );\n      fireEvent.click(screen.getByRole('button'));\n    });\n\n    it(\"should call the Trigger's onClick\", async () => {\n      expect(handleTriggerClick).toHaveBeenCalledTimes(1);\n    });\n\n    it(\"should call the child's onClick\", async () => {\n      expect(handleChildClick).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe('with onClick on itself AND undefined onClick on the child', () => {\n    const handleTriggerClick = vi.fn();\n\n    beforeEach(() => {\n      handleTriggerClick.mockReset();\n      render(\n        <Trigger as={Slot} onClick={handleTriggerClick}>\n          <button type=\"button\" onClick={undefined}>\n            Click me\n          </button>\n        </Trigger>,\n      );\n      fireEvent.click(screen.getByRole('button'));\n    });\n\n    it(\"should call the Trigger's onClick\", async () => {\n      expect(handleTriggerClick).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe('with undefined onClick on itself AND onClick on the child', () => {\n    const handleChildClick = vi.fn();\n\n    beforeEach(() => {\n      handleChildClick.mockReset();\n      render(\n        <Trigger as={Slot} onClick={undefined}>\n          <button type=\"button\" onClick={handleChildClick}>\n            Click me\n          </button>\n        </Trigger>,\n      );\n      fireEvent.click(screen.getByRole('button'));\n    });\n\n    it(\"should call the child's onClick\", async () => {\n      expect(handleChildClick).toHaveBeenCalledTimes(1);\n    });\n  });\n});\n\ndescribe('given a Button with Slottable', () => {\n  afterEach(cleanup);\n  describe('without asChild', () => {\n    it('should render a button with icon on the left/right', async () => {\n      const tree = render(\n        <Button iconLeft={<span>left</span>} iconRight={<span>right</span>}>\n          Button <em>text</em>\n        </Button>,\n      );\n\n      expect(tree.container).toMatchSnapshot();\n    });\n  });\n\n  describe('with asChild', () => {\n    it('should render a link with icon on the left/right', async () => {\n      const tree = render(\n        <Button iconLeft={<span>left</span>} iconRight={<span>right</span>} asChild>\n          <a href=\"https://radix-ui.com\">\n            Button <em>text</em>\n          </a>\n        </Button>,\n      );\n\n      expect(tree.container).toMatchSnapshot();\n    });\n  });\n});\n\n// TODO: Unskip when underlying issue is resolved\n// Reverted in https://github.com/radix-ui/primitives/pull/3554\ndescribe.skip('given an Input', () => {\n  const handleRef = vi.fn();\n\n  beforeEach(() => {\n    handleRef.mockReset();\n  });\n\n  afterEach(cleanup);\n\n  describe('without asChild', () => {\n    it('should only call function refs once', async () => {\n      render(<Input ref={handleRef} />);\n      await userEvent.type(screen.getByRole('textbox'), 'foo');\n      expect(handleRef).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe('with asChild', () => {\n    it('should only call function refs once', async () => {\n      render(\n        <Input asChild ref={handleRef}>\n          <input />\n        </Input>,\n      );\n      await userEvent.type(screen.getByRole('textbox'), 'foo');\n      expect(handleRef).toHaveBeenCalledTimes(1);\n    });\n  });\n});\n\ndescribe('given a Slot with React lazy components', () => {\n  afterEach(cleanup);\n\n  describe('with a lazy component as child', () => {\n    const LazyButton = React.lazy(() =>\n      Promise.resolve({\n        default: ({ children, ...props }: React.ComponentProps<'button'>) => (\n          <button {...props}>{children}</button>\n        ),\n      }),\n    );\n\n    it('should render the lazy component correctly', async () => {\n      const handleClick = vi.fn();\n\n      render(\n        <React.Suspense fallback={<div>Loading...</div>}>\n          <Slot onClick={handleClick}>\n            <LazyButton>Click me</LazyButton>\n          </Slot>\n        </React.Suspense>,\n      );\n\n      // Wait for lazy component to load\n      await screen.findByRole('button');\n\n      fireEvent.click(screen.getByRole('button'));\n      expect(handleClick).toHaveBeenCalledTimes(1);\n    });\n  });\n\n  describe('with a lazy component in Button with Slottable', () => {\n    const LazyLink = React.lazy(() =>\n      Promise.resolve({\n        default: ({ children, ...props }: React.ComponentProps<'a'>) => (\n          <a {...props}>{children}</a>\n        ),\n      }),\n    );\n\n    it('should render a lazy link with icon on the left/right', async () => {\n      const tree = render(\n        <React.Suspense fallback={<div>Loading...</div>}>\n          <Button iconLeft={<span>left</span>} iconRight={<span>right</span>} asChild>\n            <LazyLink href=\"https://radix-ui.com\">\n              Button <em>text</em>\n            </LazyLink>\n          </Button>\n        </React.Suspense>,\n      );\n\n      // Wait for lazy component to load\n      await screen.findByRole('link');\n\n      expect(tree.container).toMatchSnapshot();\n    });\n  });\n});\n\ntype TriggerProps = React.ComponentProps<'button'> & { as: React.ElementType };\n\nconst Trigger = ({ as: Comp = 'button', ...props }: TriggerProps) => <Comp {...props} />;\n\nconst Button = React.forwardRef<\n  React.ComponentRef<'button'>,\n  React.ComponentProps<'button'> & {\n    asChild?: boolean;\n    iconLeft?: React.ReactNode;\n    iconRight?: React.ReactNode;\n  }\n>(({ children, asChild = false, iconLeft, iconRight, ...props }, forwardedRef) => {\n  const Comp = asChild ? Slot : 'button';\n  return (\n    <Comp {...props} ref={forwardedRef}>\n      {iconLeft}\n      <Slottable>{children}</Slottable>\n      {iconRight}\n    </Comp>\n  );\n});\n\nconst Input = React.forwardRef<\n  React.ComponentRef<'input'>,\n  React.ComponentProps<'input'> & {\n    asChild?: boolean;\n  }\n>(({ asChild, children, ...props }, forwardedRef) => {\n  const Comp = asChild ? Slot : 'input';\n  const [value, setValue] = React.useState('');\n\n  return (\n    <Comp\n      {...props}\n      onChange={(event) => setValue(event.target.value)}\n      ref={forwardedRef}\n      value={value}\n    >\n      {children}\n    </Comp>\n  );\n});\n"
  },
  {
    "path": "packages/react/slot/src/slot.tsx",
    "content": "import * as React from 'react';\nimport { composeRefs } from '@radix-ui/react-compose-refs';\n\ndeclare module 'react' {\n  interface ReactElement {\n    $$typeof?: symbol | string;\n  }\n}\n\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy');\n\ninterface LazyReactElement extends React.ReactElement {\n  $$typeof: typeof REACT_LAZY_TYPE;\n  _payload: PromiseLike<Exclude<React.ReactNode, PromiseLike<any>>>;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type Usable<T> = PromiseLike<T> | React.Context<T>;\nconst use: typeof React.use | undefined = (React as any)[' use '.trim().toString()];\n\ninterface SlotProps extends React.HTMLAttributes<HTMLElement> {\n  children?: React.ReactNode;\n}\n\nfunction isPromiseLike(value: unknown): value is PromiseLike<unknown> {\n  return typeof value === 'object' && value !== null && 'then' in value;\n}\n\nfunction isLazyComponent(element: React.ReactNode): element is LazyReactElement {\n  return (\n    element != null &&\n    typeof element === 'object' &&\n    '$$typeof' in element &&\n    element.$$typeof === REACT_LAZY_TYPE &&\n    '_payload' in element &&\n    isPromiseLike(element._payload)\n  );\n}\n\n/* @__NO_SIDE_EFFECTS__ */ export function createSlot(ownerName: string) {\n  const SlotClone = createSlotClone(ownerName);\n  const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n    let { children, ...slotProps } = props;\n    if (isLazyComponent(children) && typeof use === 'function') {\n      children = use(children._payload);\n    }\n    const childrenArray = React.Children.toArray(children);\n    const slottable = childrenArray.find(isSlottable);\n\n    if (slottable) {\n      // the new element to render is the one passed as a child of `Slottable`\n      const newElement = slottable.props.children;\n\n      const newChildren = childrenArray.map((child) => {\n        if (child === slottable) {\n          // because the new element will be the one rendered, we are only interested\n          // in grabbing its children (`newElement.props.children`)\n          if (React.Children.count(newElement) > 1) return React.Children.only(null);\n          return React.isValidElement(newElement)\n            ? (newElement.props as { children: React.ReactNode }).children\n            : null;\n        } else {\n          return child;\n        }\n      });\n\n      return (\n        <SlotClone {...slotProps} ref={forwardedRef}>\n          {React.isValidElement(newElement)\n            ? React.cloneElement(newElement, undefined, newChildren)\n            : null}\n        </SlotClone>\n      );\n    }\n\n    return (\n      <SlotClone {...slotProps} ref={forwardedRef}>\n        {children}\n      </SlotClone>\n    );\n  });\n\n  Slot.displayName = `${ownerName}.Slot`;\n  return Slot;\n}\n\nconst Slot = createSlot('Slot');\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: React.ReactNode;\n}\n\n/* @__NO_SIDE_EFFECTS__ */ function createSlotClone(ownerName: string) {\n  const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n    let { children, ...slotProps } = props;\n    if (isLazyComponent(children) && typeof use === 'function') {\n      children = use(children._payload);\n    }\n\n    if (React.isValidElement(children)) {\n      const childrenRef = getElementRef(children);\n      const props = mergeProps(slotProps, children.props as AnyProps);\n      // do not pass ref to React.Fragment for React 19 compatibility\n      if (children.type !== React.Fragment) {\n        props.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;\n      }\n      return React.cloneElement(children, props);\n    }\n\n    return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n  });\n\n  SlotClone.displayName = `${ownerName}.SlotClone`;\n  return SlotClone;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nconst SLOTTABLE_IDENTIFIER = Symbol('radix.slottable');\n\ninterface SlottableProps {\n  children: React.ReactNode;\n}\n\ninterface SlottableComponent extends React.FC<SlottableProps> {\n  __radixId: symbol;\n}\n\n/* @__NO_SIDE_EFFECTS__ */ export function createSlottable(ownerName: string) {\n  const Slottable: SlottableComponent = ({ children }) => {\n    return <>{children}</>;\n  };\n  Slottable.displayName = `${ownerName}.Slottable`;\n  Slottable.__radixId = SLOTTABLE_IDENTIFIER;\n  return Slottable;\n}\n\nconst Slottable = createSlottable('Slottable');\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>;\n\nfunction isSlottable(\n  child: React.ReactNode,\n): child is React.ReactElement<SlottableProps, typeof Slottable> {\n  return (\n    React.isValidElement(child) &&\n    typeof child.type === 'function' &&\n    '__radixId' in child.type &&\n    child.type.__radixId === SLOTTABLE_IDENTIFIER\n  );\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n  // all child props should override\n  const overrideProps = { ...childProps };\n\n  for (const propName in childProps) {\n    const slotPropValue = slotProps[propName];\n    const childPropValue = childProps[propName];\n\n    const isHandler = /^on[A-Z]/.test(propName);\n    if (isHandler) {\n      // if the handler exists on both, we compose them\n      if (slotPropValue && childPropValue) {\n        overrideProps[propName] = (...args: unknown[]) => {\n          const result = childPropValue(...args);\n          slotPropValue(...args);\n          return result;\n        };\n      }\n      // but if it exists only on the slot, we use only this one\n      else if (slotPropValue) {\n        overrideProps[propName] = slotPropValue;\n      }\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');\n    }\n  }\n\n  return { ...slotProps, ...overrideProps };\n}\n\n// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`\n// After React 19 accessing `element.ref` does the opposite.\n// https://github.com/facebook/react/pull/28348\n//\n// Access the ref using the method that doesn't yield a warning.\nfunction getElementRef(element: React.ReactElement) {\n  // React <=18 in DEV\n  let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;\n  let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n  if (mayWarn) {\n    return (element as any).ref;\n  }\n\n  // React 19 in DEV\n  getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;\n  mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n  if (mayWarn) {\n    return (element.props as { ref?: React.Ref<unknown> }).ref;\n  }\n\n  // Not DEV\n  return (element.props as { ref?: React.Ref<unknown> }).ref || (element as any).ref;\n}\n\nexport {\n  Slot,\n  Slottable,\n  //\n  Slot as Root,\n};\nexport type { SlotProps };\n"
  },
  {
    "path": "packages/react/slot/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/switch/CHANGELOG.md",
    "content": "# @radix-ui/react-switch\n\n## 1.2.6\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.2.5\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.2.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.2.3\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.2.2\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.2.1\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.2.0\n\n- 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.\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/switch/README.md",
    "content": "# `react-switch`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/switch).\n"
  },
  {
    "path": "packages/react/switch/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/switch/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-switch\",\n  \"version\": \"1.2.6\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-previous\": \"workspace:*\",\n    \"@radix-ui/react-use-size\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/switch/src/index.ts",
    "content": "'use client';\nexport {\n  createSwitchScope,\n  //\n  Switch,\n  SwitchThumb,\n  //\n  Root,\n  Thumb,\n} from './switch';\nexport type { SwitchProps, SwitchThumbProps } from './switch';\n"
  },
  {
    "path": "packages/react/switch/src/switch.test.tsx",
    "content": "import * as Switch from './switch';\nimport { cleanup, render } from '@testing-library/react';\nimport { afterEach, describe, it, expect } from 'vitest';\n\ndescribe('given a default Switch', () => {\n  afterEach(cleanup);\n\n  let cleanedUp = false;\n\n  function Test() {\n    return (\n      <Switch.Root\n        ref={() => () => {\n          cleanedUp = true;\n        }}\n      >\n        <Switch.Thumb />\n      </Switch.Root>\n    );\n  }\n\n  it('should correctly invoke the cleanup function of a ref callback', () => {\n    const rendered = render(<Test />);\n    rendered.unmount();\n    expect(cleanedUp).toBe(true);\n  });\n});\n"
  },
  {
    "path": "packages/react/switch/src/switch.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { usePrevious } from '@radix-ui/react-use-previous';\nimport { useSize } from '@radix-ui/react-use-size';\nimport { Primitive } from '@radix-ui/react-primitive';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nconst SWITCH_NAME = 'Switch';\n\ntype ScopedProps<P> = P & { __scopeSwitch?: Scope };\nconst [createSwitchContext, createSwitchScope] = createContextScope(SWITCH_NAME);\n\ntype SwitchContextValue = { checked: boolean; disabled?: boolean };\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<SwitchContextValue>(SWITCH_NAME);\n\ntype SwitchElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface SwitchProps extends PrimitiveButtonProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  required?: boolean;\n  onCheckedChange?(checked: boolean): void;\n}\n\nconst Switch = React.forwardRef<SwitchElement, SwitchProps>(\n  (props: ScopedProps<SwitchProps>, forwardedRef) => {\n    const {\n      __scopeSwitch,\n      name,\n      checked: checkedProp,\n      defaultChecked,\n      required,\n      disabled,\n      value = 'on',\n      onCheckedChange,\n      form,\n      ...switchProps\n    } = props;\n    const [button, setButton] = React.useState<HTMLButtonElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));\n    const hasConsumerStoppedPropagationRef = React.useRef(false);\n    // We set this to true by default so that events bubble to forms without JS (SSR)\n    const isFormControl = button ? form || !!button.closest('form') : true;\n    const [checked, setChecked] = useControllableState({\n      prop: checkedProp,\n      defaultProp: defaultChecked ?? false,\n      onChange: onCheckedChange,\n      caller: SWITCH_NAME,\n    });\n\n    return (\n      <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled}>\n        <Primitive.button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={checked}\n          aria-required={required}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          disabled={disabled}\n          value={value}\n          {...switchProps}\n          ref={composedRefs}\n          onClick={composeEventHandlers(props.onClick, (event) => {\n            setChecked((prevChecked) => !prevChecked);\n            if (isFormControl) {\n              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();\n              // if switch is in a form, stop propagation from the button so that we only propagate\n              // one click event (from the input). We propagate changes from an input so that native\n              // form validation works and form events reflect switch updates.\n              if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();\n            }\n          })}\n        />\n        {isFormControl && (\n          <SwitchBubbleInput\n            control={button}\n            bubbles={!hasConsumerStoppedPropagationRef.current}\n            name={name}\n            value={value}\n            checked={checked}\n            required={required}\n            disabled={disabled}\n            form={form}\n            // We transform because the input is absolutely positioned but we have\n            // rendered it **after** the button. This pulls it back to sit on top\n            // of the button.\n            style={{ transform: 'translateX(-100%)' }}\n          />\n        )}\n      </SwitchProvider>\n    );\n  },\n);\n\nSwitch.displayName = SWITCH_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb';\n\ntype SwitchThumbElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface SwitchThumbProps extends PrimitiveSpanProps {}\n\nconst SwitchThumb = React.forwardRef<SwitchThumbElement, SwitchThumbProps>(\n  (props: ScopedProps<SwitchThumbProps>, forwardedRef) => {\n    const { __scopeSwitch, ...thumbProps } = props;\n    const context = useSwitchContext(THUMB_NAME, __scopeSwitch);\n    return (\n      <Primitive.span\n        data-state={getState(context.checked)}\n        data-disabled={context.disabled ? '' : undefined}\n        {...thumbProps}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nSwitchThumb.displayName = THUMB_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchBubbleInput\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUBBLE_INPUT_NAME = 'SwitchBubbleInput';\n\ntype InputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;\ninterface SwitchBubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean;\n  control: HTMLElement | null;\n  bubbles: boolean;\n}\n\nconst SwitchBubbleInput = React.forwardRef<HTMLInputElement, SwitchBubbleInputProps>(\n  (\n    {\n      __scopeSwitch,\n      control,\n      checked,\n      bubbles = true,\n      ...props\n    }: ScopedProps<SwitchBubbleInputProps>,\n    forwardedRef,\n  ) => {\n    const ref = React.useRef<HTMLInputElement>(null);\n    const composedRefs = useComposedRefs(ref, forwardedRef);\n    const prevChecked = usePrevious(checked);\n    const controlSize = useSize(control);\n\n    // Bubble checked change to parents (e.g form change event)\n    React.useEffect(() => {\n      const input = ref.current;\n      if (!input) return;\n\n      const inputProto = window.HTMLInputElement.prototype;\n      const descriptor = Object.getOwnPropertyDescriptor(\n        inputProto,\n        'checked',\n      ) as PropertyDescriptor;\n      const setChecked = descriptor.set;\n      if (prevChecked !== checked && setChecked) {\n        const event = new Event('click', { bubbles });\n        setChecked.call(input, checked);\n        input.dispatchEvent(event);\n      }\n    }, [prevChecked, checked, bubbles]);\n\n    return (\n      <input\n        type=\"checkbox\"\n        aria-hidden\n        defaultChecked={checked}\n        {...props}\n        tabIndex={-1}\n        ref={composedRefs}\n        style={{\n          ...props.style,\n          ...controlSize,\n          position: 'absolute',\n          pointerEvents: 'none',\n          opacity: 0,\n          margin: 0,\n        }}\n      />\n    );\n  },\n);\n\nSwitchBubbleInput.displayName = BUBBLE_INPUT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked';\n}\n\nconst Root = Switch;\nconst Thumb = SwitchThumb;\n\nexport {\n  createSwitchScope,\n  //\n  Switch,\n  SwitchThumb,\n  //\n  Root,\n  Thumb,\n};\nexport type { SwitchProps, SwitchThumbProps };\n"
  },
  {
    "path": "packages/react/switch/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/tabs/CHANGELOG.md",
    "content": "# @radix-ui/react-tabs\n\n## 1.1.13\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-roving-focus@1.1.11`\n\n## 1.1.12\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9`\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.7`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`, `@radix-ui/react-roving-focus@1.1.6`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`, `@radix-ui/react-roving-focus@1.1.5`\n\n## 1.1.5\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`\n"
  },
  {
    "path": "packages/react/tabs/README.md",
    "content": "# `react-tabs`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/tabs).\n"
  },
  {
    "path": "packages/react/tabs/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/tabs/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-tabs\",\n  \"version\": \"1.1.13\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-roving-focus\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/tabs/src/index.ts",
    "content": "'use client';\nexport {\n  createTabsScope,\n  //\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  //\n  Root,\n  List,\n  Trigger,\n  Content,\n} from './tabs';\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './tabs';\n"
  },
  {
    "path": "packages/react/tabs/src/tabs.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { useDirection } from '@radix-ui/react-direction';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useId } from '@radix-ui/react-id';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Tabs\n * -----------------------------------------------------------------------------------------------*/\n\nconst TABS_NAME = 'Tabs';\n\ntype ScopedProps<P> = P & { __scopeTabs?: Scope };\nconst [createTabsContext, createTabsScope] = createContextScope(TABS_NAME, [\n  createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype TabsContextValue = {\n  baseId: string;\n  value: string;\n  onValueChange: (value: string) => void;\n  orientation?: TabsProps['orientation'];\n  dir?: TabsProps['dir'];\n  activationMode?: TabsProps['activationMode'];\n};\n\nconst [TabsProvider, useTabsContext] = createTabsContext<TabsContextValue>(TABS_NAME);\n\ntype TabsElement = React.ComponentRef<typeof Primitive.div>;\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface TabsProps extends PrimitiveDivProps {\n  /** The value for the selected tab, if controlled */\n  value?: string;\n  /** The value of the tab to select by default, if uncontrolled */\n  defaultValue?: string;\n  /** A function called when a new tab is selected */\n  onValueChange?: (value: string) => void;\n  /**\n   * The orientation the tabs are layed out.\n   * Mainly so arrow navigation is done accordingly (left & right vs. up & down)\n   * @defaultValue horizontal\n   */\n  orientation?: RovingFocusGroupProps['orientation'];\n  /**\n   * The direction of navigation between toolbar items.\n   */\n  dir?: RovingFocusGroupProps['dir'];\n  /**\n   * Whether a tab is activated automatically or manually.\n   * @defaultValue automatic\n   * */\n  activationMode?: 'automatic' | 'manual';\n}\n\nconst Tabs = React.forwardRef<TabsElement, TabsProps>(\n  (props: ScopedProps<TabsProps>, forwardedRef) => {\n    const {\n      __scopeTabs,\n      value: valueProp,\n      onValueChange,\n      defaultValue,\n      orientation = 'horizontal',\n      dir,\n      activationMode = 'automatic',\n      ...tabsProps\n    } = props;\n    const direction = useDirection(dir);\n    const [value, setValue] = useControllableState({\n      prop: valueProp,\n      onChange: onValueChange,\n      defaultProp: defaultValue ?? '',\n      caller: TABS_NAME,\n    });\n\n    return (\n      <TabsProvider\n        scope={__scopeTabs}\n        baseId={useId()}\n        value={value}\n        onValueChange={setValue}\n        orientation={orientation}\n        dir={direction}\n        activationMode={activationMode}\n      >\n        <Primitive.div\n          dir={direction}\n          data-orientation={orientation}\n          {...tabsProps}\n          ref={forwardedRef}\n        />\n      </TabsProvider>\n    );\n  },\n);\n\nTabs.displayName = TABS_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsList\n * -----------------------------------------------------------------------------------------------*/\n\nconst TAB_LIST_NAME = 'TabsList';\n\ntype TabsListElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsListProps extends PrimitiveDivProps {\n  loop?: RovingFocusGroupProps['loop'];\n}\n\nconst TabsList = React.forwardRef<TabsListElement, TabsListProps>(\n  (props: ScopedProps<TabsListProps>, forwardedRef) => {\n    const { __scopeTabs, loop = true, ...listProps } = props;\n    const context = useTabsContext(TAB_LIST_NAME, __scopeTabs);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n    return (\n      <RovingFocusGroup.Root\n        asChild\n        {...rovingFocusGroupScope}\n        orientation={context.orientation}\n        dir={context.dir}\n        loop={loop}\n      >\n        <Primitive.div\n          role=\"tablist\"\n          aria-orientation={context.orientation}\n          {...listProps}\n          ref={forwardedRef}\n        />\n      </RovingFocusGroup.Root>\n    );\n  },\n);\n\nTabsList.displayName = TAB_LIST_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TabsTrigger';\n\ntype TabsTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TabsTriggerProps extends PrimitiveButtonProps {\n  value: string;\n}\n\nconst TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(\n  (props: ScopedProps<TabsTriggerProps>, forwardedRef) => {\n    const { __scopeTabs, value, disabled = false, ...triggerProps } = props;\n    const context = useTabsContext(TRIGGER_NAME, __scopeTabs);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeTabs);\n    const triggerId = makeTriggerId(context.baseId, value);\n    const contentId = makeContentId(context.baseId, value);\n    const isSelected = value === context.value;\n    return (\n      <RovingFocusGroup.Item\n        asChild\n        {...rovingFocusGroupScope}\n        focusable={!disabled}\n        active={isSelected}\n      >\n        <Primitive.button\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={isSelected}\n          aria-controls={contentId}\n          data-state={isSelected ? 'active' : 'inactive'}\n          data-disabled={disabled ? '' : undefined}\n          disabled={disabled}\n          id={triggerId}\n          {...triggerProps}\n          ref={forwardedRef}\n          onMouseDown={composeEventHandlers(props.onMouseDown, (event) => {\n            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)\n            // but not when the control key is pressed (avoiding MacOS right click)\n            if (!disabled && event.button === 0 && event.ctrlKey === false) {\n              context.onValueChange(value);\n            } else {\n              // prevent focus to avoid accidental activation\n              event.preventDefault();\n            }\n          })}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            if ([' ', 'Enter'].includes(event.key)) context.onValueChange(value);\n          })}\n          onFocus={composeEventHandlers(props.onFocus, () => {\n            // handle \"automatic\" activation if necessary\n            // ie. activate tab following focus\n            const isAutomaticActivation = context.activationMode !== 'manual';\n            if (!isSelected && !disabled && isAutomaticActivation) {\n              context.onValueChange(value);\n            }\n          })}\n        />\n      </RovingFocusGroup.Item>\n    );\n  },\n);\n\nTabsTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TabsContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TabsContent';\n\ntype TabsContentElement = React.ComponentRef<typeof Primitive.div>;\ninterface TabsContentProps extends PrimitiveDivProps {\n  value: string;\n\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(\n  (props: ScopedProps<TabsContentProps>, forwardedRef) => {\n    const { __scopeTabs, value, forceMount, children, ...contentProps } = props;\n    const context = useTabsContext(CONTENT_NAME, __scopeTabs);\n    const triggerId = makeTriggerId(context.baseId, value);\n    const contentId = makeContentId(context.baseId, value);\n    const isSelected = value === context.value;\n    const isMountAnimationPreventedRef = React.useRef(isSelected);\n\n    React.useEffect(() => {\n      const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.current = false));\n      return () => cancelAnimationFrame(rAF);\n    }, []);\n\n    return (\n      <Presence present={forceMount || isSelected}>\n        {({ present }) => (\n          <Primitive.div\n            data-state={isSelected ? 'active' : 'inactive'}\n            data-orientation={context.orientation}\n            role=\"tabpanel\"\n            aria-labelledby={triggerId}\n            hidden={!present}\n            id={contentId}\n            tabIndex={0}\n            {...contentProps}\n            ref={forwardedRef}\n            style={{\n              ...props.style,\n              animationDuration: isMountAnimationPreventedRef.current ? '0s' : undefined,\n            }}\n          >\n            {present && children}\n          </Primitive.div>\n        )}\n      </Presence>\n    );\n  },\n);\n\nTabsContent.displayName = CONTENT_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction makeTriggerId(baseId: string, value: string) {\n  return `${baseId}-trigger-${value}`;\n}\n\nfunction makeContentId(baseId: string, value: string) {\n  return `${baseId}-content-${value}`;\n}\n\nconst Root = Tabs;\nconst List = TabsList;\nconst Trigger = TabsTrigger;\nconst Content = TabsContent;\n\nexport {\n  createTabsScope,\n  //\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  //\n  Root,\n  List,\n  Trigger,\n  Content,\n};\nexport type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };\n"
  },
  {
    "path": "packages/react/tabs/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/toast/CHANGELOG.md",
    "content": "# @radix-ui/react-toast\n\n## 1.2.15\n\n### Fixed accessibility issues:\n\n- Removed `aria-hidden` from the focusable element, as these elements are already empty and won't be read by screen readers\n- Removed `role=status` from list item element (see [w3.org documentation for List Item](https://www.w3.org/TR/html-aria/#docconformance))\n- Remove useless default `aria-atomic` from `role=status`\n\n### Other updates\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-dismissable-layer@1.1.11`, `@radix-ui/react-portal@1.1.10`, `@radix-ui/react-visually-hidden@1.2.4`\n\n## 1.2.14\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-visually-hidden@1.2.3`, `@radix-ui/react-portal@1.1.9`, `@radix-ui/react-collection@1.1.7`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.2.13\n\n- 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-portal@1.1.8`, `@radix-ui/react-visually-hidden@1.2.2`\n\n## 1.2.12\n\n- 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-portal@1.1.7`, `@radix-ui/react-visually-hidden@1.2.1`\n\n## 1.2.11\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.2.10\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.2.9\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.2.8\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`, `@radix-ui/react-portal@1.1.6`\n"
  },
  {
    "path": "packages/react/toast/README.md",
    "content": "# `react-toast`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/toast).\n"
  },
  {
    "path": "packages/react/toast/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/toast/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-toast\",\n  \"version\": \"1.2.15\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-collection\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-portal\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\",\n    \"@radix-ui/react-visually-hidden\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/toast/src/index.ts",
    "content": "'use client';\nexport {\n  createToastScope,\n  //\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastAction,\n  ToastClose,\n  //\n  Provider,\n  Viewport,\n  Root,\n  Title,\n  Description,\n  Action,\n  Close,\n} from './toast';\nexport type {\n  ToastProviderProps,\n  ToastViewportProps,\n  ToastProps,\n  ToastTitleProps,\n  ToastDescriptionProps,\n  ToastActionProps,\n  ToastCloseProps,\n} from './toast';\n"
  },
  {
    "path": "packages/react/toast/src/toast.tsx",
    "content": "import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createCollection } from '@radix-ui/react-collection';\nimport { createContextScope } from '@radix-ui/react-context';\nimport * as DismissableLayer from '@radix-ui/react-dismissable-layer';\nimport { Portal } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * ToastProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'ToastProvider';\n\nconst [Collection, useCollection, createCollectionScope] = createCollection<ToastElement>('Toast');\n\ntype SwipeDirection = 'up' | 'down' | 'left' | 'right';\ntype ToastProviderContextValue = {\n  label: string;\n  duration: number;\n  swipeDirection: SwipeDirection;\n  swipeThreshold: number;\n  toastCount: number;\n  viewport: ToastViewportElement | null;\n  onViewportChange(viewport: ToastViewportElement): void;\n  onToastAdd(): void;\n  onToastRemove(): void;\n  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>;\n  isClosePausedRef: React.MutableRefObject<boolean>;\n};\n\ntype ScopedProps<P> = P & { __scopeToast?: Scope };\nconst [createToastContext, createToastScope] = createContextScope('Toast', [createCollectionScope]);\nconst [ToastProviderProvider, useToastProviderContext] =\n  createToastContext<ToastProviderContextValue>(PROVIDER_NAME);\n\ninterface ToastProviderProps {\n  children?: React.ReactNode;\n  /**\n   * An author-localized label for each toast. Used to help screen reader users\n   * associate the interruption with a toast.\n   * @defaultValue 'Notification'\n   */\n  label?: string;\n  /**\n   * Time in milliseconds that each toast should remain visible for.\n   * @defaultValue 5000\n   */\n  duration?: number;\n  /**\n   * Direction of pointer swipe that should close the toast.\n   * @defaultValue 'right'\n   */\n  swipeDirection?: SwipeDirection;\n  /**\n   * Distance in pixels that the swipe must pass before a close is triggered.\n   * @defaultValue 50\n   */\n  swipeThreshold?: number;\n}\n\nconst ToastProvider: React.FC<ToastProviderProps> = (props: ScopedProps<ToastProviderProps>) => {\n  const {\n    __scopeToast,\n    label = 'Notification',\n    duration = 5000,\n    swipeDirection = 'right',\n    swipeThreshold = 50,\n    children,\n  } = props;\n  const [viewport, setViewport] = React.useState<ToastViewportElement | null>(null);\n  const [toastCount, setToastCount] = React.useState(0);\n  const isFocusedToastEscapeKeyDownRef = React.useRef(false);\n  const isClosePausedRef = React.useRef(false);\n\n  if (!label.trim()) {\n    console.error(\n      `Invalid prop \\`label\\` supplied to \\`${PROVIDER_NAME}\\`. Expected non-empty \\`string\\`.`,\n    );\n  }\n\n  return (\n    <Collection.Provider scope={__scopeToast}>\n      <ToastProviderProvider\n        scope={__scopeToast}\n        label={label}\n        duration={duration}\n        swipeDirection={swipeDirection}\n        swipeThreshold={swipeThreshold}\n        toastCount={toastCount}\n        viewport={viewport}\n        onViewportChange={setViewport}\n        onToastAdd={React.useCallback(() => setToastCount((prevCount) => prevCount + 1), [])}\n        onToastRemove={React.useCallback(() => setToastCount((prevCount) => prevCount - 1), [])}\n        isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}\n        isClosePausedRef={isClosePausedRef}\n      >\n        {children}\n      </ToastProviderProvider>\n    </Collection.Provider>\n  );\n};\n\nToastProvider.displayName = PROVIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToastViewport\n * -----------------------------------------------------------------------------------------------*/\n\nconst VIEWPORT_NAME = 'ToastViewport';\nconst VIEWPORT_DEFAULT_HOTKEY = ['F8'];\nconst VIEWPORT_PAUSE = 'toast.viewportPause';\nconst VIEWPORT_RESUME = 'toast.viewportResume';\n\ntype ToastViewportElement = React.ComponentRef<typeof Primitive.ol>;\ntype PrimitiveOrderedListProps = React.ComponentPropsWithoutRef<typeof Primitive.ol>;\ninterface ToastViewportProps extends PrimitiveOrderedListProps {\n  /**\n   * The keys to use as the keyboard shortcut that will move focus to the toast viewport.\n   * @defaultValue ['F8']\n   */\n  hotkey?: string[];\n  /**\n   * An author-localized label for the toast viewport to provide context for screen reader users\n   * when navigating page landmarks. The available `{hotkey}` placeholder will be replaced for you.\n   * @defaultValue 'Notifications ({hotkey})'\n   */\n  label?: string;\n}\n\nconst ToastViewport = React.forwardRef<ToastViewportElement, ToastViewportProps>(\n  (props: ScopedProps<ToastViewportProps>, forwardedRef) => {\n    const {\n      __scopeToast,\n      hotkey = VIEWPORT_DEFAULT_HOTKEY,\n      label = 'Notifications ({hotkey})',\n      ...viewportProps\n    } = props;\n    const context = useToastProviderContext(VIEWPORT_NAME, __scopeToast);\n    const getItems = useCollection(__scopeToast);\n    const wrapperRef = React.useRef<HTMLDivElement>(null);\n    const headFocusProxyRef = React.useRef<FocusProxyElement>(null);\n    const tailFocusProxyRef = React.useRef<FocusProxyElement>(null);\n    const ref = React.useRef<ToastViewportElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);\n    const hotkeyLabel = hotkey.join('+').replace(/Key/g, '').replace(/Digit/g, '');\n    const hasToasts = context.toastCount > 0;\n\n    React.useEffect(() => {\n      const handleKeyDown = (event: KeyboardEvent) => {\n        // we use `event.code` as it is consistent regardless of meta keys that were pressed.\n        // for example, `event.key` for `Control+Alt+t` is `†` and `t !== †`\n        const isHotkeyPressed =\n          hotkey.length !== 0 && hotkey.every((key) => (event as any)[key] || event.code === key);\n        if (isHotkeyPressed) ref.current?.focus();\n      };\n      document.addEventListener('keydown', handleKeyDown);\n      return () => document.removeEventListener('keydown', handleKeyDown);\n    }, [hotkey]);\n\n    React.useEffect(() => {\n      const wrapper = wrapperRef.current;\n      const viewport = ref.current;\n      if (hasToasts && wrapper && viewport) {\n        const handlePause = () => {\n          if (!context.isClosePausedRef.current) {\n            const pauseEvent = new CustomEvent(VIEWPORT_PAUSE);\n            viewport.dispatchEvent(pauseEvent);\n            context.isClosePausedRef.current = true;\n          }\n        };\n\n        const handleResume = () => {\n          if (context.isClosePausedRef.current) {\n            const resumeEvent = new CustomEvent(VIEWPORT_RESUME);\n            viewport.dispatchEvent(resumeEvent);\n            context.isClosePausedRef.current = false;\n          }\n        };\n\n        const handleFocusOutResume = (event: FocusEvent) => {\n          const isFocusMovingOutside = !wrapper.contains(event.relatedTarget as HTMLElement);\n          if (isFocusMovingOutside) handleResume();\n        };\n\n        const handlePointerLeaveResume = () => {\n          const isFocusInside = wrapper.contains(document.activeElement);\n          if (!isFocusInside) handleResume();\n        };\n\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n        wrapper.addEventListener('focusin', handlePause);\n        wrapper.addEventListener('focusout', handleFocusOutResume);\n        wrapper.addEventListener('pointermove', handlePause);\n        wrapper.addEventListener('pointerleave', handlePointerLeaveResume);\n        window.addEventListener('blur', handlePause);\n        window.addEventListener('focus', handleResume);\n        return () => {\n          wrapper.removeEventListener('focusin', handlePause);\n          wrapper.removeEventListener('focusout', handleFocusOutResume);\n          wrapper.removeEventListener('pointermove', handlePause);\n          wrapper.removeEventListener('pointerleave', handlePointerLeaveResume);\n          window.removeEventListener('blur', handlePause);\n          window.removeEventListener('focus', handleResume);\n        };\n      }\n    }, [hasToasts, context.isClosePausedRef]);\n\n    const getSortedTabbableCandidates = React.useCallback(\n      ({ tabbingDirection }: { tabbingDirection: 'forwards' | 'backwards' }) => {\n        const toastItems = getItems();\n        const tabbableCandidates = toastItems.map((toastItem) => {\n          const toastNode = toastItem.ref.current!;\n          const toastTabbableCandidates = [toastNode, ...getTabbableCandidates(toastNode)];\n          return tabbingDirection === 'forwards'\n            ? toastTabbableCandidates\n            : toastTabbableCandidates.reverse();\n        });\n        return (\n          tabbingDirection === 'forwards' ? tabbableCandidates.reverse() : tabbableCandidates\n        ).flat();\n      },\n      [getItems],\n    );\n\n    React.useEffect(() => {\n      const viewport = ref.current;\n      // We programmatically manage tabbing as we are unable to influence\n      // the source order with portals, this allows us to reverse the\n      // tab order so that it runs from most recent toast to least\n      if (viewport) {\n        const handleKeyDown = (event: KeyboardEvent) => {\n          const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;\n          const isTabKey = event.key === 'Tab' && !isMetaKey;\n\n          if (isTabKey) {\n            const focusedElement = document.activeElement;\n            const isTabbingBackwards = event.shiftKey;\n            const targetIsViewport = event.target === viewport;\n\n            // If we're back tabbing after jumping to the viewport then we simply\n            // proxy focus out to the preceding document\n            if (targetIsViewport && isTabbingBackwards) {\n              headFocusProxyRef.current?.focus();\n              return;\n            }\n\n            const tabbingDirection = isTabbingBackwards ? 'backwards' : 'forwards';\n            const sortedCandidates = getSortedTabbableCandidates({ tabbingDirection });\n            const index = sortedCandidates.findIndex((candidate) => candidate === focusedElement);\n            if (focusFirst(sortedCandidates.slice(index + 1))) {\n              event.preventDefault();\n            } else {\n              // If we can't focus that means we're at the edges so we\n              // proxy to the corresponding exit point and let the browser handle\n              // tab/shift+tab keypress and implicitly pass focus to the next valid element in the document\n              isTabbingBackwards\n                ? headFocusProxyRef.current?.focus()\n                : tailFocusProxyRef.current?.focus();\n            }\n          }\n        };\n\n        // Toasts are not in the viewport React tree so we need to bind DOM events\n        viewport.addEventListener('keydown', handleKeyDown);\n        return () => viewport.removeEventListener('keydown', handleKeyDown);\n      }\n    }, [getItems, getSortedTabbableCandidates]);\n\n    return (\n      <DismissableLayer.Branch\n        ref={wrapperRef}\n        role=\"region\"\n        aria-label={label.replace('{hotkey}', hotkeyLabel)}\n        // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume\n        tabIndex={-1}\n        // incase list has size when empty (e.g. padding), we remove pointer events so\n        // it doesn't prevent interactions with page elements that it overlays\n        style={{ pointerEvents: hasToasts ? undefined : 'none' }}\n      >\n        {hasToasts && (\n          <FocusProxy\n            ref={headFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'forwards',\n              });\n              focusFirst(tabbableCandidates);\n            }}\n          />\n        )}\n        {/**\n         * tabindex on the the list so that it can be focused when items are removed. we focus\n         * the list instead of the viewport so it announces number of items remaining.\n         */}\n        <Collection.Slot scope={__scopeToast}>\n          <Primitive.ol tabIndex={-1} {...viewportProps} ref={composedRefs} />\n        </Collection.Slot>\n        {hasToasts && (\n          <FocusProxy\n            ref={tailFocusProxyRef}\n            onFocusFromOutsideViewport={() => {\n              const tabbableCandidates = getSortedTabbableCandidates({\n                tabbingDirection: 'backwards',\n              });\n              focusFirst(tabbableCandidates);\n            }}\n          />\n        )}\n      </DismissableLayer.Branch>\n    );\n  },\n);\n\nToastViewport.displayName = VIEWPORT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst FOCUS_PROXY_NAME = 'ToastFocusProxy';\n\ntype FocusProxyElement = React.ComponentRef<typeof VisuallyHidden>;\ntype VisuallyHiddenProps = React.ComponentPropsWithoutRef<typeof VisuallyHidden>;\ninterface FocusProxyProps extends VisuallyHiddenProps {\n  onFocusFromOutsideViewport(): void;\n}\n\nconst FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyProps>>(\n  (props, forwardedRef) => {\n    const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;\n    const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);\n\n    return (\n      <VisuallyHidden\n        tabIndex={0}\n        {...proxyProps}\n        ref={forwardedRef}\n        // Avoid page scrolling when focus is on the focus proxy\n        style={{ position: 'fixed' }}\n        onFocus={(event) => {\n          const prevFocusedElement = event.relatedTarget as HTMLElement | null;\n          const isFocusFromOutsideViewport = !context.viewport?.contains(prevFocusedElement);\n          if (isFocusFromOutsideViewport) onFocusFromOutsideViewport();\n        }}\n      />\n    );\n  },\n);\n\nFocusProxy.displayName = FOCUS_PROXY_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Toast\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOAST_NAME = 'Toast';\nconst TOAST_SWIPE_START = 'toast.swipeStart';\nconst TOAST_SWIPE_MOVE = 'toast.swipeMove';\nconst TOAST_SWIPE_CANCEL = 'toast.swipeCancel';\nconst TOAST_SWIPE_END = 'toast.swipeEnd';\n\ntype ToastElement = ToastImplElement;\ninterface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?(open: boolean): void;\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst Toast = React.forwardRef<ToastElement, ToastProps>(\n  (props: ScopedProps<ToastProps>, forwardedRef) => {\n    const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props;\n    const [open, setOpen] = useControllableState({\n      prop: openProp,\n      defaultProp: defaultOpen ?? true,\n      onChange: onOpenChange,\n      caller: TOAST_NAME,\n    });\n    return (\n      <Presence present={forceMount || open}>\n        <ToastImpl\n          open={open}\n          {...toastProps}\n          ref={forwardedRef}\n          onClose={() => setOpen(false)}\n          onPause={useCallbackRef(props.onPause)}\n          onResume={useCallbackRef(props.onResume)}\n          onSwipeStart={composeEventHandlers(props.onSwipeStart, (event) => {\n            event.currentTarget.setAttribute('data-swipe', 'start');\n          })}\n          onSwipeMove={composeEventHandlers(props.onSwipeMove, (event) => {\n            const { x, y } = event.detail.delta;\n            event.currentTarget.setAttribute('data-swipe', 'move');\n            event.currentTarget.style.setProperty('--radix-toast-swipe-move-x', `${x}px`);\n            event.currentTarget.style.setProperty('--radix-toast-swipe-move-y', `${y}px`);\n          })}\n          onSwipeCancel={composeEventHandlers(props.onSwipeCancel, (event) => {\n            event.currentTarget.setAttribute('data-swipe', 'cancel');\n            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');\n            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');\n            event.currentTarget.style.removeProperty('--radix-toast-swipe-end-x');\n            event.currentTarget.style.removeProperty('--radix-toast-swipe-end-y');\n          })}\n          onSwipeEnd={composeEventHandlers(props.onSwipeEnd, (event) => {\n            const { x, y } = event.detail.delta;\n            event.currentTarget.setAttribute('data-swipe', 'end');\n            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-x');\n            event.currentTarget.style.removeProperty('--radix-toast-swipe-move-y');\n            event.currentTarget.style.setProperty('--radix-toast-swipe-end-x', `${x}px`);\n            event.currentTarget.style.setProperty('--radix-toast-swipe-end-y', `${y}px`);\n            setOpen(false);\n          })}\n        />\n      </Presence>\n    );\n  },\n);\n\nToast.displayName = TOAST_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype SwipeEvent = { currentTarget: EventTarget & ToastElement } & Omit<\n  CustomEvent<{ originalEvent: React.PointerEvent; delta: { x: number; y: number } }>,\n  'currentTarget'\n>;\n\nconst [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(TOAST_NAME, {\n  onClose() {},\n});\n\ntype ToastImplElement = React.ComponentRef<typeof Primitive.li>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer.Root>;\ntype ToastImplPrivateProps = { open: boolean; onClose(): void };\ntype PrimitiveListItemProps = React.ComponentPropsWithoutRef<typeof Primitive.li>;\ninterface ToastImplProps extends ToastImplPrivateProps, PrimitiveListItemProps {\n  type?: 'foreground' | 'background';\n  /**\n   * Time in milliseconds that toast should remain visible for. Overrides value\n   * given to `ToastProvider`.\n   */\n  duration?: number;\n  onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n  onPause?(): void;\n  onResume?(): void;\n  onSwipeStart?(event: SwipeEvent): void;\n  onSwipeMove?(event: SwipeEvent): void;\n  onSwipeCancel?(event: SwipeEvent): void;\n  onSwipeEnd?(event: SwipeEvent): void;\n}\n\nconst ToastImpl = React.forwardRef<ToastImplElement, ToastImplProps>(\n  (props: ScopedProps<ToastImplProps>, forwardedRef) => {\n    const {\n      __scopeToast,\n      type = 'foreground',\n      duration: durationProp,\n      open,\n      onClose,\n      onEscapeKeyDown,\n      onPause,\n      onResume,\n      onSwipeStart,\n      onSwipeMove,\n      onSwipeCancel,\n      onSwipeEnd,\n      ...toastProps\n    } = props;\n    const context = useToastProviderContext(TOAST_NAME, __scopeToast);\n    const [node, setNode] = React.useState<ToastImplElement | null>(null);\n    const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n    const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);\n    const swipeDeltaRef = React.useRef<{ x: number; y: number } | null>(null);\n    const duration = durationProp || context.duration;\n    const closeTimerStartTimeRef = React.useRef(0);\n    const closeTimerRemainingTimeRef = React.useRef(duration);\n    const closeTimerRef = React.useRef(0);\n    const { onToastAdd, onToastRemove } = context;\n    const handleClose = useCallbackRef(() => {\n      // focus viewport if focus is within toast to read the remaining toast\n      // count to SR users and ensure focus isn't lost\n      const isFocusInToast = node?.contains(document.activeElement);\n      if (isFocusInToast) context.viewport?.focus();\n      onClose();\n    });\n\n    const startTimer = React.useCallback(\n      (duration: number) => {\n        if (!duration || duration === Infinity) return;\n        window.clearTimeout(closeTimerRef.current);\n        closeTimerStartTimeRef.current = new Date().getTime();\n        closeTimerRef.current = window.setTimeout(handleClose, duration);\n      },\n      [handleClose],\n    );\n\n    React.useEffect(() => {\n      const viewport = context.viewport;\n      if (viewport) {\n        const handleResume = () => {\n          startTimer(closeTimerRemainingTimeRef.current);\n          onResume?.();\n        };\n        const handlePause = () => {\n          const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current;\n          closeTimerRemainingTimeRef.current = closeTimerRemainingTimeRef.current - elapsedTime;\n          window.clearTimeout(closeTimerRef.current);\n          onPause?.();\n        };\n        viewport.addEventListener(VIEWPORT_PAUSE, handlePause);\n        viewport.addEventListener(VIEWPORT_RESUME, handleResume);\n        return () => {\n          viewport.removeEventListener(VIEWPORT_PAUSE, handlePause);\n          viewport.removeEventListener(VIEWPORT_RESUME, handleResume);\n        };\n      }\n    }, [context.viewport, duration, onPause, onResume, startTimer]);\n\n    // start timer when toast opens or duration changes.\n    // we include `open` in deps because closed !== unmounted when animating\n    // so it could reopen before being completely unmounted\n    React.useEffect(() => {\n      if (open && !context.isClosePausedRef.current) startTimer(duration);\n    }, [open, duration, context.isClosePausedRef, startTimer]);\n\n    React.useEffect(() => {\n      onToastAdd();\n      return () => onToastRemove();\n    }, [onToastAdd, onToastRemove]);\n\n    const announceTextContent = React.useMemo(() => {\n      return node ? getAnnounceTextContent(node) : null;\n    }, [node]);\n\n    if (!context.viewport) return null;\n\n    return (\n      <>\n        {announceTextContent && (\n          <ToastAnnounce\n            __scopeToast={__scopeToast}\n            // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.\n            role=\"status\"\n            aria-live={type === 'foreground' ? 'assertive' : 'polite'}\n          >\n            {announceTextContent}\n          </ToastAnnounce>\n        )}\n\n        <ToastInteractiveProvider scope={__scopeToast} onClose={handleClose}>\n          {ReactDOM.createPortal(\n            <Collection.ItemSlot scope={__scopeToast}>\n              <DismissableLayer.Root\n                asChild\n                onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {\n                  if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();\n                  context.isFocusedToastEscapeKeyDownRef.current = false;\n                })}\n              >\n                <Primitive.li\n                  tabIndex={0}\n                  data-state={open ? 'open' : 'closed'}\n                  data-swipe-direction={context.swipeDirection}\n                  {...toastProps}\n                  ref={composedRefs}\n                  style={{ userSelect: 'none', touchAction: 'none', ...props.style }}\n                  onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n                    if (event.key !== 'Escape') return;\n                    onEscapeKeyDown?.(event.nativeEvent);\n                    if (!event.nativeEvent.defaultPrevented) {\n                      context.isFocusedToastEscapeKeyDownRef.current = true;\n                      handleClose();\n                    }\n                  })}\n                  onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n                    if (event.button !== 0) return;\n                    pointerStartRef.current = { x: event.clientX, y: event.clientY };\n                  })}\n                  onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {\n                    if (!pointerStartRef.current) return;\n                    const x = event.clientX - pointerStartRef.current.x;\n                    const y = event.clientY - pointerStartRef.current.y;\n                    const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);\n                    const isHorizontalSwipe = ['left', 'right'].includes(context.swipeDirection);\n                    const clamp = ['left', 'up'].includes(context.swipeDirection)\n                      ? Math.min\n                      : Math.max;\n                    const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;\n                    const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;\n                    const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;\n                    const delta = { x: clampedX, y: clampedY };\n                    const eventDetail = { originalEvent: event, delta };\n                    if (hasSwipeMoveStarted) {\n                      swipeDeltaRef.current = delta;\n                      handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {\n                        discrete: false,\n                      });\n                    } else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {\n                      swipeDeltaRef.current = delta;\n                      handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {\n                        discrete: false,\n                      });\n                      (event.target as HTMLElement).setPointerCapture(event.pointerId);\n                    } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {\n                      // User is swiping in wrong direction so we disable swipe gesture\n                      // for the current pointer down interaction\n                      pointerStartRef.current = null;\n                    }\n                  })}\n                  onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n                    const delta = swipeDeltaRef.current;\n                    const target = event.target as HTMLElement;\n                    if (target.hasPointerCapture(event.pointerId)) {\n                      target.releasePointerCapture(event.pointerId);\n                    }\n                    swipeDeltaRef.current = null;\n                    pointerStartRef.current = null;\n                    if (delta) {\n                      const toast = event.currentTarget;\n                      const eventDetail = { originalEvent: event, delta };\n                      if (\n                        isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)\n                      ) {\n                        handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {\n                          discrete: true,\n                        });\n                      } else {\n                        handleAndDispatchCustomEvent(\n                          TOAST_SWIPE_CANCEL,\n                          onSwipeCancel,\n                          eventDetail,\n                          {\n                            discrete: true,\n                          },\n                        );\n                      }\n                      // Prevent click event from triggering on items within the toast when\n                      // pointer up is part of a swipe gesture\n                      toast.addEventListener('click', (event) => event.preventDefault(), {\n                        once: true,\n                      });\n                    }\n                  })}\n                />\n              </DismissableLayer.Root>\n            </Collection.ItemSlot>,\n            context.viewport,\n          )}\n        </ToastInteractiveProvider>\n      </>\n    );\n  },\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ninterface ToastAnnounceProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>,\n    ScopedProps<{ children: string[] }> {}\n\nconst ToastAnnounce: React.FC<ToastAnnounceProps> = (props: ScopedProps<ToastAnnounceProps>) => {\n  const { __scopeToast, children, ...announceProps } = props;\n  const context = useToastProviderContext(TOAST_NAME, __scopeToast);\n  const [renderAnnounceText, setRenderAnnounceText] = React.useState(false);\n  const [isAnnounced, setIsAnnounced] = React.useState(false);\n\n  // render text content in the next frame to ensure toast is announced in NVDA\n  useNextFrame(() => setRenderAnnounceText(true));\n\n  // cleanup after announcing\n  React.useEffect(() => {\n    const timer = window.setTimeout(() => setIsAnnounced(true), 1000);\n    return () => window.clearTimeout(timer);\n  }, []);\n\n  return isAnnounced ? null : (\n    <Portal asChild>\n      <VisuallyHidden {...announceProps}>\n        {renderAnnounceText && (\n          <>\n            {context.label} {children}\n          </>\n        )}\n      </VisuallyHidden>\n    </Portal>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ToastTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'ToastTitle';\n\ntype ToastTitleElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToastTitleProps extends PrimitiveDivProps {}\n\nconst ToastTitle = React.forwardRef<ToastTitleElement, ToastTitleProps>(\n  (props: ScopedProps<ToastTitleProps>, forwardedRef) => {\n    const { __scopeToast, ...titleProps } = props;\n    return <Primitive.div {...titleProps} ref={forwardedRef} />;\n  },\n);\n\nToastTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToastDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'ToastDescription';\n\ntype ToastDescriptionElement = React.ComponentRef<typeof Primitive.div>;\ninterface ToastDescriptionProps extends PrimitiveDivProps {}\n\nconst ToastDescription = React.forwardRef<ToastDescriptionElement, ToastDescriptionProps>(\n  (props: ScopedProps<ToastDescriptionProps>, forwardedRef) => {\n    const { __scopeToast, ...descriptionProps } = props;\n    return <Primitive.div {...descriptionProps} ref={forwardedRef} />;\n  },\n);\n\nToastDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToastAction\n * -----------------------------------------------------------------------------------------------*/\n\nconst ACTION_NAME = 'ToastAction';\n\ntype ToastActionElement = ToastCloseElement;\ninterface ToastActionProps extends ToastCloseProps {\n  /**\n   * A short description for an alternate way to carry out the action. For screen reader users\n   * who will not be able to navigate to the button easily/quickly.\n   * @example <ToastAction altText=\"Goto account settings to upgrade\">Upgrade</ToastAction>\n   * @example <ToastAction altText=\"Undo (Alt+U)\">Undo</ToastAction>\n   */\n  altText: string;\n}\n\nconst ToastAction = React.forwardRef<ToastActionElement, ToastActionProps>(\n  (props: ScopedProps<ToastActionProps>, forwardedRef) => {\n    const { altText, ...actionProps } = props;\n\n    if (!altText.trim()) {\n      console.error(\n        `Invalid prop \\`altText\\` supplied to \\`${ACTION_NAME}\\`. Expected non-empty \\`string\\`.`,\n      );\n      return null;\n    }\n\n    return (\n      <ToastAnnounceExclude altText={altText} asChild>\n        <ToastClose {...actionProps} ref={forwardedRef} />\n      </ToastAnnounceExclude>\n    );\n  },\n);\n\nToastAction.displayName = ACTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToastClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'ToastClose';\n\ntype ToastCloseElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface ToastCloseProps extends PrimitiveButtonProps {}\n\nconst ToastClose = React.forwardRef<ToastCloseElement, ToastCloseProps>(\n  (props: ScopedProps<ToastCloseProps>, forwardedRef) => {\n    const { __scopeToast, ...closeProps } = props;\n    const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);\n\n    return (\n      <ToastAnnounceExclude asChild>\n        <Primitive.button\n          type=\"button\"\n          {...closeProps}\n          ref={forwardedRef}\n          onClick={composeEventHandlers(props.onClick, interactiveContext.onClose)}\n        />\n      </ToastAnnounceExclude>\n    );\n  },\n);\n\nToastClose.displayName = CLOSE_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype ToastAnnounceExcludeElement = React.ComponentRef<typeof Primitive.div>;\ninterface ToastAnnounceExcludeProps extends PrimitiveDivProps {\n  altText?: string;\n}\n\nconst ToastAnnounceExclude = React.forwardRef<\n  ToastAnnounceExcludeElement,\n  ToastAnnounceExcludeProps\n>((props: ScopedProps<ToastAnnounceExcludeProps>, forwardedRef) => {\n  const { __scopeToast, altText, ...announceExcludeProps } = props;\n\n  return (\n    <Primitive.div\n      data-radix-toast-announce-exclude=\"\"\n      data-radix-toast-announce-alt={altText || undefined}\n      {...announceExcludeProps}\n      ref={forwardedRef}\n    />\n  );\n});\n\nfunction getAnnounceTextContent(container: HTMLElement) {\n  const textContent: string[] = [];\n  const childNodes = Array.from(container.childNodes);\n\n  childNodes.forEach((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent) textContent.push(node.textContent);\n    if (isHTMLElement(node)) {\n      const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none';\n      const isExcluded = node.dataset.radixToastAnnounceExclude === '';\n\n      if (!isHidden) {\n        if (isExcluded) {\n          const altText = node.dataset.radixToastAnnounceAlt;\n          if (altText) textContent.push(altText);\n        } else {\n          textContent.push(...getAnnounceTextContent(node));\n        }\n      }\n    }\n  });\n\n  // We return a collection of text rather than a single concatenated string.\n  // This allows SR VO to naturally pause break between nodes while announcing.\n  return textContent;\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\nfunction handleAndDispatchCustomEvent<\n  E extends CustomEvent,\n  ReactEvent extends React.SyntheticEvent,\n>(\n  name: string,\n  handler: ((event: E) => void) | undefined,\n  detail: { originalEvent: ReactEvent } & (E extends CustomEvent<infer D> ? D : never),\n  { discrete }: { discrete: boolean },\n) {\n  const currentTarget = detail.originalEvent.currentTarget as HTMLElement;\n  const event = new CustomEvent(name, { bubbles: true, cancelable: true, detail });\n  if (handler) currentTarget.addEventListener(name, handler as EventListener, { once: true });\n\n  if (discrete) {\n    dispatchDiscreteCustomEvent(currentTarget, event);\n  } else {\n    currentTarget.dispatchEvent(event);\n  }\n}\n\nconst isDeltaInDirection = (\n  delta: { x: number; y: number },\n  direction: SwipeDirection,\n  threshold = 0,\n) => {\n  const deltaX = Math.abs(delta.x);\n  const deltaY = Math.abs(delta.y);\n  const isDeltaX = deltaX > deltaY;\n  if (direction === 'left' || direction === 'right') {\n    return isDeltaX && deltaX > threshold;\n  } else {\n    return !isDeltaX && deltaY > threshold;\n  }\n};\n\nfunction useNextFrame(callback = () => {}) {\n  const fn = useCallbackRef(callback);\n  useLayoutEffect(() => {\n    let raf1 = 0;\n    let raf2 = 0;\n    raf1 = window.requestAnimationFrame(() => (raf2 = window.requestAnimationFrame(fn)));\n    return () => {\n      window.cancelAnimationFrame(raf1);\n      window.cancelAnimationFrame(raf2);\n    };\n  }, [fn]);\n}\n\nfunction isHTMLElement(node: any): node is HTMLElement {\n  return node.nodeType === node.ELEMENT_NODE;\n}\n\n/**\n * Returns a list of potential tabbable candidates.\n *\n * NOTE: This is only a close approximation. For example it doesn't take into account cases like when\n * elements are not visible. This cannot be worked out easily by just reading a property, but rather\n * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.\n *\n * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker\n * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1\n */\nfunction getTabbableCandidates(container: HTMLElement) {\n  const nodes: HTMLElement[] = [];\n  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n    acceptNode: (node: any) => {\n      const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden';\n      if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;\n      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the\n      // runtime's understanding of tabbability, so this automatically accounts\n      // for any kind of element that could be tabbed to.\n      return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;\n    },\n  });\n  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);\n  // we do not take into account the order of nodes with positive `tabIndex` as it\n  // hinders accessibility to have tab order different from visual order.\n  return nodes;\n}\n\nfunction focusFirst(candidates: HTMLElement[]) {\n  const previouslyFocusedElement = document.activeElement;\n  return candidates.some((candidate) => {\n    // if focus is already where we want to go, we don't want to keep going through the candidates\n    if (candidate === previouslyFocusedElement) return true;\n    candidate.focus();\n    return document.activeElement !== previouslyFocusedElement;\n  });\n}\n\nconst Provider = ToastProvider;\nconst Viewport = ToastViewport;\nconst Root = Toast;\nconst Title = ToastTitle;\nconst Description = ToastDescription;\nconst Action = ToastAction;\nconst Close = ToastClose;\n\nexport {\n  createToastScope,\n  //\n  ToastProvider,\n  ToastViewport,\n  Toast,\n  ToastTitle,\n  ToastDescription,\n  ToastAction,\n  ToastClose,\n  //\n  Provider,\n  Viewport,\n  Root,\n  Title,\n  Description,\n  Action,\n  Close,\n};\nexport type {\n  ToastProviderProps,\n  ToastViewportProps,\n  ToastProps,\n  ToastTitleProps,\n  ToastDescriptionProps,\n  ToastActionProps,\n  ToastCloseProps,\n};\n"
  },
  {
    "path": "packages/react/toast/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/toggle/CHANGELOG.md",
    "content": "# @radix-ui/react-toggle\n\n## 1.1.10\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-primitive@2.1.4`\n\n## 1.1.9\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.1.4\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.0`, `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/toggle/README.md",
    "content": "# `react-toggle`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/toggle).\n"
  },
  {
    "path": "packages/react/toggle/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/toggle/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-toggle\",\n  \"version\": \"1.1.10\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/toggle/src/index.ts",
    "content": "'use client';\nexport {\n  Toggle,\n  //\n  Root,\n} from './toggle';\nexport type { ToggleProps } from './toggle';\n"
  },
  {
    "path": "packages/react/toggle/src/toggle.test.tsx",
    "content": "import type { RenderResult } from '@testing-library/react';\nimport { cleanup, fireEvent, render } from '@testing-library/react';\nimport * as Toggle from './toggle';\nimport { axe } from 'vitest-axe';\nimport { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';\n\nconst TEXT_CHILD = 'Like';\n\ndescribe('given a Toggle with text', () => {\n  let rendered: RenderResult;\n\n  beforeEach(() => {\n    rendered = render(<Toggle.Root>{TEXT_CHILD}</Toggle.Root>);\n  });\n\n  afterEach(cleanup);\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  it('should render with attributes as false/off by default', () => {\n    const button = rendered.getByRole('button', { name: TEXT_CHILD });\n\n    expect(button).toHaveAttribute('aria-pressed', 'false');\n    expect(button).toHaveAttribute('data-state', 'off');\n  });\n\n  it('Click event should change pressed attributes to true/on', () => {\n    const button = rendered.getByRole('button', { name: TEXT_CHILD });\n\n    fireEvent(\n      button,\n      new MouseEvent('click', {\n        bubbles: true,\n        cancelable: true,\n      }),\n    );\n\n    expect(button).toHaveAttribute('aria-pressed', 'true');\n    expect(button).toHaveAttribute('data-state', 'on');\n  });\n});\n\ndescribe('given a Toggle with text and defaultPressed=\"true\"', () => {\n  let rendered: RenderResult;\n\n  beforeEach(() => {\n    rendered = render(<Toggle.Root defaultPressed>{TEXT_CHILD}</Toggle.Root>);\n  });\n\n  afterEach(cleanup);\n\n  it('should render with attributes true/on by default', () => {\n    const button = rendered.getByRole('button', { name: TEXT_CHILD });\n\n    expect(button).toHaveAttribute('aria-pressed', 'true');\n    expect(button).toHaveAttribute('data-state', 'on');\n  });\n\n  it('Click event should change attributes back to off/false', () => {\n    const button = rendered.getByRole('button', { name: TEXT_CHILD });\n\n    fireEvent(\n      button,\n      new MouseEvent('click', {\n        bubbles: true,\n        cancelable: true,\n      }),\n    );\n\n    expect(button).toHaveAttribute('aria-pressed', 'false');\n    expect(button).toHaveAttribute('data-state', 'off');\n  });\n});\n\ndescribe('given a Toggle with text and disabled=\"true\"', () => {\n  let rendered: RenderResult;\n\n  beforeEach(() => {\n    rendered = render(<Toggle.Root disabled>{TEXT_CHILD}</Toggle.Root>);\n  });\n\n  afterEach(cleanup);\n\n  it('on click the attributes do not change', () => {\n    const button = rendered.getByRole('button', { name: TEXT_CHILD });\n\n    expect(button).toHaveAttribute('aria-pressed', 'false');\n    expect(button).toHaveAttribute('data-state', 'off');\n    expect(button).toHaveAttribute('disabled', '');\n\n    fireEvent(\n      button,\n      new MouseEvent('click', {\n        bubbles: true,\n        cancelable: true,\n      }),\n    );\n\n    expect(button).toHaveAttribute('aria-pressed', 'false');\n    expect(button).toHaveAttribute('data-state', 'off');\n  });\n});\n\ndescribe('given a controlled Toggle (with pressed and onPressedChange)', () => {\n  let rendered: RenderResult;\n  const onPressedChangeMock = vi.fn();\n\n  beforeEach(() => {\n    rendered = render(\n      <Toggle.Root pressed onPressedChange={onPressedChangeMock}>\n        {TEXT_CHILD}\n      </Toggle.Root>,\n    );\n  });\n\n  afterEach(cleanup);\n\n  it('Click event should keep the same attributes, and pass the new state to onPressedChange', () => {\n    const button = rendered.getByRole('button', { name: TEXT_CHILD });\n\n    expect(button).toHaveAttribute('aria-pressed', 'true');\n    expect(button).toHaveAttribute('data-state', 'on');\n\n    fireEvent(\n      button,\n      new MouseEvent('click', {\n        bubbles: true,\n        cancelable: true,\n      }),\n    );\n\n    expect(onPressedChangeMock).toHaveBeenCalledTimes(1);\n    expect(onPressedChangeMock).toHaveBeenCalledWith(false);\n\n    // The attributes do not change, they keep the same\n    // because it's a controlled component.\n    expect(button).toHaveAttribute('aria-pressed', 'true');\n    expect(button).toHaveAttribute('data-state', 'on');\n  });\n});\n"
  },
  {
    "path": "packages/react/toggle/src/toggle.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { Primitive } from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * Toggle\n * -----------------------------------------------------------------------------------------------*/\n\nconst NAME = 'Toggle';\n\ntype ToggleElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface ToggleProps extends PrimitiveButtonProps {\n  /**\n   * The controlled state of the toggle.\n   */\n  pressed?: boolean;\n  /**\n   * The state of the toggle when initially rendered. Use `defaultPressed`\n   * if you do not need to control the state of the toggle.\n   * @defaultValue false\n   */\n  defaultPressed?: boolean;\n  /**\n   * The callback that fires when the state of the toggle changes.\n   */\n  onPressedChange?(pressed: boolean): void;\n}\n\nconst Toggle = React.forwardRef<ToggleElement, ToggleProps>((props, forwardedRef) => {\n  const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;\n\n  const [pressed, setPressed] = useControllableState({\n    prop: pressedProp,\n    onChange: onPressedChange,\n    defaultProp: defaultPressed ?? false,\n    caller: NAME,\n  });\n\n  return (\n    <Primitive.button\n      type=\"button\"\n      aria-pressed={pressed}\n      data-state={pressed ? 'on' : 'off'}\n      data-disabled={props.disabled ? '' : undefined}\n      {...buttonProps}\n      ref={forwardedRef}\n      onClick={composeEventHandlers(props.onClick, () => {\n        if (!props.disabled) {\n          setPressed(!pressed);\n        }\n      })}\n    />\n  );\n});\n\nToggle.displayName = NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = Toggle;\n\nexport {\n  Toggle,\n  //\n  Root,\n};\nexport type { ToggleProps };\n"
  },
  {
    "path": "packages/react/toggle/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/toggle-group/CHANGELOG.md",
    "content": "# @radix-ui/react-toggle-group\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-roving-focus@1.1.11`, `@radix-ui/react-toggle@1.1.10`\n\n## 1.1.10\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.10`, `@radix-ui/react-toggle@1.1.9`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.1.9\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`, `@radix-ui/react-roving-focus@1.1.9`, `@radix-ui/react-toggle@1.1.8`\n\n## 1.1.8\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`, `@radix-ui/react-roving-focus@1.1.8`, `@radix-ui/react-toggle@1.1.7`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.7`\n\n## 1.1.6\n\n- 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`\n\n## 1.1.5\n\n- 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`\n\n## 1.1.4\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- 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`\n"
  },
  {
    "path": "packages/react/toggle-group/README.md",
    "content": "# `react-toggle-group`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/toggle-group).\n"
  },
  {
    "path": "packages/react/toggle-group/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/toggle-group/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-toggle-group\",\n  \"version\": \"1.1.11\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-roving-focus\": \"workspace:*\",\n    \"@radix-ui/react-toggle\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/toggle-group/src/index.ts",
    "content": "'use client';\nexport {\n  createToggleGroupScope,\n  //\n  ToggleGroup,\n  ToggleGroupItem,\n  //\n  Root,\n  Item,\n} from './toggle-group';\nexport type {\n  ToggleGroupSingleProps,\n  ToggleGroupMultipleProps,\n  ToggleGroupItemProps,\n} from './toggle-group';\n"
  },
  {
    "path": "packages/react/toggle-group/src/toggle-group.test.tsx",
    "content": "import * as React from 'react';\nimport { axe } from 'vitest-axe';\nimport type { RenderResult } from '@testing-library/react';\nimport { cleanup, render, fireEvent } from '@testing-library/react';\nimport * as ToggleGroup from './toggle-group';\nimport type { Mock } from 'vitest';\nimport { afterEach, describe, it, beforeEach, vi, expect } from 'vitest';\n\ndescribe('given a single ToggleGroup', () => {\n  let handleValueChange: Mock;\n  let rendered: RenderResult;\n  let one: HTMLElement;\n  let two: HTMLElement;\n\n  beforeEach(() => {\n    handleValueChange = vi.fn();\n    rendered = render(<ToggleGroupTest type=\"single\" onValueChange={handleValueChange} />);\n    one = rendered.getByText('One');\n    two = rendered.getByText('Two');\n  });\n\n  afterEach(cleanup);\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  describe('when clicking `One`', () => {\n    beforeEach(() => {\n      fireEvent.click(one);\n    });\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should change value to `One`', () => {\n      expect(handleValueChange).toHaveBeenCalledWith('One');\n    });\n\n    describe('then clicking `Two`', () => {\n      beforeEach(() => {\n        fireEvent.click(two);\n      });\n\n      it('should change value to `Two`', () => {\n        expect(handleValueChange).toHaveBeenCalledWith('Two');\n      });\n\n      describe('and clicking `Two` again`', () => {\n        beforeEach(() => {\n          fireEvent.click(two);\n        });\n\n        it('should change value to empty string', () => {\n          expect(handleValueChange).toHaveBeenCalledWith('');\n        });\n      });\n    });\n  });\n});\n\ndescribe('given a multiple ToggleGroup', () => {\n  let handleValueChange: Mock;\n  let rendered: RenderResult;\n  let one: HTMLElement;\n  let two: HTMLElement;\n\n  beforeEach(() => {\n    handleValueChange = vi.fn();\n    rendered = render(<ToggleGroupTest type=\"multiple\" onValueChange={handleValueChange} />);\n    one = rendered.getByText('One');\n    two = rendered.getByText('Two');\n  });\n\n  afterEach(cleanup);\n\n  it('should have no accessibility violations', async () => {\n    expect(await axe(rendered.container)).toHaveNoViolations();\n  });\n\n  describe('when clicking `One`', () => {\n    beforeEach(() => {\n      fireEvent.click(one);\n    });\n\n    it('should have no accessibility violations', async () => {\n      expect(await axe(rendered.container)).toHaveNoViolations();\n    });\n\n    it('should change value to `One`', () => {\n      expect(handleValueChange).toHaveBeenCalledWith(['One']);\n    });\n\n    describe('and clicking `One` again`', () => {\n      beforeEach(() => {\n        fireEvent.click(one);\n      });\n\n      it('should change value to empty array', () => {\n        expect(handleValueChange).toHaveBeenCalledWith([]);\n      });\n    });\n\n    describe('then clicking `Two`', () => {\n      beforeEach(() => {\n        fireEvent.click(two);\n      });\n\n      it('should add `Two` to value', () => {\n        expect(handleValueChange).toHaveBeenCalledWith(['One', 'Two']);\n      });\n\n      describe('and clicking `Two` again`', () => {\n        beforeEach(() => {\n          fireEvent.click(two);\n        });\n\n        it('should change value to `One`', () => {\n          expect(handleValueChange).toHaveBeenCalledWith(['One']);\n        });\n      });\n    });\n  });\n});\n\nconst ToggleGroupTest = (props: React.ComponentProps<typeof ToggleGroup.Root>) => (\n  <ToggleGroup.Root {...props}>\n    <ToggleGroup.Item value=\"One\">One</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"Two\">Two</ToggleGroup.Item>\n    <ToggleGroup.Item value=\"Three\">Three</ToggleGroup.Item>\n  </ToggleGroup.Root>\n);\n"
  },
  {
    "path": "packages/react/toggle-group/src/toggle-group.tsx",
    "content": "import React from 'react';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Toggle } from '@radix-ui/react-toggle';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = 'ToggleGroup';\n\ntype ScopedProps<P> = P & { __scopeToggleGroup?: Scope };\nconst [createToggleGroupContext, createToggleGroupScope] = createContextScope(TOGGLE_GROUP_NAME, [\n  createRovingFocusGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\n\ntype ToggleGroupElement = ToggleGroupImplSingleElement | ToggleGroupImplMultipleElement;\ninterface ToggleGroupSingleProps extends ToggleGroupImplSingleProps {\n  type: 'single';\n}\ninterface ToggleGroupMultipleProps extends ToggleGroupImplMultipleProps {\n  type: 'multiple';\n}\n\nconst ToggleGroup = React.forwardRef<\n  ToggleGroupElement,\n  ToggleGroupSingleProps | ToggleGroupMultipleProps\n>((props, forwardedRef) => {\n  const { type, ...toggleGroupProps } = props;\n\n  if (type === 'single') {\n    const singleProps = toggleGroupProps as ToggleGroupImplSingleProps;\n    return <ToggleGroupImplSingle {...singleProps} ref={forwardedRef} />;\n  }\n\n  if (type === 'multiple') {\n    const multipleProps = toggleGroupProps as ToggleGroupImplMultipleProps;\n    return <ToggleGroupImplMultiple {...multipleProps} ref={forwardedRef} />;\n  }\n\n  throw new Error(`Missing prop \\`type\\` expected on \\`${TOGGLE_GROUP_NAME}\\``);\n});\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupValueContextValue = {\n  type: 'single' | 'multiple';\n  value: string[];\n  onItemActivate(value: string): void;\n  onItemDeactivate(value: string): void;\n};\n\nconst [ToggleGroupValueProvider, useToggleGroupValueContext] =\n  createToggleGroupContext<ToggleGroupValueContextValue>(TOGGLE_GROUP_NAME);\n\ntype ToggleGroupImplSingleElement = ToggleGroupImplElement;\ninterface ToggleGroupImplSingleProps extends ToggleGroupImplProps {\n  /**\n   * The controlled stateful value of the item that is pressed.\n   */\n  value?: string;\n  /**\n   * The value of the item that is pressed when initially rendered. Use\n   * `defaultValue` if you do not need to control the state of a toggle group.\n   */\n  defaultValue?: string;\n  /**\n   * The callback that fires when the value of the toggle group changes.\n   */\n  onValueChange?(value: string): void;\n}\n\nconst ToggleGroupImplSingle = React.forwardRef<\n  ToggleGroupImplSingleElement,\n  ToggleGroupImplSingleProps\n>((props: ScopedProps<ToggleGroupImplSingleProps>, forwardedRef) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange = () => {},\n    ...toggleGroupSingleProps\n  } = props;\n\n  const [value, setValue] = useControllableState({\n    prop: valueProp,\n    defaultProp: defaultValue ?? '',\n    onChange: onValueChange,\n    caller: TOGGLE_GROUP_NAME,\n  });\n\n  return (\n    <ToggleGroupValueProvider\n      scope={props.__scopeToggleGroup}\n      type=\"single\"\n      value={React.useMemo(() => (value ? [value] : []), [value])}\n      onItemActivate={setValue}\n      onItemDeactivate={React.useCallback(() => setValue(''), [setValue])}\n    >\n      <ToggleGroupImpl {...toggleGroupSingleProps} ref={forwardedRef} />\n    </ToggleGroupValueProvider>\n  );\n});\n\ntype ToggleGroupImplMultipleElement = ToggleGroupImplElement;\ninterface ToggleGroupImplMultipleProps extends ToggleGroupImplProps {\n  /**\n   * The controlled stateful value of the items that are pressed.\n   */\n  value?: string[];\n  /**\n   * The value of the items that are pressed when initially rendered. Use\n   * `defaultValue` if you do not need to control the state of a toggle group.\n   */\n  defaultValue?: string[];\n  /**\n   * The callback that fires when the state of the toggle group changes.\n   */\n  onValueChange?(value: string[]): void;\n}\n\nconst ToggleGroupImplMultiple = React.forwardRef<\n  ToggleGroupImplMultipleElement,\n  ToggleGroupImplMultipleProps\n>((props: ScopedProps<ToggleGroupImplMultipleProps>, forwardedRef) => {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange = () => {},\n    ...toggleGroupMultipleProps\n  } = props;\n\n  const [value, setValue] = useControllableState({\n    prop: valueProp,\n    defaultProp: defaultValue ?? [],\n    onChange: onValueChange,\n    caller: TOGGLE_GROUP_NAME,\n  });\n\n  const handleButtonActivate = React.useCallback(\n    (itemValue: string) => setValue((prevValue = []) => [...prevValue, itemValue]),\n    [setValue],\n  );\n\n  const handleButtonDeactivate = React.useCallback(\n    (itemValue: string) =>\n      setValue((prevValue = []) => prevValue.filter((value) => value !== itemValue)),\n    [setValue],\n  );\n\n  return (\n    <ToggleGroupValueProvider\n      scope={props.__scopeToggleGroup}\n      type=\"multiple\"\n      value={value}\n      onItemActivate={handleButtonActivate}\n      onItemDeactivate={handleButtonDeactivate}\n    >\n      <ToggleGroupImpl {...toggleGroupMultipleProps} ref={forwardedRef} />\n    </ToggleGroupValueProvider>\n  );\n});\n\nToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupContextValue = { rovingFocus: boolean; disabled: boolean };\n\nconst [ToggleGroupContext, useToggleGroupContext] =\n  createToggleGroupContext<ToggleGroupContextValue>(TOGGLE_GROUP_NAME);\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToggleGroupImplElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToggleGroupImplProps extends PrimitiveDivProps {\n  /**\n   * Whether the group is disabled from user interaction.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the group should maintain roving focus of its buttons.\n   * @defaultValue true\n   */\n  rovingFocus?: boolean;\n  loop?: RovingFocusGroupProps['loop'];\n  orientation?: RovingFocusGroupProps['orientation'];\n  dir?: RovingFocusGroupProps['dir'];\n}\n\nconst ToggleGroupImpl = React.forwardRef<ToggleGroupImplElement, ToggleGroupImplProps>(\n  (props: ScopedProps<ToggleGroupImplProps>, forwardedRef) => {\n    const {\n      __scopeToggleGroup,\n      disabled = false,\n      rovingFocus = true,\n      orientation,\n      dir,\n      loop = true,\n      ...toggleGroupProps\n    } = props;\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToggleGroup);\n    const direction = useDirection(dir);\n    const commonProps = { role: 'group', dir: direction, ...toggleGroupProps };\n    return (\n      <ToggleGroupContext scope={__scopeToggleGroup} rovingFocus={rovingFocus} disabled={disabled}>\n        {rovingFocus ? (\n          <RovingFocusGroup.Root\n            asChild\n            {...rovingFocusGroupScope}\n            orientation={orientation}\n            dir={direction}\n            loop={loop}\n          >\n            <Primitive.div {...commonProps} ref={forwardedRef} />\n          </RovingFocusGroup.Root>\n        ) : (\n          <Primitive.div {...commonProps} ref={forwardedRef} />\n        )}\n      </ToggleGroupContext>\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------------------------------\n * ToggleGroupItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst ITEM_NAME = 'ToggleGroupItem';\n\ntype ToggleGroupItemElement = ToggleGroupItemImplElement;\ninterface ToggleGroupItemProps extends Omit<ToggleGroupItemImplProps, 'pressed'> {}\n\nconst ToggleGroupItem = React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(\n  (props: ScopedProps<ToggleGroupItemProps>, forwardedRef) => {\n    const valueContext = useToggleGroupValueContext(ITEM_NAME, props.__scopeToggleGroup);\n    const context = useToggleGroupContext(ITEM_NAME, props.__scopeToggleGroup);\n    const rovingFocusGroupScope = useRovingFocusGroupScope(props.__scopeToggleGroup);\n    const pressed = valueContext.value.includes(props.value);\n    const disabled = context.disabled || props.disabled;\n    const commonProps = { ...props, pressed, disabled };\n    const ref = React.useRef<HTMLDivElement>(null);\n    return context.rovingFocus ? (\n      <RovingFocusGroup.Item\n        asChild\n        {...rovingFocusGroupScope}\n        focusable={!disabled}\n        active={pressed}\n        ref={ref}\n      >\n        <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n      </RovingFocusGroup.Item>\n    ) : (\n      <ToggleGroupItemImpl {...commonProps} ref={forwardedRef} />\n    );\n  },\n);\n\nToggleGroupItem.displayName = ITEM_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype ToggleGroupItemImplElement = React.ComponentRef<typeof Toggle>;\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle>;\ninterface ToggleGroupItemImplProps extends Omit<ToggleProps, 'defaultPressed' | 'onPressedChange'> {\n  /**\n   * A string value for the toggle group item. All items within a toggle group should use a unique value.\n   */\n  value: string;\n}\n\nconst ToggleGroupItemImpl = React.forwardRef<ToggleGroupItemImplElement, ToggleGroupItemImplProps>(\n  (props: ScopedProps<ToggleGroupItemImplProps>, forwardedRef) => {\n    const { __scopeToggleGroup, value, ...itemProps } = props;\n    const valueContext = useToggleGroupValueContext(ITEM_NAME, __scopeToggleGroup);\n    const singleProps = { role: 'radio', 'aria-checked': props.pressed, 'aria-pressed': undefined };\n    const typeProps = valueContext.type === 'single' ? singleProps : undefined;\n    return (\n      <Toggle\n        {...typeProps}\n        {...itemProps}\n        ref={forwardedRef}\n        onPressedChange={(pressed) => {\n          if (pressed) {\n            valueContext.onItemActivate(value);\n          } else {\n            valueContext.onItemDeactivate(value);\n          }\n        }}\n      />\n    );\n  },\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = ToggleGroup;\nconst Item = ToggleGroupItem;\n\nexport {\n  createToggleGroupScope,\n  //\n  ToggleGroup,\n  ToggleGroupItem,\n  //\n  Root,\n  Item,\n};\nexport type { ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps };\n"
  },
  {
    "path": "packages/react/toggle-group/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/toolbar/CHANGELOG.md",
    "content": "# @radix-ui/react-toolbar\n\n## 1.1.11\n\n- Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-roving-focus@1.1.11`, `@radix-ui/react-toggle-group@1.1.11`, `@radix-ui/react-separator@1.1.8`\n\n## 1.1.10\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- 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`\n\n## 1.1.9\n\n- 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`\n\n## 1.1.8\n\n- 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`\n\n## 1.1.7\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.7`, `@radix-ui/react-toggle-group@1.1.7`\n\n## 1.1.6\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.6`, `@radix-ui/react-toggle-group@1.1.6`\n\n## 1.1.5\n\n- Updated dependencies: `@radix-ui/react-roving-focus@1.1.5`, `@radix-ui/react-toggle-group@1.1.5`\n\n## 1.1.4\n\n- 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`\n"
  },
  {
    "path": "packages/react/toolbar/README.md",
    "content": "# `react-toolbar`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/toolbar).\n"
  },
  {
    "path": "packages/react/toolbar/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/toolbar/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-toolbar\",\n  \"version\": \"1.1.11\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-direction\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-roving-focus\": \"workspace:*\",\n    \"@radix-ui/react-separator\": \"workspace:*\",\n    \"@radix-ui/react-toggle-group\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/toolbar/src/index.ts",
    "content": "'use client';\nexport {\n  createToolbarScope,\n  //\n  Toolbar,\n  ToolbarSeparator,\n  ToolbarButton,\n  ToolbarLink,\n  ToolbarToggleGroup,\n  ToolbarToggleItem,\n  //\n  Root,\n  Separator,\n  Button,\n  Link,\n  ToggleGroup,\n  ToggleItem,\n} from './toolbar';\nexport type {\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarButtonProps,\n  ToolbarLinkProps,\n  ToolbarToggleGroupSingleProps,\n  ToolbarToggleGroupMultipleProps,\n  ToolbarToggleItemProps,\n} from './toolbar';\n"
  },
  {
    "path": "packages/react/toolbar/src/toolbar.test.tsx",
    "content": "import { cleanup, render, fireEvent, getByText } from '@testing-library/react';\nimport * as Toolbar from './toolbar';\nimport { afterEach, describe, it, vi, expect } from 'vitest';\n\nconst component = (props: any) => {\n  return render(\n    <Toolbar.Root>\n      <Toolbar.ToggleGroup type=\"single\">\n        <Toolbar.ToggleItem value=\"left\" onClick={props.onClick}>\n          Left\n        </Toolbar.ToggleItem>\n      </Toolbar.ToggleGroup>\n    </Toolbar.Root>,\n  );\n};\n\ndescribe('given a default Toolbar', () => {\n  afterEach(cleanup);\n  it('Click event should be called just once', async () => {\n    const spy = vi.fn();\n\n    const rendered = component({\n      onClick: spy,\n    });\n\n    fireEvent(\n      getByText(rendered.container, 'Left'),\n      new MouseEvent('click', {\n        bubbles: true,\n        cancelable: true,\n      }),\n    );\n\n    expect(spy).toHaveBeenCalledTimes(1);\n  });\n});\n"
  },
  {
    "path": "packages/react/toolbar/src/toolbar.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { createContextScope } from '@radix-ui/react-context';\nimport * as RovingFocusGroup from '@radix-ui/react-roving-focus';\nimport { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { createToggleGroupScope } from '@radix-ui/react-toggle-group';\nimport { useDirection } from '@radix-ui/react-direction';\n\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Toolbar\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOOLBAR_NAME = 'Toolbar';\n\ntype ScopedProps<P> = P & { __scopeToolbar?: Scope };\nconst [createToolbarContext, createToolbarScope] = createContextScope(TOOLBAR_NAME, [\n  createRovingFocusGroupScope,\n  createToggleGroupScope,\n]);\nconst useRovingFocusGroupScope = createRovingFocusGroupScope();\nconst useToggleGroupScope = createToggleGroupScope();\n\ntype RovingFocusGroupProps = React.ComponentPropsWithoutRef<typeof RovingFocusGroup.Root>;\ntype ToolbarContextValue = {\n  orientation: RovingFocusGroupProps['orientation'];\n  dir: RovingFocusGroupProps['dir'];\n};\nconst [ToolbarProvider, useToolbarContext] =\n  createToolbarContext<ToolbarContextValue>(TOOLBAR_NAME);\n\ntype ToolbarElement = React.ComponentRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface ToolbarProps extends PrimitiveDivProps {\n  orientation?: RovingFocusGroupProps['orientation'];\n  loop?: RovingFocusGroupProps['loop'];\n  dir?: RovingFocusGroupProps['dir'];\n}\n\nconst Toolbar = React.forwardRef<ToolbarElement, ToolbarProps>(\n  (props: ScopedProps<ToolbarProps>, forwardedRef) => {\n    const { __scopeToolbar, orientation = 'horizontal', dir, loop = true, ...toolbarProps } = props;\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n    const direction = useDirection(dir);\n    return (\n      <ToolbarProvider scope={__scopeToolbar} orientation={orientation} dir={direction}>\n        <RovingFocusGroup.Root\n          asChild\n          {...rovingFocusGroupScope}\n          orientation={orientation}\n          dir={direction}\n          loop={loop}\n        >\n          <Primitive.div\n            role=\"toolbar\"\n            aria-orientation={orientation}\n            dir={direction}\n            {...toolbarProps}\n            ref={forwardedRef}\n          />\n        </RovingFocusGroup.Root>\n      </ToolbarProvider>\n    );\n  },\n);\n\nToolbar.displayName = TOOLBAR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarSeparator\n * -----------------------------------------------------------------------------------------------*/\n\nconst SEPARATOR_NAME = 'ToolbarSeparator';\n\ntype ToolbarSeparatorElement = React.ComponentRef<typeof SeparatorPrimitive.Root>;\ntype SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;\ninterface ToolbarSeparatorProps extends SeparatorProps {}\n\nconst ToolbarSeparator = React.forwardRef<ToolbarSeparatorElement, ToolbarSeparatorProps>(\n  (props: ScopedProps<ToolbarSeparatorProps>, forwardedRef) => {\n    const { __scopeToolbar, ...separatorProps } = props;\n    const context = useToolbarContext(SEPARATOR_NAME, __scopeToolbar);\n    return (\n      <SeparatorPrimitive.Root\n        orientation={context.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n        {...separatorProps}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\nToolbarSeparator.displayName = SEPARATOR_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarButton\n * -----------------------------------------------------------------------------------------------*/\n\nconst BUTTON_NAME = 'ToolbarButton';\n\ntype ToolbarButtonElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface ToolbarButtonProps extends PrimitiveButtonProps {}\n\nconst ToolbarButton = React.forwardRef<ToolbarButtonElement, ToolbarButtonProps>(\n  (props: ScopedProps<ToolbarButtonProps>, forwardedRef) => {\n    const { __scopeToolbar, ...buttonProps } = props;\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n    return (\n      <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!props.disabled}>\n        <Primitive.button type=\"button\" {...buttonProps} ref={forwardedRef} />\n      </RovingFocusGroup.Item>\n    );\n  },\n);\n\nToolbarButton.displayName = BUTTON_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarLink\n * -----------------------------------------------------------------------------------------------*/\n\nconst LINK_NAME = 'ToolbarLink';\n\ntype ToolbarLinkElement = React.ComponentRef<typeof Primitive.a>;\ntype PrimitiveLinkProps = React.ComponentPropsWithoutRef<typeof Primitive.a>;\ninterface ToolbarLinkProps extends PrimitiveLinkProps {}\n\nconst ToolbarLink = React.forwardRef<ToolbarLinkElement, ToolbarLinkProps>(\n  (props: ScopedProps<ToolbarLinkProps>, forwardedRef) => {\n    const { __scopeToolbar, ...linkProps } = props;\n    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);\n    return (\n      <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable>\n        <Primitive.a\n          {...linkProps}\n          ref={forwardedRef}\n          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {\n            if (event.key === ' ') event.currentTarget.click();\n          })}\n        />\n      </RovingFocusGroup.Item>\n    );\n  },\n);\n\nToolbarLink.displayName = LINK_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarToggleGroup\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_GROUP_NAME = 'ToolbarToggleGroup';\n\ntype ToolbarToggleGroupElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>;\ntype ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>;\ninterface ToolbarToggleGroupSingleProps extends Extract<ToggleGroupProps, { type: 'single' }> {}\ninterface ToolbarToggleGroupMultipleProps extends Extract<ToggleGroupProps, { type: 'multiple' }> {}\n\nconst ToolbarToggleGroup = React.forwardRef<\n  ToolbarToggleGroupElement,\n  ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps\n>(\n  (\n    props: ScopedProps<ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps>,\n    forwardedRef,\n  ) => {\n    const { __scopeToolbar, ...toggleGroupProps } = props;\n    const context = useToolbarContext(TOGGLE_GROUP_NAME, __scopeToolbar);\n    const toggleGroupScope = useToggleGroupScope(__scopeToolbar);\n    return (\n      <ToggleGroupPrimitive.Root\n        data-orientation={context.orientation}\n        dir={context.dir}\n        {...toggleGroupScope}\n        {...toggleGroupProps}\n        ref={forwardedRef}\n        rovingFocus={false}\n      />\n    );\n  },\n);\n\nToolbarToggleGroup.displayName = TOGGLE_GROUP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * ToolbarToggleItem\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOGGLE_ITEM_NAME = 'ToolbarToggleItem';\n\ntype ToolbarToggleItemElement = React.ComponentRef<typeof ToggleGroupPrimitive.Item>;\ntype ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\ninterface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n\nconst ToolbarToggleItem = React.forwardRef<ToolbarToggleItemElement, ToolbarToggleItemProps>(\n  (props: ScopedProps<ToolbarToggleItemProps>, forwardedRef) => {\n    const { __scopeToolbar, ...toggleItemProps } = props;\n    const toggleGroupScope = useToggleGroupScope(__scopeToolbar);\n    const scope = { __scopeToolbar: props.__scopeToolbar };\n\n    return (\n      <ToolbarButton asChild {...scope}>\n        <ToggleGroupPrimitive.Item {...toggleGroupScope} {...toggleItemProps} ref={forwardedRef} />\n      </ToolbarButton>\n    );\n  },\n);\n\nToolbarToggleItem.displayName = TOGGLE_ITEM_NAME;\n\n/* ---------------------------------------------------------------------------------------------- */\n\nconst Root = Toolbar;\nconst Separator = ToolbarSeparator;\nconst Button = ToolbarButton;\nconst Link = ToolbarLink;\nconst ToggleGroup = ToolbarToggleGroup;\nconst ToggleItem = ToolbarToggleItem;\n\nexport {\n  createToolbarScope,\n  //\n  Toolbar,\n  ToolbarSeparator,\n  ToolbarButton,\n  ToolbarLink,\n  ToolbarToggleGroup,\n  ToolbarToggleItem,\n  //\n  Root,\n  Separator,\n  Button,\n  Link,\n  ToggleGroup,\n  ToggleItem,\n};\nexport type {\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarButtonProps,\n  ToolbarLinkProps,\n  ToolbarToggleGroupSingleProps,\n  ToolbarToggleGroupMultipleProps,\n  ToolbarToggleItemProps,\n};\n"
  },
  {
    "path": "packages/react/toolbar/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/tooltip/CHANGELOG.md",
    "content": "# @radix-ui/react-tooltip\n\n## 1.2.8\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.5`, `@radix-ui/react-slot@1.2.4`, `@radix-ui/react-popper@1.2.8`, `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-dismissable-layer@1.1.11`, `@radix-ui/react-portal@1.1.10`, `@radix-ui/react-visually-hidden@1.2.4`\n\n## 1.2.7\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-dismissable-layer@1.1.10`, `@radix-ui/react-visually-hidden@1.2.3`, `@radix-ui/react-popper@1.2.7`, `@radix-ui/react-portal@1.1.9`, `@radix-ui/react-slot@1.2.3`, `@radix-ui/react-primitive@2.1.3`\n\n## 1.2.6\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.2`, `@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`, `@radix-ui/react-visually-hidden@1.2.2`\n\n## 1.2.5\n\n- Updated dependencies: `@radix-ui/react-slot@1.2.1`, `@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`, `@radix-ui/react-visually-hidden@1.2.1`\n\n## 1.2.4\n\n- Updated dependencies: `@radix-ui/react-presence@1.1.4`\n\n## 1.2.3\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.2`\n\n## 1.2.2\n\n- Updated dependencies: `@radix-ui/react-use-controllable-state@1.2.1`\n\n## 1.2.1\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n- Updated dependencies: `@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`, `@radix-ui/react-popper@1.2.4`, `@radix-ui/react-portal@1.1.6`\n"
  },
  {
    "path": "packages/react/tooltip/README.md",
    "content": "# `react-tooltip`\n\nView docs [here](https://radix-ui.com/primitives/docs/components/tooltip).\n"
  },
  {
    "path": "packages/react/tooltip/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/tooltip/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-tooltip\",\n  \"version\": \"1.2.8\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/primitive\": \"workspace:*\",\n    \"@radix-ui/react-compose-refs\": \"workspace:*\",\n    \"@radix-ui/react-context\": \"workspace:*\",\n    \"@radix-ui/react-dismissable-layer\": \"workspace:*\",\n    \"@radix-ui/react-id\": \"workspace:*\",\n    \"@radix-ui/react-popper\": \"workspace:*\",\n    \"@radix-ui/react-portal\": \"workspace:*\",\n    \"@radix-ui/react-presence\": \"workspace:*\",\n    \"@radix-ui/react-primitive\": \"workspace:*\",\n    \"@radix-ui/react-slot\": \"workspace:*\",\n    \"@radix-ui/react-use-controllable-state\": \"workspace:*\",\n    \"@radix-ui/react-visually-hidden\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/tooltip/src/index.ts",
    "content": "'use client';\nexport {\n  createTooltipScope,\n  //\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipContent,\n  TooltipArrow,\n  //\n  Provider,\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  Arrow,\n} from './tooltip';\nexport type {\n  TooltipProps,\n  TooltipProviderProps,\n  TooltipTriggerProps,\n  TooltipPortalProps,\n  TooltipContentProps,\n  TooltipArrowProps,\n} from './tooltip';\n"
  },
  {
    "path": "packages/react/tooltip/src/tooltip.test.tsx",
    "content": "import { cleanup, render, screen, waitFor } from '@testing-library/react';\nimport * as Tooltip from './tooltip';\nimport userEvent from '@testing-library/user-event';\nimport { afterEach, describe, it, expect } from 'vitest';\n\ndescribe('Tooltip', () => {\n  afterEach(cleanup);\n\n  it('renders tooltip trigger', () => {\n    render(\n      <Tooltip.Provider>\n        <Tooltip.Root>\n          <Tooltip.Trigger>Tooltip Trigger</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content>\n              Tooltip Content\n              <Tooltip.Arrow />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>,\n    );\n\n    expect(screen.getByText('Tooltip Trigger')).toBeInTheDocument();\n    expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument();\n  });\n\n  it('renders tooltip content when trigger is hovered', async () => {\n    render(\n      <Tooltip.Provider>\n        <Tooltip.Root delayDuration={0}>\n          <Tooltip.Trigger>Tooltip Trigger</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content>\n              Tooltip Content\n              <Tooltip.Arrow />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>,\n    );\n\n    const trigger = screen.getByText('Tooltip Trigger');\n    expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument();\n\n    userEvent.hover(trigger);\n    await waitFor(() => {\n      // Get the first instance of the tooltip content because the second is\n      // the visually hidden primitive.\n      expect(screen.queryAllByText('Tooltip Content')[0]).toBeVisible();\n    });\n  });\n\n  it('renders tooltip content is dismissed when trigger is clicked', async () => {\n    render(\n      <Tooltip.Provider>\n        <Tooltip.Root delayDuration={0}>\n          <Tooltip.Trigger>Tooltip Trigger</Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Content>\n              Tooltip Content\n              <Tooltip.Arrow />\n            </Tooltip.Content>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n      </Tooltip.Provider>,\n    );\n\n    const trigger = screen.getByText('Tooltip Trigger');\n    expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument();\n\n    userEvent.hover(trigger);\n    await waitFor(() => {\n      // Get the first instance of the tooltip content because the second is\n      // the visually hidden primitive.\n      expect(screen.queryAllByText('Tooltip Content')[0]).toBeVisible();\n    });\n\n    userEvent.click(trigger);\n    await waitFor(() => {\n      expect(screen.queryByText('Tooltip Content')).not.toBeInTheDocument();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/react/tooltip/src/tooltip.tsx",
    "content": "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContextScope } from '@radix-ui/react-context';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { useId } from '@radix-ui/react-id';\nimport * as PopperPrimitive from '@radix-ui/react-popper';\nimport { createPopperScope } from '@radix-ui/react-popper';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { createSlottable } from '@radix-ui/react-slot';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';\n\nimport type { Scope } from '@radix-ui/react-context';\n\ntype ScopedProps<P = {}> = P & { __scopeTooltip?: Scope };\nconst [createTooltipContext, createTooltipScope] = createContextScope('Tooltip', [\n  createPopperScope,\n]);\nconst usePopperScope = createPopperScope();\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipProvider\n * -----------------------------------------------------------------------------------------------*/\n\nconst PROVIDER_NAME = 'TooltipProvider';\nconst DEFAULT_DELAY_DURATION = 700;\nconst TOOLTIP_OPEN = 'tooltip.open';\n\ntype TooltipProviderContextValue = {\n  isOpenDelayedRef: React.MutableRefObject<boolean>;\n  delayDuration: number;\n  onOpen(): void;\n  onClose(): void;\n  onPointerInTransitChange(inTransit: boolean): void;\n  isPointerInTransitRef: React.MutableRefObject<boolean>;\n  disableHoverableContent: boolean;\n};\n\nconst [TooltipProviderContextProvider, useTooltipProviderContext] =\n  createTooltipContext<TooltipProviderContextValue>(PROVIDER_NAME);\n\ninterface TooltipProviderProps {\n  children: React.ReactNode;\n  /**\n   * The duration from when the pointer enters the trigger until the tooltip gets opened.\n   * @defaultValue 700\n   */\n  delayDuration?: number;\n  /**\n   * How much time a user has to enter another trigger without incurring a delay again.\n   * @defaultValue 300\n   */\n  skipDelayDuration?: number;\n  /**\n   * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n   * @defaultValue false\n   */\n  disableHoverableContent?: boolean;\n}\n\nconst TooltipProvider: React.FC<TooltipProviderProps> = (\n  props: ScopedProps<TooltipProviderProps>,\n) => {\n  const {\n    __scopeTooltip,\n    delayDuration = DEFAULT_DELAY_DURATION,\n    skipDelayDuration = 300,\n    disableHoverableContent = false,\n    children,\n  } = props;\n  const isOpenDelayedRef = React.useRef(true);\n  const isPointerInTransitRef = React.useRef(false);\n  const skipDelayTimerRef = React.useRef(0);\n\n  React.useEffect(() => {\n    const skipDelayTimer = skipDelayTimerRef.current;\n    return () => window.clearTimeout(skipDelayTimer);\n  }, []);\n\n  return (\n    <TooltipProviderContextProvider\n      scope={__scopeTooltip}\n      isOpenDelayedRef={isOpenDelayedRef}\n      delayDuration={delayDuration}\n      onOpen={React.useCallback(() => {\n        window.clearTimeout(skipDelayTimerRef.current);\n        isOpenDelayedRef.current = false;\n      }, [])}\n      onClose={React.useCallback(() => {\n        window.clearTimeout(skipDelayTimerRef.current);\n        skipDelayTimerRef.current = window.setTimeout(\n          () => (isOpenDelayedRef.current = true),\n          skipDelayDuration,\n        );\n      }, [skipDelayDuration])}\n      isPointerInTransitRef={isPointerInTransitRef}\n      onPointerInTransitChange={React.useCallback((inTransit: boolean) => {\n        isPointerInTransitRef.current = inTransit;\n      }, [])}\n      disableHoverableContent={disableHoverableContent}\n    >\n      {children}\n    </TooltipProviderContextProvider>\n  );\n};\n\nTooltipProvider.displayName = PROVIDER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * Tooltip\n * -----------------------------------------------------------------------------------------------*/\n\nconst TOOLTIP_NAME = 'Tooltip';\n\ntype TooltipContextValue = {\n  contentId: string;\n  open: boolean;\n  stateAttribute: 'closed' | 'delayed-open' | 'instant-open';\n  trigger: TooltipTriggerElement | null;\n  onTriggerChange(trigger: TooltipTriggerElement | null): void;\n  onTriggerEnter(): void;\n  onTriggerLeave(): void;\n  onOpen(): void;\n  onClose(): void;\n  disableHoverableContent: boolean;\n};\n\nconst [TooltipContextProvider, useTooltipContext] =\n  createTooltipContext<TooltipContextValue>(TOOLTIP_NAME);\n\ninterface TooltipProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The duration from when the pointer enters the trigger until the tooltip gets opened. This will\n   * override the prop with the same name passed to Provider.\n   * @defaultValue 700\n   */\n  delayDuration?: number;\n  /**\n   * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.\n   * @defaultValue false\n   */\n  disableHoverableContent?: boolean;\n}\n\nconst Tooltip: React.FC<TooltipProps> = (props: ScopedProps<TooltipProps>) => {\n  const {\n    __scopeTooltip,\n    children,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    disableHoverableContent: disableHoverableContentProp,\n    delayDuration: delayDurationProp,\n  } = props;\n  const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);\n  const popperScope = usePopperScope(__scopeTooltip);\n  const [trigger, setTrigger] = React.useState<HTMLButtonElement | null>(null);\n  const contentId = useId();\n  const openTimerRef = React.useRef(0);\n  const disableHoverableContent =\n    disableHoverableContentProp ?? providerContext.disableHoverableContent;\n  const delayDuration = delayDurationProp ?? providerContext.delayDuration;\n  const wasOpenDelayedRef = React.useRef(false);\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen ?? false,\n    onChange: (open) => {\n      if (open) {\n        providerContext.onOpen();\n\n        // as `onChange` is called within a lifecycle method we\n        // avoid dispatching via `dispatchDiscreteCustomEvent`.\n        document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));\n      } else {\n        providerContext.onClose();\n      }\n      onOpenChange?.(open);\n    },\n    caller: TOOLTIP_NAME,\n  });\n  const stateAttribute = React.useMemo(() => {\n    return open ? (wasOpenDelayedRef.current ? 'delayed-open' : 'instant-open') : 'closed';\n  }, [open]);\n\n  const handleOpen = React.useCallback(() => {\n    window.clearTimeout(openTimerRef.current);\n    openTimerRef.current = 0;\n    wasOpenDelayedRef.current = false;\n    setOpen(true);\n  }, [setOpen]);\n\n  const handleClose = React.useCallback(() => {\n    window.clearTimeout(openTimerRef.current);\n    openTimerRef.current = 0;\n    setOpen(false);\n  }, [setOpen]);\n\n  const handleDelayedOpen = React.useCallback(() => {\n    window.clearTimeout(openTimerRef.current);\n    openTimerRef.current = window.setTimeout(() => {\n      wasOpenDelayedRef.current = true;\n      setOpen(true);\n      openTimerRef.current = 0;\n    }, delayDuration);\n  }, [delayDuration, setOpen]);\n\n  React.useEffect(() => {\n    return () => {\n      if (openTimerRef.current) {\n        window.clearTimeout(openTimerRef.current);\n        openTimerRef.current = 0;\n      }\n    };\n  }, []);\n\n  return (\n    <PopperPrimitive.Root {...popperScope}>\n      <TooltipContextProvider\n        scope={__scopeTooltip}\n        contentId={contentId}\n        open={open}\n        stateAttribute={stateAttribute}\n        trigger={trigger}\n        onTriggerChange={setTrigger}\n        onTriggerEnter={React.useCallback(() => {\n          if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();\n          else handleOpen();\n        }, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen])}\n        onTriggerLeave={React.useCallback(() => {\n          if (disableHoverableContent) {\n            handleClose();\n          } else {\n            // Clear the timer in case the pointer leaves the trigger before the tooltip is opened.\n            window.clearTimeout(openTimerRef.current);\n            openTimerRef.current = 0;\n          }\n        }, [handleClose, disableHoverableContent])}\n        onOpen={handleOpen}\n        onClose={handleClose}\n        disableHoverableContent={disableHoverableContent}\n      >\n        {children}\n      </TooltipContextProvider>\n    </PopperPrimitive.Root>\n  );\n};\n\nTooltip.displayName = TOOLTIP_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'TooltipTrigger';\n\ntype TooltipTriggerElement = React.ComponentRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface TooltipTriggerProps extends PrimitiveButtonProps {}\n\nconst TooltipTrigger = React.forwardRef<TooltipTriggerElement, TooltipTriggerProps>(\n  (props: ScopedProps<TooltipTriggerProps>, forwardedRef) => {\n    const { __scopeTooltip, ...triggerProps } = props;\n    const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);\n    const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);\n    const popperScope = usePopperScope(__scopeTooltip);\n    const ref = React.useRef<TooltipTriggerElement>(null);\n    const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);\n    const isPointerDownRef = React.useRef(false);\n    const hasPointerMoveOpenedRef = React.useRef(false);\n    const handlePointerUp = React.useCallback(() => (isPointerDownRef.current = false), []);\n\n    React.useEffect(() => {\n      return () => document.removeEventListener('pointerup', handlePointerUp);\n    }, [handlePointerUp]);\n\n    return (\n      <PopperPrimitive.Anchor asChild {...popperScope}>\n        <Primitive.button\n          // We purposefully avoid adding `type=button` here because tooltip triggers are also\n          // commonly anchors and the anchor `type` attribute signifies MIME type.\n          aria-describedby={context.open ? context.contentId : undefined}\n          data-state={context.stateAttribute}\n          {...triggerProps}\n          ref={composedRefs}\n          onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {\n            if (event.pointerType === 'touch') return;\n            if (\n              !hasPointerMoveOpenedRef.current &&\n              !providerContext.isPointerInTransitRef.current\n            ) {\n              context.onTriggerEnter();\n              hasPointerMoveOpenedRef.current = true;\n            }\n          })}\n          onPointerLeave={composeEventHandlers(props.onPointerLeave, () => {\n            context.onTriggerLeave();\n            hasPointerMoveOpenedRef.current = false;\n          })}\n          onPointerDown={composeEventHandlers(props.onPointerDown, () => {\n            if (context.open) {\n              context.onClose();\n            }\n            isPointerDownRef.current = true;\n            document.addEventListener('pointerup', handlePointerUp, { once: true });\n          })}\n          onFocus={composeEventHandlers(props.onFocus, () => {\n            if (!isPointerDownRef.current) context.onOpen();\n          })}\n          onBlur={composeEventHandlers(props.onBlur, context.onClose)}\n          onClick={composeEventHandlers(props.onClick, context.onClose)}\n        />\n      </PopperPrimitive.Anchor>\n    );\n  },\n);\n\nTooltipTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'TooltipPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createTooltipContext<PortalContextValue>(PORTAL_NAME, {\n  forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface TooltipPortalProps {\n  children?: React.ReactNode;\n  /**\n   * Specify a container element to portal the content into.\n   */\n  container?: PortalProps['container'];\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst TooltipPortal: React.FC<TooltipPortalProps> = (props: ScopedProps<TooltipPortalProps>) => {\n  const { __scopeTooltip, forceMount, children, container } = props;\n  const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);\n  return (\n    <PortalProvider scope={__scopeTooltip} forceMount={forceMount}>\n      <Presence present={forceMount || context.open}>\n        <PortalPrimitive asChild container={container}>\n          {children}\n        </PortalPrimitive>\n      </Presence>\n    </PortalProvider>\n  );\n};\n\nTooltipPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'TooltipContent';\n\ntype TooltipContentElement = TooltipContentImplElement;\ninterface TooltipContentProps extends TooltipContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true;\n}\n\nconst TooltipContent = React.forwardRef<TooltipContentElement, TooltipContentProps>(\n  (props: ScopedProps<TooltipContentProps>, forwardedRef) => {\n    const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);\n    const { forceMount = portalContext.forceMount, side = 'top', ...contentProps } = props;\n    const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);\n\n    return (\n      <Presence present={forceMount || context.open}>\n        {context.disableHoverableContent ? (\n          <TooltipContentImpl side={side} {...contentProps} ref={forwardedRef} />\n        ) : (\n          <TooltipContentHoverable side={side} {...contentProps} ref={forwardedRef} />\n        )}\n      </Presence>\n    );\n  },\n);\n\ntype Point = { x: number; y: number };\ntype Polygon = Point[];\n\ntype TooltipContentHoverableElement = TooltipContentImplElement;\ninterface TooltipContentHoverableProps extends TooltipContentImplProps {}\n\nconst TooltipContentHoverable = React.forwardRef<\n  TooltipContentHoverableElement,\n  TooltipContentHoverableProps\n>((props: ScopedProps<TooltipContentHoverableProps>, forwardedRef) => {\n  const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);\n  const providerContext = useTooltipProviderContext(CONTENT_NAME, props.__scopeTooltip);\n  const ref = React.useRef<TooltipContentHoverableElement>(null);\n  const composedRefs = useComposedRefs(forwardedRef, ref);\n  const [pointerGraceArea, setPointerGraceArea] = React.useState<Polygon | null>(null);\n\n  const { trigger, onClose } = context;\n  const content = ref.current;\n\n  const { onPointerInTransitChange } = providerContext;\n\n  const handleRemoveGraceArea = React.useCallback(() => {\n    setPointerGraceArea(null);\n    onPointerInTransitChange(false);\n  }, [onPointerInTransitChange]);\n\n  const handleCreateGraceArea = React.useCallback(\n    (event: PointerEvent, hoverTarget: HTMLElement) => {\n      const currentTarget = event.currentTarget as HTMLElement;\n      const exitPoint = { x: event.clientX, y: event.clientY };\n      const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());\n      const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);\n      const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());\n      const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);\n      setPointerGraceArea(graceArea);\n      onPointerInTransitChange(true);\n    },\n    [onPointerInTransitChange],\n  );\n\n  React.useEffect(() => {\n    return () => handleRemoveGraceArea();\n  }, [handleRemoveGraceArea]);\n\n  React.useEffect(() => {\n    if (trigger && content) {\n      const handleTriggerLeave = (event: PointerEvent) => handleCreateGraceArea(event, content);\n      const handleContentLeave = (event: PointerEvent) => handleCreateGraceArea(event, trigger);\n\n      trigger.addEventListener('pointerleave', handleTriggerLeave);\n      content.addEventListener('pointerleave', handleContentLeave);\n      return () => {\n        trigger.removeEventListener('pointerleave', handleTriggerLeave);\n        content.removeEventListener('pointerleave', handleContentLeave);\n      };\n    }\n  }, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);\n\n  React.useEffect(() => {\n    if (pointerGraceArea) {\n      const handleTrackPointerGrace = (event: PointerEvent) => {\n        const target = event.target as HTMLElement;\n        const pointerPosition = { x: event.clientX, y: event.clientY };\n        const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);\n        const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);\n\n        if (hasEnteredTarget) {\n          handleRemoveGraceArea();\n        } else if (isPointerOutsideGraceArea) {\n          handleRemoveGraceArea();\n          onClose();\n        }\n      };\n      document.addEventListener('pointermove', handleTrackPointerGrace);\n      return () => document.removeEventListener('pointermove', handleTrackPointerGrace);\n    }\n  }, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);\n\n  return <TooltipContentImpl {...props} ref={composedRefs} />;\n});\n\nconst [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] =\n  createTooltipContext(TOOLTIP_NAME, { isInside: false });\n\ntype TooltipContentImplElement = React.ComponentRef<typeof PopperPrimitive.Content>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;\ntype PopperContentProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;\ninterface TooltipContentImplProps extends Omit<PopperContentProps, 'onPlaced'> {\n  /**\n   * A more descriptive label for accessibility purpose\n   */\n  'aria-label'?: string;\n\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];\n  /**\n   * Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.\n   * Can be prevented.\n   */\n  onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];\n}\n\nconst Slottable = createSlottable('TooltipContent');\n\nconst TooltipContentImpl = React.forwardRef<TooltipContentImplElement, TooltipContentImplProps>(\n  (props: ScopedProps<TooltipContentImplProps>, forwardedRef) => {\n    const {\n      __scopeTooltip,\n      children,\n      'aria-label': ariaLabel,\n      onEscapeKeyDown,\n      onPointerDownOutside,\n      ...contentProps\n    } = props;\n    const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);\n    const popperScope = usePopperScope(__scopeTooltip);\n    const { onClose } = context;\n\n    // Close this tooltip if another one opens\n    React.useEffect(() => {\n      document.addEventListener(TOOLTIP_OPEN, onClose);\n      return () => document.removeEventListener(TOOLTIP_OPEN, onClose);\n    }, [onClose]);\n\n    // Close the tooltip if the trigger is scrolled\n    React.useEffect(() => {\n      if (context.trigger) {\n        const handleScroll = (event: Event) => {\n          const target = event.target as HTMLElement;\n          if (target?.contains(context.trigger)) onClose();\n        };\n        window.addEventListener('scroll', handleScroll, { capture: true });\n        return () => window.removeEventListener('scroll', handleScroll, { capture: true });\n      }\n    }, [context.trigger, onClose]);\n\n    return (\n      <DismissableLayer\n        asChild\n        disableOutsidePointerEvents={false}\n        onEscapeKeyDown={onEscapeKeyDown}\n        onPointerDownOutside={onPointerDownOutside}\n        onFocusOutside={(event) => event.preventDefault()}\n        onDismiss={onClose}\n      >\n        <PopperPrimitive.Content\n          data-state={context.stateAttribute}\n          {...popperScope}\n          {...contentProps}\n          ref={forwardedRef}\n          style={{\n            ...contentProps.style,\n            // re-namespace exposed content custom properties\n            ...{\n              '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',\n              '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',\n              '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',\n              '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',\n              '--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',\n            },\n          }}\n        >\n          <Slottable>{children}</Slottable>\n          <VisuallyHiddenContentContextProvider scope={__scopeTooltip} isInside={true}>\n            <VisuallyHiddenPrimitive.Root id={context.contentId} role=\"tooltip\">\n              {ariaLabel || children}\n            </VisuallyHiddenPrimitive.Root>\n          </VisuallyHiddenContentContextProvider>\n        </PopperPrimitive.Content>\n      </DismissableLayer>\n    );\n  },\n);\n\nTooltipContent.displayName = CONTENT_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * TooltipArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'TooltipArrow';\n\ntype TooltipArrowElement = React.ComponentRef<typeof PopperPrimitive.Arrow>;\ntype PopperArrowProps = React.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;\ninterface TooltipArrowProps extends PopperArrowProps {}\n\nconst TooltipArrow = React.forwardRef<TooltipArrowElement, TooltipArrowProps>(\n  (props: ScopedProps<TooltipArrowProps>, forwardedRef) => {\n    const { __scopeTooltip, ...arrowProps } = props;\n    const popperScope = usePopperScope(__scopeTooltip);\n    const visuallyHiddenContentContext = useVisuallyHiddenContentContext(\n      ARROW_NAME,\n      __scopeTooltip,\n    );\n    // if the arrow is inside the `VisuallyHidden`, we don't want to render it all to\n    // prevent issues in positioning the arrow due to the duplicate\n    return visuallyHiddenContentContext.isInside ? null : (\n      <PopperPrimitive.Arrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n    );\n  },\n);\n\nTooltipArrow.displayName = ARROW_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype Side = NonNullable<TooltipContentProps['side']>;\n\nfunction getExitSideFromRect(point: Point, rect: DOMRect): Side {\n  const top = Math.abs(rect.top - point.y);\n  const bottom = Math.abs(rect.bottom - point.y);\n  const right = Math.abs(rect.right - point.x);\n  const left = Math.abs(rect.left - point.x);\n\n  switch (Math.min(top, bottom, right, left)) {\n    case left:\n      return 'left';\n    case right:\n      return 'right';\n    case top:\n      return 'top';\n    case bottom:\n      return 'bottom';\n    default:\n      throw new Error('unreachable');\n  }\n}\n\nfunction getPaddedExitPoints(exitPoint: Point, exitSide: Side, padding = 5) {\n  const paddedExitPoints: Point[] = [];\n  switch (exitSide) {\n    case 'top':\n      paddedExitPoints.push(\n        { x: exitPoint.x - padding, y: exitPoint.y + padding },\n        { x: exitPoint.x + padding, y: exitPoint.y + padding },\n      );\n      break;\n    case 'bottom':\n      paddedExitPoints.push(\n        { x: exitPoint.x - padding, y: exitPoint.y - padding },\n        { x: exitPoint.x + padding, y: exitPoint.y - padding },\n      );\n      break;\n    case 'left':\n      paddedExitPoints.push(\n        { x: exitPoint.x + padding, y: exitPoint.y - padding },\n        { x: exitPoint.x + padding, y: exitPoint.y + padding },\n      );\n      break;\n    case 'right':\n      paddedExitPoints.push(\n        { x: exitPoint.x - padding, y: exitPoint.y - padding },\n        { x: exitPoint.x - padding, y: exitPoint.y + padding },\n      );\n      break;\n  }\n  return paddedExitPoints;\n}\n\nfunction getPointsFromRect(rect: DOMRect) {\n  const { top, right, bottom, left } = rect;\n  return [\n    { x: left, y: top },\n    { x: right, y: top },\n    { x: right, y: bottom },\n    { x: left, y: bottom },\n  ];\n}\n\n// Determine if a point is inside of a polygon.\n// Based on https://github.com/substack/point-in-polygon\nfunction isPointInPolygon(point: Point, polygon: Polygon) {\n  const { x, y } = point;\n  let inside = false;\n  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n    const ii = polygon[i]!;\n    const jj = polygon[j]!;\n    const xi = ii.x;\n    const yi = ii.y;\n    const xj = jj.x;\n    const yj = jj.y;\n\n    // prettier-ignore\n    const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);\n    if (intersect) inside = !inside;\n  }\n\n  return inside;\n}\n\n// Returns a new array of points representing the convex hull of the given set of points.\n// https://www.nayuki.io/page/convex-hull-algorithm\nfunction getHull<P extends Point>(points: Readonly<Array<P>>): Array<P> {\n  const newPoints: Array<P> = points.slice();\n  newPoints.sort((a: Point, b: Point) => {\n    if (a.x < b.x) return -1;\n    else if (a.x > b.x) return +1;\n    else if (a.y < b.y) return -1;\n    else if (a.y > b.y) return +1;\n    else return 0;\n  });\n  return getHullPresorted(newPoints);\n}\n\n// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.\nfunction getHullPresorted<P extends Point>(points: Readonly<Array<P>>): Array<P> {\n  if (points.length <= 1) return points.slice();\n\n  const upperHull: Array<P> = [];\n  for (let i = 0; i < points.length; i++) {\n    const p = points[i]!;\n    while (upperHull.length >= 2) {\n      const q = upperHull[upperHull.length - 1]!;\n      const r = upperHull[upperHull.length - 2]!;\n      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();\n      else break;\n    }\n    upperHull.push(p);\n  }\n  upperHull.pop();\n\n  const lowerHull: Array<P> = [];\n  for (let i = points.length - 1; i >= 0; i--) {\n    const p = points[i]!;\n    while (lowerHull.length >= 2) {\n      const q = lowerHull[lowerHull.length - 1]!;\n      const r = lowerHull[lowerHull.length - 2]!;\n      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();\n      else break;\n    }\n    lowerHull.push(p);\n  }\n  lowerHull.pop();\n\n  if (\n    upperHull.length === 1 &&\n    lowerHull.length === 1 &&\n    upperHull[0]!.x === lowerHull[0]!.x &&\n    upperHull[0]!.y === lowerHull[0]!.y\n  ) {\n    return upperHull;\n  } else {\n    return upperHull.concat(lowerHull);\n  }\n}\n\nconst Provider = TooltipProvider;\nconst Root = Tooltip;\nconst Trigger = TooltipTrigger;\nconst Portal = TooltipPortal;\nconst Content = TooltipContent;\nconst Arrow = TooltipArrow;\n\nexport {\n  createTooltipScope,\n  //\n  TooltipProvider,\n  Tooltip,\n  TooltipTrigger,\n  TooltipPortal,\n  TooltipContent,\n  TooltipArrow,\n  //\n  Provider,\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  Arrow,\n};\nexport type {\n  TooltipProviderProps,\n  TooltipProps,\n  TooltipTriggerProps,\n  TooltipPortalProps,\n  TooltipContentProps,\n  TooltipArrowProps,\n};\n"
  },
  {
    "path": "packages/react/tooltip/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-callback-ref/README.md",
    "content": "# `react-use-callback-ref`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-callback-ref/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-callback-ref/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-callback-ref\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-callback-ref/src/index.ts",
    "content": "export { useCallbackRef } from './use-callback-ref';\n"
  },
  {
    "path": "packages/react/use-callback-ref/src/use-callback-ref.tsx",
    "content": "import * as React from 'react';\n\n/**\n * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a\n * prop or avoid re-executing effects when passed as a dependency\n */\nfunction useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T {\n  const callbackRef = React.useRef(callback);\n\n  React.useEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  // https://github.com/facebook/react/issues/19240\n  return React.useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport { useCallbackRef };\n"
  },
  {
    "path": "packages/react/use-callback-ref/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-controllable-state/CHANGELOG.md",
    "content": "# @radix-ui/react-use-controllable-state\n\n## 1.2.2\n\n- Updated dependencies: `@radix-ui/react-use-effect-event@0.0.2`\n\n## 1.2.1\n\n- Updated dependencies: `@radix-ui/react-use-effect-event@0.0.1`\n\n## 1.2.0\n\n- Minor improvements to `useControllableState` to enhance performance, reduce surface area for bugs, and log warnings when misused (#3455)\n"
  },
  {
    "path": "packages/react/use-controllable-state/README.md",
    "content": "# `react-use-controllable-state`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-controllable-state/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-controllable-state/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-controllable-state\",\n  \"version\": \"1.2.2\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-use-effect-event\": \"workspace:*\",\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-controllable-state/src/index.ts",
    "content": "export { useControllableState } from './use-controllable-state';\nexport { useControllableStateReducer } from './use-controllable-state-reducer';\n"
  },
  {
    "path": "packages/react/use-controllable-state/src/use-controllable-state-reducer.tsx",
    "content": "import * as React from 'react';\nimport { useEffectEvent } from '@radix-ui/react-use-effect-event';\n\ntype ChangeHandler<T> = (state: T) => void;\n\ninterface UseControllableStateParams<T> {\n  prop: T | undefined;\n  defaultProp: T;\n  onChange: ChangeHandler<T> | undefined;\n  caller: string;\n}\n\ninterface AnyAction {\n  type: string;\n}\n\nconst SYNC_STATE = Symbol('RADIX:SYNC_STATE');\n\ninterface SyncStateAction<T> {\n  type: typeof SYNC_STATE;\n  state: T;\n}\n\nexport function useControllableStateReducer<T, S extends {}, A extends AnyAction>(\n  reducer: (prevState: S & { state: T }, action: A) => S & { state: T },\n  userArgs: UseControllableStateParams<T>,\n  initialState: S,\n): [S & { state: T }, React.Dispatch<A>];\n\nexport function useControllableStateReducer<T, S extends {}, I, A extends AnyAction>(\n  reducer: (prevState: S & { state: T }, action: A) => S & { state: T },\n  userArgs: UseControllableStateParams<T>,\n  initialArg: I,\n  init: (i: I & { state: T }) => S,\n): [S & { state: T }, React.Dispatch<A>];\n\nexport function useControllableStateReducer<T, S extends {}, A extends AnyAction>(\n  reducer: (prevState: S & { state: T }, action: A) => S & { state: T },\n  userArgs: UseControllableStateParams<T>,\n  initialArg: any,\n  init?: (i: any) => Omit<S, 'state'>,\n): [S & { state: T }, React.Dispatch<A>] {\n  const { prop: controlledState, defaultProp, onChange: onChangeProp, caller } = userArgs;\n  const isControlled = controlledState !== undefined;\n\n  const onChange = useEffectEvent(onChangeProp);\n\n  // OK to disable conditionally calling hooks here because they will always run\n  // consistently in the same environment. Bundlers should be able to remove the\n  // code block entirely in production.\n  /* eslint-disable react-hooks/rules-of-hooks */\n  if (process.env.NODE_ENV !== 'production') {\n    const isControlledRef = React.useRef(controlledState !== undefined);\n    React.useEffect(() => {\n      const wasControlled = isControlledRef.current;\n      if (wasControlled !== isControlled) {\n        const from = wasControlled ? 'controlled' : 'uncontrolled';\n        const to = isControlled ? 'controlled' : 'uncontrolled';\n        console.warn(\n          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`,\n        );\n      }\n      isControlledRef.current = isControlled;\n    }, [isControlled, caller]);\n  }\n  /* eslint-enable react-hooks/rules-of-hooks */\n\n  type InternalState = S & { state: T };\n  const args: [InternalState] = [{ ...initialArg, state: defaultProp }];\n  if (init) {\n    // @ts-expect-error\n    args.push(init);\n  }\n\n  const [internalState, dispatch] = React.useReducer(\n    (state: InternalState, action: A | SyncStateAction<T>): InternalState => {\n      if (action.type === SYNC_STATE) {\n        return { ...state, state: action.state };\n      }\n\n      const next = reducer(state, action);\n      if (isControlled && !Object.is(next.state, state.state)) {\n        onChange(next.state);\n      }\n      return next;\n    },\n    ...args,\n  );\n\n  const uncontrolledState = internalState.state;\n  const prevValueRef = React.useRef(uncontrolledState);\n  React.useEffect(() => {\n    if (prevValueRef.current !== uncontrolledState) {\n      prevValueRef.current = uncontrolledState;\n      if (!isControlled) {\n        onChange(uncontrolledState);\n      }\n    }\n  }, [onChange, uncontrolledState, prevValueRef, isControlled]);\n\n  const state = React.useMemo(() => {\n    const isControlled = controlledState !== undefined;\n    if (isControlled) {\n      return { ...internalState, state: controlledState };\n    }\n\n    return internalState;\n  }, [internalState, controlledState]);\n\n  React.useEffect(() => {\n    // Sync internal state for controlled components so that reducer is called\n    // with the correct state values\n    if (isControlled && !Object.is(controlledState, internalState.state)) {\n      dispatch({ type: SYNC_STATE, state: controlledState });\n    }\n  }, [controlledState, internalState.state, isControlled]);\n\n  return [state, dispatch as React.Dispatch<A>];\n}\n"
  },
  {
    "path": "packages/react/use-controllable-state/src/use-controllable-state.test.tsx",
    "content": "import * as React from 'react';\nimport { screen, cleanup, render, waitFor } from '@testing-library/react';\nimport { useControllableState } from './use-controllable-state';\nimport { afterEach, describe, it, expect, afterAll, vi } from 'vitest';\nimport userEvent from '@testing-library/user-event';\n\ndescribe('useControllableState', () => {\n  afterEach(cleanup);\n\n  describe('given a controlled value', () => {\n    it('should initially use the controlled value', () => {\n      render(<ControlledComponent />);\n      const checkbox = screen.getByRole('checkbox');\n      expect(checkbox).toHaveAttribute('aria-checked', 'false');\n    });\n\n    it('should update the value when set internally', async () => {\n      render(<ControlledComponent />);\n      const checkbox = screen.getByRole('checkbox');\n      userEvent.click(checkbox);\n      await waitFor(() => {\n        expect(checkbox).toHaveAttribute('aria-checked', 'true');\n      });\n    });\n\n    it('should update the value when set externally', async () => {\n      render(<ControlledComponent defaultChecked />);\n      const checkbox = screen.getByRole('checkbox');\n      const clearButton = screen.getByText('Clear value');\n      userEvent.click(clearButton);\n      await waitFor(() => {\n        expect(checkbox).toHaveAttribute('aria-checked', 'false');\n      });\n    });\n  });\n\n  describe('given a default value', () => {\n    it('should initially use the default value', () => {\n      render(<UncontrolledComponent defaultChecked />);\n      const checkbox = screen.getByRole('checkbox');\n      expect(checkbox).toHaveAttribute('aria-checked', 'true');\n    });\n\n    it('should update the value', async () => {\n      render(<UncontrolledComponent defaultChecked />);\n      const checkbox = screen.getByRole('checkbox');\n      userEvent.click(checkbox);\n      await waitFor(() => {\n        expect(checkbox).toHaveAttribute('aria-checked', 'false');\n      });\n    });\n  });\n\n  describe('switching between controlled and uncontrolled', () => {\n    const consoleMock = vi.spyOn(console, 'warn').mockImplementation(() => void 0);\n    afterAll(() => {\n      consoleMock.mockReset();\n    });\n\n    describe('controlled to uncontrolled', () => {\n      it('should warn', async () => {\n        render(<UnstableComponent defaultChecked />);\n        const clearButton = screen.getByText('Clear value');\n        userEvent.click(clearButton);\n        await waitFor(() => {\n          expect(consoleMock).toHaveBeenLastCalledWith(\n            'Checkbox is changing from controlled to uncontrolled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.',\n          );\n        });\n      });\n    });\n\n    describe('uncontrolled to controlled', () => {\n      it('should warn', async () => {\n        render(<UnstableComponent />);\n        const checkbox = screen.getByRole('checkbox');\n        userEvent.click(checkbox);\n        await waitFor(() => {\n          expect(consoleMock).toHaveBeenLastCalledWith(\n            'Checkbox is changing from uncontrolled to controlled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.',\n          );\n        });\n      });\n    });\n  });\n});\n\nfunction ControlledComponent({ defaultChecked }: { defaultChecked?: boolean }) {\n  const [checked, setChecked] = React.useState(defaultChecked ?? false);\n  return (\n    <div>\n      <Checkbox checked={checked} onChange={setChecked} />\n      <button type=\"button\" onClick={() => setChecked(false)}>\n        Clear value\n      </button>\n    </div>\n  );\n}\n\nfunction UncontrolledComponent({ defaultChecked }: { defaultChecked?: boolean }) {\n  return <Checkbox defaultChecked={defaultChecked} />;\n}\n\nfunction UnstableComponent({ defaultChecked }: { defaultChecked?: boolean }) {\n  const [checked, setChecked] = React.useState(defaultChecked);\n  return (\n    <div>\n      <Checkbox checked={checked} onChange={setChecked} />\n      <button type=\"button\" onClick={() => setChecked(undefined)}>\n        Clear value\n      </button>\n    </div>\n  );\n}\n\nfunction Checkbox(props: {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (value: boolean) => void;\n}) {\n  const [checked, setChecked] = useControllableState({\n    defaultProp: props.defaultChecked ?? false,\n    prop: props.checked,\n    onChange: props.onChange,\n    caller: 'Checkbox',\n  });\n\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={checked}\n      onKeyDown={(e) => void (e.key === 'Enter' && e.preventDefault())}\n      onClick={() => setChecked((c) => !c)}\n    />\n  );\n}\n"
  },
  {
    "path": "packages/react/use-controllable-state/src/use-controllable-state.tsx",
    "content": "import * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\n// Prevent bundlers from trying to optimize the import\nconst useInsertionEffect: typeof useLayoutEffect =\n  (React as any)[' useInsertionEffect '.trim().toString()] || useLayoutEffect;\n\ntype ChangeHandler<T> = (state: T) => void;\ntype SetStateFn<T> = React.Dispatch<React.SetStateAction<T>>;\n\ninterface UseControllableStateParams<T> {\n  prop?: T | undefined;\n  defaultProp: T;\n  onChange?: ChangeHandler<T>;\n  caller?: string;\n}\n\nexport function useControllableState<T>({\n  prop,\n  defaultProp,\n  onChange = () => {},\n  caller,\n}: UseControllableStateParams<T>): [T, SetStateFn<T>] {\n  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({\n    defaultProp,\n    onChange,\n  });\n  const isControlled = prop !== undefined;\n  const value = isControlled ? prop : uncontrolledProp;\n\n  // OK to disable conditionally calling hooks here because they will always run\n  // consistently in the same environment. Bundlers should be able to remove the\n  // code block entirely in production.\n  /* eslint-disable react-hooks/rules-of-hooks */\n  if (process.env.NODE_ENV !== 'production') {\n    const isControlledRef = React.useRef(prop !== undefined);\n    React.useEffect(() => {\n      const wasControlled = isControlledRef.current;\n      if (wasControlled !== isControlled) {\n        const from = wasControlled ? 'controlled' : 'uncontrolled';\n        const to = isControlled ? 'controlled' : 'uncontrolled';\n        console.warn(\n          `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`,\n        );\n      }\n      isControlledRef.current = isControlled;\n    }, [isControlled, caller]);\n  }\n  /* eslint-enable react-hooks/rules-of-hooks */\n\n  const setValue = React.useCallback<SetStateFn<T>>(\n    (nextValue) => {\n      if (isControlled) {\n        const value = isFunction(nextValue) ? nextValue(prop) : nextValue;\n        if (value !== prop) {\n          onChangeRef.current?.(value);\n        }\n      } else {\n        setUncontrolledProp(nextValue);\n      }\n    },\n    [isControlled, prop, setUncontrolledProp, onChangeRef],\n  );\n\n  return [value, setValue];\n}\n\nfunction useUncontrolledState<T>({\n  defaultProp,\n  onChange,\n}: Omit<UseControllableStateParams<T>, 'prop'>): [\n  Value: T,\n  setValue: React.Dispatch<React.SetStateAction<T>>,\n  OnChangeRef: React.RefObject<ChangeHandler<T> | undefined>,\n] {\n  const [value, setValue] = React.useState(defaultProp);\n  const prevValueRef = React.useRef(value);\n\n  const onChangeRef = React.useRef(onChange);\n  useInsertionEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  React.useEffect(() => {\n    if (prevValueRef.current !== value) {\n      onChangeRef.current?.(value);\n      prevValueRef.current = value;\n    }\n  }, [value, prevValueRef]);\n\n  return [value, setValue, onChangeRef];\n}\n\nfunction isFunction(value: unknown): value is (...args: any[]) => any {\n  return typeof value === 'function';\n}\n"
  },
  {
    "path": "packages/react/use-controllable-state/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-effect-event/CHANGELOG.md",
    "content": "# @radix-ui/react-use-effect-event\n\n## 0.0.2\n\n- Patch additional issues with conditional React imports\n\n## 0.0.1\n\n- Update how potentially missing React APIs are imported to breaking webpack builds. See https://github.com/radix-ui/primitives/issues/3485.\n"
  },
  {
    "path": "packages/react/use-effect-event/README.md",
    "content": "# `react-use-is-hydrated`\n\n## Usage\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-effect-event/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-effect-event/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-effect-event\",\n  \"version\": \"0.0.2\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"src\",\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"@types/use-sync-external-store\": \"^0.0.6\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-effect-event/src/index.ts",
    "content": "export { useEffectEvent } from './use-effect-event';\n"
  },
  {
    "path": "packages/react/use-effect-event/src/use-effect-event.tsx",
    "content": "/* eslint-disable react-hooks/rules-of-hooks */\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\nimport * as React from 'react';\n\ntype AnyFunction = (...args: any[]) => any;\n\n// See https://github.com/webpack/webpack/issues/14814\nconst useReactEffectEvent = (React as any)[' useEffectEvent '.trim().toString()];\nconst useReactInsertionEffect = (React as any)[' useInsertionEffect '.trim().toString()];\n\n/**\n * Designed to approximate the behavior on `experimental_useEffectEvent` as best\n * as possible until its stable release, and back-fill it as a shim as needed.\n */\nexport function useEffectEvent<T extends AnyFunction>(callback?: T): T {\n  if (typeof useReactEffectEvent === 'function') {\n    return useReactEffectEvent(callback);\n  }\n\n  const ref = React.useRef<AnyFunction | undefined>(() => {\n    throw new Error('Cannot call an event handler while rendering.');\n  });\n  // See https://github.com/webpack/webpack/issues/14814\n  if (typeof useReactInsertionEffect === 'function') {\n    useReactInsertionEffect(() => {\n      ref.current = callback;\n    });\n  } else {\n    useLayoutEffect(() => {\n      ref.current = callback;\n    });\n  }\n\n  // https://github.com/facebook/react/issues/19240\n  return React.useMemo(() => ((...args) => ref.current?.(...args)) as T, []);\n}\n"
  },
  {
    "path": "packages/react/use-effect-event/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-escape-keydown/README.md",
    "content": "# `react-use-escape-keydown`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-escape-keydown/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-escape-keydown/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-escape-keydown\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-use-callback-ref\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-escape-keydown/src/index.ts",
    "content": "export { useEscapeKeydown } from './use-escape-keydown';\n"
  },
  {
    "path": "packages/react/use-escape-keydown/src/use-escape-keydown.tsx",
    "content": "import * as React from 'react';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\n\n/**\n * Listens for when the escape key is down\n */\nfunction useEscapeKeydown(\n  onEscapeKeyDownProp?: (event: KeyboardEvent) => void,\n  ownerDocument: Document = globalThis?.document,\n) {\n  const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);\n\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onEscapeKeyDown(event);\n      }\n    };\n    ownerDocument.addEventListener('keydown', handleKeyDown, { capture: true });\n    return () => ownerDocument.removeEventListener('keydown', handleKeyDown, { capture: true });\n  }, [onEscapeKeyDown, ownerDocument]);\n}\n\nexport { useEscapeKeydown };\n"
  },
  {
    "path": "packages/react/use-escape-keydown/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-is-hydrated/CHANGELOG.md",
    "content": "# @radix-ui/react-use-is-hydrated\n\n## 0.1.0\n\n- Update the dependency for `use-sync-external-store` to ensure entrypoint is valid\n"
  },
  {
    "path": "packages/react/use-is-hydrated/README.md",
    "content": "# `react-use-is-hydrated`\n\n## Usage\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-is-hydrated/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-is-hydrated/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-is-hydrated\",\n  \"version\": \"0.1.0\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"src\",\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"use-sync-external-store\": \"^1.5.0\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"@types/use-sync-external-store\": \"^0.0.6\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-is-hydrated/src/index.ts",
    "content": "export { useIsHydrated } from './use-is-hydrated';\n"
  },
  {
    "path": "packages/react/use-is-hydrated/src/use-is-hydrated.tsx",
    "content": "import { useSyncExternalStore } from 'use-sync-external-store/shim';\n\n/**\n * Determines whether or not the component tree has been hydrated.\n */\nexport function useIsHydrated() {\n  return useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\nfunction subscribe() {\n  return () => {};\n}\n"
  },
  {
    "path": "packages/react/use-is-hydrated/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-layout-effect/README.md",
    "content": "# `react-use-layout-effect`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-layout-effect/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-layout-effect/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-layout-effect\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-layout-effect/src/index.ts",
    "content": "export { useLayoutEffect } from './use-layout-effect';\n"
  },
  {
    "path": "packages/react/use-layout-effect/src/use-layout-effect.tsx",
    "content": "import * as React from 'react';\n\n/**\n * On the server, React emits a warning when calling `useLayoutEffect`.\n * This is because neither `useLayoutEffect` nor `useEffect` run on the server.\n * We use this safe version which suppresses the warning by replacing it with a noop on the server.\n *\n * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n */\nconst useLayoutEffect = globalThis?.document ? React.useLayoutEffect : () => {};\n\nexport { useLayoutEffect };\n"
  },
  {
    "path": "packages/react/use-layout-effect/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-previous/README.md",
    "content": "# `react-use-previous`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-previous/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-previous/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-previous\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-previous/src/index.ts",
    "content": "export { usePrevious } from './use-previous';\n"
  },
  {
    "path": "packages/react/use-previous/src/use-previous.tsx",
    "content": "import * as React from 'react';\n\nfunction usePrevious<T>(value: T) {\n  const ref = React.useRef({ value, previous: value });\n\n  // We compare values before making an update to ensure that\n  // a change has been made. This ensures the previous value is\n  // persisted correctly between renders.\n  return React.useMemo(() => {\n    if (ref.current.value !== value) {\n      ref.current.previous = ref.current.value;\n      ref.current.value = value;\n    }\n    return ref.current.previous;\n  }, [value]);\n}\n\nexport { usePrevious };\n"
  },
  {
    "path": "packages/react/use-previous/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-rect/README.md",
    "content": "# `react-use-rect`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-rect/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-rect/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-rect\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/rect\": \"workspace:*\"\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-rect/src/index.ts",
    "content": "export { useRect } from './use-rect';\n"
  },
  {
    "path": "packages/react/use-rect/src/use-rect.tsx",
    "content": "import * as React from 'react';\nimport { observeElementRect } from '@radix-ui/rect';\n\nimport type { Measurable } from '@radix-ui/rect';\n\n/**\n * Use this custom hook to get access to an element's rect (getBoundingClientRect)\n * and observe it along time.\n */\nfunction useRect(measurable: Measurable | null) {\n  const [rect, setRect] = React.useState<DOMRect>();\n  React.useEffect(() => {\n    if (measurable) {\n      const unobserve = observeElementRect(measurable, setRect);\n      return () => {\n        setRect(undefined);\n        unobserve();\n      };\n    }\n    return;\n  }, [measurable]);\n  return rect;\n}\n\nexport { useRect };\n"
  },
  {
    "path": "packages/react/use-rect/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/use-size/README.md",
    "content": "# `react-use-size`\n\nThis is an internal utility, not intended for public usage.\n"
  },
  {
    "path": "packages/react/use-size/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/use-size/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-use-size\",\n  \"version\": \"1.1.1\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-use-layout-effect\": \"workspace:*\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    }\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/use-size/src/index.ts",
    "content": "export { useSize } from './use-size';\n"
  },
  {
    "path": "packages/react/use-size/src/use-size.tsx",
    "content": "import * as React from 'react';\nimport { useLayoutEffect } from '@radix-ui/react-use-layout-effect';\n\nfunction useSize(element: HTMLElement | null) {\n  const [size, setSize] = React.useState<{ width: number; height: number } | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    if (element) {\n      // provide size as early as possible\n      setSize({ width: element.offsetWidth, height: element.offsetHeight });\n\n      const resizeObserver = new ResizeObserver((entries) => {\n        if (!Array.isArray(entries)) {\n          return;\n        }\n\n        // Since we only observe the one element, we don't need to loop over the\n        // array\n        if (!entries.length) {\n          return;\n        }\n\n        const entry = entries[0]!;\n        let width: number;\n        let height: number;\n\n        if ('borderBoxSize' in entry) {\n          const borderSizeEntry = entry['borderBoxSize'];\n          // iron out differences between browsers\n          const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;\n          width = borderSize['inlineSize'];\n          height = borderSize['blockSize'];\n        } else {\n          // for browsers that don't support `borderBoxSize`\n          // we calculate it ourselves to get the correct border box.\n          width = element.offsetWidth;\n          height = element.offsetHeight;\n        }\n\n        setSize({ width, height });\n      });\n\n      resizeObserver.observe(element, { box: 'border-box' });\n\n      return () => resizeObserver.unobserve(element);\n    } else {\n      // We only want to reset to `undefined` when the element becomes `null`,\n      // not if it changes to another element.\n      setSize(undefined);\n    }\n  }, [element]);\n\n  return size;\n}\n\nexport { useSize };\n"
  },
  {
    "path": "packages/react/use-size/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "packages/react/visually-hidden/CHANGELOG.md",
    "content": "# @radix-ui/react-visually-hidden\n\n## 1.2.4\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.4`\n\n## 1.2.3\n\n- Replace deprecated 'ElementRef' with 'ComponentRef' (#3426)\n- Updated dependencies: `@radix-ui/react-primitive@2.1.3`\n\n## 1.2.2\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.2`\n\n## 1.2.1\n\n- Updated dependencies: `@radix-ui/react-primitive@2.1.1`\n\n## 1.2.0\n\n- 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.\n- Updated dependencies: `@radix-ui/react-primitive@2.1.0`\n"
  },
  {
    "path": "packages/react/visually-hidden/README.md",
    "content": "# `react-visually-hidden`\n\nView docs [here](https://radix-ui.com/primitives/docs/utilities/visually-hidden).\n"
  },
  {
    "path": "packages/react/visually-hidden/eslint.config.mjs",
    "content": "// @ts-check\nimport { configs } from '@repo/eslint-config/react-package';\n\nexport default configs;\n"
  },
  {
    "path": "packages/react/visually-hidden/package.json",
    "content": "{\n  \"name\": \"@radix-ui/react-visually-hidden\",\n  \"version\": \"1.2.4\",\n  \"license\": \"MIT\",\n  \"source\": \"./src/index.ts\",\n  \"main\": \"./src/index.ts\",\n  \"module\": \"./src/index.ts\",\n  \"publishConfig\": {\n    \"main\": \"./dist/index.js\",\n    \"module\": \"./dist/index.mjs\",\n    \"types\": \"./dist/index.d.ts\",\n    \"exports\": {\n      \".\": {\n        \"import\": {\n          \"types\": \"./dist/index.d.mts\",\n          \"default\": \"./dist/index.mjs\"\n        },\n        \"require\": {\n          \"types\": \"./dist/index.d.ts\",\n          \"default\": \"./dist/index.js\"\n        }\n      }\n    }\n  },\n  \"files\": [\n    \"dist\",\n    \"README.md\"\n  ],\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"lint\": \"eslint --max-warnings 0 src\",\n    \"clean\": \"rm -rf dist\",\n    \"reset\": \"rm -rf dist node_modules\",\n    \"typecheck\": \"tsc --noEmit\",\n    \"build\": \"radix-build\"\n  },\n  \"dependencies\": {\n    \"@radix-ui/react-primitive\": \"workspace:*\"\n  },\n  \"peerDependencies\": {\n    \"@types/react\": \"*\",\n    \"@types/react-dom\": \"*\",\n    \"react\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\",\n    \"react-dom\": \"^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc\"\n  },\n  \"peerDependenciesMeta\": {\n    \"@types/react\": {\n      \"optional\": true\n    },\n    \"@types/react-dom\": {\n      \"optional\": true\n    }\n  },\n  \"devDependencies\": {\n    \"@repo/builder\": \"workspace:*\",\n    \"@repo/eslint-config\": \"workspace:*\",\n    \"@repo/typescript-config\": \"workspace:*\",\n    \"@types/react\": \"^19.2.2\",\n    \"@types/react-dom\": \"^19.2.2\",\n    \"eslint\": \"^9.38.0\",\n    \"react\": \"^19.2.0\",\n    \"react-dom\": \"^19.2.0\",\n    \"typescript\": \"^5.9.3\"\n  },\n  \"homepage\": \"https://radix-ui.com/primitives\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/radix-ui/primitives.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/radix-ui/primitives/issues\"\n  }\n}\n"
  },
  {
    "path": "packages/react/visually-hidden/src/index.ts",
    "content": "export {\n  VisuallyHidden,\n  //\n  Root,\n  //\n  VISUALLY_HIDDEN_STYLES,\n} from './visually-hidden';\nexport type { VisuallyHiddenProps } from './visually-hidden';\n"
  },
  {
    "path": "packages/react/visually-hidden/src/visually-hidden.tsx",
    "content": "import * as React from 'react';\nimport { Primitive } from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * VisuallyHidden\n * -----------------------------------------------------------------------------------------------*/\n\nconst VISUALLY_HIDDEN_STYLES = Object.freeze({\n  // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n  position: 'absolute',\n  border: 0,\n  width: 1,\n  height: 1,\n  padding: 0,\n  margin: -1,\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  wordWrap: 'normal',\n}) satisfies React.CSSProperties;\n\nconst NAME = 'VisuallyHidden';\n\ntype VisuallyHiddenElement = React.ComponentRef<typeof Primitive.span>;\ntype PrimitiveSpanProps = React.ComponentPropsWithoutRef<typeof Primitive.span>;\ninterface VisuallyHiddenProps extends PrimitiveSpanProps {}\n\nconst VisuallyHidden = React.forwardRef<VisuallyHiddenElement, VisuallyHiddenProps>(\n  (props, forwardedRef) => {\n    return (\n      <Primitive.span\n        {...props}\n        ref={forwardedRef}\n        style={{ ...VISUALLY_HIDDEN_STYLES, ...props.style }}\n      />\n    );\n  },\n);\n\nVisuallyHidden.displayName = NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = VisuallyHidden;\n\nexport {\n  VisuallyHidden,\n  //\n  Root,\n  //\n  VISUALLY_HIDDEN_STYLES,\n};\nexport type { VisuallyHiddenProps };\n"
  },
  {
    "path": "packages/react/visually-hidden/tsconfig.json",
    "content": "{\n  \"extends\": \"@repo/typescript-config/react-library.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"dist\",\n    \"types\": [\"@repo/typescript-config/react-library\"]\n  },\n  \"include\": [\"src\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "patches/@changesets__apply-release-plan.patch",
    "content": "diff --git a/dist/changesets-apply-release-plan.cjs.js b/dist/changesets-apply-release-plan.cjs.js\nindex 7fbefa0dc2a851433de7d245f4b832ea3ad85a6c..7a8a0b5ae55ce3c71d0ce4f16040d468b1a28c77 100644\n--- a/dist/changesets-apply-release-plan.cjs.js\n+++ b/dist/changesets-apply-release-plan.cjs.js\n@@ -194,6 +194,15 @@ async function getChangelogEntry(release, releases, changesets, changelogFuncs,\n   });\n   let relevantChangesets = changesets.filter(cs => relevantChangesetIds.has(cs.id));\n   changelogLines.patch.push(changelogFuncs.getDependencyReleaseLine(relevantChangesets, dependentReleases, changelogOpts));\n+\n+  if (typeof changelogFuncs.getChangelogEntry === \"function\") {\n+    return await changelogFuncs.getChangelogEntry(\n+      release,\n+      changelogLines,\n+      changelogOpts\n+    );\n+  }\n+\n   return [`## ${release.newVersion}`, await generateChangesForVersionTypeMarkdown(changelogLines, \"major\"), await generateChangesForVersionTypeMarkdown(changelogLines, \"minor\"), await generateChangesForVersionTypeMarkdown(changelogLines, \"patch\")].filter(line => line).join(\"\\n\");\n }\n \ndiff --git a/dist/changesets-apply-release-plan.esm.js b/dist/changesets-apply-release-plan.esm.js\nindex d362c5ae0dc4f6ddd85307a18302f2e038033fe9..a3875d8d98535bdba36348f23772aa629ecffe3a 100644\n--- a/dist/changesets-apply-release-plan.esm.js\n+++ b/dist/changesets-apply-release-plan.esm.js\n@@ -157,6 +157,15 @@ async function getChangelogEntry(release, releases, changesets, changelogFuncs,\n   });\n   let relevantChangesets = changesets.filter(cs => relevantChangesetIds.has(cs.id));\n   changelogLines.patch.push(changelogFuncs.getDependencyReleaseLine(relevantChangesets, dependentReleases, changelogOpts));\n+\n+  if (typeof changelogFuncs.getChangelogEntry === \"function\") {\n+    return await changelogFuncs.getChangelogEntry(\n+      release,\n+      changelogLines,\n+      changelogOpts\n+    );\n+  }\n+\n   return [`## ${release.newVersion}`, await generateChangesForVersionTypeMarkdown(changelogLines, \"major\"), await generateChangesForVersionTypeMarkdown(changelogLines, \"minor\"), await generateChangesForVersionTypeMarkdown(changelogLines, \"patch\")].filter(line => line).join(\"\\n\");\n }\n \n"
  },
  {
    "path": "philosophy.md",
    "content": "# Primitives: Philosophy and Guiding Principles\n\n## Vision\n\nMost of us share similar definitions for common UI patterns like accordion, checkbox, combobox, dialog, dropdown, select, slider, and tooltip. These UI patterns are [documented by WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#aria_ex) and generally understood by the community.\n\nHowever, the implementations provided to us by the web platform are inadequate. They're either non-existent, lacking in functionality, or cannot be customised sufficiently.\n\nAs a result, developers are forced to build custom components—an incredibly difficult task. As a result, most components on the web are inaccessible, non-performant, and lacking important features.\n\nOur goal is to create a well-funded open-source component library that the community can use to build accessible design systems.\n\n## Principles at a glance\n\n1. Accessible\n2. Functional\n3. Interoperable\n4. Composable\n5. Customizable\n\n---\n\n## Principles\n\n### Accessible\n\n- Components adhere to WAI-ARIA guidelines and are tested regularly in a wide selection of modern browsers and assistive technologies.\n- Where WAI-ARIA guidelines do not cover a particular use case, prior research is done to determine the patterns and behaviors we adopt when designing a new component. We look to similar, well-tested native solutions to capture nuances that WAI-ARIA guidelines may overlook.\n- Developers should know about accessibility but shouldn't have to spend too much time implementing accessible patterns.\n- Most behavior and markup related to accessibility should be abstracted, and bits that can't should be simplified where possible.\n- Individual components will be tested to ensure maximum accessibility, but where app context is required the component library should provide useful guidance and supporting materials where possible to build fully accessible applications.\n- Try to name things as closely to `aria` and `html` as possible where applicable; wherever we require developers to engage with accessibility directly, our platform should be a learning opportunity and a bridge for better understanding the underlying problems we solve.\n- Components are thoroughly tested on a variety of devices and assistive technology, including all major screen reader vendors (VoiceOver, JAWS, NVDA); components respond and adapt effectively to input and appearance distinctions between platforms.\n\n### Functional\n\n- Components are feature-rich, with support for keyboard interaction, collision detection, focus trapping, dynamic resizing, scroll locking, native fallbacks, and more.\n\n### Composable\n\n- Components are designed with an open API that provides consumers with direct access to the underlying DOM node that is rendered to the page.\n- We achieve this API with a 1-to-1 strategy, where a single component only renders a single DOM element (if a DOM node is rendered at all).\n- Some abstractions may require slight deviation from this pattern, in which case the rationale should be clearly explained in supporting documentation.\n- This API also empowers us to forward user-provided DOM refs to the correct underlying DOM node without doing anything too clever, meaning refs function exactly as the consumer would expect.\n- Just as DOM nodes are composable, so are DOM event handlers; consumers should be able to pass their own event handlers directly to a component and stop internal handlers from firing.\n\n### Customizable\n\n- Components are built to be themed; no need to override opinionated styles, as primitives ship with zero presentational styles applied by default.\n- Components ship with CSS-in-JS style objects that provide a minimal set styles needed to easily reset user agent styles and provide a clean slate for consumers to build upon.\n- Our components can be composed or styled the same way underlying JSX components are composed or styled, with limitations only introduced to prevent UX/accessibility dark patterns where needed.\n- Consumers can choose whether or not to apply these styles in their app, as well as the styling tool; we do not enforce a particular methodology or library.\n\n## Other considerations\n\n### Internationalization\n\n- Components support international string formatting and make behavioral adjustments for right-to-left languages\n\n### Stateful components can be controlled or uncontrolled\n\n- Similar to form field JSX elements in React, all components with internal state can either be uncontrolled (internally managed) or controlled (managed by the consumer)\n\n### Components exist in a finite number of predefined states\n\n- State in this context refers to a component's state representable by a finite state machine; not to be confused with arbitrary stateful data as typically referenced in React libraries\n- States are predetermined during the component design phase and expressed as strings in component code, making state transitions more explicit, deterministic, and clearer to follow\n- Use the `data-state` attribute to expose a component's state directly to its DOM element\n- When tempted to use a boolean to track a piece of stateful data, consider enumerated strings instead\n\n### Developer experience\n\n- Component APIs should be relatively intuitive and as declarative as possible\n- Provide in-code documentation for complex/unclear abstractions for easier source debugging\n- Anticipate errors and provide thorough console warnings with links back to documentation\n\n### Balancing tradeoffs between design goals\n\n- Composition is preferred over configuration\n- Code clarity is preferred over bundle terseness except in extreme cases\n- Smart abstractions preferred over over-exposing internal state\n\n### Documentation\n\nTODO\n\n### Misc\n\n- Not concerned with design system components like `Box`, `Chip` or `Badge` that provide visual language consistency but provide no underlying semantic meaning or abstracted behavior\n- Keep file structure flat so logic is easier to follow; avoid early abstractions\n- Don't repeat yourself _too much_ but don't be afraid to repeat yourself if an implementation detail hasn't been thoroughly vetted\n"
  },
  {
    "path": "pnpm-workspace.yaml",
    "content": "packages:\n  - 'apps/*'\n  - 'internal/*'\n  - 'packages/*/*'\n"
  },
  {
    "path": "release-process.md",
    "content": "# Release process\n\n## Overview\n\nWhile our release schedule is flexible, our general strategy is to release several larger improvements inside each stable release. In order to provide faster access to fixes and enhancements between main releases we provide release candidates which are published on every merge into `main`.\n\nWhile the versioning and publishing of our primitives is mostly automated via scripts, updates to our [documentation website](https://radix-ui.com/primitives/docs/overview/introduction) is currently a manual process. We are working to improve this but for now this outline should help contributors with the process.\n\n## Release strategy\n\nWe track versions during the pull request process. As features are added, modified or improved it's important to keep track of these via versioning.\n\n### Tracking version changes\n\nRun `pnpm changeset` to mark the appropriate type of change for those packages. This is later consumed when publishing new versions. Be sure to check-in these files along with your code changes.\n\n### Publishing a stable release\n\n1. Checkout the `stable` branch and pull the latest changes from `main`\n2. Push the changes to `stable`. This will trigger the Changeset action, which will create a new release PR.\n3. Review the release PR, ensure all tests pass and make any necessary changes.\n4. Merge the PR. This will trigger the Changeset action to publish the new version to npm.\n\n### Release candidates\n\nRelease candidates are automatically published when new changes are merged into `main`.\n\n## Updating documentation\n\nOur documentation is in a [separate repository](https://github.com/radix-ui/website) and updating it is a three step process:\n\n1. Write and update the [change log](https://github.com/radix-ui/website/blob/main/data/primitives/docs/overview/releases.mdx)\n2. Bump package version/s and create / update the pages for each version change\n3. Perform documentation updates and remove live demos from previous versions\n\nSteps 2 and 3 are typically raised as separate pull requests to make changes easier to review.\n\n### Creating new version pages\n\nThis is as simple as duplicating the latest page and updating the version number to match the release. Some things to keep in mind:\n\n- We only provide live demos for the latest version of a package so you must remember to disable/remove the previous live demo (this avoids breaking changes affecting old versions in our docs)\n- If the incoming version is a patch which doesn't require a docs update then you can simply change the page name to match the new version rather than duplicating the same content\n"
  },
  {
    "path": "scripts/setup-tests.ts",
    "content": "import '@testing-library/jest-dom/vitest';\nimport * as axeMatchers from 'vitest-axe/matchers';\nimport { expect } from 'vitest';\n\nexpect.extend(axeMatchers);\n\nglobal.ResizeObserver = class ResizeObserver {\n  cb: any;\n  constructor(cb: any) {\n    this.cb = cb;\n  }\n  observe() {\n    this.cb([{ borderBoxSize: { inlineSize: 0, blockSize: 0 } }]);\n  }\n  unobserve() {}\n  disconnect() {}\n};\n"
  },
  {
    "path": "types/global.d.ts",
    "content": "export {};\n\ntype RequestIdleCallbackHandle = any;\ntype RequestIdleCallbackOptions = {\n  timeout: number;\n};\ntype RequestIdleCallbackDeadline = {\n  readonly didTimeout: boolean;\n  timeRemaining: () => number;\n};\n\ndeclare module '*.module.css' {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n"
  },
  {
    "path": "types/index.d.ts",
    "content": "declare module '*.module.css' {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n"
  },
  {
    "path": "vitest.config.mts",
    "content": "import { defineConfig } from 'vitest/config';\n\nexport default defineConfig({\n  test: {\n    setupFiles: ['./scripts/setup-tests.ts'],\n    environment: 'jsdom',\n    include: ['**/*.test.?(c|m)[jt]s?(x)'],\n    retry: 1,\n  },\n});\n"
  }
]