diff --git a/package-lock.json b/package-lock.json index 32c841a..1368bc4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "npm-run-all": "^4.1.5", "prettier": "^3.1.0", "prettier-plugin-organize-imports": "^3.2.4", - "prettier-plugin-tailwindcss": "^0.5.7", + "prettier-plugin-tailwindcss": "^0.6.11", "resize-observer-polyfill": "^1.5.1", "rimraf": "^3.0.2", "tslib": "^2.3.1", @@ -1900,6 +1900,7 @@ "version": "0.11.0", "license": "MIT", "optional": true, + "peer": true, "engines": { "node": ">=14" } @@ -2368,6 +2369,250 @@ "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" } }, + "node_modules/@tailwindcss/node": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.3.tgz", + "integrity": "sha512-H/6r6IPFJkCfBJZ2dKZiPJ7Ueb2wbL592+9bQEl2r73qbX6yGnmQVIfiUvDRB2YI0a3PWDrzUwkvQx1XW1bNkA==", + "license": "MIT", + "dependencies": { + "enhanced-resolve": "^5.18.1", + "jiti": "^2.4.2", + "lightningcss": "1.29.2", + "tailwindcss": "4.1.3" + } + }, + "node_modules/@tailwindcss/node/node_modules/jiti": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz", + "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==", + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, + "node_modules/@tailwindcss/node/node_modules/tailwindcss": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz", + "integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==", + "license": "MIT" + }, + "node_modules/@tailwindcss/oxide": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.3.tgz", + "integrity": "sha512-t16lpHCU7LBxDe/8dCj9ntyNpXaSTAgxWm1u2XQP5NiIu4KGSyrDJJRlK9hJ4U9yJxx0UKCVI67MJWFNll5mOQ==", + "license": "MIT", + "engines": { + "node": ">= 10" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.1.3", + "@tailwindcss/oxide-darwin-arm64": "4.1.3", + "@tailwindcss/oxide-darwin-x64": "4.1.3", + "@tailwindcss/oxide-freebsd-x64": "4.1.3", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.3", + "@tailwindcss/oxide-linux-arm64-gnu": "4.1.3", + "@tailwindcss/oxide-linux-arm64-musl": "4.1.3", + "@tailwindcss/oxide-linux-x64-gnu": "4.1.3", + "@tailwindcss/oxide-linux-x64-musl": "4.1.3", + "@tailwindcss/oxide-win32-arm64-msvc": "4.1.3", + "@tailwindcss/oxide-win32-x64-msvc": "4.1.3" + } + }, + "node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.3.tgz", + "integrity": "sha512-cxklKjtNLwFl3mDYw4XpEfBY+G8ssSg9ADL4Wm6//5woi3XGqlxFsnV5Zb6v07dxw1NvEX2uoqsxO/zWQsgR+g==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.3.tgz", + "integrity": "sha512-mqkf2tLR5VCrjBvuRDwzKNShRu99gCAVMkVsaEOFvv6cCjlEKXRecPu9DEnxp6STk5z+Vlbh1M5zY3nQCXMXhw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.3.tgz", + "integrity": "sha512-7sGraGaWzXvCLyxrc7d+CCpUN3fYnkkcso3rCzwUmo/LteAl2ZGCDlGvDD8Y/1D3ngxT8KgDj1DSwOnNewKhmg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.3.tgz", + "integrity": "sha512-E2+PbcbzIReaAYZe997wb9rId246yDkCwAakllAWSGqe6VTg9hHle67hfH6ExjpV2LSK/siRzBUs5wVff3RW9w==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.3.tgz", + "integrity": "sha512-GvfbJ8wjSSjbLFFE3UYz4Eh8i4L6GiEYqCtA8j2Zd2oXriPuom/Ah/64pg/szWycQpzRnbDiJozoxFU2oJZyfg==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.3.tgz", + "integrity": "sha512-35UkuCWQTeG9BHcBQXndDOrpsnt3Pj9NVIB4CgNiKmpG8GnCNXeMczkUpOoqcOhO6Cc/mM2W7kaQ/MTEENDDXg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.3.tgz", + "integrity": "sha512-dm18aQiML5QCj9DQo7wMbt1Z2tl3Giht54uVR87a84X8qRtuXxUqnKQkRDK5B4bCOmcZ580lF9YcoMkbDYTXHQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.3.tgz", + "integrity": "sha512-LMdTmGe/NPtGOaOfV2HuO7w07jI3cflPrVq5CXl+2O93DCewADK0uW1ORNAcfu2YxDUS035eY2W38TxrsqngxA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.3.tgz", + "integrity": "sha512-aalNWwIi54bbFEizwl1/XpmdDrOaCjRFQRgtbv9slWjmNPuJJTIKPHf5/XXDARc9CneW9FkSTqTbyvNecYAEGw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.3.tgz", + "integrity": "sha512-PEj7XR4OGTGoboTIAdXicKuWl4EQIjKHKuR+bFy9oYN7CFZo0eu74+70O4XuERX4yjqVZGAkCdglBODlgqcCXg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.3.tgz", + "integrity": "sha512-T8gfxECWDBENotpw3HR9SmNiHC9AOJdxs+woasRZ8Q/J4VHN0OMs7F+4yVNZ9EVN26Wv6mZbK0jv7eHYuLJLwA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@tailwindcss/postcss": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.3.tgz", + "integrity": "sha512-6s5nJODm98F++QT49qn8xJKHQRamhYHfMi3X7/ltxiSQ9dyRsaFSfFkfaMsanWzf+TMYQtbk8mt5f6cCVXJwfg==", + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "@tailwindcss/node": "4.1.3", + "@tailwindcss/oxide": "4.1.3", + "postcss": "^8.4.41", + "tailwindcss": "4.1.3" + } + }, + "node_modules/@tailwindcss/postcss/node_modules/tailwindcss": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz", + "integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==", + "license": "MIT" + }, "node_modules/@tailwindcss/typography": { "version": "0.5.10", "license": "MIT", @@ -3343,41 +3588,6 @@ "node": ">= 4.5.0" } }, - "node_modules/autoprefixer": { - "version": "10.4.16", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "browserslist": "^4.21.10", - "caniuse-lite": "^1.0.30001538", - "fraction.js": "^4.3.6", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/available-typed-arrays": { "version": "1.0.5", "dev": true, @@ -3569,6 +3779,7 @@ }, "node_modules/browserslist": { "version": "4.22.2", + "dev": true, "funding": [ { "type": "opencollective", @@ -4261,6 +4472,15 @@ "node": ">=6" } }, + "node_modules/detect-libc": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", + "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==", + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, "node_modules/detect-newline": { "version": "3.1.0", "dev": true, @@ -4346,6 +4566,7 @@ }, "node_modules/electron-to-chromium": { "version": "1.4.617", + "dev": true, "license": "ISC" }, "node_modules/emittery": { @@ -4376,6 +4597,19 @@ "once": "^1.4.0" } }, + "node_modules/enhanced-resolve": { + "version": "5.18.1", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz", + "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==", + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.2.0" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -4869,6 +5103,7 @@ }, "node_modules/escalade": { "version": "3.1.1", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -5186,17 +5421,6 @@ "node": ">= 6" } }, - "node_modules/fraction.js": { - "version": "4.3.7", - "license": "MIT", - "engines": { - "node": "*" - }, - "funding": { - "type": "patreon", - "url": "https://github.com/sponsors/rawify" - } - }, "node_modules/fragment-cache": { "version": "0.2.1", "dev": true, @@ -7108,6 +7332,234 @@ "node": ">=6" } }, + "node_modules/lightningcss": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz", + "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==", + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-darwin-arm64": "1.29.2", + "lightningcss-darwin-x64": "1.29.2", + "lightningcss-freebsd-x64": "1.29.2", + "lightningcss-linux-arm-gnueabihf": "1.29.2", + "lightningcss-linux-arm64-gnu": "1.29.2", + "lightningcss-linux-arm64-musl": "1.29.2", + "lightningcss-linux-x64-gnu": "1.29.2", + "lightningcss-linux-x64-musl": "1.29.2", + "lightningcss-win32-arm64-msvc": "1.29.2", + "lightningcss-win32-x64-msvc": "1.29.2" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz", + "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz", + "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz", + "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz", + "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==", + "cpu": [ + "arm" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz", + "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz", + "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz", + "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz", + "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz", + "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.29.2", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz", + "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/lilconfig": { "version": "2.0.5", "dev": true, @@ -7625,7 +8077,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", + "version": "3.3.11", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", + "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", "funding": [ { "type": "github", @@ -7827,6 +8281,7 @@ }, "node_modules/node-releases": { "version": "2.0.14", + "dev": true, "license": "MIT" }, "node_modules/nopt": { @@ -7869,13 +8324,6 @@ "node": ">=0.10.0" } }, - "node_modules/normalize-range": { - "version": "0.1.2", - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/npm-run-all": { "version": "4.1.5", "dev": true, @@ -8328,7 +8776,9 @@ } }, "node_modules/picocolors": { - "version": "1.0.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "license": "ISC" }, "node_modules/picomatch": { @@ -8470,9 +8920,9 @@ } }, "node_modules/postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", + "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", "funding": [ { "type": "opencollective", @@ -8487,10 +8937,11 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { - "nanoid": "^3.3.7", - "picocolors": "^1.0.0", - "source-map-js": "^1.2.0" + "nanoid": "^3.3.8", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" @@ -8641,7 +9092,9 @@ } }, "node_modules/prettier-plugin-tailwindcss": { - "version": "0.5.10", + "version": "0.6.11", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz", + "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==", "dev": true, "license": "MIT", "engines": { @@ -8652,14 +9105,17 @@ "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", + "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-import-sort": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", + "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", + "prettier-plugin-sort-imports": "*", "prettier-plugin-style-order": "*", "prettier-plugin-svelte": "*" }, @@ -8676,6 +9132,9 @@ "@trivago/prettier-plugin-sort-imports": { "optional": true }, + "@zackad/prettier-plugin-twig": { + "optional": true + }, "prettier-plugin-astro": { "optional": true }, @@ -8691,20 +9150,23 @@ "prettier-plugin-marko": { "optional": true }, + "prettier-plugin-multiline-arrays": { + "optional": true + }, "prettier-plugin-organize-attributes": { "optional": true }, "prettier-plugin-organize-imports": { "optional": true }, + "prettier-plugin-sort-imports": { + "optional": true + }, "prettier-plugin-style-order": { "optional": true }, "prettier-plugin-svelte": { "optional": true - }, - "prettier-plugin-twig-melody": { - "optional": true } } }, @@ -10130,9 +10592,10 @@ } }, "node_modules/source-map-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", - "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" } @@ -10624,6 +11087,15 @@ "node": ">=10" } }, + "node_modules/tapable": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", + "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/terminal-link": { "version": "2.1.1", "dev": true, @@ -11020,6 +11492,7 @@ }, "node_modules/update-browserslist-db": { "version": "1.0.13", + "dev": true, "funding": [ { "type": "opencollective", @@ -11763,8 +12236,8 @@ "@heroicons/react": "^1.0.6", "@popperjs/core": "^2.6.0", "@tailwindcss/forms": "^0.5.2", + "@tailwindcss/postcss": "^4.1.3", "@tailwindcss/typography": "^0.5.2", - "autoprefixer": "^10.4.7", "framer-motion": "^6.0.0", "next": "^14.0.4", "postcss": "^8.4.14", @@ -11772,12 +12245,18 @@ "react-dom": "^18.2.0", "react-flatpickr": "^3.10.9", "react-hot-toast": "2.3.0", - "tailwindcss": "^3.3.3" + "tailwindcss": "^4.1.3" }, "devDependencies": { "@floating-ui/react": "^0.24.8" } }, + "playgrounds/react/node_modules/tailwindcss": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz", + "integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==", + "license": "MIT" + }, "playgrounds/vue": { "name": "playground-vue", "version": "0.0.0", @@ -11785,10 +12264,10 @@ "@headlessui/vue": "*", "@heroicons/vue": "^1.0.6", "@tailwindcss/forms": "^0.5.2", + "@tailwindcss/postcss": "^4.1.3", "@tailwindcss/typography": "^0.5.2", - "autoprefixer": "^10.4.7", "postcss": "^8.4.14", - "tailwindcss": "^3.3.3", + "tailwindcss": "^4.1.3", "vue": "^3.4.27", "vue-flatpickr-component": "^9.0.5", "vue-router": "^4.3.2" @@ -11912,6 +12391,12 @@ "fsevents": "~2.3.2" } }, + "playgrounds/vue/node_modules/tailwindcss": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz", + "integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==", + "license": "MIT" + }, "playgrounds/vue/node_modules/vite": { "version": "5.2.12", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz", diff --git a/package.json b/package.json index a118f12..9d75aa7 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,24 @@ "plugins": [ "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss" + ], + "overrides": [ + { + "files": [ + "./playgrounds/react/**/*" + ], + "options": { + "tailwindStylesheet": "./playgrounds/react/pages/styles.css" + } + }, + { + "files": [ + "./playgrounds/vue/**/*" + ], + "options": { + "tailwindStylesheet": "./playgrounds/vue/src/styles.css" + } + } ] }, "devDependencies": { @@ -60,7 +78,7 @@ "npm-run-all": "^4.1.5", "prettier": "^3.1.0", "prettier-plugin-organize-imports": "^3.2.4", - "prettier-plugin-tailwindcss": "^0.5.7", + "prettier-plugin-tailwindcss": "^0.6.11", "resize-observer-polyfill": "^1.5.1", "rimraf": "^3.0.2", "tslib": "^2.3.1", diff --git a/playgrounds/react/components/button.tsx b/playgrounds/react/components/button.tsx index fa9cdb5..8e7a30d 100644 --- a/playgrounds/react/components/button.tsx +++ b/playgrounds/react/components/button.tsx @@ -12,7 +12,7 @@ export let Button = forwardRef< ref={ref} type="button" className={classNames( - 'ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100 focus:outline-none', + 'focus:outline-hidden ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 flex items-center rounded-md border border-gray-300 bg-white px-2 py-1 ring-gray-500 ring-offset-gray-100', className )} {...props} diff --git a/playgrounds/react/package.json b/playgrounds/react/package.json index 055854b..b824ac3 100644 --- a/playgrounds/react/package.json +++ b/playgrounds/react/package.json @@ -20,8 +20,8 @@ "@heroicons/react": "^1.0.6", "@popperjs/core": "^2.6.0", "@tailwindcss/forms": "^0.5.2", + "@tailwindcss/postcss": "^4.1.3", "@tailwindcss/typography": "^0.5.2", - "autoprefixer": "^10.4.7", "framer-motion": "^6.0.0", "next": "^14.0.4", "postcss": "^8.4.14", @@ -29,7 +29,7 @@ "react-dom": "^18.2.0", "react-flatpickr": "^3.10.9", "react-hot-toast": "2.3.0", - "tailwindcss": "^3.3.3" + "tailwindcss": "^4.1.3" }, "devDependencies": { "@floating-ui/react": "^0.24.8" diff --git a/playgrounds/react/pages/_app.tsx b/playgrounds/react/pages/_app.tsx index bf8029d..6b4f34e 100644 --- a/playgrounds/react/pages/_app.tsx +++ b/playgrounds/react/pages/_app.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' import { useEffect, useState } from 'react' import { useRouter } from 'next/router' -import 'tailwindcss/tailwind.css' +import './styles.css' function disposables() { let disposables: Function[] = [] @@ -122,7 +122,7 @@ function KeyCaster() { if (keys.length <= 0) return null return ( -
+
{keys.slice().reverse().join(' ')}
) @@ -137,7 +137,7 @@ function MyApp({ Component, pageProps }) { return ( <>
-
+
diff --git a/playgrounds/react/pages/combinations/form.tsx b/playgrounds/react/pages/combinations/form.tsx index 9013fea..8d951e4 100644 --- a/playgrounds/react/pages/combinations/form.tsx +++ b/playgrounds/react/pages/combinations/form.tsx @@ -46,7 +46,7 @@ export default function App() { name="notifications" className={({ checked }) => classNames( - 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', + 'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', checked ? 'bg-blue-600' : 'bg-gray-200' ) } @@ -72,7 +72,7 @@ export default function App() { value="apple" className={({ checked }) => classNames( - 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', + 'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', checked ? 'bg-blue-600' : 'bg-gray-200' ) } @@ -95,7 +95,7 @@ export default function App() { value="banana" className={({ checked }) => classNames( - 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', + 'focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', checked ? 'bg-blue-600' : 'bg-gray-200' ) } @@ -122,7 +122,7 @@ export default function App() { value={size} className={({ active }) => classNames( - 'relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', + 'focus:outline-hidden relative flex w-20 border px-2 py-4 first:rounded-l-md last:rounded-r-md focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', active ? 'z-10 border-blue-200 bg-blue-50' : 'border-gray-200' ) } @@ -191,14 +191,14 @@ export default function App() {
- + {people.map((person) => ( { return classNames( - 'relative cursor-default select-none py-2 pl-3 pr-9 ', + 'relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-blue-600 text-white' : 'text-gray-900' ) }} @@ -260,7 +260,7 @@ export default function App() {
setQuery(e.target.value)} - className="w-full rounded rounded-md border-gray-300 bg-clip-padding px-3 py-1 shadow-sm focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" + className="shadow-xs focus:outline-hidden w-full rounded-md rounded-sm border-gray-300 bg-clip-padding px-3 py-1 focus:border-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" placeholder="Search users..." />
- + {locations .filter((location) => location.toLowerCase().includes(query.toLowerCase()) @@ -281,7 +281,7 @@ export default function App() { value={location} className={({ active }) => { return classNames( - 'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9 ', + 'relative flex cursor-default select-none space-x-4 py-2 pl-3 pr-9', active ? 'bg-blue-600 text-white' : 'text-gray-900' ) }} @@ -335,13 +335,13 @@ export default function App() {
- diff --git a/playgrounds/react/pages/combobox/combobox-countries.tsx b/playgrounds/react/pages/combobox/combobox-countries.tsx index 02a7a0b..4afa861 100644 --- a/playgrounds/react/pages/combobox/combobox-countries.tsx +++ b/playgrounds/react/pages/combobox/combobox-countries.tsx @@ -48,10 +48,10 @@ export default function Home() {
- + setQuery(e.target.value)} - className="border-none px-3 py-1 outline-none" + className="outline-hidden border-none px-3 py-1" /> @@ -75,7 +75,7 @@ export default function Home() { {countries.map((country) => ( { return classNames( - 'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none', + 'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-indigo-600 text-white' : 'text-gray-900' ) }} diff --git a/playgrounds/react/pages/combobox/combobox-open-on-focus.tsx b/playgrounds/react/pages/combobox/combobox-open-on-focus.tsx index b68d673..8e471d8 100644 --- a/playgrounds/react/pages/combobox/combobox-open-on-focus.tsx +++ b/playgrounds/react/pages/combobox/combobox-open-on-focus.tsx @@ -62,10 +62,10 @@ export default function Home() {
- + setQuery(e.target.value)} - className="border-none px-3 py-1 outline-none" + className="outline-hidden border-none px-3 py-1" /> @@ -87,14 +87,14 @@ export default function Home() {
- + {people.map((name) => ( { return classNames( - 'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none', + 'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-indigo-600 text-white' : 'text-gray-900' ) }} diff --git a/playgrounds/react/pages/combobox/combobox-virtual-with-empty-states.tsx b/playgrounds/react/pages/combobox/combobox-virtual-with-empty-states.tsx index 3dc97f1..7c9ee95 100644 --- a/playgrounds/react/pages/combobox/combobox-virtual-with-empty-states.tsx +++ b/playgrounds/react/pages/combobox/combobox-virtual-with-empty-states.tsx @@ -83,11 +83,11 @@ export default function Home() {
- + setQuery(e.target.value)} displayValue={(option: Option | null) => option?.name ?? ''} - className="border-none px-3 py-1 outline-none" + className="outline-hidden border-none px-3 py-1" /> @@ -116,7 +116,7 @@ export default function Home() { static={filtered.length === 0} ref={optionsRef} className={classNames( - 'shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5', + 'shadow-2xs focus:outline-hidden max-h-60 rounded-md py-1 text-base leading-6 sm:text-sm sm:leading-5', filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto' )} > @@ -130,7 +130,7 @@ export default function Home() { disabled // Note: Do NOT use `null` for the `value` value={option ?? emptyOption.current} - className="relative w-full cursor-default select-none px-3 py-2 text-center focus:outline-none" + className="focus:outline-hidden relative w-full cursor-default select-none px-3 py-2 text-center" >
@@ -155,7 +155,7 @@ export default function Home() { diff --git a/playgrounds/react/pages/dialog/dialog-built-in-transition.tsx b/playgrounds/react/pages/dialog/dialog-built-in-transition.tsx index d489b14..97f6234 100644 --- a/playgrounds/react/pages/dialog/dialog-built-in-transition.tsx +++ b/playgrounds/react/pages/dialog/dialog-built-in-transition.tsx @@ -35,16 +35,16 @@ export default function Home() { setIsOpen(false)} - className="relative z-50 duration-500 data-[closed]:opacity-0" + className="data-closed:opacity-0 relative z-50 duration-500" >

Dialog

diff --git a/playgrounds/react/pages/dialog/dialog-focus-issue.tsx b/playgrounds/react/pages/dialog/dialog-focus-issue.tsx index 5c14478..9d8732a 100644 --- a/playgrounds/react/pages/dialog/dialog-focus-issue.tsx +++ b/playgrounds/react/pages/dialog/dialog-focus-issue.tsx @@ -5,10 +5,10 @@ import { Button } from '../../components/button' function Modal(props) { return (

-
+
- + diff --git a/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx b/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx index 6ab3f4a..fd3a3e8 100644 --- a/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx +++ b/playgrounds/react/pages/dialog/dialog-scroll-issue.tsx @@ -15,7 +15,7 @@ function MyDialog({ open, close }) { leaveTo="opacity-0" >
- +

Gray area should be scrollable

diff --git a/playgrounds/react/pages/dialog/dialog-with-shadow-children.tsx b/playgrounds/react/pages/dialog/dialog-with-shadow-children.tsx index a49581f..f9e2714 100644 --- a/playgrounds/react/pages/dialog/dialog-with-shadow-children.tsx +++ b/playgrounds/react/pages/dialog/dialog-with-shadow-children.tsx @@ -13,7 +13,7 @@ if (typeof document !== 'undefined') { connectedCallback() { let button = document.createElement('button') - button.textContent = 'Inside shadow root (closed)' + button.textContent = 'Inside shadow-sm root (closed)' this.shadow.appendChild(button) } } @@ -33,7 +33,7 @@ function ShadowChildren({ id }: { id: string }) { let button = document.createElement('button') button.id = id button.style.display = 'block' - button.textContent = 'Inside shadow root (open)' + button.textContent = 'Inside shadow-sm root (open)' let mce = document.createElement('my-custom-element') @@ -54,7 +54,7 @@ export default function App() {

@@ -89,7 +89,7 @@ export default function Home() {
-
+
{/* Heroicon name: exclamation */} setIsOpen(false)} - className="focus:shadow-outline-red inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm" + className="focus:shadow-outline-red shadow-xs focus:outline-hidden inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm" > Deactivate diff --git a/playgrounds/react/pages/dialog/sibling-dialogs.tsx b/playgrounds/react/pages/dialog/sibling-dialogs.tsx index 772a1fd..979577f 100644 --- a/playgrounds/react/pages/dialog/sibling-dialogs.tsx +++ b/playgrounds/react/pages/dialog/sibling-dialogs.tsx @@ -30,23 +30,23 @@ export default function App() { Item A Item B setOpenDelete(true)} > Delete @@ -125,7 +125,7 @@ function MyDialog({ level = 0, open, onClose, children }: any) { style={{ transform: `translate(calc(50px * ${level}), calc(50px * ${level}))`, }} - className="relative z-10 flex w-96 -translate-y-24 flex-col rounded bg-white p-4 shadow-xl" + className="relative z-10 flex w-96 -translate-y-24 flex-col rounded-sm bg-white p-4 shadow-xl" > {children} diff --git a/playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx b/playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx index de62f69..e16f16e 100644 --- a/playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx +++ b/playgrounds/react/pages/listbox/listbox-with-pure-tailwind.tsx @@ -30,7 +30,7 @@ export default function Home() {
- + {active} @@ -54,18 +54,18 @@ export default function Home() { {people.map((name) => ( - + {name} - +
- - + + {activePersons.length === 0 ? ( Empty @@ -53,7 +53,7 @@ function MultiPeopleList() { activePersons.map((person) => ( {person.name}
- + {people.map((person) => ( { return classNames( - 'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none', + 'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-indigo-600 text-white' : 'text-gray-900' ) }} @@ -144,7 +144,7 @@ function MultiPeopleList() {
- diff --git a/playgrounds/react/pages/listbox/multiple-elements.tsx b/playgrounds/react/pages/listbox/multiple-elements.tsx index 6792453..392afe4 100644 --- a/playgrounds/react/pages/listbox/multiple-elements.tsx +++ b/playgrounds/react/pages/listbox/multiple-elements.tsx @@ -24,7 +24,7 @@ export default function Home() { -
+
- - + + {active}
- + {people.map((name) => ( { return classNames( - 'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none', + 'focus:outline-hidden relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-indigo-600 text-white' : 'text-gray-900' ) }} diff --git a/playgrounds/react/pages/menu/menu-with-floating-ui.tsx b/playgrounds/react/pages/menu/menu-with-floating-ui.tsx index b0650ac..d319f4a 100644 --- a/playgrounds/react/pages/menu/menu-with-floating-ui.tsx +++ b/playgrounds/react/pages/menu/menu-with-floating-ui.tsx @@ -25,7 +25,7 @@ export default function Home() {
- + Options @@ -40,7 +40,7 @@ export default function Home() { diff --git a/playgrounds/react/pages/menu/menu-with-framer-motion.tsx b/playgrounds/react/pages/menu/menu-with-framer-motion.tsx index a7ebd6a..3678bae 100644 --- a/playgrounds/react/pages/menu/menu-with-framer-motion.tsx +++ b/playgrounds/react/pages/menu/menu-with-framer-motion.tsx @@ -13,7 +13,7 @@ export default function Home() { {({ open }) => ( <> - + Options @@ -34,7 +34,7 @@ export default function Home() { initial={{ opacity: 0, y: 0 }} animate={{ opacity: 1, y: '0.5rem' }} exit={{ opacity: 0, y: 0 }} - className="absolute right-0 w-56 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white opacity-0 shadow-lg outline-none" + className="outline-hidden absolute right-0 w-56 divide-y divide-gray-100 rounded-md border border-gray-200 bg-white opacity-0 shadow-lg" >

Signed in as

diff --git a/playgrounds/react/pages/menu/menu-with-popper.tsx b/playgrounds/react/pages/menu/menu-with-popper.tsx index 393e42f..3a9f5ee 100644 --- a/playgrounds/react/pages/menu/menu-with-popper.tsx +++ b/playgrounds/react/pages/menu/menu-with-popper.tsx @@ -25,7 +25,7 @@ export default function Home() {
- + Options @@ -40,7 +40,7 @@ export default function Home() {
diff --git a/playgrounds/react/pages/menu/menu-with-transition-and-popper.tsx b/playgrounds/react/pages/menu/menu-with-transition-and-popper.tsx index c37d865..e9697fe 100644 --- a/playgrounds/react/pages/menu/menu-with-transition-and-popper.tsx +++ b/playgrounds/react/pages/menu/menu-with-transition-and-popper.tsx @@ -23,7 +23,7 @@ export default function Home() {
- + Options @@ -45,7 +45,7 @@ export default function Home() { leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0" > - +

Signed in as

diff --git a/playgrounds/react/pages/menu/menu-with-transition.tsx b/playgrounds/react/pages/menu/menu-with-transition.tsx index eadd321..60b4d0b 100644 --- a/playgrounds/react/pages/menu/menu-with-transition.tsx +++ b/playgrounds/react/pages/menu/menu-with-transition.tsx @@ -15,7 +15,7 @@ export default function Home() {

- + Options @@ -42,7 +42,7 @@ export default function Home() { >

Signed in as

diff --git a/playgrounds/react/pages/menu/menu.tsx b/playgrounds/react/pages/menu/menu.tsx index 2607e1e..627da06 100644 --- a/playgrounds/react/pages/menu/menu.tsx +++ b/playgrounds/react/pages/menu/menu.tsx @@ -8,7 +8,7 @@ export default function Home() {
- + Options - +

Signed in as

diff --git a/playgrounds/react/pages/menu/multiple-elements.tsx b/playgrounds/react/pages/menu/multiple-elements.tsx index 86ea0c6..3b370e1 100644 --- a/playgrounds/react/pages/menu/multiple-elements.tsx +++ b/playgrounds/react/pages/menu/multiple-elements.tsx @@ -8,7 +8,7 @@ export default function Home() {

-
+
- + Options @@ -46,7 +46,7 @@ function Dropdown() { - +

Signed in as

tom@example.com

diff --git a/playgrounds/react/pages/popover/popover.tsx b/playgrounds/react/pages/popover/popover.tsx index 60fc80d..d6687b1 100644 --- a/playgrounds/react/pages/popover/popover.tsx +++ b/playgrounds/react/pages/popover/popover.tsx @@ -5,7 +5,7 @@ let Button = forwardRef( (props: React.ComponentProps<'button'>, ref: React.MutableRefObject) => { return ( @@ -33,7 +33,7 @@ export default function Home() { - + Normal @@ -61,7 +61,7 @@ export default function Home() { {items.map((item) => ( @@ -74,7 +74,7 @@ export default function Home() { {items.map((item) => ( diff --git a/playgrounds/react/pages/radio-group/radio-group.tsx b/playgrounds/react/pages/radio-group/radio-group.tsx index 24c45da..d8f6833 100644 --- a/playgrounds/react/pages/radio-group/radio-group.tsx +++ b/playgrounds/react/pages/radio-group/radio-group.tsx @@ -44,7 +44,7 @@ export default function Home() { access.length - 1 === i && 'rounded-bl-md rounded-br-md', // Shared - 'relative flex border p-4 focus:outline-none', + 'focus:outline-hidden relative flex border p-4', active ? 'z-10 border-indigo-200 bg-indigo-50' : 'border-gray-200' ) } diff --git a/playgrounds/react/pages/styles.css b/playgrounds/react/pages/styles.css new file mode 100644 index 0000000..dd58590 --- /dev/null +++ b/playgrounds/react/pages/styles.css @@ -0,0 +1,22 @@ +@import 'tailwindcss'; +@plugin '@tailwindcss/forms'; +@plugin '@tailwindcss/typography'; +@plugin '@headlessui/tailwindcss'; + +/* + The default border color has changed to `currentcolor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentcolor); + } +} diff --git a/playgrounds/react/pages/suspense/portal.tsx b/playgrounds/react/pages/suspense/portal.tsx index f82b3ef..9cce1ab 100644 --- a/playgrounds/react/pages/suspense/portal.tsx +++ b/playgrounds/react/pages/suspense/portal.tsx @@ -19,7 +19,7 @@ export default function Index() {

Suspense + Portals

-
+
Instant
@@ -29,7 +29,7 @@ export default function Index() {
-
+
Instant
@@ -44,7 +44,7 @@ export default function Index() { {(env) => (
-
+
Suspense
@@ -54,7 +54,7 @@ export default function Index() {
-
+
Suspense
diff --git a/playgrounds/react/pages/switch/switch-with-pure-tailwind.tsx b/playgrounds/react/pages/switch/switch-with-pure-tailwind.tsx index 8646a29..b60e801 100644 --- a/playgrounds/react/pages/switch/switch-with-pure-tailwind.tsx +++ b/playgrounds/react/pages/switch/switch-with-pure-tailwind.tsx @@ -17,7 +17,7 @@ export default function Home() { onChange={setState} className={({ checked }) => classNames( - 'focus:shadow-outline relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none', + 'focus:shadow-outline focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out', checked ? 'bg-indigo-600 hover:bg-indigo-800' : 'bg-gray-200 hover:bg-gray-400' ) } diff --git a/playgrounds/react/pages/tabs/tabs-with-pure-tailwind.tsx b/playgrounds/react/pages/tabs/tabs-with-pure-tailwind.tsx index 4933da5..846195a 100644 --- a/playgrounds/react/pages/tabs/tabs-with-pure-tailwind.tsx +++ b/playgrounds/react/pages/tabs/tabs-with-pure-tailwind.tsx @@ -24,7 +24,7 @@ export default function Home() { onChange={setManual} className={({ checked }) => classNames( - 'focus:shadow-outline relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none', + 'focus:shadow-outline focus:outline-hidden relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out', checked ? 'bg-indigo-600' : 'bg-gray-200' ) } @@ -46,7 +46,7 @@ export default function Home() { manual={manual} defaultIndex={2} > - + {tabs.map((tab, tabIdx) => ( {tabs.map((tab) => ( - + {tab.content} ))} diff --git a/playgrounds/react/pages/transitions/appear.tsx b/playgrounds/react/pages/transitions/appear.tsx index 8eaaa70..90dbfba 100644 --- a/playgrounds/react/pages/transitions/appear.tsx +++ b/playgrounds/react/pages/transitions/appear.tsx @@ -14,7 +14,7 @@ export default function AppearExample() {
-
+
Initial render
{lazy && ( -
+
Not on the initial render
Using data attributes diff --git a/playgrounds/react/pages/transitions/component-examples/dropdown.tsx b/playgrounds/react/pages/transitions/component-examples/dropdown.tsx index 1f16f74..63e00c4 100644 --- a/playgrounds/react/pages/transitions/component-examples/dropdown.tsx +++ b/playgrounds/react/pages/transitions/component-examples/dropdown.tsx @@ -22,10 +22,10 @@ function Dropdown() { return (
- + @@ -97,7 +97,7 @@ export default function Home() { >
-
+
{/* Heroicon name: exclamation */} Email address -
+
- + - + diff --git a/playgrounds/react/pages/transitions/component-examples/nested/hidden.tsx b/playgrounds/react/pages/transitions/component-examples/nested/hidden.tsx index e32e5dc..e934ad2 100644 --- a/playgrounds/react/pages/transitions/component-examples/nested/hidden.tsx +++ b/playgrounds/react/pages/transitions/component-examples/nested/hidden.tsx @@ -8,11 +8,11 @@ export default function Home() { <>
- + @@ -51,7 +51,7 @@ function Box({ children }: { children?: ReactNode }) { leaveFrom="transform translate-x-0" leaveTo="transform translate-x-full" > -
+
This is a box {children}
diff --git a/playgrounds/react/pages/transitions/component-examples/nested/unmount.tsx b/playgrounds/react/pages/transitions/component-examples/nested/unmount.tsx index 51e32de..403742b 100644 --- a/playgrounds/react/pages/transitions/component-examples/nested/unmount.tsx +++ b/playgrounds/react/pages/transitions/component-examples/nested/unmount.tsx @@ -8,11 +8,11 @@ export default function Home() { <>
- + @@ -52,7 +52,7 @@ function Box({ children }: { children?: ReactNode }) { leaveFrom="transform translate-x-0" leaveTo="transform translate-x-full" > -
+
This is a box {children}
diff --git a/playgrounds/react/pages/transitions/component-examples/peek-a-boo.tsx b/playgrounds/react/pages/transitions/component-examples/peek-a-boo.tsx index 40c0ef3..7c2ac88 100644 --- a/playgrounds/react/pages/transitions/component-examples/peek-a-boo.tsx +++ b/playgrounds/react/pages/transitions/component-examples/peek-a-boo.tsx @@ -8,11 +8,11 @@ export default function Home() { <>
- + @@ -33,7 +33,7 @@ export default function Home() { leaveFrom="transform bg-blue-500" leaveTo="transform bg-red-500" entered="bg-blue-500" - className="h-64 rounded-md p-4 shadow" + className="h-64 rounded-md p-4 shadow-sm" > Contents to show and hide diff --git a/playgrounds/react/pages/transitions/full-page-examples/full-page-transition.tsx b/playgrounds/react/pages/transitions/full-page-examples/full-page-transition.tsx index 1095cdc..41bfbf7 100644 --- a/playgrounds/react/pages/transitions/full-page-examples/full-page-transition.tsx +++ b/playgrounds/react/pages/transitions/full-page-examples/full-page-transition.tsx @@ -35,11 +35,11 @@ enum Direction { let pages = ['Dashboard', 'Team', 'Projects', 'Calendar', 'Reports'] let colors = [ - 'bg-gradient-to-r from-teal-400 to-blue-400', - 'bg-gradient-to-r from-blue-400 to-orange-400', - 'bg-gradient-to-r from-orange-400 to-purple-400', - 'bg-gradient-to-r from-purple-400 to-green-400', - 'bg-gradient-to-r from-green-400 to-teal-400', + 'bg-linear-to-r from-teal-400 to-blue-400', + 'bg-linear-to-r from-blue-400 to-orange-400', + 'bg-linear-to-r from-orange-400 to-purple-400', + 'bg-linear-to-r from-purple-400 to-green-400', + 'bg-linear-to-r from-green-400 to-teal-400', ] function FullPageTransition() { @@ -75,7 +75,7 @@ function FullPageTransition() {
-
+
setActivePage(i)} className={classNames( - 'rounded-md px-3 py-2 text-sm font-medium focus:bg-gray-700 focus:text-white focus:outline-none', + 'focus:outline-hidden rounded-md px-3 py-2 text-sm font-medium focus:bg-gray-700 focus:text-white', i === activePage ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white' @@ -104,7 +104,7 @@ function FullPageTransition() {
diff --git a/playgrounds/react/pages/transitions/react-hot-toast.tsx b/playgrounds/react/pages/transitions/react-hot-toast.tsx index 7676cbe..dd6190d 100644 --- a/playgrounds/react/pages/transitions/react-hot-toast.tsx +++ b/playgrounds/react/pages/transitions/react-hot-toast.tsx @@ -9,7 +9,7 @@ const TailwindToaster = () => { appear as="div" show={t.visible} - className="flex transform rounded bg-white p-4 shadow-lg" + className="flex transform rounded-sm bg-white p-4 shadow-lg" enter="transition-all duration-500" enterFrom="opacity-0 scale-50" enterTo="opacity-100 scale-100" @@ -29,7 +29,7 @@ export default function App() { return (