[ { "path": ".eslintignore", "content": "/dist\n/packages/**/dist\n/node_modules\n/packages/**/node_modules" }, { "path": ".github/CONTRIBUTING.md", "content": "# Contributing\n\nThanks for your interest in contributing to Headless UI! Please take a moment to review this document **before submitting a pull request**.\n\n- [Pull requests](#pull-requests)\n- [Monorepo](#monorepo)\n- [Installation](#installation)\n- [Coding standards](#coding-standards)\n- [Running tests](#running-tests)\n- [Running playgrounds](#running-playgrounds)\n- [Scripts summary](#scripts-summary)\n\n## Pull requests\n\n**Please ask first before starting work on any significant new features.**\n\nIt's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create [an issue](https://github.com/tailwindlabs/headlessui/issues) to first discuss any significant new features. This includes things like adding new components, exposing internal information, etc.\nAlso make sure that you are making changes to both the `React` and `Vue` versions so that we can ensure feature parity.\n\n## Monorepo\n\nThe Headless UI repo is a monorepo using `npm` workspaces.\n\n## Installation\n\nYou only require a `npm install` in the root directory to install everything you need.\n\n```sh\nnpm install\n```\n\n## Coding standards\n\nWe use `prettier` for making sure that the codebase is formatted consistently.\nTo automatically fix any style violations in your code, you can run:\n\n```sh\nnpm lint\n```\n\n**Note**: Whenever you commit, the lint check will run on all staged files.\n**Note**: In CI, we will only check your code, and not write with the formatted files. If you want to just check, then you can either run `npm run lint-check` or `CI=true npm run lint`\n\n## Running tests\n\nYou can run the test suite using the following commands:\n\n```sh\nnpm run test\n```\n\nYou can also run them for React or Vue individually:\n\n```sh\nnpm run react test\n\n# or\n\nnpm run vue test\n```\n\nPlease ensure that the tests are passing when submitting a pull request. If you're adding new features to Headless UI, please include tests.\n\n## Running playgrounds\n\nCurrently the `React` playground (located in `packages/playground-react`) is a Next.js app that contains some examples which you can find in the `pages` directory. The `Vue` playground (located in `packages/playground-vue`) is a Vite app that contains some examples which you can find in the `src/components` directory.\n\nYou can launch them by running:\n\n```sh\nnpm run react playground\n\n# or\n\nnpm run vue playground\n```\n\nThis will also start the necessary watchers so that you don't have to care about them.\n\n## Scripts summary\n\nGlobal scripts, and some aliases:\n\n- `npm install`: install all dependencies for all packages\n- `npm run clean`: this will call all `npm run {package} clean` commands\n- `npm run build`: this will call all `npm run {package} build` commands\n- `npm run lint`: this will `lint` all packages\n- `npm run test`: this will `test` all packages\n - `npm run test`: run all jest tests\n - `npm run test --watch`: run all jest tests in interactive mode\n - `npm run test tabs`: run all jest tests filtered by `tabs`\n - `npm run test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`\n\nScripts per package:\n\n- `npm run react`: Prefix to run anything in the `@headlessui/react` package\n - `npm run react test`: run all jest tests\n - `npm run react test --watch`: run all jest tests in interactive mode\n - `npm run react test tabs`: run all jest tests filtered by `tabs`\n - `npm run react test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`\n - `npm run react build`: build the final artefacts\n - `npm run react lint`: validate and fix the react codebase using prettier\n - `npm run react watch`: start a watcher for the react esm build\n - **Note**: this will be executed for you when using the `npm run react playground`\n - **Note**: this is not required for jest. You will probably never need this\n - `npm run react playground`: (alias) start a development server in the `playground-react` package\n - **Note**: this will also run `npm run react watch` for you, which means that you only need to execute `npm run react playground`\n - `npm run react clean`: this will remove `dist` files\n- `npm run vue`: Prefix to run anything in the `@headlessui/vue` package\n - `npm run vue test`: run all jest tests\n - `npm run vue test --watch`: run all jest tests in interactive mode\n - `npm run vue test tabs`: run all jest tests filtered by `tabs`\n - `npm run vue test tabs --watch`: run all jest tests in interactive mode filtered by `tabs`\n - `npm run vue build`: build the final artefacts\n - `npm run vue lint`: validate and fix the vue codebase using prettier\n - `npm run vue watch`: start a watcher for the vue esm build\n - **Note**: this will be executed for you when using the `npm run vue playground`\n - **Note**: this is not required for jest. You will probably never need this\n - `npm run vue playground`: (alias) start a development server in the `playground-vue` package\n - **Note**: this will also run `npm run vue watch` for you, which means that you only need to execute `npm run react playground`\n - `npm run vue clean`: this will remove `dist` files\n" }, { "path": ".github/FUNDING.yml", "content": "custom: ['https://tailwindcss.com/sponsor']\n" }, { "path": ".github/ISSUE_TEMPLATE/bug-report.md", "content": "---\nname: Bug report\nabout: If you've already asked for help with a problem and confirmed something is broken with Headless UI itself, create a bug report.\ntitle: ''\nlabels: ''\nassignees: ''\n---\n\n\n\n**What package within Headless UI are you using?**\n\nFor example: @headlessui/react\n\n**What version of that package are you using?**\n\nFor example: v0.3.1\n\n**What browser are you using?**\n\nFor example: Chrome, Safari, or N/A\n\n**Reproduction URL**\n\nA public GitHub repo that includes a minimal reproduction of the bug. **Please do not link to your actual project**, what we need instead is a _minimal_ reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways. Unfortunately we can't provide support without a reproduction, and your issue will be closed with no comment if this is not provided.\n\nYou can use one of the starting projects on CodeSandbox:\n\n- With React and Tailwind CSS: https://codesandbox.io/s/github/tailwindlabs/reproduction-headlessui-react\n- With Vue and Tailwind CSS: https://codesandbox.io/s/github/tailwindlabs/reproduction-headlessui-vue\n\n**Describe your issue**\n\nDescribe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: Get Help\n url: https://github.com/tailwindlabs/headlessui/discussions/new?category=help\n about: If you can't get something to work the way you expect, open a question in our discussion forums.\n - name: Feature Request\n url: https://github.com/tailwindlabs/headlessui/discussions/new?category=ideas\n about: 'Suggest any ideas you have using our discussion forums.'\n - name: Documentation Issue\n url: https://github.com/tailwindlabs/headlessui/issues/new?title=%5BDOCS%5D:%20\n about: 'For documentation issues, suggest changes on our documentation repository.'\n" }, { "path": ".github/workflows/main.yml", "content": "name: CI\n\non:\n push:\n branches: [main]\n pull_request:\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}\n cancel-in-progress: true\n\nenv:\n NODE_VERSION: 18.x\n\njobs:\n install:\n runs-on: ubuntu-latest\n\n steps:\n - name: Begin CI...\n uses: actions/checkout@v4\n - name: Use Node ${{ env.NODE_VERSION }}\n uses: actions/setup-node@v4\n with:\n node-version: ${{ env.NODE_VERSION }}\n - uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}\n - name: Install dependencies\n run: npm ci\n env:\n CI: true\n\n lint:\n runs-on: ubuntu-latest\n needs: [install]\n\n steps:\n - name: Begin CI...\n uses: actions/checkout@v4\n - uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}\n - name: Lint\n run: npm run lint\n env:\n CI: true\n\n test:\n runs-on: ubuntu-latest\n needs: [install]\n\n steps:\n - name: Begin CI...\n uses: actions/checkout@v4\n - uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}\n - name: Test\n run: |\n npm run test || npm run test || npm run test || exit 1\n env:\n CI: true\n\n build:\n runs-on: ubuntu-latest\n needs: [install]\n\n steps:\n - name: Begin CI...\n uses: actions/checkout@v4\n - uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}\n - name: Build\n run: npm run build\n env:\n CI: true\n\n check-types:\n runs-on: ubuntu-latest\n needs: [build]\n\n steps:\n - name: Begin CI...\n uses: actions/checkout@v4\n - uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}\n - name: Check Types\n run: npm run lint-types\n env:\n CI: true\n" }, { "path": ".github/workflows/prepare-release.yml", "content": "name: Prepare Release\n\non:\n workflow_dispatch:\n push:\n tags:\n - '**'\n\nenv:\n CI: true\n\npermissions:\n contents: read\n\njobs:\n build:\n permissions:\n contents: write # for softprops/action-gh-release to create GitHub release\n\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [18]\n\n steps:\n - uses: actions/checkout@v4\n\n - run: git fetch --tags -f\n\n - name: Resolve version\n id: vars\n run: |\n echo \"TAG_NAME=${{ github.ref_name }}\" >> $GITHUB_ENV\n\n - name: Get release notes\n run: |\n RELEASE_NOTES=$(npm run release-notes $TAG_NAME --silent)\n echo \"RELEASE_NOTES<> $GITHUB_ENV\n echo \"$RELEASE_NOTES\" >> $GITHUB_ENV\n echo \"EOF\" >> $GITHUB_ENV\n\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n registry-url: 'https://registry.npmjs.org'\n\n - name: Release\n uses: softprops/action-gh-release@v2\n with:\n draft: true\n tag_name: ${{ env.TAG_NAME }}\n body: |\n ${{ env.RELEASE_NOTES }}\n" }, { "path": ".github/workflows/release-insiders.yml", "content": "name: Release Insiders\n\non:\n push:\n branches: [main]\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n # https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions\n id-token: write\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [20]\n\n steps:\n - uses: actions/checkout@v4\n\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n registry-url: 'https://registry.npmjs.org'\n\n - name: Use cached node_modules\n id: cache\n uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n nodeModules-\n\n - name: Install dependencies\n run: npm ci\n env:\n CI: true\n\n - name: Test\n run: |\n npm run test || npm run test || npm run test || exit 1\n env:\n CI: true\n\n - name: Resolve version\n id: vars\n run: echo \"::set-output name=sha_short::$(git rev-parse --short HEAD)\"\n\n - name: 'Version based on commit: 0.0.0-insiders.${{ steps.vars.outputs.sha_short }}'\n run: npm version -w packages 0.0.0-insiders.${{ steps.vars.outputs.sha_short }} --force --no-git-tag-version\n\n - name: Publish\n run: npm publish -w packages --provenance --tag insiders\n env:\n CI: true\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n" }, { "path": ".github/workflows/release.yml", "content": "name: Release\n\non:\n release:\n types: [published]\n\nconcurrency:\n group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n # https://docs.npmjs.com/generating-provenance-statements#publishing-packages-with-provenance-via-github-actions\n id-token: write\n\nenv:\n CI: true\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [18]\n\n steps:\n - uses: actions/checkout@v4\n\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n registry-url: 'https://registry.npmjs.org'\n\n - name: Use cached node_modules\n id: cache\n uses: actions/cache@v4\n with:\n path: '**/node_modules'\n key: ${{ runner.os }}-${{ env.NODE_VERSION }}-modules-${{ hashFiles('**/package-lock.json') }}\n restore-keys: |\n nodeModules-\n\n - name: Install dependencies\n run: npm ci\n env:\n CI: true\n\n - name: Test\n run: |\n npm run test || npm run test || npm run test || exit 1\n env:\n CI: true\n\n - name: Calculate environment variables\n run: |\n echo \"TAG_NAME=${{ github.event.tag_name }}\" >> $GITHUB_ENV\n echo \"RELEASE_CHANNEL=$(npm run release-channel $TAG_NAME --silent)\" >> $GITHUB_ENV\n echo \"PACKAGE_PATH=$(npm run package-path $TAG_NAME --silent)\" >> $GITHUB_ENV\n\n - name: Publish\n run: npm publish ${{ env.PACKAGE_PATH }} --provenance --tag ${{ env.RELEASE_CHANNEL }}\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/packages/**/node_modules\n/playgrounds/**/node_modules\n\n# testing\n/coverage\n/packages/**/coverage\n/playgrounds/**/coverage\n\n# logs\n*.log\n/packages/**/*.log\n/playgrounds/**/*.log\n\n# next.js\n/.next/\n/playgrounds/**/.next/\n/out/\n/packages/**/out/\n/playgrounds/**/out/\n\n# production\n/dist\n/packages/**/dist\n/playgrounds/**/dist\n\n# misc\n.DS_Store\n*.pem\n.cache\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.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": ".prettierignore", "content": "dist/\nnode_modules/\ncoverage/\n.next/\n" }, { "path": ".swcrc", "content": "{\n \"minify\": false,\n \"jsc\": {\n \"parser\": {\n \"syntax\": \"typescript\",\n \"tsx\": true,\n \"decorators\": false,\n \"dynamicImport\": false\n }\n }\n}\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\nEach package has its own changelog.\n\n- [@headlessui/react](https://github.com/tailwindlabs/headlessui/blob/main/packages/@headlessui-react/CHANGELOG.md)\n- [@headlessui/vue](https://github.com/tailwindlabs/headlessui/blob/main/packages/@headlessui-vue/CHANGELOG.md)\n- [@headlessui/tailwindcss](https://github.com/tailwindlabs/headlessui/blob/main/packages/@headlessui-tailwindcss/CHANGELOG.md)\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2020 Tailwind Labs\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." }, { "path": "README.md", "content": "

\n Headless UI\n

\n\n

\n A set of completely unstyled, fully accessible UI components, designed to integrate\n beautifully with Tailwind CSS.\n

\n\n---\n\n## Documentation\n\nFor full documentation, visit [headlessui.com](https://headlessui.com).\n\n### Installing the latest version\n\nYou can install the latest version by using:\n\n- `npm install @headlessui/react@latest`\n- `npm install @headlessui/vue@latest`\n\n### Installing the insiders version\n\nYou can install the insiders version (which points to whatever the latest commit on the `main` branch is) by using:\n\n- `npm install @headlessui/react@insiders`\n- `npm install @headlessui/vue@insiders`\n\n**Note:** The insiders build doesn't follow semver and therefore doesn't guarantee that the APIs will be the same once they are released.\n\n## Packages\n\n| Name | Version | Downloads |\n| :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: |\n| [`@headlessui/react`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-react) | [![npm version](https://img.shields.io/npm/v/@headlessui/react.svg)](https://www.npmjs.com/package/@headlessui/react) | [![npm downloads](https://img.shields.io/npm/dt/@headlessui/react.svg)](https://www.npmjs.com/package/@headlessui/react) |\n| [`@headlessui/vue`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue) | [![npm version](https://img.shields.io/npm/v/@headlessui/vue.svg)](https://www.npmjs.com/package/@headlessui/vue) | [![npm downloads](https://img.shields.io/npm/dt/@headlessui/vue.svg)](https://www.npmjs.com/package/@headlessui/vue) |\n| [`@headlessui/tailwindcss`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-tailwindcss) | [![npm version](https://img.shields.io/npm/v/@headlessui/tailwindcss.svg)](https://www.npmjs.com/package/@headlessui/tailwindcss) | [![npm downloads](https://img.shields.io/npm/dt/@headlessui/tailwindcss.svg)](https://www.npmjs.com/package/@headlessui/tailwindcss) |\n\n## Community\n\nFor help, discussion about best practices, or feature ideas:\n\n[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)\n\n## Contributing\n\nIf you're interested in contributing to Headless UI, please read our [contributing docs](https://github.com/tailwindlabs/headlessui/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.\n" }, { "path": "jest/create-jest-config.cjs", "content": "module.exports = function createJestConfig(root, options) {\n let { setupFilesAfterEnv = [], transform = {}, ...rest } = options\n return Object.assign(\n {\n rootDir: root,\n setupFilesAfterEnv: [\n '../../jest/custom-matchers.ts',\n '../../jest/polyfills.ts',\n ...setupFilesAfterEnv,\n ],\n transform: {\n '^.+\\\\.(t|j)sx?$': '@swc/jest',\n ...transform,\n },\n globals: {\n __DEV__: true,\n },\n },\n rest\n )\n}\n" }, { "path": "jest/custom-matchers.ts", "content": "import '@testing-library/jest-dom/extend-expect'\n\n// Assuming requestAnimationFrame is roughly 60 frames per second\nlet frame = 1000 / 60\nlet amountOfFrames = 2\n\nlet formatter = new Intl.NumberFormat('en')\n\nexpect.extend({\n toBeWithinRenderFrame(actual, expected) {\n let min = expected - frame * amountOfFrames\n let max = expected + frame * amountOfFrames\n\n let pass = actual >= min && actual <= max\n\n return {\n message: pass\n ? () => {\n return `expected ${actual} not to be within range of a frame ${formatter.format(\n min\n )} - ${formatter.format(max)}`\n }\n : () => {\n return `expected ${actual} not to be within range of a frame ${formatter.format(\n min\n )} - ${formatter.format(max)}`\n },\n pass,\n }\n },\n})\n" }, { "path": "jest/polyfills.ts", "content": "import { mockAnimationsApi, mockResizeObserver } from 'jsdom-testing-mocks'\n\nmockAnimationsApi() // `Element.prototype.getAnimations` and `CSSTransition` polyfill\nmockResizeObserver() // `ResizeObserver` polyfill\n\n// JSDOM Doesn't implement innerText yet: https://github.com/jsdom/jsdom/issues/1245\n// So this is a hacky way of implementing it using `textContent`.\n// Real implementation doesn't use textContent because:\n// > textContent gets the content of all elements, including \n \n\n" }, { "path": "playgrounds/vue/package.json", "content": "{\n \"name\": \"playground-vue\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"directories\": {\n \"example\": \"examples\"\n },\n \"scripts\": {\n \"prebuild\": \"npm run build --workspace=@headlessui/vue && npm run build --workspace=@headlessui/tailwindcss\",\n \"predev\": \"npm run build --workspace=@headlessui/vue && npm run build --workspace=@headlessui/tailwindcss\",\n \"dev:tailwindcss\": \"npm run watch --workspace=@headlessui/tailwindcss\",\n \"dev:headlessui\": \"npm run watch --workspace=@headlessui/vue\",\n \"dev:next\": \"vite serve\",\n \"dev\": \"npm-run-all -p dev:*\",\n \"build\": \"NODE_ENV=production vite build\",\n \"lint-types\": \"echo\",\n \"clean\": \"rimraf ./dist\"\n },\n \"dependencies\": {\n \"@headlessui/vue\": \"*\",\n \"@heroicons/vue\": \"^1.0.6\",\n \"@tailwindcss/forms\": \"^0.5.2\",\n \"@tailwindcss/postcss\": \"^4.1.3\",\n \"@tailwindcss/typography\": \"^0.5.2\",\n \"postcss\": \"^8.4.14\",\n \"tailwindcss\": \"^4.1.3\",\n \"vue\": \"^3.4.27\",\n \"vue-flatpickr-component\": \"^9.0.5\",\n \"vue-router\": \"^4.3.2\"\n },\n \"devDependencies\": {\n \"@floating-ui/vue\": \"^1.0.2\",\n \"@vitejs/plugin-vue\": \"^5.0.5\",\n \"vite\": \"^5.2.12\"\n }\n}\n" }, { "path": "playgrounds/vue/postcss.config.js", "content": "module.exports = {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n}\n" }, { "path": "playgrounds/vue/src/.generated/.gitignore", "content": "*\n!.gitignore\n" }, { "path": "playgrounds/vue/src/App.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/KeyCaster.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/Layout.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/Button.vue", "content": "\n" }, { "path": "playgrounds/vue/src/components/Home.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combinations/form.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combinations/tabs-in-dialog.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combobox/_virtual-example.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combobox/combobox-countries.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combobox/combobox-open-on-focus.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combobox/combobox-virtual-with-empty-states.vue", "content": "\n\n" }, { "path": "playgrounds/vue/src/components/combobox/combobox-virtualized.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combobox/combobox-with-pure-tailwind.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combobox/command-palette-with-groups.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combobox/command-palette.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/combobox/multi-select.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/dialog/dialog.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/dialog/slide-over.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/disclosure/disclosure.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/focus-trap/focus-trap.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/listbox/listbox.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/listbox/multi-select.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/listbox/multiple-elements.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/menu/menu-with-floating-ui.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/menu/menu-with-popper.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/menu/menu-with-transition-and-popper.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/menu/menu-with-transition.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/menu/menu.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/menu/multiple-elements.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/popover/popover.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/portal/portal.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/radio-group/radio-group.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/switch/switch.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/tabs/simple-tabs.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/components/tabs/tabs.vue", "content": "\n\n\n" }, { "path": "playgrounds/vue/src/data.ts", "content": "export let countries = [\n 'Afghanistan',\n 'Albania',\n 'Algeria',\n 'American Samoa',\n 'Andorra',\n 'Angola',\n 'Anguilla',\n 'Antarctica',\n 'Antigua and Barbuda',\n 'Argentina',\n 'Armenia',\n 'Aruba',\n 'Australia',\n 'Austria',\n 'Azerbaijan',\n 'Bahamas (the)',\n 'Bahrain',\n 'Bangladesh',\n 'Barbados',\n 'Belarus',\n 'Belgium',\n 'Belize',\n 'Benin',\n 'Bermuda',\n 'Bhutan',\n 'Bolivia (Plurinational State of)',\n 'Bonaire, Sint Eustatius and Saba',\n 'Bosnia and Herzegovina',\n 'Botswana',\n 'Bouvet Island',\n 'Brazil',\n 'British Indian Ocean Territory (the)',\n 'Brunei Darussalam',\n 'Bulgaria',\n 'Burkina Faso',\n 'Burundi',\n 'Cabo Verde',\n 'Cambodia',\n 'Cameroon',\n 'Canada',\n 'Cayman Islands (the)',\n 'Central African Republic (the)',\n 'Chad',\n 'Chile',\n 'China',\n 'Christmas Island',\n 'Cocos (Keeling) Islands (the)',\n 'Colombia',\n 'Comoros (the)',\n 'Congo (the Democratic Republic of the)',\n 'Congo (the)',\n 'Cook Islands (the)',\n 'Costa Rica',\n 'Croatia',\n 'Cuba',\n 'Curaçao',\n 'Cyprus',\n 'Czechia',\n \"Côte d'Ivoire\",\n 'Denmark',\n 'Djibouti',\n 'Dominica',\n 'Dominican Republic (the)',\n 'Ecuador',\n 'Egypt',\n 'El Salvador',\n 'Equatorial Guinea',\n 'Eritrea',\n 'Estonia',\n 'Eswatini',\n 'Ethiopia',\n 'Falkland Islands (the) [Malvinas]',\n 'Faroe Islands (the)',\n 'Fiji',\n 'Finland',\n 'France',\n 'French Guiana',\n 'French Polynesia',\n 'French Southern Territories (the)',\n 'Gabon',\n 'Gambia (the)',\n 'Georgia',\n 'Germany',\n 'Ghana',\n 'Gibraltar',\n 'Greece',\n 'Greenland',\n 'Grenada',\n 'Guadeloupe',\n 'Guam',\n 'Guatemala',\n 'Guernsey',\n 'Guinea',\n 'Guinea-Bissau',\n 'Guyana',\n 'Haiti',\n 'Heard Island and McDonald Islands',\n 'Holy See (the)',\n 'Honduras',\n 'Hong Kong',\n 'Hungary',\n 'Iceland',\n 'India',\n 'Indonesia',\n 'Iran (Islamic Republic of)',\n 'Iraq',\n 'Ireland',\n 'Isle of Man',\n 'Israel',\n 'Italy',\n 'Jamaica',\n 'Japan',\n 'Jersey',\n 'Jordan',\n 'Kazakhstan',\n 'Kenya',\n 'Kiribati',\n \"Korea (the Democratic People's Republic of)\",\n 'Korea (the Republic of)',\n 'Kuwait',\n 'Kyrgyzstan',\n \"Lao People's Democratic Republic (the)\",\n 'Latvia',\n 'Lebanon',\n 'Lesotho',\n 'Liberia',\n 'Libya',\n 'Liechtenstein',\n 'Lithuania',\n 'Luxembourg',\n 'Macao',\n 'Madagascar',\n 'Malawi',\n 'Malaysia',\n 'Maldives',\n 'Mali',\n 'Malta',\n 'Marshall Islands (the)',\n 'Martinique',\n 'Mauritania',\n 'Mauritius',\n 'Mayotte',\n 'Mexico',\n 'Micronesia (Federated States of)',\n 'Moldova (the Republic of)',\n 'Monaco',\n 'Mongolia',\n 'Montenegro',\n 'Montserrat',\n 'Morocco',\n 'Mozambique',\n 'Myanmar',\n 'Namibia',\n 'Nauru',\n 'Nepal',\n 'Netherlands (the)',\n 'New Caledonia',\n 'New Zealand',\n 'Nicaragua',\n 'Niger (the)',\n 'Nigeria',\n 'Niue',\n 'Norfolk Island',\n 'Northern Mariana Islands (the)',\n 'Norway',\n 'Oman',\n 'Pakistan',\n 'Palau',\n 'Palestine, State of',\n 'Panama',\n 'Papua New Guinea',\n 'Paraguay',\n 'Peru',\n 'Philippines (the)',\n 'Pitcairn',\n 'Poland',\n 'Portugal',\n 'Puerto Rico',\n 'Qatar',\n 'Republic of North Macedonia',\n 'Romania',\n 'Russian Federation (the)',\n 'Rwanda',\n 'Réunion',\n 'Saint Barthélemy',\n 'Saint Helena, Ascension and Tristan da Cunha',\n 'Saint Kitts and Nevis',\n 'Saint Lucia',\n 'Saint Martin (French part)',\n 'Saint Pierre and Miquelon',\n 'Saint Vincent and the Grenadines',\n 'Samoa',\n 'San Marino',\n 'Sao Tome and Principe',\n 'Saudi Arabia',\n 'Senegal',\n 'Serbia',\n 'Seychelles',\n 'Sierra Leone',\n 'Singapore',\n 'Sint Maarten (Dutch part)',\n 'Slovakia',\n 'Slovenia',\n 'Solomon Islands',\n 'Somalia',\n 'South Africa',\n 'South Georgia and the South Sandwich Islands',\n 'South Sudan',\n 'Spain',\n 'Sri Lanka',\n 'Sudan (the)',\n 'Suriname',\n 'Svalbard and Jan Mayen',\n 'Sweden',\n 'Switzerland',\n 'Syrian Arab Republic',\n 'Taiwan',\n 'Tajikistan',\n 'Tanzania, United Republic of',\n 'Thailand',\n 'Timor-Leste',\n 'Togo',\n 'Tokelau',\n 'Tonga',\n 'Trinidad and Tobago',\n 'Tunisia',\n 'Turkey',\n 'Turkmenistan',\n 'Turks and Caicos Islands (the)',\n 'Tuvalu',\n 'Uganda',\n 'Ukraine',\n 'United Arab Emirates (the)',\n 'United Kingdom of Great Britain and Northern Ireland (the)',\n 'United States Minor Outlying Islands (the)',\n 'United States of America (the)',\n 'Uruguay',\n 'Uzbekistan',\n 'Vanuatu',\n 'Venezuela (Bolivarian Republic of)',\n 'Viet Nam',\n 'Virgin Islands (British)',\n 'Virgin Islands (U.S.)',\n 'Wallis and Futuna',\n 'Western Sahara',\n 'Yemen',\n 'Zambia',\n 'Zimbabwe',\n 'Åland Islands',\n]\n\nexport let timezones: string[] = Intl.supportedValuesOf('timeZone')\n" }, { "path": "playgrounds/vue/src/main.ts", "content": "import { createApp } from 'vue'\n// @ts-expect-error TODO: Properly handle this\nimport App from './App.vue'\nimport router from './router'\n\nimport './styles.css'\n\ncreateApp(App).use(router).mount('#app')\n" }, { "path": "playgrounds/vue/src/playground-utils/hooks/use-popper.js", "content": "import { createPopper } from '@popperjs/core'\nimport { onMounted, ref, watchEffect } from 'vue'\n\nexport function usePopper(options) {\n let reference = ref(null)\n let popper = ref(null)\n\n onMounted(() => {\n watchEffect((onInvalidate) => {\n if (!popper.value) return\n if (!reference.value) return\n\n let popperEl = popper.value.el || popper.value\n let referenceEl = reference.value.el || reference.value\n\n if (!(referenceEl instanceof HTMLElement)) return\n if (!(popperEl instanceof HTMLElement)) return\n\n let { destroy } = createPopper(referenceEl, popperEl, options)\n\n onInvalidate(destroy)\n })\n })\n\n return [reference, popper]\n}\n" }, { "path": "playgrounds/vue/src/router.ts", "content": "import { createRouter, createWebHistory, RouterView } from 'vue-router'\n\ntype Component = import('vue').Component\n\nfunction buildRoutes() {\n function titleCase(str) {\n return str\n .toLocaleLowerCase()\n .split('-')\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(' ')\n }\n\n // 1. Get all the components in the src/components directory\n let files = Object.entries(\n import.meta.glob('./components/**/*.vue', {\n eager: true,\n import: 'default',\n })\n ) as [string, Component][]\n\n // 2.a. Swap the file names for route urls\n // 2.b. Resolve the default import for each component\n files = files.map(([file, component]) => [\n file\n .replace('./components/', '/')\n .replace(/\\.vue$/, '')\n .toLocaleLowerCase()\n .replace(/^\\/home$/g, '/'),\n component,\n ])\n\n let alreadyAdded = new Set()\n\n // 3. Add a route for each directory (if not already added)\n files = files.flatMap((entry) => {\n let dirs = entry[0].split('/').slice(1, -1)\n\n let paths: [string, Component][] = []\n\n for (const [idx] of dirs.entries()) {\n let path = `/` + dirs.slice(0, idx + 1).join('/')\n if (alreadyAdded.has(path)) {\n continue\n }\n\n paths.push([path, RouterView])\n alreadyAdded.add(path)\n }\n\n return [...paths, entry]\n })\n\n // 4. Sort the routes alphabetically and by length\n files.sort((a, b) => a[0].localeCompare(b[0]))\n\n // 5. Create the nested routes\n let routes = []\n let routesByPath = {}\n\n for (let [path, component] of files) {\n let prefix = path.split('/').slice(0, -1).join('/')\n let parent = routesByPath[prefix]?.children ?? routes\n let route = {\n path,\n component: component,\n children: [],\n meta: {\n name: titleCase(path.match(/[^/]+$/)?.[0] ?? 'Home'),\n isRoot: parent === routes,\n },\n }\n\n parent.push((routesByPath[path] = route))\n }\n\n return routes\n}\n\nexport default createRouter({\n history: createWebHistory(),\n routes: buildRoutes(),\n})\n" }, { "path": "playgrounds/vue/src/styles.css", "content": "@import 'tailwindcss';\n@plugin '@tailwindcss/forms';\n@plugin '@tailwindcss/typography';\n@plugin '@headlessui/tailwindcss';\n\n/*\n The default border color has changed to `currentcolor` in Tailwind CSS v4,\n so we've added these compatibility styles to make sure everything still\n looks the same as it did with Tailwind CSS v3.\n\n If we ever want to remove these styles, we need to add an explicit border\n color utility to any element that depends on these defaults.\n*/\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n border-color: var(--color-gray-200, currentcolor);\n }\n}\n" }, { "path": "playgrounds/vue/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"ESNext\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"types\": [\"vite/client\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": false,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"incremental\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"downlevelIteration\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\"\n },\n \"include\": [\"**/*.ts\", \"**/*.tsx\", \"**/*.vue\"],\n \"exclude\": [\"node_modules\"]\n}\n" }, { "path": "playgrounds/vue/vercel.json", "content": "{\n \"rewrites\": [{ \"source\": \"/(.*)\", \"destination\": \"/index.html\" }]\n}\n" }, { "path": "playgrounds/vue/vite.config.js", "content": "import vue from '@vitejs/plugin-vue'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n server: { port: 3000 },\n plugins: [vue()],\n})\n" }, { "path": "scripts/build.sh", "content": "#!/usr/bin/env bash\nset -e\n\nSCRIPT_DIR=$(cd ${0%/*} && pwd -P)\n\n# Make Next.js barrel file optimizations happy. Using `@swc-node/reigster` because we need to handle\n# the TypeScript files.\n# TODO: make this script run automatically.\n# node -r @swc-node/register \"${SCRIPT_DIR}/make-nextjs-happy.js\"\n\n# Known variables\nSRC='./src'\nDST='./dist'\nname=\"headlessui\"\ninput=\"./${SRC}/index.ts\"\n\n# Find executables\nresolver=\"${SCRIPT_DIR}/resolve-files.js\"\nrewriteImports=\"${SCRIPT_DIR}/rewrite-imports.js\"\n\n# Setup shared options for esbuild\nsharedOptions=()\nsharedOptions+=(\"--platform=browser\")\nsharedOptions+=(\"--target=es2019\")\n\n# Generate actual builds\n# ESM\nresolverOptions=()\nresolverOptions+=($SRC)\nresolverOptions+=('/**/*.{ts,tsx}')\nresolverOptions+=('--ignore=.test.,__mocks__')\nINPUT_FILES=$($resolver ${resolverOptions[@]})\n\nNODE_ENV=production npx esbuild $INPUT_FILES --format=esm --outdir=$DST --outbase=$SRC --minify --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER=\"false\" --define:__DEV__=\"false\" ${sharedOptions[@]} &\nNODE_ENV=production npx esbuild $input --format=esm --outfile=$DST/$name.esm.js --outbase=$SRC --minify --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER=\"false\" --define:__DEV__=\"false\" ${sharedOptions[@]} &\n\n# Common JS\nNODE_ENV=production npx esbuild $input --format=cjs --outfile=$DST/$name.prod.cjs --minify --bundle --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER=\"false\" --define:__DEV__=\"false\" ${sharedOptions[@]} $@ &\nNODE_ENV=development npx esbuild $input --format=cjs --outfile=$DST/$name.dev.cjs --bundle --pure:React.createElement --define:process.env.TEST_BYPASS_TRACKED_POINTER=\"false\" --define:__DEV__=\"true\" ${sharedOptions[@]} $@ &\n\n# Generate ESM types\ntsc --emitDeclarationOnly --outDir $DST &\n\nwait\n\n# Generate CJS types\n# This is a bit of a hack, but it works because the same output works for both\ncp $DST/index.d.ts $DST/index.d.cts\n\n# Copy build files over\ncp -rf ./build/* $DST/\n\n# Wait for all the scripts to finish\nwait\n\n# Rewrite ESM imports 😤\n$rewriteImports \"$DST\" '/**/*.js'\n$rewriteImports \"$DST\" '/**/*.d.ts'\n\n# Remove test related files\nrm -rf `$resolver \"$DST\" '/**/*.{test,__mocks__,}.*'`\nrm -rf `$resolver \"$DST\" '/**/test-utils/*'`\n" }, { "path": "scripts/lint.sh", "content": "#!/usr/bin/env bash\nset -e\n\nROOT_DIR=\"$(git rev-parse --show-toplevel)/\"\nTARGET_DIR=\"$(pwd)\"\nRELATIVE_TARGET_DIR=\"${TARGET_DIR/$ROOT_DIR/}\"\n\n# INFO: This script is always run from the root of the repository. If we execute this script from a\n# package then the filters (in this case a path to $RELATIVE_TARGET_DIR) will be applied.\n\npushd $ROOT_DIR > /dev/null\n\nprettierArgs=()\n\nif ! [ -z \"$CI\" ]; then\n prettierArgs+=(\"--check\")\nelse\n prettierArgs+=(\"--write\")\nfi\n\n# Add default arguments\nprettierArgs+=('--ignore-unknown')\n\n# Passthrough arguments and flags\nprettierArgs+=($@)\n\n# Ensure that a path is passed, otherwise default to the current directory\nif [ -z \"$@\" ]; then\n prettierArgs+=(\"$RELATIVE_TARGET_DIR\")\nfi\n\n# Execute\nnpx prettier \"${prettierArgs[@]}\"\n\npopd > /dev/null\n" }, { "path": "scripts/make-nextjs-happy.js", "content": "import fs from 'fs'\nimport path from 'path'\nimport prettier from 'prettier'\nimport * as HUI from '../packages/@headlessui-react/src/index.ts'\n\nlet customRemaps = {\n tab: 'tabs',\n radio: 'radio-group',\n data: 'data-interactive',\n focus: 'focus-trap',\n}\n\nlet components = Object.keys(HUI)\n\nasync function run() {\n for (let component of components) {\n let name = component.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n let module = name.split('-')[0]\n module = customRemaps[module] ?? module\n\n let filePath = path.resolve(\n __dirname,\n '..',\n 'packages',\n '@headlessui-react',\n 'src',\n 'components',\n name,\n `${name}.tsx`\n )\n\n // Main module path already exists\n if (!fs.existsSync(filePath)) {\n fs.mkdirSync(path.dirname(filePath), { recursive: true })\n fs.writeFileSync(filePath, await template(component, module))\n }\n }\n}\n\nasync function template(name, module) {\n return await prettier.format(\n [\n '// Next.js barrel file improvements (GENERATED FILE)',\n `export type * from '../${module}/${module}';`,\n `export { ${name} } from '../${module}/${module}';`,\n ].join('\\n'),\n { parser: 'typescript' }\n )\n}\n\nrun()\n" }, { "path": "scripts/package-path.js", "content": "// Given a version, figure out what the release notes are so that we can use this to pre-fill the\n// relase notes on a GitHub release for the current version.\n\nlet path = require('path')\nlet { execSync } = require('child_process')\n\nlet tag = process.argv[2] || execSync(`git describe --tags --abbrev=0`).toString().trim()\nlet pkgPath = path.resolve(\n __dirname,\n '..',\n 'packages',\n tag.slice(0, tag.indexOf('@', 1)).replace('/', '-')\n)\n\nconsole.log('./' + path.relative(process.cwd(), pkgPath))\n" }, { "path": "scripts/release-channel.js", "content": "let path = require('path')\nlet { execSync } = require('child_process')\n\n// Given a version, figure out what the release channel is so that we can publish to the correct\n// channel on npm.\n//\n// E.g.:\n//\n// 1.2.3 -> latest (default)\n// 0.0.0-insiders.ffaa88 -> insiders\n// 4.1.0-alpha.4 -> alpha\n\nlet tag = process.argv[2] || execSync(`git describe --tags --abbrev=0`).toString().trim()\nlet pkgPath = path.resolve(\n __dirname,\n '..',\n 'packages',\n tag.slice(0, tag.indexOf('@', 1)).replace('/', '-')\n)\n\nlet version = require(path.resolve(pkgPath, 'package.json')).version\n\nlet match = /\\d+\\.\\d+\\.\\d+-(.*)\\.\\d+/g.exec(version)\nif (match) {\n // We want to release alpha to the next channel because it will be the next version\n if (match[1] === 'alpha') match[1] = 'next'\n console.log(match[1])\n} else {\n console.log('latest')\n}\n" }, { "path": "scripts/release-notes.js", "content": "// Given a version, figure out what the release notes are so that we can use this to pre-fill the\n// relase notes on a GitHub release for the current version.\n\nlet path = require('path')\nlet fs = require('fs')\nlet { execSync } = require('child_process')\n\nlet tag = process.argv[2] || execSync(`git describe --tags --abbrev=0`).toString().trim()\nlet pkgPath = path.resolve(\n __dirname,\n '..',\n 'packages',\n tag.slice(0, tag.indexOf('@', 1)).replace('/', '-')\n)\n\nlet version = require(path.resolve(pkgPath, 'package.json')).version\n\nlet changelog = fs.readFileSync(path.resolve(pkgPath, 'CHANGELOG.md'), 'utf8')\nlet match = new RegExp(\n `## \\\\[${version}\\\\] - (.*)\\\\n\\\\n([\\\\s\\\\S]*?)\\\\n(?:(?:##\\\\s)|(?:\\\\[))`,\n 'g'\n).exec(changelog)\n\nif (match) {\n let [, , notes] = match\n console.log(notes.trim())\n} else {\n console.log(`Placeholder release notes for version: v${version}`)\n}\n" }, { "path": "scripts/resolve-files.js", "content": "#!/usr/bin/env node\nlet fastGlob = require('fast-glob')\n\nlet parts = process.argv.slice(2)\nlet [args, flags] = parts.reduce(\n ([args, flags], part) => {\n if (part.startsWith('--')) {\n flags[part.slice(2, part.indexOf('='))] = part.slice(part.indexOf('=') + 1)\n } else {\n args.push(part)\n }\n return [args, flags]\n },\n [[], {}]\n)\n\nflags.ignore = flags.ignore ?? ''\nflags.ignore = flags.ignore.split(',').filter(Boolean)\n\nconsole.log(\n fastGlob\n .sync(args.join(''))\n .filter((file) => {\n for (let ignore of flags.ignore) {\n if (file.includes(ignore)) {\n return false\n }\n }\n return true\n })\n .join('\\n')\n)\n" }, { "path": "scripts/rewrite-imports.js", "content": "#!/usr/bin/env node\n\nlet fs = require('fs')\nlet path = require('path')\nlet fastGlob = require('fast-glob')\n\nconsole.time('Rewrote imports in')\nfastGlob.sync([process.argv.slice(2).join('')]).forEach((file) => {\n file = path.resolve(process.cwd(), file)\n let content = fs.readFileSync(file, 'utf8')\n let result = content.replace(/(import|export)([^\"']*?)([\"'])\\.(.*?)\\3/g, (full, a, b, _, d) => {\n // For idempotency reasons, if `.js` already exists, then we can skip this. This allows us to\n // run this script over and over again without adding .js files every time.\n if (d.endsWith('.js')) {\n return full\n }\n\n return `${a}${b}'.${d}.js'`\n })\n if (result !== content) {\n fs.writeFileSync(file, result, 'utf8')\n }\n})\nconsole.timeEnd('Rewrote imports in')\n" }, { "path": "scripts/test.sh", "content": "#!/usr/bin/env bash\nset -e\n\njestArgs=()\n\n# Add default arguments\njestArgs+=(\"--passWithNoTests\")\n\n# Add arguments based on environment variables\nif ! [ -z \"$CI\" ]; then\n jestArgs+=(\"--maxWorkers=4\")\n jestArgs+=(\"--ci\")\nfi\n\n# Passthrough arguments and flags\njestArgs+=($@)\n\n# Execute\nnpx jest \"${jestArgs[@]}\"\n\n" }, { "path": "scripts/watch.sh", "content": "#!/usr/bin/env bash\nset -e\n\n# Known variables\noutdir=\"./dist\"\nname=\"headlessui\"\ninput=\"./src/index.ts\"\n\n# Setup shared options for esbuild\nsharedOptions=()\nsharedOptions+=(\"--bundle\")\nsharedOptions+=(\"--platform=browser\")\nsharedOptions+=(\"--target=es2020\")\n\n\n# Generate actual builds\nNODE_ENV=development npx esbuild $input --format=esm --outfile=$outdir/$name.esm.js --sourcemap ${sharedOptions[@]} $@ --watch\n\n" } ]