fix(tailwindcss-react-aria-components): make not-* variants compose with native-overlapping states (#9974)
* fix(tailwindcss-react-aria-components): make not-* variants compose with native-overlapping states
Tailwind's `not-*` compound walker bails when a variant produces more than
one style rule per path. The dual-selector (array) shape used for variants
that overlap native CSS states (hover, focus, disabled, invalid, etc.)
emitted two sibling rules, so `not-disabled:`, `not-invalid:`, `not-focus:`,
`not-hover:`, and similar utilities silently generated no CSS.
Collapse both branches into a single `:is()` selector. `:where()` keeps
specificity at (0,1,0) so cascade behavior matches the previous output.
Hover additionally needs `@media (hover: hover)` to prevent sticky styles
on touch devices. Emitting it as a CSS-in-JS object (instead of a string
starting with `@media`) causes Tailwind to report the variant's compounds
as `StyleRules | AtRules`, which preserves `group-hover:` / `peer-hover:`
composition while still giving `not-hover:` the "1 style rule + 1 at-rule
per path" shape the walker requires.
Test coverage extended with `not-*`, `group-not-*`, `peer-not-*`,
`has-not-*`, `not-group-*`, `peer-hover:`, and `in-*` variants.
* format
* cleanup
---------
Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>