{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sibling-dimming",
  "title": "Sibling Dimming",
  "description": "Sibling dimming — hovering one item dims every non-hovered sibling to 50%. Pure CSS.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://motion.asmitsah.dev/r/provider.json"
  ],
  "files": [
    {
      "path": "components/motion/sibling-dimming.tsx",
      "content": "import type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\nimport { feel } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\n// Container: when it HAS a hovered item, every non-hovered item dims to 50%.\n// `:not(:hover)` keeps the hovered item untouched, so there's no self-hover\n// specificity race. Pair with SiblingDimmingItem (adds the `.dim-item` marker).\nexport function SiblingDimming({ className, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      className={cn(\"[&:has(.dim-item:hover)_.dim-item:not(:hover)]:opacity-50\", className)}\n      {...props}\n    />\n  );\n}\n\nconst dimTransition: CSSProperties = {\n  transitionDuration: `${feel.duration.fast}s`,\n  transitionTimingFunction: `cubic-bezier(${feel.ease.join(\",\")})`,\n};\n\nexport function SiblingDimmingItem({\n  className,\n  style,\n  ...props\n}: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div\n      className={cn(\"dim-item transition-opacity motion-reduce:transition-none\", className)}\n      style={{ ...dimTransition, ...style }}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/motion/sibling-dimming.tsx"
    }
  ],
  "type": "registry:component"
}