Sibling Dimming

1import type { ComponentPropsWithoutRef, CSSProperties } from "react";
2import { feel } from "@/lib/motion";
3import { cn } from "@/lib/utils";
4 
5// Container: when it HAS a hovered item, every non-hovered item dims to 50%.
6// `:not(:hover)` keeps the hovered item untouched, so there's no self-hover
7// specificity race. Pair with SiblingDimmingItem (adds the `.dim-item` marker).
8export function SiblingDimming({ className, ...props }: ComponentPropsWithoutRef<"div">) {
9  return (
10    <div
11      className={cn("[&:has(.dim-item:hover)_.dim-item:not(:hover)]:opacity-50", className)}
12      {...props}
13    />
14  );
15}
16 
17const dimTransition: CSSProperties = {
18  transitionDuration: `${feel.duration.fast}s`,
19  transitionTimingFunction: `cubic-bezier(${feel.ease.join(",")})`,
20};
21 
22export function SiblingDimmingItem({
23  className,
24  style,
25  ...props
26}: ComponentPropsWithoutRef<"div">) {
27  return (
28    <div
29      className={cn("dim-item transition-opacity motion-reduce:transition-none", className)}
30      style={{ ...dimTransition, ...style }}
31      {...props}
32    />
33  );
34}